Delete member

src/components/Course/components/Lesson/Exercises/index.svelte

@@ -1,5 +1,7 @@
 <script>
   import { onMount } from 'svelte';
+  import AudioConsole32 from 'carbon-icons-svelte/lib/AudioConsole32';
+  import Box from '../../../../Box/index.svelte';
   import PrimaryButton from '../../../../PrimaryButton/index.svelte';
   import PageBody from '../../../../PageBody/index.svelte';
   import Modal from '../../../../Modal/index.svelte';
@@ -144,6 +146,11 @@
           <h3 class="text-xl">{exercise.title}</h3>
           <p class="mt-4 text-sm">Created Jul 3, 2021</p>
         </a>
+      {:else}
+        <Box>
+          <AudioConsole32 class="carbon-icon w-80" />
+          <h3 class="text-3xl text-gray-500">No Exercise Added</h3>
+        </Box>
       {/each}
     </div>
   </PageBody>

src/components/Course/components/Lesson/Materials/constants.js

@@ -1,14 +1,14 @@
 export const tabs = [
   {
-    label: 'Note',
+    label: 'Slide',
     value: 1,
   },
   {
-    label: 'Video',
+    label: 'Note',
     value: 2,
   },
   {
-    label: 'Slide',
+    label: 'Video',
     value: 3,
   },
 ];

src/components/Course/components/Lesson/Materials/index.svelte

@@ -13,7 +13,6 @@
     isLessonDirty,
   } from '../store/lessons';
   import { tabs } from './constants';
-  import { onMount } from 'svelte';
 
   export let mode = MODES.view;
   export let prevMode = null;
@@ -64,6 +63,32 @@
 <Tabs {tabs} {currentTab} {onChange}>
   <slot:fragment slot="content">
     <TabContent value={tabs[0].value} index={currentTab}>
+      {#if mode === MODES.edit}
+        <TextField
+          label="Slide link"
+          bind:value={$lesson.materials.slide_url}
+          onChange={() => ($isLessonDirty = true)}
+        />
+      {:else if $lesson.materials.slide_url}
+        <iframe
+          title="Embeded Slides"
+          src={$lesson.materials.slide_url}
+          frameborder="0"
+          width="100%"
+          height="569"
+          allowfullscreen="true"
+          mozallowfullscreen="true"
+          webkitallowfullscreen="true"
+        />
+      {:else}
+        <Box>
+          <h3 class="text-3xl text-gray-500">No slide added</h3>
+          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
+        </Box>
+      {/if}
+    </TabContent>
+
+    <TabContent value={tabs[1].value} index={currentTab}>
       {#if mode === MODES.edit}
         <EditContent
           writeLabel="Note"
@@ -80,7 +105,8 @@
         </Box>
       {/if}
     </TabContent>
-    <TabContent value={tabs[1].value} index={currentTab}>
+
+    <TabContent value={tabs[2].value} index={currentTab}>
       {#if mode === MODES.edit}
         <TextField
           label="Youtube link"
@@ -108,30 +134,5 @@
         </Box>
       {/if}
     </TabContent>
-    <TabContent value={tabs[2].value} index={currentTab}>
-      {#if mode === MODES.edit}
-        <TextField
-          label="Slide link"
-          bind:value={$lesson.materials.slide_url}
-          onChange={() => ($isLessonDirty = true)}
-        />
-      {:else if $lesson.materials.slide_url}
-        <iframe
-          title="Embeded Slides"
-          src={$lesson.materials.slide_url}
-          frameborder="0"
-          width="100%"
-          height="569"
-          allowfullscreen="true"
-          mozallowfullscreen="true"
-          webkitallowfullscreen="true"
-        />
-      {:else}
-        <Box>
-          <h3 class="text-3xl text-gray-500">No slide added</h3>
-          <img alt="Slide not found" src="/notfound.webp" class="w-80" />
-        </Box>
-      {/if}
-    </TabContent>
   </slot:fragment>
 </Tabs>

src/components/Course/components/People/DeleteConfirmation.svelte

@@ -0,0 +1,43 @@
+<script>
+  import Modal from '../../../Modal/index.svelte';
+  import PrimaryButton from '../../../PrimaryButton/index.svelte';
+
+  import { VARIANTS } from '../../../PrimaryButton/constants';
+  import { deleteMemberModal } from './store';
+
+  export let email;
+  export let deletePerson = () => {};
+
+  async function handleDelete() {
+    deletePerson();
+    $deleteMemberModal.open = false;
+  }
+</script>
+
+<Modal
+  onClose={() => ($deleteMemberModal.open = false)}
+  bind:open={$deleteMemberModal.open}
+  width="w-96"
+  modalHeading="Delete"
+>
+  <div>
+    <h1 class="text-lg">
+      Are you sure you want to delete <strong>{email}</strong>?
+    </h1>
+
+    <div class="mt-5 flex items-center justify-between">
+      <PrimaryButton
+        className="px-6 py-2"
+        variant={VARIANTS.OUTLINED}
+        label="No"
+        onClick={() => ($deleteMemberModal.open = false)}
+      />
+      <PrimaryButton
+        className="px-6 py-2"
+        variant={VARIANTS.OUTLINED}
+        label="Yes"
+        onClick={handleDelete}
+      />
+    </div>
+  </div>
+</Modal>

src/components/Course/components/People/InviationModal.svelte

@@ -45,7 +45,6 @@
     }
 
     addGroupMember(membersStack).then(async (membersAdded) => {
-      console.log(`membersAdded`, membersAdded);
       const group = await fetchGroup($course.group.id);
 
       setCourseData(

src/components/Course/components/People/store.js

@@ -1,5 +1,9 @@
 import { writable } from 'svelte/store';
 
+export const deleteMemberModal = writable({
+  open: false,
+});
+
 export const invitationModal = writable({
   open: false,
   tutors: '',

src/components/Course/store.js

@@ -24,6 +24,7 @@ export const group = writable({
   id: null,
   tutors: [],
   students: [],
+  people: [],
 });
 
 export async function setCourseData(data, setLesson = true) {