fix(dashboard): editing and backing out should not update the card

dashboard/src/lib/group/Body.svelte

@@ -143,9 +143,9 @@
 <Link to={getGroupPageUrl(true)}><button class="link-button button-right btn btn-secondary" style={isPublic ? "float: none !important; margin-left: 0;" : ""} tabindex={-1} aria-label="randomize group members">Randomize group</button></Link>
 
 {:else if editMode}
-<Edit on:deletion bind:group bind:editMode />
+<Edit on:update on:deletion bind:group bind:editMode />
 {:else if memberMode}
-    <MemberEdit bind:group bind:memberMode bind:members />
+    <MemberEdit on:updateGroupMembers bind:group bind:memberMode bind:members />
 {/if}
 </CardBody>
 

dashboard/src/lib/group/Edit.svelte

@@ -23,6 +23,10 @@
         dispatch('deletion', group.id);
     }
 
+    function update(group: Group) {
+        dispatch('update', group);
+    }
+
     async function submit() {
         let data = input;
         err = [];
@@ -45,7 +49,7 @@
         loading = true;
         try {
             let res = await api().groups(group.id).patch({data});
-            group = {...group, ...res};
+            update({...group, ...res});
             err = [];
             success = true;
             loading = false;

dashboard/src/lib/list/CardsList.svelte

@@ -129,9 +129,9 @@
             <Collapse isOpen={isOpenArray[indexStart + index]}>
                 <CardBody>
                     {#if itemType === "member"}
-                    <MemberBody on:deletion bind:isPublic bind:groups bind:member={item} />
+                    <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />
                     {:else if itemType === "group"}
-                    <GroupBody on:deletion {isPublic} {members} bind:group={item} />
+                    <GroupBody on:update on:deletion bind:isPublic {members} group={item} />
                     {/if}
                 </CardBody>
             </Collapse>
@@ -161,9 +161,9 @@
         </div>
         <CardBody>
             {#if itemType === "member"}
-            <MemberBody on:deletion bind:isPublic bind:groups bind:member={item} />
+            <MemberBody on:update on:deletion bind:isPublic groups={groups} member={item} />
             {:else if itemType === "group"}
-            <GroupBody on:deletion {isPublic} {members} bind:group={item} />
+            <GroupBody on:update on:deletion bind:isPublic {members} group={item} />
             {/if}
         </CardBody>
     </Card>

dashboard/src/lib/list/List.svelte

@@ -96,12 +96,20 @@
     function updateDelete(event: any) {
         if (itemType === "member") {
             members = members.filter(m => m.id !== event.detail);
-            list = members;
         } else if (itemType === "group") {
             groups = groups.filter(g => g.id !== event.detail);
-            list = groups;
         }
     }
+
+    function update(event: any) {
+        console.log(event.detail);
+        if (itemType === "member") {
+            members = members.map(m => m.id === event.detail.id ? m = event.detail : m);
+        } else if (itemType === "group") {
+            groups = groups.map(g => g.id === event.detail.id ? g = event.detail : g);
+        }
+    }
+
 </script>
 
 <ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue bind:currentPage />
@@ -131,6 +139,6 @@
     <NewGroup on:create={addItemToList} />
     {/if}
 {/if}
-<CardsList on:deletion={updateDelete} bind:list={slicedList} bind:groups bind:members isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} />
+<CardsList on:update={update} on:deletion={updateDelete} list={slicedList} groups={groups} members={members} isPublic={isPublic} itemType={itemType} itemsPerPage={itemsPerPage} currentPage={currentPage} fullLength={list.length} />
 <ListPagination bind:currentPage {pageAmount} />
 {/if}

dashboard/src/lib/member/Body.svelte

@@ -187,8 +187,8 @@
     <Link to={getSystemPageUrl()}><Button style="flex: 0; {!isPublic && "float: right;"}" color="primary" tabindex={-1} aria-label="view member's system">View system</Button></Link>
     {/if}
     {:else if editMode}
-        <Edit on:deletion bind:member bind:editMode />
+        <Edit on:update on:deletion bind:member bind:editMode />
     {:else if groupMode}
-        <GroupEdit bind:member bind:groups bind:groupMode />
+        <GroupEdit on:updateMemberGroups bind:member bind:groups bind:groupMode />
     {/if}
     </CardBody>

dashboard/src/lib/member/Edit.svelte

@@ -16,7 +16,7 @@
     let err: string[] = [];
     let success = false;
 
-    let input: Member = member;
+    let input: Member = JSON.parse(JSON.stringify(member));
 
     const dispatch = createEventDispatcher();
     
@@ -24,6 +24,10 @@
         dispatch('deletion', member.id);
     }
 
+    function update(member: Member) {
+        dispatch('update', member);
+    }
+
     async function submit() {
         let data = input;
         err = [];
@@ -69,7 +73,7 @@
         loading = true;
         try {
             let res = await api().members(member.id).patch({data});
-            member = res;
+            update({...member, ...res});
             success = true;
         } catch (error) {
             console.log(error);