feat: implement delete confirmation on lesson

classroomio · Dec 3, 2023 · fd43137 · fd43137
1 parent 278354f
commit fd43137
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 26 deletions.
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte b/apps/dashboard/src/lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte
@@ -0,0 +1,43 @@
+<script lang="ts">
+  import Modal from '$lib/components/Modal/index.svelte';
+  import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
+
+  import { VARIANTS } from '$lib/components/PrimaryButton/constants';
+
+  export let lessonTitle: string;
+  export let openDeleteModal = false;
+  export let deleteLesson = () => {};
+
+  async function handleDelete() {
+    deleteLesson();
+    openDeleteModal = false;
+  }
+</script>
+
+<Modal
+  onClose={() => (openDeleteModal = false)}
+  bind:open={openDeleteModal}
+  width="w-96"
+  modalHeading="Delete"
+>
+  <div>
+    <h1 class="dark:text-white text-lg">
+      Are you sure you want to delete: <strong>{lessonTitle}</strong>?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="No"
+        onClick={() => (openDeleteModal = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-3"
+        variant={VARIANTS.OUTLINED}
+        label="Yes"
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>
diff --git a/apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts b/apps/dashboard/src/lib/components/Course/components/Lesson/store/lessons.ts
@@ -2,6 +2,7 @@ import { writable } from 'svelte/store';
 import type { Writable, Updater } from 'svelte/store';
 import { createLesson, updateLesson, deleteLesson } from '$lib/utils/services/courses';
 import type { Lesson, Course, LessonPage, LessonComment } from '$lib/utils/types';
+import { snackbar } from '$lib/components/Snackbar/store';
 
 export const uploadCourseVideoStore = writable({
   isModalOpen: false
@@ -43,20 +44,20 @@ export function handleAddLesson() {
   }) as Updater<any>);
 }
 
-export function handleDelete(lessonId: Lesson['id']) {
-  return async () => {
-    // Need to implement soft delete
-    if (lessonId) {
-      const { error } = await deleteLesson(lessonId);
+export async function handleDelete(lessonId: Lesson['id'] | undefined) {
+  // Need to implement soft delete
+  if (lessonId) {
+    const { error } = await deleteLesson(lessonId);
 
-      if (error) {
-        return alert('Please delete all exercises first');
-      }
+    if (error) {
+      snackbar.error(error.message);
+      return console.error('Error deleting course', error);
     }
 
     lessons.update((_lessons) => _lessons.filter((lesson) => lesson.id !== lessonId));
-    console.log(`lessonId`, lessonId);
-  };
+  }
+
+  console.log(`lessonId`, lessonId);
 }
 
 export async function handleSaveLesson(lesson: Lesson, course_id: Course['id']) {

diff --git a/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte b/apps/dashboard/src/routes/courses/[id]/lessons/+page.svelte
@@ -1,5 +1,4 @@
-<script>
-  import { onMount } from 'svelte';
+<script lang="ts">
   import { page } from '$app/stores';
   import { dndzone } from 'svelte-dnd-action';
   import UnlockedIcon from 'carbon-icons-svelte/lib/Unlocked.svelte';
@@ -20,6 +19,7 @@
   import { updateLesson } from '$lib/utils/services/courses';
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { profile } from '$lib/utils/store/user';
+  import type { Lesson } from '$lib/utils/types';
   import {
     lessons,
     handleSaveLesson,
@@ -31,16 +31,20 @@
   import Avatar from '$lib/components/Apps/components/Poll/components/Avatar.svelte';
   import AddLessonModal from '$lib/components/Course/components/Lesson/AddLessonModal.svelte';
   import DateField from '$lib/components/Form/Date.svelte';
+  import DeleteLessonConfirmation from '$lib/components/Course/components/Lesson/DeleteLessonConfirmation.svelte';
 
   export let data;
 
-  let lessonEditing;
+  let lessonEditing: string | undefined;
+  let lessonToDelete: Lesson | undefined;
   let isStudent = true;
   let openModal = false;
+  let openDeleteModal = false;
 
   const flipDurationMs = 300;
 
-  function formatDate(date) {
+  function formatDate(date: string | undefined) {
+    if (!date) return '';
     const d = new Date(date);
 
     const ye = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(d);
@@ -54,16 +58,16 @@
     openModal = true;
   }
 
-  function handleDndConsider(e) {
+  function handleDndConsider(e: any) {
     $lessons = e.detail.items;
   }
 
-  function handleDndFinalize(e) {
+  function handleDndFinalize(e: any) {
     const prevLessonsByOrder = $lessons.reduce((acc, l) => ({ ...acc, [l.id]: l.order }), {});
     $lessons = e.detail.items;
 
     // Only update the lesson order that changed
-    e.detail.items.forEach((item, index) => {
+    e.detail.items.forEach((item: { id: string }, index: number) => {
       const order = index + 1;
 
       if (order !== prevLessonsByOrder[item.id]) {
@@ -75,7 +79,7 @@
     });
   }
 
-  function getLessonOrder(id) {
+  function getLessonOrder(id: string) {
     const index = $lessons.findIndex((lesson) => lesson.id === id);
 
     if (index < 9) {
@@ -96,6 +100,12 @@
 
 <AddLessonModal {isStudent} bind:openModal />
 
+<DeleteLessonConfirmation
+  bind:openDeleteModal
+  lessonTitle={lessonToDelete?.title || ''}
+  deleteLesson={() => handleDelete(lessonToDelete?.id)}
+/>
+
 <CourseContainer bind:isStudent bind:courseId={data.courseId}>
   <PageNav title="Lessons">
     <div slot="widget">
@@ -136,7 +146,7 @@
 
             <div class="w-4/5">
               {#if lessonEditing === lesson.id}
-                <TextField bind:value={lesson.title} autofocus={true} className="max-w-lg" />
+                <TextField bind:value={lesson.title} autoFocus={true} className="max-w-lg" />
               {:else}
                 <h3 class="dark:text-white text-xl m-0 flex items-center">
                   <a
@@ -196,7 +206,7 @@
                     <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()}
+                        {new Date(lesson.lesson_at || '').toDateString()}
                       </p>
                     </div>
                   {/if}
@@ -206,7 +216,7 @@
                   {#if lessonEditing === lesson.id}
                     <TextField
                       bind:value={lesson.call_url}
-                      autofocus={true}
+                      autoFocus={true}
                       className="w-[179px]"
                       placeholder="https://meet.google.com/mga-dsjs-fmb"
                     />
@@ -234,10 +244,11 @@
                       handleSaveLesson(lesson, $course.id);
                     }}
                     toolTipProps={isStudent
-                      ? {}
+                      ? undefined
                       : {
                           title: `Click to ${lesson.is_unlocked ? 'lock' : 'unlock'}`,
-                          direction: 'left'
+                          direction: 'left',
+                          hotkeys: []
                         }}
                   >
                     {#if lesson.is_unlocked}
@@ -253,7 +264,7 @@
                     {#if lessonEditing === lesson.id}
                       <IconButton
                         onClick={() => {
-                          lessonEditing = null;
+                          lessonEditing = undefined;
                           handleSaveLesson(lesson, $course.id);
                         }}
                       >
@@ -272,7 +283,12 @@
 
                 <RoleBasedSecurity allowedRoles={[1, 2]}>
                   <div class="hidden md:block">
-                    <IconButton onClick={handleDelete(lesson.id)}>
+                    <IconButton
+                      onClick={() => {
+                        lessonToDelete = lesson;
+                        openDeleteModal = true;
+                      }}
+                    >
                       <TrashCanIcon size={24} class="carbon-icon dark:text-white" />
                     </IconButton>
                   </div>
@@ -293,7 +309,7 @@
                         text={lessonEditing === lesson.id ? 'Save' : 'Edit'}
                         on:click={() => {
                           if (lessonEditing === lesson.id) {
-                            lessonEditing = null;
+                            lessonEditing = undefined;
                             handleSaveLesson(lesson, $course.id);
                           } else {
                             lessonEditing = lesson.id;