CLASSROOMIO-T-108: Connect my learning page to BE

src/lib/components/Courses/api.js

@@ -6,7 +6,8 @@ export async function fetchCourses(profileId, orgId) {
   // Gets courses for a particular organisation where the current logged in user is a groupmember
   const { data: allCourses } = await supabase
     .rpc('get_courses', {
-      org_id_arg: orgId
+      org_id_arg: orgId,
+      profile_id_arg: profileId
     })
     .eq('profile_id', profileId);
 

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

@@ -1,50 +1,25 @@
 <script lang="ts">
   import { Tag, ImageLoader, SkeletonPlaceholder } from 'carbon-components-svelte';
-  // import { ROLE } from '$lib/utils/constants/roles';
   import getCurrencyFormatter from '$lib/utils/functions/getCurrencyFormatter';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
 
   export let bannerImage: string | undefined;
   export let id = '';
   export let slug = '';
   export let title = '';
   export let description = '';
-  // export let role_id = ROLE.STUDENT;
   export let isPublished = false;
   export let cost = 0;
   export let totalLessons = 0;
   export let currency = 'NGN';
   export let isOnLandingPage = false;
-  // export let onDelete = (id: string) => {};
+  export let isLMS = false;
+  export let progressRate = 45;
 
-  let formatter = getCurrencyFormatter(currency);
-  // function getOptions() {
-  //   return [
-  //     {
-  //       label: 'Make a copy',
-  //       // Show this option only if user has admin control over this course.
-  //       show: () => role_id === ROLE.ADMIN || role_id === ROLE.TUTOR,
-  //       onClick() {
-  //         // IIFI of copyCourseModal
-  //         (() => {
-  //           $copyCourseModal.id = id;
-  //           $copyCourseModal.open = true;
-  //           $copyCourseModal.title = `Copy of ${title}`;
-  //         })();
-  //       }
-  //     }
-  //     // {
-  //     //   label: 'Delete',
-  //     //   show: () => role_id === ROLE.TUTOR,
-  //     //   onClick() {
-  //     //     (async () => {
-  //     //       await deleteCourse(id);
-  //     //       onDelete(id);
-  //     //       console.log('Deleting');
-  //     //     })();
-  //     //   }
-  //     // }
-  //   ].filter((option) => option.show());
-  // }
+  $: console.log(progressRate);
+
+  $: formatter = getCurrencyFormatter(currency);
 </script>
 
 <a
@@ -72,21 +47,43 @@
     </p>
   </div>
 
-  <div class="px-4 border border-gray border-b-0 border-l-0 border-r-0 footer">
-    <p class="text-xs pt-2 pl-2 dark:text-white">{totalLessons} lessons</p>
-    <p class="text-xs py-2">
-      {#if isOnLandingPage}
-        <span class="px-2">{!cost ? 'Free' : formatter.format(cost)}</span>
-      {:else}
-        <Tag type={isPublished ? 'green' : 'cool-gray'}>
-          {#if isPublished}
-            Published
-          {:else}
-            Unpublished
-          {/if}
-        </Tag>
-      {/if}
-    </p>
+  <div
+    class="px-4 border border-gray border-b-0 border-l-0 border-r-0 flex justify-between items-center"
+  >
+    <div>
+      <p class="text-xs pt-2 {!isLMS && 'pl-2'} dark:text-white">{totalLessons} lessons</p>
+      <p class="text-xs py-2">
+        {#if isOnLandingPage}
+          <span class="px-2">{!cost ? 'Free' : formatter.format(cost)}</span>
+        {:else if isLMS}
+          <div class="flex items-center gap-2">
+            <div class=" relative bg-[#EAEAEA] w-[50px] h-1">
+              <div
+                style="width:{progressRate}%"
+                class={`absolute top-0 left-0 bg-primary-700 h-full`}
+              />
+            </div>
+            <p class="text-xs text-[#656565] dark:text-white">{progressRate}%</p>
+          </div>
+        {:else}
+          <Tag type={isPublished ? 'green' : 'cool-gray'}>
+            {#if isPublished}
+              Published
+            {:else}
+              Unpublished
+            {/if}
+          </Tag>
+        {/if}
+      </p>
+    </div>
+
+    {#if isLMS}
+      <PrimaryButton
+        label={'Continue Course'}
+        variant={VARIANTS.OUTLINED}
+        className="rounded-none text-primary-600"
+      />
+    {/if}
   </div>
 </a>
 
@@ -97,7 +94,7 @@
   }
   .title,
   .description {
-    height: 40px;
+    height: 42px;
     line-height: 20px;
     display: -webkit-box;
     -webkit-box-orient: vertical;

src/lib/components/Courses/index.svelte

@@ -3,14 +3,23 @@
   import Card from './components/Card/index.svelte';
   import CardLoader from './components/Card/Loader.svelte';
   import CoursesEmptyIcon from '../Icons/CoursesEmptyIcon.svelte';
-  import CopyCourseModal from './components/CopyCourseModal/index.svelte';
+  // import CopyCourseModal from './components/CopyCourseModal/index.svelte';
   import { courseMetaDeta } from './store';
   import type { Course } from '$lib/utils/types';
+  import { appStore } from '$lib/utils/store/app';
 
   export let courses: Course[] = [];
+
+  function calcProgressRate(progressRate?: number, totalLessons?: number): number {
+    if (!progressRate || !totalLessons) {
+      return 0;
+    }
+
+    return Math.round((progressRate / totalLessons) * 100);
+  }
 </script>
 
-<CopyCourseModal />
+<!-- <CopyCourseModal /> -->
 
 <div class={`w-full ${$courseMetaDeta.isLoading || courses ? 'cards-container' : ''} my-4 mx-auto`}>
   {#if $courseMetaDeta.isLoading}
@@ -30,6 +39,8 @@
           cost={courseData.cost}
           currency={courseData.currency}
           totalLessons={courseData.total_lessons}
+          isLMS={$appStore.isOrgSite}
+          progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
         />
       {/key}
     {/each}