feat: show all courses available to students (#356)

* working on the fetch explore course

* working on the showing the right course

* finished the explore courses page

* finished the explore courses page

* updated the getcourseurl

* updated the migration file

* text and spacing improvements

* update translations

---------

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

apps/dashboard/src/lib/components/Courses/api.js

@@ -28,3 +28,20 @@ export async function fetchCourses(profileId, orgId) {
 
   return { allCourses };
 }
+
+export async function fetchExploreCourses(profileId, orgId) {
+  if (!orgId || !profileId) return;
+
+  const { data: allCourses } = await supabase.rpc('get_explore_courses', {
+    org_id_arg: orgId,
+    profile_id_arg: profileId
+  });
+
+  if (!Array.isArray(allCourses)) {
+    return {
+      allCourses: []
+    };
+  }
+
+  return { allCourses };
+}

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

@@ -32,6 +32,7 @@
   export let currency = 'NGN';
   export let isOnLandingPage = false;
   export let isLMS = false;
+  export let isExplore = false;
   export let progressRate = 45;
   export let type: COURSE_TYPE;
 
@@ -60,7 +61,7 @@
   }
 
   function getCourseUrl() {
-    return isOnLandingPage
+    return isOnLandingPage || isExplore
       ? `/course/${slug}`
       : `/courses/${id}${isLMS ? '/lessons?next=true' : ''}`;
   }
@@ -159,11 +160,11 @@
   </div>
 
   <div
-    class="px-4 border border-gray dark:border-neutral-600 border-b-0 border-l-0 border-r-0 flex justify-between {isLMS &&
+    class="px-4 py-2 border border-gray dark:border-neutral-600 border-b-0 border-l-0 border-r-0 flex justify-between {isLMS &&
       'items-center'}"
   >
     <div>
-      <p class="text-xs pt-2 {!isLMS && 'pl-2'} dark:text-white">
+      <p class="text-xs {!isLMS && 'pl-2'} dark:text-white">
         {totalLessons}
         {$t('courses.course_card.lessons_number')}
       </p>
@@ -175,15 +176,17 @@
               : 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`}
-              />
+          {#if !isExplore}
+            <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>
-            <p class="text-xs text-[#656565] dark:text-white">{progressRate}%</p>
-          </div>
+          {/if}
         {:else}
           <Tag type={isPublished ? 'green' : 'cool-gray'}>
             {#if isPublished}
@@ -198,13 +201,15 @@
 
     {#if isLMS}
       <PrimaryButton
-        label={$t('courses.course_card.continue_course')}
+        label={isExplore
+          ? $t('courses.course_card.learn_more')
+          : $t('courses.course_card.continue_course')}
         variant={VARIANTS.OUTLINED}
         className="rounded-none"
       />
     {:else if !isOnLandingPage}
       <div class="flex flex-col justify-between">
-        <p class="text-xs pt-2 pl-2 dark:text-white">
+        <p class="text-xs pl-2 dark:text-white">
           {totalStudents}
           {$t('courses.course_card.students')}
         </p>

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

@@ -19,6 +19,7 @@
   export let courses: Course[] = [];
   export let emptyTitle = $t('courses.course_card.empty_title');
   export let emptyDescription = $t('courses.course_card.empty_description');
+  export let isExplore = false;
 
   function calcProgressRate(progressRate?: number, totalLessons?: number): number {
     if (!progressRate || !totalLessons) {
@@ -83,6 +84,7 @@
         {#key courseData.id}
           <Card
             id={courseData.id}
+            slug={courseData.slug}
             bannerImage={courseData.logo || '/images/classroomio-course-img-template.jpg'}
             title={courseData.title}
             description={courseData.description}
@@ -93,6 +95,7 @@
             totalLessons={courseData.total_lessons}
             totalStudents={courseData.total_students}
             isLMS={$globalStore.isOrgSite}
+            {isExplore}
             progressRate={calcProgressRate(courseData.progress_rate, courseData.total_lessons)}
           />
         {/key}

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

@@ -2,6 +2,7 @@
   import { page } from '$app/stores';
   import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
   import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
+  import Explore from 'carbon-icons-svelte/lib/Explore.svelte';
   import Settings from 'carbon-icons-svelte/lib/Settings.svelte';
   import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
@@ -59,6 +60,11 @@
       show() {
         return $currentOrg?.customization?.dashboard?.community;
       }
+    },
+    {
+      name: $t('lms_navigation.explore'),
+      icon: Explore,
+      link: '/lms/explore'
     }
   ].filter((link) => (link.show ? link.show() : true));