Delete member

src/routes/courses.svelte

@@ -134,15 +134,15 @@
   <title>Courses</title>
 </svelte:head>
 
-<div class="root">
-  <PageNav title="Courses">
+<section class="w-11/12 m-auto">
+  <!-- <PageNav title="Courses">
     <div slot="widget">
       <PrimaryButton
         label="New"
         onClick={() => ($createCourseModal.open = true)}
       />
     </div>
-  </PageNav>
+  </PageNav> -->
 
   <Modal
     onClose={() => ($createCourseModal.open = false)}
@@ -198,13 +198,13 @@
   </Modal>
 
   <Courses />
-</div>
+</section>
 
 <style>
-  .root {
+  /* .root {
     min-width: 600px;
     margin: 0 auto;
     border-left: 1px solid var(--border-color);
     border-right: 1px solid var(--border-color);
-  }
+  } */
 </style>

src/routes/courses/[id]/people.svelte

@@ -1,5 +1,8 @@
 <script context="module">
-  import { fetchCourse } from '../../../utils/services/courses';
+  import {
+    fetchCourse,
+    deleteGroupMember,
+  } from '../../../utils/services/courses';
 
   export async function preload({ params }) {
     return { courseId: params.id };
@@ -9,24 +12,47 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import CourseContainer from '../../../components/CourseContainer/index.svelte';
+  import Delete24 from 'carbon-icons-svelte/lib/Delete24';
   import PageNav from '../../../components/PageNav/index.svelte';
   import PrimaryButton from '../../../components/PrimaryButton/index.svelte';
+  import IconButton from '../../../components/IconButton/index.svelte';
   import PageBody from '../../../components/PageBody/index.svelte';
-  import { setCourseData, course } from '../../../components/Course/store';
+  import {
+    setCourseData,
+    course,
+    group,
+  } from '../../../components/Course/store';
   import InviationModal from '../../../components/Course/components/People/InviationModal.svelte';
-  import { invitationModal } from '../../../components/Course/components/People/store';
+  import DeleteConfirmation from '../../../components/Course/components/People/DeleteConfirmation.svelte';
+  import {
+    invitationModal,
+    deleteMemberModal,
+  } from '../../../components/Course/components/People/store';
   import type { Person } from '../../../components/Course/components/People/types';
-  import { ROLE_LABEL } from '../../../utils/constants/roles';
+  import { ROLE, ROLE_LABEL } from '../../../utils/constants/roles';
+  import { profile } from '../../../utils/store/user';
 
   export let courseId: string = '';
 
   let people: Array<Person> = [];
   let borderBottomGrey = 'border-r-0 border-b border-l-0 border-gray-300';
+  let member: { id?: string; email?: string; profile?: { email: string } } = {};
 
-  function setPeople(group) {
-    if (!group) return;
-    people = (group.people || []).sort((a, b) => a.role_id - b.role_id);
-    console.log(`group changed`, group);
+  // function setPeople(people: Array<Person>) {
+  //   if (!Array.isArray(people)) return;
+
+  //   people = (people || []).sort((a, b) => a.role_id - b.role_id);
+  //   console.log(`people changed`, people);
+  // }
+
+  async function deletePerson() {
+    console.log(`member`, member);
+    console.log(`$group.people`, $group.people);
+    $group.people = $group.people.filter(
+      (person: { id: string }) => person.id !== member.id
+    );
+
+    await deleteGroupMember(member.id);
   }
 
   onMount(async () => {
@@ -35,10 +61,14 @@
     setCourseData(data);
   });
 
-  $: setPeople($course.group);
+  $: people = ($group.people || []).sort((a, b) => a.role_id - b.role_id);
 </script>
 
 <InviationModal />
+<DeleteConfirmation
+  email={member.email || (member.profile && member.profile.email)}
+  {deletePerson}
+/>
 
 <CourseContainer>
   <PageNav title="People" disableSticky={true}>
@@ -57,14 +87,15 @@
       >
         <span class="mr-2">No</span>
         <!-- <span class="flex-grow" /> -->
-        <p class="text-lg w-1/4">Name</p>
-        <p class="text-lg w-1/4">Email</p>
-        <p class="text-lg w-1/4 ">Role</p>
+        <p class="text-lg text-center w-1/4">Name</p>
+        <p class="text-lg text-center w-1/4">Email</p>
+        <p class="text-lg text-center w-1/4 ">Role</p>
+        <p class="text-lg w-20 text-center" />
       </div>
 
       {#each people as person, index}
         <div
-          class="flex items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
+          class="flex text-center relative items-center justify-evenly p-3 cursor-pointer {borderBottomGrey} hover:bg-gray-100"
         >
           <span class="mr-2">{index + 1}</span>
           <!-- <span class="flex-grow" /> -->
@@ -90,6 +121,19 @@
             </a>
           {/if}
           <p class="text-lg w-1/4 ">{ROLE_LABEL[person.role_id]}</p>
+
+          <div class="w-20">
+            {#if person.profile && person.profile.id !== $profile.id}
+              <IconButton
+                onClick={() => {
+                  member = person;
+                  $deleteMemberModal.open = true;
+                }}
+              >
+                <Delete24 class="carbon-icon" />
+              </IconButton>
+            {/if}
+          </div>
         </div>
       {/each}
     </div>