CLASSROOMIO-T-86:Implemented the my learning page

Co-authored-by: Ifeanyi Nwosu <ifeanyi@digdippa.com>

Merge-request: CLASSROOMIO-MR-42
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/LMS/SideBar.svelte

@@ -1,11 +1,11 @@
 <script>
   import { page } from '$app/stores';
   import HelpIcon from 'carbon-icons-svelte/lib/Help.svelte';
+  import LicenseDraft from 'carbon-icons-svelte/lib/LicenseDraft.svelte';
   import TextChip from '$lib/components/Chip/Text.svelte';
   import OrgSelector from '$lib/components/OrgSelector/OrgSelector.svelte';
   import HomeIcon from '$lib/components/Icons/HomeIcon.svelte';
   import CourseIcon from '$lib/components/Icons/CourseIcon.svelte';
-  import ReviewsIcon from '$lib/components/Icons/ReviewsIcon.svelte';
   import CommunityIcon from '$lib/components/Icons/CommunityIcon.svelte';
   import ExerciseIcon from '$lib/components/Icons/ExerciseIcon.svelte';
   import Avatar from '$lib/components/Avatar/index.svelte';
@@ -36,14 +36,9 @@
     },
     {
       name: 'Exercise',
-      icon: ExerciseIcon,
+      icon: LicenseDraft,
       link: '/lms/exercises'
     },
-    {
-      name: 'Reviews',
-      icon: ReviewsIcon,
-      link: '/lms/reviews'
-    },
     {
       name: 'Community',
       icon: CommunityIcon,
@@ -81,6 +76,8 @@
               <svelte:component
                 this={item.icon}
                 color={isActive($page.url.pathname, `${item.link}`) ? 'black' : 'gray'}
+                size={24}
+                class="carbon-icon dark:text-white"
               />
               <p class="dark:text-white ml-2">{item.name}</p>
             </li>

src/lib/components/LMS/components/AllLearning.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { mockData } from './store';
+
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if mockData.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each mockData as data}
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
+
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">You haven't started any course yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Once you start a course, your progress will reflect here
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/Completed.svelte

@@ -0,0 +1,70 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { courseCompleted } from './store';
+
+  const getCourse = () => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if courseCompleted.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each courseCompleted as data}s
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <div class="w-full h-[180px]">
+            <img src={data.src} alt="course" class="w-full h-full object-cover" />
+          </div>
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] dark:text-white py-1"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span
+              class="flex flex-col-reverse lg:flex-row items-start lg:items-center gap-2 justify-between"
+            >
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={getCourse}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">No courses completed yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Courses you complete will appear here. We believe in you , finish hard 💪🏾.
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/InProgress.svelte

