feat: improve self paced lesson card (#344)

* finished the self paced card

* made the reorder for both course type

* added translations

* chore: refactor to positive naming and not negative

* ux improvements

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

apps/dashboard/src/lib/utils/translations/de.json

@@ -743,11 +743,16 @@
           "edit": "Bearbeiten",
           "delete": "Löschen",
           "lock": "Sperren",
-          "unlock": "Freischalten"
+          "unlock": "Freischalten",
+          "start_reorder": "Neu anordnen",
+          "end_reorder": "Nachbestellung beenden"
         },
         "disabled": "Funktion ist deaktiviert",
         "next": "Nächste",
-        "prev": "Vorher"
+        "prev": "Vorher",
+        "drag": "Ziehen Sie eine Karte, um sie neu anzuordnen",
+        "no_lesson": "Noch kein Unterricht",
+        "share_your_knowledge": "Teilen Sie Ihr Wissen mit der Welt, indem Sie ansprechende Lektionen erstellen. Klicken Sie zunächst auf die Schaltfläche „Hinzufügen“."
       },
       "news_feed": {
         "heading": "Neuigkeiten",

apps/dashboard/src/lib/utils/translations/en.json

@@ -494,8 +494,13 @@
 
       "lessons": {
         "heading": "Lessons",
+        "drag": "drag a card to reorder",
+        "no_lesson": "No lessons yet",
+        "share_your_knowledge": "Share your knowledge with the world by creating engaging lessons. Start by clicking on the Add button.",
         "add_lesson": {
           "button_title": "Add",
+          "start_reorder": "Reorder",
+          "end_reorder": "End Reorder",
           "modal_heading": "Add New Lesson",
           "lesson_title": "Lesson Title",
           "click_to": "Click to",

apps/dashboard/src/lib/utils/translations/es.json

@@ -743,11 +743,16 @@
           "edit": "Editar",
           "delete": "Borrar",
           "lock": "Cerrar",
-          "unlock": "desbloquear"
+          "unlock": "desbloquear",
+          "start_reorder": "Reordenar",
+          "end_reorder": "Finalizar reorden"
         },
         "disabled": "La característica está deshabilitada",
         "next": "Próximo",
-        "prev": "Anterior"
+        "prev": "Anterior",
+        "drag": "arrastra una tarjeta para reordenar",
+        "no_lesson": "Aún no hay lecciones",
+        "share_your_knowledge": "Comparta sus conocimientos con el mundo creando lecciones interesantes. Comience haciendo clic en el botón Agregar."
       },
       "news_feed": {
         "heading": "Noticias",

apps/dashboard/src/lib/utils/translations/fr.json

@@ -743,11 +743,16 @@
           "edit": "Modifier",
           "delete": "Supprimer",
           "lock": "Verrouillage",
-          "unlock": "Ouvrir"
+          "unlock": "Ouvrir",
+          "start_reorder": "Réorganiser",
+          "end_reorder": "Terminer la réapprovisionnement"
         },
         "disabled": "La fonctionnalité est désactivée",
         "next": "Suivant",
-        "prev": "Précédent"
+        "prev": "Précédent",
+        "drag": "faites glisser une carte pour réorganiser",
+        "no_lesson": "Pas encore de cours",
+        "share_your_knowledge": "Partagez vos connaissances avec le monde en créant des leçons engageantes. Commencez par cliquer sur le bouton Ajouter."
       },
       "news_feed": {
         "heading": "Fil d'actualité",

apps/dashboard/src/lib/utils/translations/hi.json

@@ -743,11 +743,16 @@
           "edit": "संपादन करना",
           "delete": "मिटाना",
           "lock": "ताला",
-          "unlock": "अनलॉक"
+          "unlock": "अनलॉक",
+          "start_reorder": "पुन: व्यवस्थित करें",
+          "end_reorder": "पुनः क्रम समाप्त करें"
         },
         "disabled": "सुविधा अक्षम है",
         "next": "अगला",
