feat: filtering members by groups and vice versa!

package.json

@@ -25,6 +25,7 @@
     "gh-pages": "^3.2.3",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.34",
+    "svelecte": "^3.4.5",
     "svelte-autosize": "^1.0.1",
     "svelte-icons": "^2.1.0",
     "svelte-navigator": "^3.1.5",

src/api/group.ts

@@ -16,6 +16,7 @@ export default class Group {
     color?: string;
     privacy?: GroupPrivacy;
     created?: string;
+    members?: string[];
 
     constructor(data: any) {
         this.id = data.id;
@@ -27,6 +28,7 @@ export default class Group {
         this.banner = data.banner;
         this.color = data.color;
         this.created = data.created;
+        this.members = data.members;
         if (data.privacy) {
             this.privacy = {}
             this.privacy.description_privacy = data.privacy.description_privacy;

src/api/index.ts

@@ -14,7 +14,7 @@ export default class PKAPI {
         GET_SYSTEM: (sid?: string) => sid ? `/systems/${sid}` : `/systems/@me`,
         GET_MEMBER_LIST: (sid?: string) => sid ? `/systems/${sid}/members` : `/systems/@me/members`,
         GET_MEMBER: (mid: string) => `/members/${mid}`,
-        GET_GROUP_LIST: (sid?: string) => sid ? `/systems/${sid}/groups` : `/systems/@me/groups`,
+        GET_GROUP_LIST: (sid?: string, members?: boolean) => `${sid ? `/systems/${sid}/groups` : `/systems/@me/groups`}` + `${members ? `?with_members=true` : ""}`,
 
         PATCH_SYSTEM: () => `/systems/@me`,
         
@@ -115,14 +115,16 @@ export default class PKAPI {
         return member;
     }
 
-    async getGroupList(options: {token?: string, id?: any}) {
+    async getGroupList(options: {token?: string, id?: any, members?: boolean}) {
         if (!options.token && !options.id) {
             throw new Error("Must pass a token or id.");
         }
+        if (!options.members) options.members = false;
+
         var groups: Group[] = [];
         var res: AxiosResponse;
         try {
-            res = await this.handle(this.ROUTES.GET_GROUP_LIST(options.id ? options.id : ""), 'GET', {token: !options.id ? options.token : ""});
+            res = await this.handle(this.ROUTES.GET_GROUP_LIST(options.id ? options.id : "", options.members), 'GET', {token: !options.id ? options.token : ""});
                 if (res.status === 200) {
                     let resObject: any = res.data;
                     resObject.forEach(g => {

src/lib/group/List.svelte

@@ -1,18 +1,25 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button } from 'sveltestrap';
+    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
     import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
     import { onMount } from 'svelte';
     import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
     import { useParams } from 'svelte-navigator';
     import type Group from '../../api/group'
+    import type Member from '../../api/member'
     import PKAPI from '../../api';
     import CardsHeader from '../CardsHeader.svelte';
     import ListPagination from '../ListPagination.svelte';
+    import Body from './Body.svelte';
+    import Svelecte, { addFormatter } from 'svelecte';
 
     export let isPublic: boolean;
     let itemLoading = false;
 
-    export let list: Group[] = [];
+    export let list: Group[];
+    export let members: Member[];
+
+    $: memberlist = members.map(function(member) { return {name: member.name, shortid: member.id, id: member.uuid, display_name: member.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+
     let token = localStorage.getItem("pk-token");
     let listLoading = true;
     let err: string;
@@ -24,6 +31,8 @@
     let sortBy = "name";
     let sortOrder = "ascending";
     let privacyFilter = "all";
+    let memberSearchMode = "include";
+    let selectedMembers = [];
 
     let currentPage = 1;
 
@@ -39,7 +48,7 @@
     async function fetchGroups() {
         listLoading = true;
         try {
-            const res: Group[] = await api.getGroupList({token: !isPublic && token, id: isPublic && id});
+            const res: Group[] = await api.getGroupList({token: !isPublic && token, id: isPublic && id, members: !isPublic ? true : false});
             list = res;
             listLoading = false;
         } catch (error) {
@@ -101,13 +110,41 @@
         }
     }
 
-    $: if (sortOrder === "descending") sortedList = sortedList.reverse();
+    let memberFilteredList = [];
+    $: memberFilteredList = sortedList.filter((item: Group) => {
+        if (selectedMembers.length < 1) return true;
+
+        switch (memberSearchMode) {
+            case "include": if (selectedMembers.some(value => item.members.includes(value))) return true;
+            break;
+            case "exclude": if (selectedMembers.every(value => !item.members.includes(value))) return true;
+            break;
+            case "match": if (selectedMembers.every(value => item.members.includes(value))) return true;
+            break;
+            default: return true;
+        }
+
+        return false;
+    });
+
+    let finalList = [];
+    $:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
+
+    $: finalList = finalList;
 
     $: indexOfLastItem = currentPage * itemsPerPage;
     $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    $: pageAmount = Math.ceil(sortedList.length / itemsPerPage);
+    $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
 
-    $: slicedList = sortedList.slice(indexOfFirstItem, indexOfLastItem);
+    $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
+
+    function memberListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+  }
+
+  addFormatter({
+    'member-list': memberListRenderer
+  });
 
 </script>
 
@@ -165,7 +202,7 @@
                 </InputGroup>
             </Col>
             {#if !isPublic}
-            <Col xs={12} lg={4} class="mb-2">
+            <Col xs={12} lg={3} class="mb-2">
                 <InputGroup>
                     <InputGroupText>Only show</InputGroupText>
                     <Input bind:value={privacyFilter} type="select">
@@ -177,6 +214,18 @@
             </Col>
             {/if}
         </Row>
+        {#if !isPublic}
+        <hr/>
+        <Label>Filter groups by member</Label>
+        <Svelecte renderer="member-list" bind:value={selectedMembers} options={memberlist} multiple style="margin-bottom: 0.5rem">
+        </Svelecte>
+        <span style="cursor: pointer" id="include" on:click={() => memberSearchMode = "include"}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+         | <span style="cursor: pointer" id="exclude" on:click={() => memberSearchMode = "exclude"}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+         | <span style="cursor: pointer" id="match" on:click={() => memberSearchMode = "match"}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+        <Tooltip placement="bottom" target="include">Includes every group with any of the members.</Tooltip>
+        <Tooltip placement="bottom" target="exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
+        <Tooltip placement="bottom" target="match">Only includes groups which have all the members selected.</Tooltip>
+        {/if}
     </CardBody>
 </Card>
 
@@ -204,6 +253,7 @@
             <CardsHeader bind:item={group} bind:loading={itemLoading} slot="header">
                 <FaUserCircle slot="icon"/>
             </CardsHeader>
+            <Body bind:group bind:isPublic={isPublic}/>
         </AccordionItem>
     {/each}
 </Accordion>

src/lib/member/List.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button } from 'sveltestrap';
+    import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
     import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte'
     import { onMount } from 'svelte';
     import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
@@ -9,11 +9,16 @@
     import PKAPI from '../../api';
     import CardsHeader from '../CardsHeader.svelte';
     import ListPagination from '../ListPagination.svelte';
+    import Svelecte, { addFormatter } from 'svelecte';
 
     export let isPublic: boolean;
     let itemLoading = false;
 
     export let list: Member[] = [];
+    export let groups: Group[] = [];
+
+    $: grouplist = groups.map(function(group) { return {name: group.name, shortid: group.id, id: group.uuid, members: group.members, display_name: group.display_name}; }).sort((a, b) => a.name.localeCompare(b.name));
+
     let token = localStorage.getItem("pk-token");
     let listLoading = true;
     let err: string;
@@ -25,6 +30,8 @@
     let sortBy = "name";
     let sortOrder = "ascending";
     let privacyFilter = "all";
+    let groupSearchMode = "include";
+    let selectedGroups = [];
 
     let currentPage = 1;
 
@@ -102,14 +109,41 @@
         }
     }
 
-    $:{sortOrder; if (sortOrder === "descending") sortedList = sortedList.reverse();}
+    let memberFilteredList = [];
+    $: memberFilteredList = sortedList.filter((item: Member) => {
+        if (selectedGroups.length < 1) return true;
+
+        switch (groupSearchMode) {
+            case "include": if (selectedGroups.some(group => group.members.includes(item.uuid))) return true;
+            break;
+            case "exclude": if (selectedGroups.every(group => !group.members.includes(item.uuid))) return true;
+            break;
+            case "match": if (selectedGroups.every(group => group.members.includes(item.uuid))) return true;
+            break;
+            default: return true;
+        }
+
+        return false;
+    })
+
+    let finalList = [];
+    $:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
+
+    $: finalList = finalList;
 
     $: indexOfLastItem = currentPage * itemsPerPage;
     $: indexOfFirstItem = indexOfLastItem - itemsPerPage;
-    $: pageAmount = Math.ceil(sortedList.length / itemsPerPage);
+    $: pageAmount = Math.ceil(finalList.length / itemsPerPage);
 
-    $: slicedList = sortedList.slice(indexOfFirstItem, indexOfLastItem);
+    $: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
 
+    function groupListRenderer(item: any) {
+    return `${item.name} (<code>${item.shortid}</code>)`;
+  }
+
+  addFormatter({
+    'member-list': groupListRenderer
+  });
 </script>
 
 <Card class="mb-3">
@@ -166,7 +200,7 @@
                 </InputGroup>
             </Col>
             {#if !isPublic}
-            <Col xs={12} lg={4} class="mb-2">
+            <Col xs={12} lg={3} class="mb-2">
                 <InputGroup>
                     <InputGroupText>Only show</InputGroupText>
                     <Input bind:value={privacyFilter} type="select">
@@ -178,6 +212,18 @@
             </Col>
             {/if}
         </Row>
+        {#if !isPublic}
+        <hr/>
+        <Label>Filter members by group</Label>
+        <Svelecte renderer="member-list" valueAsObject bind:value={selectedGroups} options={grouplist} multiple style="margin-bottom: 0.5rem">
+        </Svelecte>
+        <span style="cursor: pointer" id="include" on:click={() => groupSearchMode = "include"}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
+         | <span style="cursor: pointer" id="exclude" on:click={() => groupSearchMode = "exclude"}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span> 
+         | <span style="cursor: pointer" id="match" on:click={() => groupSearchMode = "match"}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
+        <Tooltip placement="bottom" target="include">Includes every member who's a part of any of the groups.</Tooltip>
+        <Tooltip placement="bottom" target="exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
+        <Tooltip placement="bottom" target="match">Only includes members who are a part of every group.</Tooltip>
+        {/if}
     </CardBody>
 </Card>
 

src/pages/Dash.svelte

@@ -86,10 +86,10 @@
                         <System bind:user={user} bind:isPublic />
                 </TabPane>
                 <TabPane tabId="members" tab="Members" active={tabPane === "members"}>
-                        <MemberList bind:list={members} bind:isPublic />
+                        <MemberList bind:groups={groups} bind:list={members} bind:isPublic />
                 </TabPane>
                 <TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
-                    <GroupList bind:list={groups} bind:isPublic />
+                    <GroupList bind:members={members} bind:list={groups} bind:isPublic />
             </TabPane> 
             </TabContent>
         </Col>

src/pages/profiles/Main.svelte

@@ -7,6 +7,7 @@
     import PKAPI from '../../api';
     import Sys from '../../api/system';
     import MemberList from '../../lib/member/List.svelte';
+    import GroupList from '../../lib/group/List.svelte';
 
     let isPublic = true;
 
@@ -63,7 +64,10 @@
                 </TabPane>
                 <TabPane tabId="members" tab="Members">
                         <MemberList bind:list={members} bind:isPublic/>
-                </TabPane> 
+                </TabPane>
+                <TabPane tabId="groups" tab="Groups">
+                    <GroupList bind:members={members} bind:list={groups} bind:isPublic/>
+            </TabPane> 
             </TabContent>
             {/if}
         </Col>

style.css

@@ -65,6 +65,23 @@ blockquote {
     justify-content: center !important;
 }
 
+.page-link {
+    z-index: initial !important;
+}
+
+.svelecte-control .sv-control, .sv-content, .sv-dropdown, .sv-item, .sv-item-content {
+    color: var(--bs-body-color) !important;
+    background-color: var(--bs-body-bg) !important;
+}
+
+.sv-item-btn {
+    background-color: var(--bs-light) !important;
+}
+
+.sv-item {
+    cursor: pointer !important;
+}
+
 .d-spoiler {
     color: var(--bs-dark);
     background-color: var(--bs-dark);
@@ -88,6 +105,10 @@ blockquote {
     width: auto;
 }
 
+code {
+    color: var(--bs-body-color) !important;
+}
+
 .description a {
     text-decoration: none;
     color: #457ead !important;

yarn.lock

@@ -937,6 +937,13 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svelecte@^3.4.5:
+  version "3.4.5"
+  resolved "https://registry.yarnpkg.com/svelecte/-/svelecte-3.4.5.tgz#31ee09194030693d16501cb0031ba50fe5d0dada"
+  integrity sha512-HVva//rlRWg5Ck2iOuHuIVYrMATxZ7D1Kr91HLpMRbPfnqqAPFto6twwJ3XvBE+O9GD/kMzcYDwQULZ0sx3w1w==
+  dependencies:
+    svelte-tiny-virtual-list "^1.1.7"
+
 svelte-autosize@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/svelte-autosize/-/svelte-autosize-1.0.1.tgz#2121b2373ab89191a58aaa9a3aec957ca475e812"
@@ -988,6 +995,11 @@ svelte-preprocess@^4.0.0, svelte-preprocess@^4.9.8:
     sorcery "^0.10.0"
     strip-indent "^3.0.0"
 
+svelte-tiny-virtual-list@^1.1.7:
+  version "1.1.7"
+  resolved "https://registry.yarnpkg.com/svelte-tiny-virtual-list/-/svelte-tiny-virtual-list-1.1.7.tgz#7ba8ee1fc23372512de2aba50d9674972a35c6f7"
+  integrity sha512-8314cmLXOVqIQwSc3NFu8yGU7BdHEJeixrwFirmnMoWl6YNcCq5jVjCKjE3tDNJfUenz1LN5M5YshPt6GcPuww==
+
 svelte-toggle@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/svelte-toggle/-/svelte-toggle-3.1.0.tgz#bce1efb71fb96ab3921374023c95ffd3ad5cbf3d"