@@ -0,0 +1,67 @@
+<script>
+  import { goto } from '$app/navigation';
+  import Box from '$lib/components/Box/index.svelte';
+  import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+  import { mockData, courseInProgress } from './store';
+
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
+</script>
+
+<section>
+  {#if courseInProgress.length > 0}
+    <div
+      class="flex items-center justify-center md:justify-start flex-wrap gap-4 dark:text-white mt-2"
+    >
+      {#each courseInProgress as data}
+        <div
+          class="w-80 min-h-[350px] flex items-start justify-start flex-wrap flex-col border rounded mr-2 mb-5 border-gray-200"
+        >
+          <img src={data.src} alt="course" class="w-80 h-[180px] object-cover" />
+
+          <div class="w-full p-3">
+            <p
+              class="line-clamp-2 text-xl lg:text-2xl font-normal text-[#262626] py-1 dark:text-white"
+            >
+              {data.title}
+            </p>
+            <p class="line-clamp-2 text-base text-[#656565] dark:text-white py-1">
+              {data.description}
+            </p>
+            <p class="py-1 text-[#7888B7] dark:text-white">By {data.author}</p>
+            <span class="flex flex-wrap flex-row items-start gap-2 justify-between mt-8">
+              <span>
+                <p>{data.lessons} lessons</p>
+                {#if data.inProgress}
+                  <div class="flex items-center gap-2">
+                    <div class=" relative bg-[#EAEAEA] w-full h-1">
+                      <div class={`absolute top-0 left-0 bg-[#0233BD] h-full ${data.progress} ]`} />
+                    </div>
+                    <p class="text-xs text-[#656565] dark:text-white">{data.progressRate}%</p>
+                  </div>
+                {/if}
+              </span>
+              <PrimaryButton
+                label={data.inProgress ? 'Continue Course' : 'Start Course'}
+                variant={VARIANTS.OUTLINED}
+                className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
+              />
+            </span>
+          </div>
+        </div>
+      {/each}
+    </div>
+  {:else}
+    <Box className="flex flex-col items-center mt-2">
+      <CoursesEmptyIcon />
+      <h3 class="text-center">No course progress yet</h3>
+      <p class="w-[70%] md:w-[35%] text-center">
+        Once you start a course, your progress will reflect here
+      </p>
+    </Box>
+  {/if}
+</section>

src/lib/components/LMS/components/Learning.svelte

@@ -1,52 +1,39 @@
 <script>
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+  import { goto } from '$app/navigation';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import { course } from '$lib/components/Course/store';
   import Box from '$lib/components/Box/index.svelte';
   import CoursesEmptyIcon from '$lib/components/Icons/CoursesEmptyIcon.svelte';
   import { courseInProgress } from './store';
 
-  const mockData = [
-    {
-      title: 'Colorful digital painting',
-      description: 'Learn the basics of figma and start design web apps for the world ...',
-      src: '/painting.png',
-      progress: 'w-[30%]'
-    },
-    {
-      title: 'Photo editing 101',
-      description: 'Learn the different techniques to edit photos using Adobe Lightroom.',
-      src: '/digital.png',
-      progress: 'w-[45%]'
-    }
-  ];
+  const gotoCourse = (title) => {
+    goto(`/courses/${title}`);
+  };
 </script>
 
 <section class="h-full mt-10 mb-20 xl:mt-2">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Currently Learning</p>
-  <Box
-    className="w-full border-2 border-[#EAEAEA]  dark:bg-gray-700 h-[516px] overflow-y-auto gap-10 rounded"
+  <div
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full h-fit xl:h-[516px] p-3"
   >
-    {#if courseInProgress === false}
-      <div class="flex flex-col items-center">
-        <CoursesEmptyIcon />
-        <h3 class="">No courses progress yet</h3>
-        <p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
-      </div>
-    {:else}
-      <div class="w-full h-full flex flex-col justify-start">
-        {#each mockData as data, index}
+    {#if courseInProgress.length > 0}
+      <div class="w-full h-full xl:h-[516px] flex flex-col justify-start">
+        {#each courseInProgress as data, index}
           <div class="p-5">
             <span class="flex flex-col md:flex-row gap-3 items-start pb-5">
               <img src={data.src} alt="course" class="hidden md:block md:w-[60px] md:h-[60px]" />
               <div class="w-full">
                 <p class="text-base font-semibold dark:text-white">{data.title}</p>
-                <p class="text-xs font-normal text-[#656565] dark:text-white">{data.description}</p>
+                <p class="line-clamp-2 text-xs font-normal text-[#656565] dark:text-white">
+                  {data.description}
+                </p>
               </div>
               <PrimaryButton
-                label="continue"
+                label="Continue"
                 variant={VARIANTS.OUTLINED}
                 className="rounded-none text-[#0233BD]"
+                onClick={() => gotoCourse(data.title)}
               />
             </span>
             <div class="relative bg-[#EAEAEA] w-full h-1">
@@ -55,6 +42,12 @@
           </div>
         {/each}
       </div>
+    {:else}
+      <div class="flex flex-col items-center">
+        <CoursesEmptyIcon />
+        <h3 class="text-center">No courses progress yet</h3>
+        <p class="w-[75%] text-center">Once you start a course, your progress will reflect here</p>
+      </div>
     {/if}
-  </Box>
+  </div>
 </section>

src/lib/components/LMS/components/Student.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { InlineCalendar, Datepicker } from 'svelte-calendar';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
-  import Box from '$lib/components/Box/index.svelte';
   import { isMobile } from '$lib/utils/store/useMobile';
   import { formatDate } from '$lib/utils/functions/routes/dashboard';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -10,8 +9,8 @@
 
   const theme = {
     calendar: {
-      width: '22em',
-      height: '100%',
+      width: '250px',
+      height: '200px',
       shadow: '0px 0px 5px rgba(0, 0, 0, 0.25)',
       colors: {
         background: {
@@ -31,10 +30,10 @@
 <section class="w-full h-full mt-2">
   <p class="text-base font-semibold text-[#040F2D] pb-3 dark:text-white">Your Schedule</p>
 
-  <Box
-    className="p-5 border-2 border-[#EAEAEA]  dark:bg-gray-700 gap-5 rounded w-full h-[516px] overflow-y-auto  flex flex-col justify-start"
+  <div
+    class="flex items-center flex-col border border-[#EAEAEA] dark:bg-gray-700 rounded w-full h-fit xl:h-[516px] p-3"
   >
-    <div class="w-full hidden xl:flex items-center justify-center">
+    <div class="w-full h-fit hidden xl:flex items-center justify-center">
       <InlineCalendar bind:store {theme} />
     </div>
     {#if $isMobile}
@@ -76,5 +75,5 @@
     {:else}
       <p>No Lesson on this day</p>
     {/if}
-  </Box>
+  </div>
 </section>

src/lib/components/LMS/components/store.js

@@ -1 +1,42 @@
-export const courseInProgress = false;
+export const mockData = [
+  {
+    title: 'Photo editing 101',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    lessons: 8,
+    inProgress: true,
+    completed: false,
+    src: '/digital.svg',
+    progress: 'w-[45%]',
+    progressRate: 45
+  },
+  {
+    title: 'Colorful digital painting',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    inProgress: true,
+    completed: false,
+    lessons: 5,
+    src: '/painting.svg',
+    progress: 'w-[30%]',
+    progressRate: 45
+  },
+  {
+    title: 'AI for dummys',
+    description:
+      'Learn the different techniques to edit photos using Adobe Lightroom.Learn the basics of figma and start design web apps for the world ...Learn the basics of figma and start design web apps for the world ...',
+    author: 'Derrick Amenuvue',
+    inProgress: false,
+    completed: false,
+    lessons: 18,
+    src: '/digital.svg',
+    progress: 'w-[45%]',
+    progressRate: 45
+  }
+];
+export const courseInProgress = mockData.filter((course) => course.inProgress);
+export const courseCompleted = mockData.filter((course) => course.completed);
+export const totalCourses = mockData.length;
+export const progressPercentage = Math.round((courseInProgress.length / totalCourses) * 100);

src/lib/components/Tabs/index.svelte

@@ -8,34 +8,52 @@
 <div class="w-full flex flex-col">
   <div class="flex items-center border-b-2 w-full">
     {#each tabs as tab}
-      <button
-        class="relative {currentTab === tab.value
-          ? 'text-blue-700'
-          : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
-        on:click={onChange(tab.value)}
-      >
-        <div class="grid grid-cols-4 gap-3 items-center">
-          {#if tab.icon}
-            <svelte:component this={tab.icon} />
-          {/if}
-          {tab.label}
-          {#if typeof tab.badgeValue === 'number'}
-            <TextChip
-              value={tab.badgeValue}
-              size="sm"
-              shape="rounded-full"
-              className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
-            />
-          {/if}
-        </div>
-
-        <span
-          class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
-          tab.value
-            ? 'w-full'
-            : 'w-0'}"
-        />
-      </button>
+      {#if !tab.icon && !tab.badgeValue}
+        <button
+          class="relative {currentTab === tab.value
+            ? 'text-blue-700'
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-fit mr-8 text-center py-3"
+          on:click={onChange(tab.value)}
+        >
+          <div class="flex items-center justify-center w-full text-center">
+            {tab.label}
+          </div>
+          <span
+            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            tab.value
+              ? 'w-full'
+              : 'w-0'}"
+          />
+        </button>
+      {:else}
+        <button
+          class="relative {currentTab === tab.value
+            ? 'text-blue-700'
+            : 'dark:bg-gray-500 dark:text-white'} dark:bg-transparent font-semibold focus:outline-none w-24 text-left py-3 mr-10"
+          on:click={onChange(tab.value)}
+        >
+          <div class="grid grid-cols-4 gap-3 items-center">
+            {#if tab.icon}
+              <svelte:component this={tab.icon} />
+            {/if}
+            {tab.label}
+            {#if typeof tab.badgeValue === 'number'}
+              <TextChip
+                value={tab.badgeValue}
+                size="sm"
+                shape="rounded-full"
+                className=" bg-gray-300 dark:text-black text-xs absolute right-0 px-2"
+              />
+            {/if}
+          </div>
+          <span
+            class="absolute bottom-0 left-0 h-1 bg-blue-700 transition-all ease-in-out duration-500 {currentTab ===
+            tab.value
+              ? 'w-full'
+              : 'w-0'}"
+          />
+        </button>
+      {/if}
     {/each}
   </div>