CLASSROOMIO-T-99: Download Lesson PDF

Merge branch 'CLASSROOMIO-T-99' of https://gitlab.com/thenextgreat/classroomio into CLASSROOMIO-T-99

CLASSROOMIO-T-99: Badge Value Fix

CLASSROOMIO-T-99: Minor UI improvements.

CLASSROOMIO-T-99: Frontend Fixes


Co-authored-by: Rotimi Best <[email protected]>
Co-authored-by: Tunji Adeyemi <[email protected]>


Merge-request: CLASSROOMIO-MR-47
Merged-by: Best Admin <[email protected]>

src/lib/components/Course/components/Lesson/Materials/index.svelte

@@ -17,6 +17,7 @@
   import Box from '$lib/components/Box/index.svelte';
   import EditContent from '$lib/components/EditContent/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
   import TextField from '$lib/components/Form/TextField.svelte';
   import {
     lesson,
@@ -75,15 +76,18 @@
     const { slide_url, videos, note } = materials;
 
     tabs = tabs.map((tab) => {
-      let badgeValue;
-
-      if (tab.value === 1) {
-        badgeValue = !!slide_url ? 1 : 0;
-      } else if (tab.value === 2) {
-        badgeValue = !!note ? 1 : 0;
-      } else {
-        badgeValue = Array.isArray(videos) ? videos.length : 0;
-      }
+      const badgeValue =
+        tab.value === 1
+          ? !!note
+            ? 1
+            : 0
+          : tab.value === 2
+          ? !!slide_url
+            ? 1
+            : 0
+          : Array.isArray(videos)
+          ? videos.length
+          : 0;
 
       tab.badgeValue = badgeValue;
       return tab;
@@ -173,6 +177,7 @@
               }}
               isLoading={$isLoading}
               isDisabled={$isLoading}
+              variant={VARIANTS.OUTLINED}
             >
               <MachineLearningModel size={20} class="carbon-icon mr-3" />
               AI Assistant

src/lib/components/Courses/components/CopyCourseModal/index.svelte

@@ -5,10 +5,7 @@
   import { snackbarStore } from '$lib/components/Snackbar/store';
   import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
   import TextField from '$lib/components/Form/TextField.svelte';
-  import {
-    copyCourseModalInitialState,
-    copyCourseModal,
-  } from '$lib/components/Courses/store';
+  import { copyCourseModalInitialState, copyCourseModal } from '$lib/components/Courses/store';
   import { cloneCourse } from '$lib/utils/services/courses/clone';
 
   // clone, show spinner and redirect to new course
@@ -17,10 +14,7 @@
     $copyCourseModal.isSaving = true;
 
     try {
-      const newCourse = await cloneCourse(
-        $copyCourseModal.id,
-        $copyCourseModal.title
-      );
+      const newCourse = await cloneCourse($copyCourseModal.id, $copyCourseModal.title);
 
       goto(`/courses/${newCourse.id}`);
 

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -14,10 +14,14 @@
   import { setCourse, course } from '$lib/components/Course/store';
   import {
     lesson,
+    lessons,
     handleSaveLesson,
     uploadCourseVideoStore
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import { browser } from '$app/environment';
+  import { currentOrg } from '$lib/utils/store/org';
+  import { snackbarStore } from '$lib/components/Snackbar/store';
+  import { SNACKBAR_SEVERITY } from '$lib/components/Snackbar/constants';
 
   export let data;
 
@@ -29,6 +33,17 @@
   let prevLessonId = '';
   let isFetching = false;
   let isMarkingComplete = false;
+  let isLoading = false;
+
+  function getLessonOrder(id) {
+    const index = $lessons.findIndex((lesson) => lesson.id === id);
+
+    if (index < 10) {
+      return '0' + (index + 1);
+    } else {
+      return index + 1;
+    }
+  }
 
   async function fetchReqData(lessonId = '') {
     isFetching = true;
@@ -58,6 +73,64 @@
     isMarkingComplete = false;
   }
 
+  const downloadLesson = async () => {
+    const currentLesson = $lessons.find((l) => l.id === $lesson?.id);
+    if (!currentLesson) {
+      return;
+    }
+
+    isLoading = true;
+
+    try {
+      const lessonVideo = $lesson.materials.videos.map((video) => video.link);
+      const lessonNumber = getLessonOrder(currentLesson.id);
+
+      const response = await fetch('https://classroomio-server.fly.dev/downloadLesson', {
+        method: 'POST',
+        headers: {
+          Accept: 'application/json',
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          title: currentLesson.title,
+          number: lessonNumber,
+          orgName: `${$currentOrg.name}`,
+          note: `${$lesson.materials.note}`,
+          slideUrl: `${$lesson.materials.slide_url}`,
+          video: lessonVideo,
+          courseTitle: `${$course.title}`
+        })
+      });
+
+      if (!response.ok) {
+        throw new Error(await response.text());
+      }
+
+      const data = await response.blob();
+      console.log(data);
+      const file = new Blob([data], { type: 'application/pdf' });
+      const fileURL = URL.createObjectURL(file);
+
+      let a = document.createElement('a');
+      document.body.append(a);
+      a.download = $course.title + ' - ' + 'Lesson ' + lessonNumber;
+      a.href = fileURL;
+      a.click();
+      a.remove();
+
+      $snackbarStore.message = 'Download Complete';
+      $snackbarStore.severity = SNACKBAR_SEVERITY.SUCCESS;
+      $snackbarStore.open = true;
+    } catch (error) {
+      console.log('error downloading lesson', error);
+      $snackbarStore.message = "Something's not right - Please try later";
+      $snackbarStore.severity = SNACKBAR_SEVERITY.ERROR;
+      $snackbarStore.open = true;
+    }
+
+    isLoading = false;
+  };
+
   function setLesson(lessonData, totalExercises) {
     if (!lessonData) return;
 
@@ -104,10 +177,17 @@
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         {#if data.isMaterialsTabActive}
           <div class="flex items-center">
+            <PrimaryButton
+              className="mr-2"
+              label="Download PDF"
+              variant={VARIANTS.OUTLINED}
+              onClick={downloadLesson}
+              {isLoading}
+            />
             <PrimaryButton
               className="mr-2"
               label={mode === MODES.edit ? 'Save' : 'Edit'}
-              variant={VARIANTS.CONTAINED_INFO}
+              variant={VARIANTS.OUTLINED}
               onClick={toggleMode}
             />
           </div>