rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-18 20:09:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: add Next Activity button to activity component for improved navigation

Browse source
This commit is contained in:
swve 2025-04-18 17:47:54 +02:00
parent 39ab1a132e
commit 8c43f09a2f
1 changed files with 72 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

89
apps/web/app/orgs/[orgslug]/(withmenu)/course/[courseuuid]/activity/[activityid]/activity.tsx
View file

@ -364,31 +364,86 @@ export function MarkStatus(props: {
status="warning"
/>
</ToolTip>
<NextActivityButton course={props.course} currentActivityId={props.activity.id} orgslug={props.orgslug} />
</div>
) : (
<div
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
onClick={!isLoading ? markActivityAsCompleteFront : undefined}
>
{isLoading ? (
<div className="animate-spin">
<svg className="w-4 h-4" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
) : (
<i>
<Check size={17}></Check>
</i>
)}{' '}
{!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
<div className="flex items-center space-x-2">
<div
className={`${isLoading ? 'opacity-75 cursor-not-allowed' : ''} bg-gray-800 rounded-full px-5 drop-shadow-md flex items-center space-x-2 p-2.5 text-white hover:cursor-pointer transition delay-150 duration-300 ease-in-out`}
onClick={!isLoading ? markActivityAsCompleteFront : undefined}
>
{isLoading ? (
<div className="animate-spin">
<svg className="w-4 h-4" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
</div>
) : (
<i>
<Check size={17}></Check>
</i>
)}{' '}
{!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
</div>
<NextActivityButton course={props.course} currentActivityId={props.activity.id} orgslug={props.orgslug} />
</div>
)}
</>
)
}
function NextActivityButton({ course, currentActivityId, orgslug }: { course: any, currentActivityId: string, orgslug: string }) {
const router = useRouter();
const isMobile = useMediaQuery('(max-width: 768px)');
const findNextActivity = () => {
let allActivities: any[] = [];
let currentIndex = -1;
// Flatten all activities from all chapters
course.chapters.forEach((chapter: any) => {
chapter.activities.forEach((activity: any) => {
const cleanActivityUuid = activity.activity_uuid?.replace('activity_', '');
allActivities.push({
...activity,
cleanUuid: cleanActivityUuid,
chapterName: chapter.name
});
// Check if this is the current activity
if (activity.id === currentActivityId) {
currentIndex = allActivities.length - 1;
}
});
});
// Get next activity
return currentIndex < allActivities.length - 1 ? allActivities[currentIndex + 1] : null;
};
const nextActivity = findNextActivity();
if (!nextActivity) return null;
const navigateToActivity = () => {
const cleanCourseUuid = course.course_uuid?.replace('course_', '');
router.push(getUriWithOrg(orgslug, '') + `/course/${cleanCourseUuid}/activity/${nextActivity.cleanUuid}`);
};
return (
<ToolTip content={`Next: ${nextActivity.name}`} side="top">
<div
onClick={navigateToActivity}
className="bg-gray-300 rounded-full px-5 nice-shadow flex items-center space-x-2 p-2.5 text-gray-600 hover:cursor-pointer transition delay-150 duration-300 ease-in-out"
>
{!isMobile && <span className="text-xs font-bold">Next</span>}
<ChevronRight size={17} />
</div>
</ToolTip>
);
}
function AssignmentTools(props: {
activity: any
activityid: string