-        "prev": "पिछला"
+        "prev": "पिछला",
+        "drag": "पुनः व्यवस्थित करने के लिए कार्ड खींचें",
+        "no_lesson": "अभी तक कोई सबक नहीं",
+        "share_your_knowledge": "आकर्षक पाठ बनाकर अपना ज्ञान दुनिया के साथ साझा करें। ऐड बटन पर क्लिक करके प्रारंभ करें।"
       },
       "news_feed": {
         "heading": "समाचार फ़ीड",

apps/dashboard/src/lib/utils/translations/pt.json

@@ -743,11 +743,16 @@
           "edit": "Editar",
           "delete": "Excluir",
           "lock": "Trancar",
-          "unlock": "Desbloquear"
+          "unlock": "Desbloquear",
+          "start_reorder": "Reordenar",
+          "end_reorder": "Finalizar novo pedido"
         },
         "disabled": "O recurso está desativado",
         "next": "Próximo",
-        "prev": "Anterior"
+        "prev": "Anterior",
+        "drag": "arraste um cartão para reordenar",
+        "no_lesson": "Ainda não há aulas",
+        "share_your_knowledge": "Compartilhe seu conhecimento com o mundo criando aulas envolventes. Comece clicando no botão Adicionar."
       },
       "news_feed": {
         "heading": "Notícias",

apps/dashboard/src/lib/utils/translations/ru.json

@@ -743,11 +743,16 @@
           "edit": "Редактировать",
           "delete": "Удалить",
           "lock": "Замок",
-          "unlock": "Разблокировать"
+          "unlock": "Разблокировать",
+          "start_reorder": "Изменение порядка",
+          "end_reorder": "Завершить изменение порядка"
         },
         "disabled": "Функция отключена",
         "next": "Следующий",
-        "prev": "Предыдущий"
+        "prev": "Предыдущий",
+        "drag": "перетащите карточку, чтобы изменить порядок",
+        "no_lesson": "Уроков пока нет",
+        "share_your_knowledge": "Поделитесь своими знаниями со всем миром, создавая увлекательные уроки. Начните с нажатия кнопки «Добавить»."
       },
       "news_feed": {
         "heading": "Новостная лента",

apps/dashboard/src/lib/utils/translations/vi.json

@@ -743,11 +743,16 @@
           "edit": "Biên tập",
           "delete": "Xóa bỏ",
           "lock": "Khóa",
-          "unlock": "Mở khóa"
+          "unlock": "Mở khóa",
+          "start_reorder": "Sắp xếp lại",
+          "end_reorder": "Kết thúc sắp xếp lại"
         },
         "disabled": "Tính năng bị vô hiệu hóa",
         "next": "Kế tiếp",
-        "prev": "Trước đó"
+        "prev": "Trước đó",
+        "drag": "kéo thẻ để sắp xếp lại",
+        "no_lesson": "Chưa có bài học nào",
+        "share_your_knowledge": "Chia sẻ kiến ​​thức của bạn với thế giới bằng cách tạo ra những bài học hấp dẫn. Bắt đầu bằng cách nhấp vào nút Thêm."
       },
       "news_feed": {
         "heading": "Nguồn cấp tin tức",

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

@@ -14,7 +14,7 @@
   } from '$lib/components/Course/components/Lesson/store/lessons';
   import PageBody from '$lib/components/PageBody/index.svelte';
   import { globalStore } from '$lib/utils/store/app';
-
+  import ScreenMap from 'carbon-icons-svelte/lib/ScreenMap.svelte';
   import NewLessonModal from '$lib/components/Course/components/Lesson/NewLessonModal.svelte';
   import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
   import { handleAddLessonWidget } from '$lib/components/Course/components/Navigation/store';
@@ -30,6 +30,7 @@
   import { t } from '$lib/utils/functions/translations';
   import { goto } from '$app/navigation';
   import { COURSE_TYPE } from '$lib/utils/types';
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants.js';
 
   export let data;
 
@@ -39,6 +40,7 @@
   let lessonToDelete: Lesson | undefined;
   let openDeleteModal: boolean = false;
   let isFetching: boolean = false;
+  let reorder = false;
 
   const flipDurationMs = 300;
 
