Allow for editing groups for now

src/lib/group/Body.svelte

@@ -103,8 +103,9 @@
 {#if (group.banner && ((settings && settings.appearance.banner_bottom) || !settings))}
 <img src={group.banner} alt="your system banner" class="w-100 mb-3 rounded" style="max-height: 12em; object-fit: cover"/>
 {/if}
-{#if !isPublic && isMainDash}
+{#if !isPublic}
-<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> <Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>
+<Button style="flex: 0" color="primary" on:click={() => editMode = true}>Edit</Button> 
+{#if isMainDash}<Button style="flex: 0" color="secondary" on:click={() => memberMode = true}>Members</Button>{/if}
 {/if}
 {:else if editMode}
 <Edit on:deletion on:update bind:group bind:editMode />

src/pages/Member.svelte

@@ -21,6 +21,7 @@
     let member: Member;
     let groups: Group[] = [];
     let systemGroups: Group[] = [];
+    let systemMembers: Member[] = [];
     let isMainDash = false;
     let isDeleted = false;
 
@@ -60,13 +61,19 @@
 
     async function fetchGroups() {
         try {
-            groups = await api().members($params.id).groups().get({auth: !isPublic});
+            groups = await api().members($params.id).groups().get({auth: !isPublic, query: { with_members: !isPublic } });
             if (!isPublic) {
                 await new Promise(resolve => setTimeout(resolve, 1000));
                 systemGroups = await api().systems("@me").groups.get({ auth: true, query: { with_members: true } });
             }
             groupErr = "";
             groupLoading = false;
+            // we can't use with_members from a group list from a member endpoint yet, but I'm leaving this in in case we do
+            // (this is needed for editing a group member list from the member page)
+            /* if (!isPublic) {
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                systemMembers = await api().systems("@me").members.get({auth: true});
+            } */
         } catch (error) {
             console.log(error);
             groupErr = error.message;
@@ -84,6 +91,15 @@
         isDeleted = true;
     }
     
+    function updateGroupList(event: any) {
+        groups = groups.map(group => group.id !== event.detail.id ? group : event.detail);
+        systemGroups = systemGroups.map(group => group.id !== event.detail.id ? group : event.detail);
+    }
+
+    function deleteGroupFromList(event: any) {
+        groups = groups.filter(group => group.id !== event.detail);
+        systemGroups = systemGroups.filter(group => group.id !== event.detail);
+  }
 </script>
 
 {#if settings && settings.appearance.color_background}
@@ -139,14 +155,14 @@
                     <CardsHeader bind:item={group} slot="header">
                         <FaUsers slot="icon" />
                     </CardsHeader>
-                    <GroupBody isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
+                    <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
                 </AccordionItem>
                 {:else}
                 <AccordionItem>
                     <CardsHeader bind:item={group} slot="header">
                         <FaLock slot="icon" />
                     </CardsHeader>
-                    <GroupBody isMainDash={isMainDash} bind:group bind:isPublic={isPublic}/>
+                    <GroupBody bind:members={systemMembers} on:update={updateGroupList} isMainDash={isMainDash} on:deletion={deleteGroupFromList} bind:group bind:isPublic={isPublic}/>
                 </AccordionItem>
                 {/if}
             {/each}