feat: member/group lists on group/member pages

PluralKit · Oct 2, 2024 · e202bfc · e202bfc
1 parent bfe1917
commit e202bfc
Show file tree

Hide file tree

Showing 15 changed files with 207 additions and 46 deletions.
diff --git a/src/components/dash/edit/SubmitCreateButton.svelte b/src/components/dash/edit/SubmitCreateButton.svelte
@@ -101,6 +101,10 @@
           } else if (itemPath === "groups" && groupPath === "members") {
             ;(response as Group).members = groups
           }
+
+          if (list.filter && list.page) {
+            if (groups.includes(list.page.uuid || "")) list.filter.push(response.uuid || "")
+          }
         }
 
         list.list.raw.push(response)

diff --git a/src/components/dash/edit/SubmitEditButton.svelte b/src/components/dash/edit/SubmitEditButton.svelte
@@ -154,14 +154,52 @@
               g.members = [...(g.members || [])].filter((m) => m !== opts.member.uuid)
             }
           }
-          groupList.process(groupList.list.raw)
+
+          // if on the group page: remove self from list if no longer in group
+          if (memberList.filter && memberList.page) {
+            if (
+              listBody.includes(opts.member.uuid || "") &&
+              !memberList.filter.includes(opts.member.uuid || "")
+            ) {
+              memberList.filter.push(opts.member.uuid || "")
+            } else memberList.filter = memberList.filter.filter((m) => m !== opts.member.uuid)
+          }
+
+          // if on the member page: filter out groups that no longer belong to this member
+          if (groupList.filter && groupList.page) {
+            groupList.filter = listBody
+
+            groupList.process(groupList.list.raw)
+            groupList.paginate()
+          } else {
+            groupList.process(groupList.list.raw)
+          }
           memberList.process(groupList.list.raw)
           memberList.paginate()
         } else if ((options as GroupMemberEditOptions).group) {
           const opts = options as GroupMemberEditOptions
 
           // edit the group like we would normally
-          opts.group.members = listBody
+          const group = groupList.list.raw.find((g) => g.uuid === opts.group.uuid)
+          if (group) group.members = listBody
+
+          // if on the member page: remove self from list if no longer containing member
+          if (groupList.filter && groupList.page) {
+            if (
+              listBody.includes(opts.group.uuid || "") &&
+              !groupList.filter.includes(opts.group.uuid || "")
+            ) {
+              groupList.filter.push(opts.group.uuid || "")
+            } else groupList.filter = groupList.filter.filter((m) => m !== opts.group.uuid)
+          }
+
+          // if on the group page: filter out members that no longer belong in this group
+          if (memberList.filter && memberList.page) {
+            memberList.filter = listBody
+
+            memberList.process(groupList.list.raw)
+            memberList.paginate()
+          }
 
           groupList.process(groupList.list.raw)
           groupList.paginate()

diff --git a/src/components/dash/groups/GroupControls.svelte b/src/components/dash/groups/GroupControls.svelte
@@ -12,9 +12,13 @@
   let {
     list,
     privacyMode,
+    simpleOnly = false,
+    wide = false,
   }: {
     list: DashList<Group>
     privacyMode: PrivacyMode
+    simpleOnly?: boolean
+    wide?: boolean
   } = $props()
 
   function changeMode() {
@@ -33,12 +37,14 @@
   <h2 class="text-xl">
     <IconUsers class="inline mr-2" /> Group list options
   </h2>
-  <button class="btn btn-sm btn-primary mt-2 w-min h-10" onclick={() => changeMode()}>
-    <div class="flex flex-row items-center gap-2">
-      <IconAdjustments size={32} />
-      <span>{list.settings.filterMode === "simple" ? "Advanced" : "Simple"} mode</span>
-    </div>
-  </button>
+  {#if !simpleOnly}
+    <button class="btn btn-sm btn-primary mt-2 w-min h-10" onclick={() => changeMode()}>
+      <div class="flex flex-row items-center gap-2">
+        <IconAdjustments size={32} />
+        <span>{list.settings.filterMode === "simple" ? "Advanced" : "Simple"} mode</span>
+      </div>
+    </button>
+  {/if}
 </div>
 <div class="text-sm mt-2">
   <button
@@ -64,12 +70,14 @@
 </div>
 <hr class="my-2" />
 <p class="my-4">Some options will be moved at some point.</p>
-{#if list.settings.filterMode === "simple"}
-  <SimpleGroupControls {list} wide={dash.settings.display?.forceControlsAtTop === true} />
+{#if simpleOnly || list.settings.filterMode === "simple"}
+  <SimpleGroupControls {list} wide={wide || dash.settings.display?.forceControlsAtTop === true} />
 {:else if list.settings.filterMode === "advanced"}
   <div
     class={`grid grid-cols-1 md:grid-cols-2 gap-4 ${
-      dash.settings.display?.forceControlsAtTop === true ? "xl:grid-cols-2" : "xl:grid-cols-1"
+      wide || dash.settings.display?.forceControlsAtTop === true
+        ? "xl:grid-cols-2"
+        : "xl:grid-cols-1"
     }`}
   >
     <div>

diff --git a/src/components/dash/groups/GroupList.svelte b/src/components/dash/groups/GroupList.svelte
@@ -9,10 +9,12 @@
     list,
     memberList,
     privacyMode,
+    initialMembers,
   }: {
     list: DashList<Group>
     memberList: DashList<Member>
     privacyMode: PrivacyMode
+    initialMembers?: Member[]
   } = $props()
 
   let fetching = $state(false)
@@ -34,7 +36,7 @@
 </script>
 
 {#if privacyMode === PrivacyMode.PRIVATE}
-  <GroupCreate groupList={list} {memberList} />
+  <GroupCreate groupList={list} {memberList} {initialMembers} />
 {/if}
 <div class="text-center">
   <p>

diff --git a/src/components/dash/groups/create/GroupCreate.svelte b/src/components/dash/groups/create/GroupCreate.svelte
@@ -16,17 +16,19 @@
     open = $bindable(false),
     groupList,
     memberList,
+    initialMembers = [],
   }: {
     forceOpen?: boolean
     open?: boolean
     groupList: DashList<Group>
     memberList: DashList<Member>
+    initialMembers?: Member[]
   } = $props()
 
   let group: Group & {
     privacy: GroupPrivacy
   } = $state(createGroupCreationState())
-  let members: string[] = $state([])
+  let members: string[] = $state(initialMembers.map((m) => m.uuid || ""))
 
   let tab: "view" | "info" | "groups" = $state("view")
 

diff --git a/src/components/dash/members/MemberControls.svelte b/src/components/dash/members/MemberControls.svelte
@@ -13,10 +13,14 @@
     list,
     groupList,
     privacyMode,
+    simpleOnly = false,
+    wide = false,
   }: {
     list: DashList<Member>
     groupList: DashList<Group>
     privacyMode: PrivacyMode
+    simpleOnly?: boolean
+    wide?: boolean
   } = $props()
 
   function changeMode() {
@@ -33,12 +37,14 @@
   <h2 class="text-xl flex-1">
     <IconUsers class="inline mr-2" /> Member list options
   </h2>
-  <button class="btn btn-sm btn-primary mt-2 w-min h-10" onclick={() => changeMode()}>
-    <div class="flex flex-row items-center gap-2">
-      <IconAdjustments size={32} />
-      <span>{list.settings.filterMode === "simple" ? "Advanced" : "Simple"} mode</span>
-    </div>
-  </button>
+  {#if !simpleOnly}
+    <button class="btn btn-sm btn-primary mt-2 w-min h-10" onclick={() => changeMode()}>
+      <div class="flex flex-row items-center gap-2">
+        <IconAdjustments size={32} />
+        <span>{list.settings.filterMode === "simple" ? "Advanced" : "Simple"} mode</span>
+      </div>
+    </button>
+  {/if}
 </div>
 <div class="text-sm mt-2">
   <button
@@ -63,16 +69,18 @@
   </button>
 </div>
 <hr class="my-2" />
-{#if list.settings.filterMode === "simple"}
+{#if simpleOnly || list.settings.filterMode === "simple"}
   <SimpleMemberControls
     {groupList}
     {list}
-    wide={dash.settings.display?.forceControlsAtTop === true}
+    wide={wide || dash.settings.display?.forceControlsAtTop === true}
   />
 {:else if list.settings.filterMode === "advanced"}
   <div
     class={`grid grid-cols-1 md:grid-cols-2 gap-4 ${
-      dash.settings.display?.forceControlsAtTop === true ? "xl:grid-cols-2" : "xl:grid-cols-1"
+      wide || dash.settings.display?.forceControlsAtTop === true
+        ? "xl:grid-cols-2"
+        : "xl:grid-cols-1"
     }`}
   >
     <div>

diff --git a/src/components/dash/members/MemberList.svelte b/src/components/dash/members/MemberList.svelte
@@ -9,10 +9,12 @@
     list,
     groupList,
     privacyMode,
+    initialGroups = [],
   }: {
     list: DashList<Member>
     groupList: DashList<Group>
     privacyMode: PrivacyMode
+    initalGroups?: Group[]
   } = $props()
 
   let fetching = $state(false)
@@ -32,7 +34,7 @@
 </script>
 
 {#if privacyMode === PrivacyMode.PRIVATE}
-  <MemberCreate memberList={list} {groupList} />
+  <MemberCreate memberList={list} {groupList} {initialGroups} />
 {/if}
 <div class="text-center">
   <p>

diff --git a/src/components/dash/members/create/MemberCreate.svelte b/src/components/dash/members/create/MemberCreate.svelte
@@ -16,18 +16,20 @@
     open = $bindable(false),
     groupList,
     memberList,
+    initialGroups = [],
   }: {
     forceOpen?: boolean
     open?: boolean
     groupList: DashList<Group>
     memberList: DashList<Member>
+    initialGroups?: Group[]
   } = $props()
 
   let member: Member & {
     proxy_tags: proxytag[]
     privacy: MemberPrivacy
   } = $state(createMemberCreationState())
-  let groups: string[] = $state([])
+  let groups: string[] = $state(initialGroups.map((g) => g.uuid || ""))
 
   let tab: "view" | "info" | "groups" = $state("view")