@@ -124,6 +126,7 @@
 
   $: shouldGoToNextLesson = query.get('next') === 'true';
   $: shouldGoToNextLesson && onNextQuery($lessons);
+  $: isLiveClass = $course.type === COURSE_TYPE.LIVE_CLASS;
 </script>
 
 {#if $handleAddLessonWidget}
@@ -138,13 +141,21 @@
 
 <CourseContainer bind:isFetching bind:courseId={data.courseId}>
   <PageNav title={$t('course.navItem.lessons.heading')}>
-    <div slot="widget">
+    <div slot="widget" class="flex w-full justify-end gap-2">
       <RoleBasedSecurity allowedRoles={[1, 2]}>
         <PrimaryButton
           label={$t('course.navItem.lessons.add_lesson.button_title')}
           onClick={addLesson}
           isDisabled={!!lessonEditing}
         />
+        <PrimaryButton
+          label={$t(
+            `course.navItem.lessons.add_lesson.${reorder ? 'end_reorder' : 'start_reorder'}`
+          )}
+          variant={VARIANTS.OUTLINED}
+          onClick={() => (reorder = !reorder)}
+          isDisabled={!!lessonEditing}
+        />
       </RoleBasedSecurity>
     </div>
   </PageNav>
@@ -154,20 +165,24 @@
       <Box className="w-full lg:w-11/12 lg:px-4 m-auto">
         <div class="flex flex-col items-center justify-between">
           <img src="/images/empty-lesson-icon.svg" alt="Lesson" class="mx-auto my-2.5" />
-          <h2 class="my-1.5 text-xl font-normal">No lessons yet</h2>
+          <h2 class="my-1.5 text-xl font-normal">{$t('course.navItem.lessons.no_lesson')}</h2>
           <p class="text-center text-sm text-slate-500">
-            Share your knowledge with the world by creating engaging lessons. Start by clicking on
-            the Add button.
+            {$t('course.navItem.lessons.share_your_knowledge')}
           </p>
         </div>
       </Box>
     {:else if $lessons.length}
+      {#if reorder}
+        <p class="text-gray-400 text-center dark:text-white italic text-xs">
+          {$t('course.navItem.lessons.drag')}
+        </p>
+      {/if}
       <section
         class="m-auto w-full p-3 lg:w-11/12 lg:px-4"
         use:dndzone={{
           items: $lessons,
           flipDurationMs,
-          dragDisabled: $globalStore.isStudent,
+          dragDisabled: $globalStore.isStudent || !reorder,
           dropTargetStyle: {
             border: '2px #1d4ed8 solid',
             'border-style': 'dashed'
@@ -178,7 +193,9 @@
       >
         {#each $lessons as lesson (lesson.id)}
           <div
-            class="relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 border-gray-200 dark:border-neutral-600 p-5 dark:bg-neutral-800"
+            class={`relative m-auto mb-4 flex max-w-xl items-center rounded-md border-2 ${
+              reorder ? 'border-primary-400' : 'border-gray-200'
+            } border-gray-200 dark:border-neutral-600 p-5 dark:bg-neutral-800`}
           >
             <!-- Number Chip -->
             <div class="mr-5">
@@ -217,7 +234,7 @@
               {/if}
 
               <!-- Lesson Educator -->
-              {#if $course.type === COURSE_TYPE.LIVE_CLASS}
+              {#if isLiveClass}
                 <div
                   class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
                 >
@@ -290,6 +307,19 @@
                     {/if}
                   </div>
                 </div>
+              {:else}
+                <div
+                  class="mt-2 flex w-4/5 flex-col items-start justify-between lg:flex-row lg:items-center"
+                >
+                  <!-- Lesson Length -->
+                  <div class="mb-3 flex items-center lg:mb-0">
+                    <ScreenMap size={20} class="carbon-icon dark:text-white" />
+                    <p class="ml-2 text-sm text-gray-500 dark:text-white">
+                      {lesson?.totalExercises ? lesson?.totalExercises?.map((c) => c.count) : 0}
+                      {$t('exercises.heading')}
+                    </p>
+                  </div>
+                </div>
               {/if}
             </div>