Merge branch 'main' into orglandg

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

@@ -1,6 +1,4 @@
 <script>
-  import PageBody from '$lib/components/PageBody/index.svelte';
-  import TextChip from '$lib/components/Chip/Text.svelte';
   import { onMount } from 'svelte';
   import { page } from '$app/stores';
   import { dndzone } from 'svelte-dnd-action';
@@ -11,6 +9,7 @@
   import Calendar from 'carbon-icons-svelte/lib/Calendar.svelte';
   import Video from 'carbon-icons-svelte/lib/Video.svelte';
   import WatsonHealthTextAnnotationToggle from 'carbon-icons-svelte/lib/WatsonHealthTextAnnotationToggle.svelte';
+  import { OverflowMenu, OverflowMenuItem } from 'carbon-components-svelte';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import RoleBasedSecurity from '$lib/components/RoleBasedSecurity/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
@@ -28,6 +27,8 @@
     handleDelete
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import { course, setCourse, group } from '$lib/components/Course/store';
+  import PageBody from '$lib/components/PageBody/index.svelte';
+  import TextChip from '$lib/components/Chip/Text.svelte';
 
   export let data;
   const { courseId } = data;
@@ -135,7 +136,7 @@
       {#each $lessons as lesson (lesson.id)}
         <div
           bind:this={ref}
-          class="sm:h-48 md:h-40 lg:h-32 relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
+          class="sm:min-h-[245px] md:min-h-[100px] lg:min-h-[190px] relative m-auto rounded-md border-2 border-gray-200 py-3 px-5 mb-4 flex items-center dark:bg-gray-700"
         >
           <div class="mr-5">
             <TextChip
@@ -173,13 +174,18 @@
             <div
               class="flex items-start justify-between flex-col lg:flex-row lg:items-center mt-2 w-4/5"
             >
-              <div class="mb-3 lg:mb-0">
+              <div class="lg:mb-0">
                 {#if lessonEditing === lesson.id}
-                  <Select bind:value={lesson.profile} options={$group.tutors} labelKey="fullname" />
+                  <Select
+                    bind:value={lesson.profile}
+                    options={$group.tutors}
+                    labelKey="fullname"
+                    className="sm:my-1 w-[100%]"
+                  />
                 {:else if !lesson.profile}
-                  <p class="dark:text-white ml-2 text-sm">No tutor added</p>
+                  <p class="dark:text-white ml-2 text-sm mb-3">No tutor added</p>
                 {:else}
-                  <a href="." class="flex items-center hover:underline">
+                  <a href="." class="flex items-center hover:underline mb-2">
                     <img
                       alt="Placeholder"
                       class="block rounded-full"
@@ -194,20 +200,22 @@
                 {/if}
               </div>
 
-              <div class="flex items-center mb-3 lg:mb-0">
+              <div class="flex items-center lg:mb-0">
                 {#if lessonEditing === lesson.id}
                   <input
                     type="date"
                     name="lesson-date-picker"
-                    class="p-2 m-2 rounded-md w-40"
+                    class="p-2 my-2 rounded-md sm:w-[179px]"
                     value={formatDate(lesson.lesson_at)}
                     on:input={(e) => (lesson.lesson_at = e.target.value)}
                   />
                 {:else}
-                  <Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
-                  <p class="dark:text-white text-sm ml-2">
-                    {new Date(lesson.lesson_at).toDateString()}
-                  </p>
+                  <div class="flex mb-2">
+                    <Calendar size={20} class="carbon-icon text-gray-400 dark:text-white" />
+                    <p class="dark:text-white text-sm ml-2">
+                      {new Date(lesson.lesson_at).toDateString()}
+                    </p>
+                  </div>
                 {/if}
               </div>
 
@@ -216,24 +224,26 @@
                   <TextField
                     bind:value={lesson.call_url}
                     autofocus={true}
-                    className="w-40"
+                    className="w-[179px]"
                     placeholder="https://meet.google.com/mga-dsjs-fmb"
                   />
                 {:else}
-                  <Video size={20} class="carbon-icon text-gray-400 dark:text-white" />
-                  <a
-                    class="text-sm ml-2 text-blue-600"
-                    href={lesson.call_url || '#'}
-                    target="_blank"
-                  >
-                    {lesson.call_url ? 'Join lesson' : 'No link'}
-                  </a>
+                  <div class="flex">
+                    <Video size={20} class="carbon-icon text-gray-400 dark:text-white ml-0.5" />
+                    <a
+                      class="text-sm ml-2 text-blue-600"
+                      href={lesson.call_url || '#'}
+                      target="_blank"
+                    >
+                      {lesson.call_url ? 'Join lesson' : 'No link'}
+                    </a>
+                  </div>
                 {/if}
               </div>
             </div>
 
-            <div class="flex flex-row absolute bottom-10 right-10">
-              <div class="success">
+            <div class="flex flex-row absolute sm:bottom-20 bottom-10 right-10">
+              <div class="success hidden md:block">
                 <IconButton
                   disabled={isStudent}
                   onClick={() => {
@@ -256,7 +266,7 @@
               </div>
 
               <RoleBasedSecurity allowedRoles={[1, 2]}>
-                <div class="">
+                <div class="hidden md:block">
                   {#if lessonEditing === lesson.id}
                     <IconButton
                       onClick={() => {
@@ -278,12 +288,37 @@
               </RoleBasedSecurity>
 
               <RoleBasedSecurity allowedRoles={[1, 2]}>
-                <div class="">
+                <div class="hidden md:block">
                   <IconButton onClick={handleDelete(lesson.id)}>
                     <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                   </IconButton>
                 </div>
               </RoleBasedSecurity>
+
+              <RoleBasedSecurity allowedRoles={[1, 2]}>
+                <OverflowMenu size="xl" class="block md:hidden absolute right-10 bottom-4 pl-4">
+                  <OverflowMenuItem
+                    disabled={isStudent}
+                    text={lesson.is_unlocked ? 'Lock' : 'Unlock'}
+                    on:click={() => {
+                      lesson.is_unlocked = !lesson.is_unlocked;
+                      handleSaveLesson(lesson, $course.id);
+                    }}
+                  />
+                  <OverflowMenuItem
+                    text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
+                    on:click={() => {
+                      if (lessonEditing === lesson.id) {
+                        lessonEditing = null;
+                        handleSaveLesson(lesson, $course.id);
+                      } else {
+                        lessonEditing = lesson.id;
+                      }
+                    }}
+                  />
+                  <OverflowMenuItem danger text="Delete" on:click={handleDelete(lesson.id)} />
+                </OverflowMenu>
+              </RoleBasedSecurity>
             </div>
           </div>
         </div>

src/routes/lms/+page.svelte

@@ -1,7 +1,11 @@
 <script>
   import Student from '$lib/components/LMS/components/Student.svelte';
   import Learning from '$lib/components/LMS/components/Learning.svelte';
-  import { courseInProgress } from '$lib/components/LMS/components/store';
+  import {
+    courseInProgress,
+    totalCourses,
+    progressPercentage
+  } from '$lib/components/LMS/components/store';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
   import Box from '$lib/components/Box/index.svelte';
   import { VARIANTS } from '$lib/components/PrimaryButton/constants';
@@ -12,58 +16,62 @@
   <title>Student Dashboard - ClassroomIO</title>
 </svelte:head>
 
-<section class="m-5 w-[calc(100vw - 300px)] h-full gap-5">
-  <h1 class="text-3xl font-semibold">Dashboard</h1>
-  <div
-    class="w-full h-fit lg:h-[265px] flex items-center justify-between p-2 md:p-5 lg:p-10 rounded-md bg-[#042172] my-2"
-  >
-    <span>
-      <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
-        Today is another day to bring you closer to your learning goals. Don’t give up, the more you
-        learn the better you get.
-      </p>
-      <PrimaryButton
-        label="Start learning"
-        variant={VARIANTS.CONTAINED_WHITE}
-        className="bg-white text-blue-800"
-        onClick={() => goto('/lms/mylearning')}
-      />
-    </span>
-    <img
-      src="/images/student-learning.svg"
-      alt="student Learning Pictogram"
-      class="hidden md:block md:w-20 md:h-16 lg:w-[275px] lg:h-[205px]"
-    />
-  </div>
-  <main class="flex w-full h-full flex-col xl:flex-row gap-5">
-    <div class="w-full h-full">
-      <Student />
-    </div>
-
-    <div class="w-full h-full">
-      <Learning />
-    </div>
-    <Box
-      className="w-full xl:w-[400px] h-[516px] overflow-y-auto bg-[#F5F8FE] dark:bg-gray-700 flex items-center justify-center my-20 xl:mt-11 p-2"
+<section class="max-w-[1240px] gap-5 mx-auto">
+  <div class="m-5">
+    <h1 class="text-3xl font-semibold">Dashboard</h1>
+    <div
+      class="w-full h-fit lg:h-[265px] flex md:items-center justify-between flex-col-reverse md:flex-row p-5 lg:p-10 rounded-md bg-[#042172] my-2"
     >
-      <div
-        class="w-full h-full flex flex-col md:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
-      >
-        <div>
-          <img src="/images/target.svg" alt="student Learning score" />
-        </div>
-        <span class="text-center xl:text-start">
-          <p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
-          {#if courseInProgress}
-            <p class="text-xs font-normal text-[#656565] dark:text-white">2/15 lessons completed</p>
-          {:else}
-            <p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
-          {/if}
-        </span>
-        <h1 class="text-5xl md:text-7xl font-bold text-[#262626] dark:text-white my-0">
-          {courseInProgress ? 1 : 0} %
-        </h1>
+      <span>
+        <p class="w-full md:w-[75%] lg:w-[80%] text-white text-xs lg:text-xl font-normal mb-5">
+          Today is another day to bring you closer to your learning goals. Don’t give up, the more
+          you learn the better you get.
+        </p>
+        <PrimaryButton
+          label="Start learning"
+          variant={VARIANTS.CONTAINED_WHITE}
+          className="bg-white text-blue-800"
+          onClick={() => goto('/lms/mylearning')}
+        />
+      </span>
+      <img
+        src="/images/student-learning.svg"
+        alt="student Learning Pictogram"
+        class="w-28 md:block md:w-1/3 lg:w-[275px] lg:h-[205px] mb-3 md:mb-0"
+      />
+    </div>
+    <main class="flex w-full h-full flex-col xl:flex-row xl:gap-5">
+      <div class="w-full h-full">
+        <Student />
       </div>
-    </Box>
-  </main>
+
+      <div class="w-full h-full">
+        <Learning />
+      </div>
+      <div
+        class="flex items-center justify-center border border-[#EAEAEA] dark:bg-gray-700 gap-2 rounded w-full xl:w-[400px] h-fit xl:h-[516px] overflow-y-auto p-3 xl:mt-11"
+      >
+        <div
+          class="w-full h-full flex flex-col sm:flex-row xl:flex-col items-center md:items-center xl:items-start gap-5 md:justify-around"
+        >
+          <div>
+            <img src="/images/target.svg" alt="student Learning score" />
+          </div>
+          <span class="text-center xl:text-start">
+            <p class="text-base font-semibold py-2 text-[#040F2D] dark:text-white">Your Progress</p>
+            {#if courseInProgress.length > 0}
+              <p class="text-xs font-normal text-[#656565] dark:text-white">
+                {courseInProgress.length}/{totalCourses} lessons in progress
+              </p>
+            {:else}
+              <p class="text-xs font-normal text-[#656565] dark:text-white">No lessons started</p>
+            {/if}
+          </span>
+          <h1 class="text-5xl md:text-6xl font-bold text-[#262626] dark:text-white my-0">
+            {progressPercentage} %
+          </h1>
+        </div>
+      </div>
+    </main>
+  </div>
 </section>

src/routes/lms/mylearning/+page.svelte

@@ -1 +1,54 @@
-My Learning
+<script>
+  import TextField from '$lib/components/Form/TextField.svelte';
+
+  import { Search } from 'carbon-components-svelte';
+  import AllLearning from '$lib/components/LMS/components/AllLearning.svelte';
+  import Completed from '$lib/components/LMS/components/Completed.svelte';
+  import InProgress from '$lib/components/LMS/components/InProgress.svelte';
+  import Tabs from '$lib/components/Tabs/index.svelte';
+  import TabContent from '$lib/components/TabContent/index.svelte';
+
+  // let tabs = CONSTANTS.tabs;
+
+  const tabs = [
+    {
+      label: 'All',
+      value: 1
+    },
+    {
+      label: 'In progress',
+      value: 2
+    },
+    {
+      label: 'Complete',
+      value: 3
+    }
+  ];
+  let currentTab = tabs[0].value;
+  const onChange =
+    (tab = 0) =>
+    () =>
+      (currentTab = tab);
+</script>
+
+<section class="max-w-[1240px] mx-auto">
+  <div class="m-2 md:m-5">
+    <div role="searchbox" class=" bg-gray-100 w-full md:w-[60%] lg:w-[30%]">
+      <Search placeholder="Search courses" class="dark:text-black" />
+    </div>
+    <h1 class="text-3xl font-semibold my-4">My Learning</h1>
+    <Tabs {tabs} {currentTab} {onChange}>
+      <slot:fragment slot="content">
+        <TabContent value={tabs[0].value} index={currentTab}>
+          <AllLearning />
+        </TabContent>
+        <TabContent value={tabs[1].value} index={currentTab}>
+          <InProgress />
+        </TabContent>
+        <TabContent value={tabs[2].value} index={currentTab}>
+          <Completed />
+        </TabContent>
+      </slot:fragment>
+    </Tabs>
+  </div>
+</section>

src/routes/lms/reviews/+page.svelte

@@ -1 +0,0 @@
-reviews page

src/routes/org/[slug]/+page.svelte

@@ -207,7 +207,7 @@
     {/each}
   </div>
 
-  <div class="flex flex-wrap">
+  <div class="flex flex-wrap mt-5">
     <!-- Your Schedule -->
     <div>
       <p class="dark:text-white font-bold mb-7">Your Schedule</p>