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 course completion indicator at the end of the course

Browse source
This commit is contained in:
swve 2025-04-18 18:08:20 +02:00
parent 8c43f09a2f
commit ed8783d0ef
5 changed files with 284 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,9 +29,10 @@ import { useMediaQuery } from 'usehooks-ts'
import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer' import PaidCourseActivityDisclaimer from '@components/Objects/Courses/CourseActions/PaidCourseActivityDisclaimer'
import { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus' import { useContributorStatus } from '../../../../../../../../hooks/useContributorStatus'
import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip' import ToolTip from '@components/Objects/StyledElements/Tooltip/Tooltip'
import ActivityNavigation from '@components/Dashboard/Pages/Activity/ActivityNavigation' import ActivityNavigation from '@components/Pages/Activity/ActivityNavigation'
import ActivityChapterDropdown from '@components/Dashboard/Pages/Activity/ActivityChapterDropdown' import ActivityChapterDropdown from '@components/Pages/Activity/ActivityChapterDropdown'
import FixedActivitySecondaryBar from '@components/Dashboard/Pages/Activity/FixedActivitySecondaryBar' import FixedActivitySecondaryBar from '@components/Pages/Activity/FixedActivitySecondaryBar'
import CourseEndView from '@components/Pages/Activity/CourseEndView'
interface ActivityClientProps { interface ActivityClientProps {
activityid: string activityid: string
@ -95,168 +96,175 @@ function ActivityClient(props: ActivityClientProps) {
<CourseProvider courseuuid={course?.course_uuid}> <CourseProvider courseuuid={course?.course_uuid}>
<AIChatBotProvider> <AIChatBotProvider>
<GeneralWrapperStyled> <GeneralWrapperStyled>
<div className="space-y-4 pt-0"> {activityid === 'end' ? (
<CourseEndView
courseName={course.name}
<div className="pt-2"> orgslug={orgslug}
<div className="space-y-4 pb-4 activity-info-section"> courseUuid={course.course_uuid}
<div className="flex justify-between items-center"> thumbnailImage={course.thumbnail_image}
<div className="flex space-x-6"> />
<div className="flex"> ) : (
<Link <div className="space-y-4 pt-0">
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`} <div className="pt-2">
> <div className="space-y-4 pb-4 activity-info-section">
<img <div className="flex justify-between items-center">
className="w-[100px] h-[57px] rounded-md drop-shadow-md" <div className="flex space-x-6">
src={`${getCourseThumbnailMediaDirectory( <div className="flex">
org?.org_uuid, <Link
course.course_uuid, href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}`}
course.thumbnail_image >
)}`} <img
alt="" className="w-[100px] h-[57px] rounded-md drop-shadow-md"
/> src={`${getCourseThumbnailMediaDirectory(
</Link> org?.org_uuid,
</div> course.course_uuid,
<div className="flex flex-col -space-y-1"> course.thumbnail_image
<p className="font-bold text-gray-700 text-md">Course </p> )}`}
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase"> alt=""
{course.name} />
</h1> </Link>
</div>
<div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md">Course </p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
{course.name}
</h1>
</div>
</div> </div>
</div> </div>
</div>
<ActivityIndicators <ActivityIndicators
course_uuid={courseuuid} course_uuid={courseuuid}
current_activity={activityid} current_activity={activityid}
orgslug={orgslug} orgslug={orgslug}
course={course} course={course}
/> />
<div className="flex justify-between items-center"> <div className="flex justify-between items-center">
<div className="flex items-center space-x-3"> <div className="flex items-center space-x-3">
<ActivityChapterDropdown <ActivityChapterDropdown
course={course} course={course}
currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')} currentActivityId={activity.activity_uuid ? activity.activity_uuid.replace('activity_', '') : activityid.replace('activity_', '')}
orgslug={orgslug} orgslug={orgslug}
/> />
<div className="flex flex-col -space-y-1"> <div className="flex flex-col -space-y-1">
<p className="font-bold text-gray-700 text-md"> <p className="font-bold text-gray-700 text-md">
Chapter : {getChapterNameByActivityId(course, activity.id)} Chapter : {getChapterNameByActivityId(course, activity.id)}
</p> </p>
<h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase"> <h1 className="font-bold text-gray-950 text-2xl first-letter:uppercase">
{activity.name} {activity.name}
</h1> </h1>
</div>
</div> </div>
</div> <div className="flex space-x-2 items-center">
<div className="flex space-x-2 items-center"> {activity && activity.published == true && activity.content.paid_access != false && (
{activity && activity.published == true && activity.content.paid_access != false && ( <AuthenticatedClientElement checkMethod="authentication">
<AuthenticatedClientElement checkMethod="authentication"> {activity.activity_type != 'TYPE_ASSIGNMENT' && (
{activity.activity_type != 'TYPE_ASSIGNMENT' && ( <>
<> <AIActivityAsk activity={activity} />
<AIActivityAsk activity={activity} /> {contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && (
{contributorStatus === 'ACTIVE' && activity.activity_type == 'TYPE_DYNAMIC' && ( <Link
<Link href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`}
href={getUriWithOrg(orgslug, '') + `/course/${courseuuid}/activity/${activityid}/edit`} className="bg-emerald-600 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="bg-emerald-600 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" >
> <Edit2 size={17} />
<Edit2 size={17} /> <span className="text-xs font-bold">Contribute to Activity</span>
<span className="text-xs font-bold">Contribute to Activity</span> </Link>
</Link> )}
)} <MoreVertical size={17} className="text-gray-300" />
<MoreVertical size={17} className="text-gray-300" /> <MarkStatus
<MarkStatus
activity={activity}
activityid={activityid}
course={course}
orgslug={orgslug}
/>
</>
)}
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
<>
<MoreVertical size={17} className="text-gray-300 " />
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentTools
assignment={assignment}
activity={activity} activity={activity}
activityid={activityid} activityid={activityid}
course={course} course={course}
orgslug={orgslug} orgslug={orgslug}
/> />
</AssignmentSubmissionProvider> </>
</> )}
)} {activity.activity_type == 'TYPE_ASSIGNMENT' && (
</AuthenticatedClientElement> <>
)} <MoreVertical size={17} className="text-gray-300 " />
</div> <AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
</div> <AssignmentTools
</div> assignment={assignment}
{activity && activity.published == false && ( activity={activity}
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800"> activityid={activityid}
<div className="text-white"> course={course}
<h1 className="font-bold text-2xl"> orgslug={orgslug}
This activity is not published yet />
</h1> </AssignmentSubmissionProvider>
</div> </>
</div> )}
)} </AuthenticatedClientElement>
)}
{activity && activity.published == true && (
<>
{activity.content.paid_access == false ? (
<PaidCourseActivityDisclaimer course={course} />
) : (
<div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
{/* Activity Types */}
<div>
{activity.activity_type == 'TYPE_DYNAMIC' && (
<Canva content={activity.content} activity={activity} />
)}
{activity.activity_type == 'TYPE_VIDEO' && (
<VideoActivity course={course} activity={activity} />
)}
{activity.activity_type == 'TYPE_DOCUMENT' && (
<DocumentPdfActivity
course={course}
activity={activity}
/>
)}
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
<div>
{assignment ? (
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentsTaskProvider>
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentStudentActivity />
</AssignmentSubmissionProvider>
</AssignmentsTaskProvider>
</AssignmentProvider>
) : (
<div></div>
)}
</div>
)}
</div>
</div> </div>
)} </div>
</> </div>
)} {activity && activity.published == false && (
<div className="p-7 drop-shadow-xs rounded-lg bg-gray-800">
<div className="text-white">
<h1 className="font-bold text-2xl">
This activity is not published yet
</h1>
</div>
</div>
)}
{/* Fixed Activity Secondary Bar */} {activity && activity.published == true && (
{activity && activity.published == true && activity.content.paid_access != false && ( <>
<FixedActivitySecondaryBar {activity.content.paid_access == false ? (
course={course} <PaidCourseActivityDisclaimer course={course} />
currentActivityId={activityid} ) : (
orgslug={orgslug} <div className={`p-7 drop-shadow-xs rounded-lg ${bgColor}`}>
activity={activity} {/* Activity Types */}
/> <div>
)} {activity.activity_type == 'TYPE_DYNAMIC' && (
<Canva content={activity.content} activity={activity} />
)}
{activity.activity_type == 'TYPE_VIDEO' && (
<VideoActivity course={course} activity={activity} />
)}
{activity.activity_type == 'TYPE_DOCUMENT' && (
<DocumentPdfActivity
course={course}
activity={activity}
/>
)}
{activity.activity_type == 'TYPE_ASSIGNMENT' && (
<div>
{assignment ? (
<AssignmentProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentsTaskProvider>
<AssignmentSubmissionProvider assignment_uuid={assignment?.assignment_uuid}>
<AssignmentStudentActivity />
</AssignmentSubmissionProvider>
</AssignmentsTaskProvider>
</AssignmentProvider>
) : (
<div></div>
)}
</div>
)}
</div>
</div>
)}
</>
)}
<div style={{ height: '100px' }}></div>
{/* Fixed Activity Secondary Bar */}
{activity && activity.published == true && activity.content.paid_access != false && (
<FixedActivitySecondaryBar
course={course}
currentActivityId={activityid}
orgslug={orgslug}
activity={activity}
/>
)}
<div style={{ height: '100px' }}></div>
</div>
</div> </div>
</div> )}
</GeneralWrapperStyled> </GeneralWrapperStyled>
</AIChatBotProvider> </AIChatBotProvider>
</CourseProvider> </CourseProvider>
@ -275,20 +283,63 @@ export function MarkStatus(props: {
const isMobile = useMediaQuery('(max-width: 768px)') const isMobile = useMediaQuery('(max-width: 768px)')
const [isLoading, setIsLoading] = React.useState(false); const [isLoading, setIsLoading] = React.useState(false);
const areAllActivitiesCompleted = () => {
const run = props.course.trail.runs.find(
(run: any) => run.course_id == props.course.id
);
if (!run) return false;
let totalActivities = 0;
let completedActivities = 0;
// Count all activities and completed activities
props.course.chapters.forEach((chapter: any) => {
chapter.activities.forEach((activity: any) => {
totalActivities++;
const isCompleted = run.steps.find(
(step: any) => step.activity_id === activity.id && step.complete === true
);
if (isCompleted) {
completedActivities++;
}
});
});
console.log('Total activities:', totalActivities);
console.log('Completed activities:', completedActivities);
console.log('All completed?', completedActivities >= totalActivities - 1);
// We check for totalActivities - 1 because the current activity completion
// hasn't been counted yet (it's in progress)
return completedActivities >= totalActivities - 1;
};
async function markActivityAsCompleteFront() { async function markActivityAsCompleteFront() {
try { try {
// Check if this will be the last activity to complete
const willCompleteAll = areAllActivitiesCompleted();
console.log('Will complete all?', willCompleteAll);
setIsLoading(true); setIsLoading(true);
const trail = await markActivityAsComplete( await markActivityAsComplete(
props.orgslug, props.orgslug,
props.course.course_uuid, props.course.course_uuid,
props.activity.activity_uuid, props.activity.activity_uuid,
session.data?.tokens?.access_token session.data?.tokens?.access_token
); );
// Mutate the course data to trigger re-render // Mutate the course data
await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`); await mutate(`${getAPIUrl()}courses/${props.course.course_uuid}/meta`);
router.refresh();
if (willCompleteAll) {
console.log('Redirecting to end page...');
const cleanCourseUuid = props.course.course_uuid.replace('course_', '');
router.push(getUriWithOrg(props.orgslug, '') + `/course/${cleanCourseUuid}/activity/end`);
} else {
router.refresh();
}
} catch (error) { } catch (error) {
console.error('Error marking activity as complete:', error);
toast.error('Failed to mark activity as complete'); toast.error('Failed to mark activity as complete');
} finally { } finally {
setIsLoading(false); setIsLoading(false);

0
apps/web/components/Dashboard/Pages/Activity/ActivityChapterDropdown.tsx → apps/web/components/Pages/Activity/ActivityChapterDropdown.tsx
View file

0
apps/web/components/Dashboard/Pages/Activity/ActivityNavigation.tsx → apps/web/components/Pages/Activity/ActivityNavigation.tsx
View file

79
apps/web/components/Pages/Activity/CourseEndView.tsx Normal file
View file

@ -0,0 +1,79 @@
import React from 'react';
import ReactConfetti from 'react-confetti';
import { Trophy, ArrowLeft } from 'lucide-react';
import Link from 'next/link';
import { getUriWithOrg } from '@services/config/config';
import { getCourseThumbnailMediaDirectory } from '@services/media/media';
import { useWindowSize } from 'usehooks-ts';
import { useOrg } from '@components/Contexts/OrgContext';
interface CourseEndViewProps {
courseName: string;
orgslug: string;
courseUuid: string;
thumbnailImage: string;
}
const CourseEndView: React.FC<CourseEndViewProps> = ({ courseName, orgslug, courseUuid, thumbnailImage }) => {
const { width, height } = useWindowSize();
const org = useOrg() as any;
return (
<div className="min-h-[70vh] flex flex-col items-center justify-center text-center px-4 relative overflow-hidden">
<div className="fixed inset-0 pointer-events-none">
<ReactConfetti
width={width}
height={height}
numberOfPieces={200}
recycle={false}
colors={['#6366f1', '#10b981', '#3b82f6']}
/>
</div>
<div className="bg-white rounded-2xl p-8 nice-shadow max-w-2xl w-full space-y-6 relative z-10">
<div className="flex flex-col items-center space-y-6">
{thumbnailImage && (
<img
className="w-[200px] h-[114px] rounded-lg shadow-md object-cover"
src={`${getCourseThumbnailMediaDirectory(
org?.org_uuid,
courseUuid,
thumbnailImage
)}`}
alt={courseName}
/>
)}
<div className="bg-emerald-100 p-4 rounded-full">
<Trophy className="w-16 h-16 text-emerald-600" />
</div>
</div>
<h1 className="text-4xl font-bold text-gray-900">
Congratulations! 🎉
</h1>
<p className="text-xl text-gray-600">
You've successfully completed
<span className="font-semibold text-gray-900"> {courseName}</span>
</p>
<p className="text-gray-500">
Your dedication and hard work have paid off. You've mastered all the content in this course.
</p>
<div className="pt-6">
<Link
href={getUriWithOrg(orgslug, '') + `/course/${courseUuid.replace('course_', '')}`}
className="inline-flex items-center space-x-2 bg-gray-800 text-white px-6 py-3 rounded-full hover:bg-gray-700 transition duration-200"
>
<ArrowLeft className="w-5 h-5" />
<span>Back to Course</span>
</Link>
</div>
</div>
</div>
);
};
export default CourseEndView;

0
apps/web/components/Dashboard/Pages/Activity/FixedActivitySecondaryBar.tsx → apps/web/components/Pages/Activity/FixedActivitySecondaryBar.tsx
View file