feat: Pathway/backend integration

apps/backend/src/routes/downloadPathwayCertificate.js

@@ -0,0 +1,35 @@
+const express = require('express');
+const zod = require('zod');
+const { generateCertificate } = require('../utils/certificate');
+
+const router = express.Router();
+
+router.post('/', async (req, res) => {
+ try {
+ // Validate
+ const mySchema = zod.object({
+ theme: zod.string(),
+ studentName: zod.string(),
+ courseName: zod.string(),
+ courseDescription: zod.string(),
+ orgLogoUrl: zod.string(),
+ orgName: zod.string(),
+ });
+ console.log('req.body', req.body);
+
+ mySchema.parse(req.body);
+
+ const pdfBuffer = await generateCertificate(req.body);
+
+ res.contentType('application/pdf');
+ res.send(pdfBuffer);
+ } catch (error) {
+ console.error('Error', error);
+ res.json({
+ success: false,
+ error,
+ });
+ }
+});
+
+module.exports = router;

apps/dashboard/src/lib/components/CourseLandingPage/components/LessonCard.svelte

@@ -0,0 +1,14 @@
+<script>
+ import { getLectureNo } from '$lib/components/Course/function';
+ import Chip from '$lib/components/Chip/index.svelte';
+
+ export let index;
+ export let title;
+</script>
+
+<div class="px-2 py-1 m-2 border rounded">
+ <Chip value={getLectureNo(index + 1, '0')} className="bg-primary-100 text-primary-700 inline" />
+ <p class="ml-2 text-xs font-light dark:text-white inline">
+ {title}
+ </p>
+</div>

apps/dashboard/src/lib/components/CourseLandingPage/index.svelte

@@ -1,32 +1,30 @@
 <script lang="ts">
  import get from 'lodash/get';
  import { onMount, onDestroy } from 'svelte';
- import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
  import pluralize from 'pluralize';
  import { page } from '$app/stores';
- import Notebook from 'carbon-icons-svelte/lib/Notebook.svelte'; //note
- import PresentationFile from 'carbon-icons-svelte/lib/PresentationFile.svelte'; // exercise
- import Video from 'carbon-icons-svelte/lib/Video.svelte'; //video
- import PageNumber from 'carbon-icons-svelte/lib/PageNumber.svelte';
  import PlayFilled from 'carbon-icons-svelte/lib/PlayFilled.svelte';
- import PricingSection from './components/PricingSection.svelte';
- import { observeIntersection } from './components/IntersectionObserver';
- import { getLectureNo } from '../Course/function';
+
  import { NAV_ITEMS } from './constants';
- import Modal from '../Modal/index.svelte';
+ import { currentOrg } from '$lib/utils/store/org';
+ import { course } from '$lib/components/Course/store';
+ import { t } from '$lib/utils/functions/translations';
+ import { calDateDiff } from '$lib/utils/functions/date';
  import { handleOpenWidget, reviewsModalStore } from './store';
- import Chip from '../Chip/index.svelte';
- import Avatar from '$lib/components/Avatar/index.svelte';
- import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+ import { VARIANTS } from '$lib/components/PrimaryButton/constants';
  import { getEmbedId } from '$lib/utils/functions/formatYoutubeVideo';
+
  import type { Course, Lesson, Review } from '$lib/utils/types';
- import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+ import Modal from '../Modal/index.svelte';
+ import LessonCard from './components/LessonCard.svelte';
+ import Avatar from '$lib/components/Avatar/index.svelte';
+ import PricingSection from './components/PricingSection.svelte';
+ import PoweredBy from '$lib/components/Upgrade/PoweredBy.svelte';
+ import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+ import { observeIntersection } from './components/IntersectionObserver';
  import HtmlRender from '$lib/components/HTMLRender/HTMLRender.svelte';
- import { calDateDiff } from '$lib/utils/functions/date';
- import { currentOrg } from '$lib/utils/store/org';
  import UploadWidget from '$lib/components/UploadWidget/index.svelte';
- import { course } from '$lib/components/Course/store';
- import { t } from '$lib/utils/functions/translations';
 
  export let editMode = false;
  export let courseData: Course;
