From 6efcbf68438b84f92bb205fcf8809565ff5bf980 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Mon, 13 Jun 2022 11:29:02 +0200
Subject: [PATCH] feat: add delete btn & modal

---
 .../[project]/users/teams/[team]/members.svelte  | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/routes/console/[project]/users/teams/[team]/members.svelte b/src/routes/console/[project]/users/teams/[team]/members.svelte
index d0deeddc8..fc34b23a0 100644
--- a/src/routes/console/[project]/users/teams/[team]/members.svelte
+++ b/src/routes/console/[project]/users/teams/[team]/members.svelte
@@ -19,13 +19,16 @@
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { memberships } from './store';
     import CreateMember from './_createMember.svelte';
+    import DeleteMembership from './_deleteMembership.svelte';
 
     const getAvatar = (name: string) => sdkForProject.avatars.getInitials(name, 40, 40).toString();
     const project = $page.params.project;
 
     let showCreate = false;
+    let showDelete = false;
     let search = '';
     let offset: number = null;
+    let selectedMembership: Models.Membership;
 
     const limit = 5;
 
@@ -59,6 +62,7 @@
                 <TableCellHead>Name</TableCellHead>
                 <TableCellHead>Role</TableCellHead>
                 <TableCellHead>Joined</TableCellHead>
+                <TableCellHead width={30} />
             </TableHeader>
             <TableBody>
                 {#each $memberships.memberships as membership}
@@ -79,6 +83,17 @@
                         <TableCellText title="Role">{membership.roles}</TableCellText>
                         <TableCellText title="Joined"
                             >{toLocaleDateTime(membership.joined)}</TableCellText>
+                        <TableCellText title="">
+                            <button
+                                class="button is-only-icon is-text"
+                                aria-label="Delete item"
+                                on:click={() => {
+                                    selectedMembership = membership;
+                                    showDelete = true;
+                                }}>
+                                <span class="icon-trash" aria-hidden="true" />
+                            </button>
+                        </TableCellText>
                     </TableRow>
                 {/each}
             </TableBody>
@@ -123,3 +138,4 @@
 </Container>
 
 <CreateMember teamId={$page.params.team} bind:showCreate on:created={memberCreated} />
+<DeleteMembership {selectedMembership} bind:showDelete />