rzmk/learnhouse
1
0
Fork 0
mirror of https://github.com/rzmk/learnhouse.git synced 2025-12-19 04:19: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

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

@ -364,8 +364,10 @@ export function MarkStatus(props: {
status="warning" status="warning"
/> />
</ToolTip> </ToolTip>
<NextActivityButton course={props.course} currentActivityId={props.activity.id} orgslug={props.orgslug} />
</div> </div>
) : ( ) : (
<div className="flex items-center space-x-2">
<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`} 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} onClick={!isLoading ? markActivityAsCompleteFront : undefined}
@ -384,11 +386,64 @@ export function MarkStatus(props: {
)}{' '} )}{' '}
{!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>} {!isMobile && <i className="not-italic text-xs font-bold">{isLoading ? 'Marking...' : 'Mark as complete'}</i>}
</div> </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: { function AssignmentTools(props: {
activity: any activity: any
activityid: string activityid: string