@@ -269,53 +267,8 @@
 
  <div class="flex flex-wrap">
  {#each lessons as lesson, index}
- <div class="px-2 py-1 m-2 border rounded">
- <Chip
- value={getLectureNo(index + 1, '0')}
- className="bg-primary-100 text-primary-700 inline "
- />
- <p class="ml-2 text-xs font-light dark:text-white inline">
- {lesson.title}
- </p>
-
-
- <!-- <div class="flex items-center">
- {#if lesson.slide_url}
- <span class="text-sm font-light flex w-2/4"
- ><PresentationFile size={16} class="mr-1" />{$t(
- 'course.navItem.landing_page.slide'
- )}</span
- >
- {/if}
- {#if lesson.note}
- <span class="text-sm font-light flex w-2/4"
- ><Notebook size={16} class="mr-1" />{$t(
- 'course.navItem.landing_page.note'
- )}</span
- >
- {/if}
- </div> -->
-
-
- <!-- <div class="flex items-center">
- {#if lesson.videos}
- <span class="text-sm font-light flex w-2/4"
- ><Video size={16} class="mr-1" />{lesson.videos.length}
- {$t('course.navItem.landing_page.video')}{lesson.videos.length > 1 ? 's' : ''}
- </span>
- {/if}
- {#if get(lesson, 'totalExercises[0].count')}
- <span class="flex w-2/4 text-sm font-light"
- ><PageNumber size={16} class="mr-1" />{pluralize(
- 'exercise',
- get(lesson, 'totalExercises[0].count', 0),
- true
- )}</span
- >
- {/if}
- </div> -->
- </div>
- {/each}
+ <LessonCard {index} title={lesson.title} />
+ {/each}
  </div>
  </section>
 

apps/dashboard/src/lib/components/Courses/components/Card/index.svelte

@@ -33,7 +33,7 @@
  export let isLMS = false;
  export let isLearningPath = false;
  export let totalCourse = 0;
- export let completedCourse = 0;
+ export let pathwaycompletedCourses = 0;
  export let isExplore = false;
  export let progressRate = 45;
  export let type: COURSE_TYPE;
@@ -63,6 +63,10 @@
  }
 
  function getCourseUrl() {
+ if (isLMS && isLearningPath) {
+ return `/pathways/${id}`;
+ }
+
  return isOnLandingPage || isExplore
  ? `/course/${slug}`
  : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
@@ -145,7 +149,7 @@
  <svelte:fragment slot="error">{$t('courses.course_card.error_message')}</svelte:fragment>
  </ImageLoader>
 
- {#if isLearningPath && isLMS}
+ {#if isLMS && isLearningPath}
  <span
  class="absolute top-2 left-2 z-10 text-xs font-bold uppercase bg-white text-primary-600 rounded-sm p-1"
  >
@@ -175,7 +179,7 @@
  <div>
  <p class="text-xs {!isLMS && 'pl-2'} font-normal dark:text-white">
  {#if isLearningPath && isLMS}
- {completedCourse} / {totalCourse} {$t('lms_pathway.course')}
+ {pathwaycompletedCourses} / {totalCourse} {$t('lms_pathway.course')}
  {:else}
  {totalLessons}
  {$t('courses.course_card.lessons_number')}

apps/dashboard/src/lib/components/Courses/index.svelte

@@ -5,7 +5,7 @@
  import CardLoader from '$lib/components/Courses/components/Card/Loader.svelte';
  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
  import { courseMetaDeta } from '$lib/components/Courses/store';
- import type { Pathway } from '$lib/utils/types';
+ import type { Course, Pathway } from '$lib/utils/types';
  import { globalStore } from '$lib/utils/store/app';
  import {
  StructuredList,
@@ -16,9 +16,10 @@
  } from 'carbon-components-svelte';
  import { t } from '$lib/utils/functions/translations';
  import { isMobile } from '$lib/utils/store/useMobile';
- import type { LmsCourse } from '$lib/components/LMS/store';
+ import type { LMSCourse } from '$lib/components/LMS/store';
+ import { getPathwayCompletedCoursesLength } from '$lib/utils/functions/pathway';
 
- export let courses: LmsCourse[] = [];
+ export let courses: LMSCourse[] = [];
  export let emptyTitle = $t('courses.course_card.empty_title');
  export let emptyDescription = $t('courses.course_card.empty_description');
  export let isExplore = false;
@@ -28,16 +29,29 @@
  if (!progressRate || !totalItem) {
  return 0;
  }
-
  return Math.round((progressRate / totalItem) * 100);
  }
 
- const getCompletedCourses = (course: Pathway) => {
- if (!course.isPathway) return;
- const completedCourse =
- course.courses?.filter((course) => course.progress_rate === 100).length || 0;
- return completedCourse;
- };
+ function calculatePathwayProgress(pathway: Pathway): number {
+ if (!pathway.isPathway) return 0;
+
+ const totalCourses = pathway.total_course;
+ if (totalCourses === 0) return 0;
+
+ // Number of courses completed within the pathway
+ const completedCourses = getPathwayCompletedCoursesLength(pathway);
+
+ return Math.round((completedCourses / totalCourses) * 100);
+ }
+
+ function calculateCourseAndPathwayProgress(course: LMSCourse): number {
+ if (course.isPathway) {
+ return calculatePathwayProgress(course as Pathway);
+ } else {
+ // Individual course progress calculation
+ return calcProgressRate(course.progress_rate, course.total_lessons);
+ }
+ }
 </script>
 
 <!-- <CopyCourseModal /> -->
@@ -105,16 +119,13 @@
  type={courseData.type}
  isLearningPath={courseData.isPathway}
  totalCourse={courseData.total_course}
- completedCourse={getCompletedCourses(courseData)}
+ pathwaycompletedCourses={getPathwayCompletedCoursesLength(courseData)}
  currency={courseData.currency}
  totalLessons={courseData.total_lessons}
  totalStudents={courseData.total_students}
  isLMS={$globalStore.isOrgSite}
  {isExplore}
- progressRate={calcProgressRate(
- courseData.progress_rate,
- courseData.isPathway ? courseData.total_course : courseData.total_lessons
- )}
+ progressRate={calculateCourseAndPathwayProgress(courseData)}
  />
  {/key}
  {/each}

apps/dashboard/src/lib/components/LMS/components/CourseListModal.svelte

@@ -6,6 +6,7 @@
  import { t } from '$lib/utils/functions/translations';
  import { goto } from '$app/navigation';
  import type { Pathway } from '$lib/utils/types';
+ import { courseProgress } from '$lib/utils/functions/pathway';
 
  export let open = false;
  export let pathway: Pathway | any;
@@ -24,42 +25,52 @@
  buttonClass="flex justify-end"
  bind:open
 >
- <div class="h-full">
- {#each pathway.courses as course}
- <a href={course.is_unlocked ? `/course/${course.id}` : null} class="hover:no-underline">
- <div class="p-2 cursor-pointer space-y-2 {NavClasses.item}">
- <p class="text-sm font-normal w-[60%] truncate">{course.title}</p>
- {#if !course.is_unlocked}
- <p class="text-sm font-normal text-gray-500 bg-gray-300 w-fit px-1 rounded-sm">
- {$t('lms_pathway.locked')}
- </p>
- {:else}
- <div class="flex items-center gap-2">
- <div class="relative bg-[#EAEAEA] w-[40%] h-2">
- <div
- style="width: {course.progress_rate}%"
- class="absolute top-0 left-0 bg-primary-900 h-full"
- />
- </div>
- <p class="text-xs font-medium">
- {course.progress_rate === 100
- ? `${$t('lms_pathway.completed')}`
- : `${course.progress_rate}%`}
+ {#if pathway.pathway_course?.length > 0}
+ <div class="h-full">
+ {#each pathway.pathway_course as pathway_course}
+ <a
+ href={pathway_course.is_unlocked && pathway_course.course.is_published
+ ? `/courses/${pathway_course.course.id}`
+ : null}
+ class="hover:no-underline"
+ >
+ <div class="p-2 cursor-pointer space-y-2 {NavClasses.item}">
+ <p class="text-sm font-normal w-[60%] truncate">{pathway_course.course.title}</p>
+ {#if pathway_course.is_unlocked == false || pathway_course.course.is_published == false}
+ <p class="text-sm font-normal text-gray-500 bg-gray-300 w-fit px-1 rounded-sm">
+ {$t('lms_pathway.locked')}
  </p>
- </div>
- {/if}
- </div>
- </a>
- {/each}
- </div>
-
+ {:else}
+ <div class="flex items-center gap-2">
+ <div class="relative bg-[#EAEAEA] w-[40%] h-2">
+ <div
+ style="width: {courseProgress(pathway_course.course.lesson) || 0}%"
+ class="absolute top-0 left-0 bg-primary-900 h-full"
+ />
+ </div>
+ <p class="text-xs font-medium">
+ {courseProgress(pathway_course.course.lesson) === 100
+ ? `${$t('lms_pathway.completed')}`
+ : `${courseProgress(pathway_course.course.lesson) || 0}%`}
+ </p>
+ </div>
+ {/if}
+ </div>
+ </a>
+ {/each}
+ </div>
+ {:else}
+ <h3 class="dark:text-white text-2xl my-5">{$t('search.no_course')}</h3>
+ {/if}
  <!-- Button -->
  <div slot="buttons">
- <PrimaryButton
- label={$t('lms_pathway.goto_pathway')}
- variant={VARIANTS.TEXT}
- className="text-primary-800 font-semibold"
- onClick={gotoPathway}
- />
+ {#if pathway.pathway_course?.length > 0}
+ <PrimaryButton
+ label={$t('lms_pathway.goto_pathway')}
+ variant={VARIANTS.TEXT}
+ className="text-primary-800 font-semibold"
+ onClick={gotoPathway}
+ />
+ {/if}
  </div>
 </Modal>