liz/PluralKit
liz/PluralKit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: filtering members by groups and vice versa!

Browse Source
This commit is contained in:
Spectralitree 2021-12-19 00:58:55 +01:00
parent 722f345e4c
commit 5c0403e883
9 changed files with 156 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

2
src/api/group.ts
View File

@ -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;

8
src/api/index.ts
View File

@ -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 => {

64
src/lib/group/List.svelte
View File

@ -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>

56
src/lib/member/List.svelte
View File

@ -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>

4
src/pages/Dash.svelte
View File

@ -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>

6
src/pages/profiles/Main.svelte
View File

@ -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>

21
style.css
View File

@ -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;

12
yarn.lock
View File

@ -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"