refactor(dashboard): refactor list components
This commit is contained in:
Jake/Rads
parent
b47694edc1
commit
2e69de1b1b
@ -1,367 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { Link } from 'svelte-navigator';
|
|
||||||
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Label, Row, Col, Spinner, Button, Tooltip } from 'sveltestrap';
|
|
||||||
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
|
|
||||||
import { useParams } from 'svelte-navigator';
|
|
||||||
import CardsHeader from '../CardsHeader.svelte';
|
|
||||||
import ListPagination from '../ListPagination.svelte';
|
|
||||||
import Body from './Body.svelte';
|
|
||||||
import Svelecte, { addFormatter } from 'svelecte';
|
|
||||||
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
|
||||||
import NewGroup from './NewGroup.svelte';
|
|
||||||
|
|
||||||
import { Member, Group } from '../../api/types';
|
|
||||||
import api from '../../api';
|
|
||||||
|
|
||||||
export let isPublic: boolean;
|
|
||||||
|
|
||||||
export let list: Group[];
|
|
||||||
export let members: Member[];
|
|
||||||
|
|
||||||
$: memberlist = members && 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;
|
|
||||||
|
|
||||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
|
||||||
|
|
||||||
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
|
|
||||||
$: itemsPerPage = parseInt(itemsPerPageValue);
|
|
||||||
|
|
||||||
let searchBy = "name";
|
|
||||||
let sortBy = "name";
|
|
||||||
let sortOrder = "ascending";
|
|
||||||
let privacyFilter = "all";
|
|
||||||
let memberSearchMode = "include";
|
|
||||||
let selectedMembers = [];
|
|
||||||
|
|
||||||
let currentPage = 1;
|
|
||||||
|
|
||||||
let params = useParams();
|
|
||||||
$: id = $params.id;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if (token || isPublic) fetchGroups();
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
async function fetchGroups() {
|
|
||||||
err = "";
|
|
||||||
listLoading = true;
|
|
||||||
try {
|
|
||||||
const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
|
|
||||||
list = res;
|
|
||||||
listLoading = false;
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
err = error.message;
|
|
||||||
listLoading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let searchValue: string;
|
|
||||||
|
|
||||||
$: {searchValue; privacyFilter; currentPage = 1};
|
|
||||||
|
|
||||||
$: searchedList = list.filter((item) => {
|
|
||||||
if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
|
|
||||||
|
|
||||||
switch (searchBy) {
|
|
||||||
case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "display name": if (!searchValue) {
|
|
||||||
if (!item.display_name) return true;
|
|
||||||
else return false;
|
|
||||||
}
|
|
||||||
if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "description": if (!searchValue) {
|
|
||||||
if (!item.description) return true;
|
|
||||||
else return false;
|
|
||||||
}
|
|
||||||
else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
|
|
||||||
$: filteredList = searchedList.filter((item) => {
|
|
||||||
if (privacyFilter === "all") return true;
|
|
||||||
if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
|
|
||||||
if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
let sortedList = [];
|
|
||||||
|
|
||||||
$: if (filteredList) {
|
|
||||||
switch (sortBy) {
|
|
||||||
case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
break;
|
|
||||||
case "display name": sortedList = filteredList.sort((a, b) => {
|
|
||||||
if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
|
|
||||||
else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
|
|
||||||
else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
|
|
||||||
else return a.name.localeCompare(b.name);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "creation date": sortedList = filteredList.sort((a, b) => {
|
|
||||||
if (a.created && b.created) return a.created.localeCompare(b.created);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
|
|
||||||
break;
|
|
||||||
default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let memberFilteredList = [];
|
|
||||||
$: memberFilteredList = sortedList.filter((item: Group) => {
|
|
||||||
if (memberSearchMode === "none") {
|
|
||||||
if (item.members && item.members.length > 0) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedMembers.length < 1) return true;
|
|
||||||
|
|
||||||
switch (memberSearchMode) {
|
|
||||||
case "include": if (item.members && selectedMembers.some(value => item.members.includes(value))) return true;
|
|
||||||
break;
|
|
||||||
case "exclude": if (item.members && selectedMembers.every(value => !item.members.includes(value))) return true;
|
|
||||||
break;
|
|
||||||
case "match": if (item.members && 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(finalList.length / itemsPerPage);
|
|
||||||
|
|
||||||
let slicedList = [];
|
|
||||||
$: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
|
|
||||||
|
|
||||||
function memberListRenderer(item: any) {
|
|
||||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
addFormatter({
|
|
||||||
'member-list': memberListRenderer
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateList(event: any) {
|
|
||||||
list = list.map(group => group.id !== event.detail.id ? group : event.detail)
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDelete(event: any) {
|
|
||||||
list = list.filter(group => group.id !== event.detail);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addGroupToList(event: any) {
|
|
||||||
// reference types my beloathed
|
|
||||||
// the stringify/parse sequence is here so that a previous added group doesn't get overwritten
|
|
||||||
let group = JSON.parse(JSON.stringify(event.detail));
|
|
||||||
group.members = [];
|
|
||||||
list.push(group);
|
|
||||||
list = list;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>
|
|
||||||
<CardTitle style="margin-top: 8px; outline: none;">
|
|
||||||
<div class="icon d-inline-block">
|
|
||||||
<FaSearch />
|
|
||||||
</div> Search groups
|
|
||||||
</CardTitle>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Page length</InputGroupText>
|
|
||||||
<Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
|
|
||||||
<option>10</option>
|
|
||||||
<option>25</option>
|
|
||||||
<option>50</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Search by</InputGroupText>
|
|
||||||
<Input bind:value={searchBy} type="select" aria-label="search by">
|
|
||||||
<option>name</option>
|
|
||||||
<option>display name</option>
|
|
||||||
<option>description</option>
|
|
||||||
<option>ID</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Sort by</InputGroupText>
|
|
||||||
<Input bind:value={sortBy} type="select" aria-label="sort by">
|
|
||||||
<option>name</option>
|
|
||||||
<option>display name</option>
|
|
||||||
{#if !isPublic}<option>creation date</option>{/if}
|
|
||||||
<option>ID</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Sort order</InputGroupText>
|
|
||||||
<Input bind:value={sortOrder} type="select" aria-label="sort order">
|
|
||||||
<option>ascending</option>
|
|
||||||
<option>descending</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
{#if !isPublic}
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Only show</InputGroupText>
|
|
||||||
<Input bind:value={privacyFilter} type="select" aria-label="only show">
|
|
||||||
<option>all</option>
|
|
||||||
<option>public</option>
|
|
||||||
<option>private</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
{#if !isPublic}
|
|
||||||
<hr/>
|
|
||||||
<Label>Filter groups by member</Label>
|
|
||||||
<Svelecte renderer="member-list" bind:value={selectedMembers} disableHighlight options={memberlist} multiple style="margin-bottom: 0.5rem">
|
|
||||||
</Svelecte>
|
|
||||||
<span style="cursor: pointer" id="g-include" on:click={() => memberSearchMode = "include"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "include" : ""} tabindex={0}>{@html memberSearchMode === "include" ? "<b>include</b>" : "include"}</span>
|
|
||||||
| <span style="cursor: pointer" id="g-exclude" on:click={() => memberSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "exclude" : ""} tabindex={0}>{@html memberSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
|
|
||||||
| <span style="cursor: pointer" id="g-match" on:click={() => memberSearchMode = "match"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "match" : ""} tabindex={0}>{@html memberSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
|
|
||||||
| <span style="cursor: pointer" id="g-none" on:click={() => memberSearchMode = "none"} on:keyup={e => e.key === "Enter" ? memberSearchMode = "none" : ""} tabindex={0}>{@html memberSearchMode === "none" ? "<b>none</b>" : "none"}</span>
|
|
||||||
<Tooltip placement="bottom" target="g-include">Includes every group with any of the members.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="g-exclude">Excludes every group with any of the members, opposite of include.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="g-match">Only includes groups which have all the members selected.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="g-none">Only includes groups that have no members.</Tooltip>
|
|
||||||
{/if}
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
|
|
||||||
{#if listLoading && !err}
|
|
||||||
<div class="mx-auto text-center">
|
|
||||||
<Spinner class="d-inline-block" />
|
|
||||||
</div>
|
|
||||||
{:else if err}
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={10}>
|
|
||||||
<Alert color="danger">{err}</Alert>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={2}>
|
|
||||||
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{:else}
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={10} class="mb-2 mb-lg-0">
|
|
||||||
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={2}>
|
|
||||||
<Button class="w-100 mb-3" color="primary" on:click={fetchGroups} aria-label="refresh group list">Refresh</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<ListPagination bind:currentPage bind:pageAmount />
|
|
||||||
{#if !isPublic}
|
|
||||||
<NewGroup on:create={addGroupToList} />
|
|
||||||
{/if}
|
|
||||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
|
||||||
<Accordion class="my-3" stayOpen>
|
|
||||||
{#each slicedList as group, index (group.id)}
|
|
||||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
|
||||||
<AccordionItem>
|
|
||||||
<CardsHeader bind:item={group} slot="header">
|
|
||||||
<FaUsers slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
|
|
||||||
</AccordionItem>
|
|
||||||
{:else}
|
|
||||||
<AccordionItem>
|
|
||||||
<CardsHeader bind:item={group} slot="header">
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} bind:members bind:group bind:isPublic={isPublic}/>
|
|
||||||
</AccordionItem>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</Accordion>
|
|
||||||
{:else if settings.accessibility.expandedcards}
|
|
||||||
{#each slicedList as group, index (group.id)}
|
|
||||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardsHeader item={group}>
|
|
||||||
<FaUsers slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:members bind:group />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
{:else}
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardsHeader item={group}>
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateMembers={updateList} isPublic={isPublic} bind:group bind:members />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<div class="my-3">
|
|
||||||
{#each slicedList as group, index (group.id)}
|
|
||||||
{#if (!isPublic && group.privacy.visibility === "public") || isPublic}
|
|
||||||
<Card>
|
|
||||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
|
||||||
<CardsHeader bind:item={group}>
|
|
||||||
<FaUsers slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</Link>
|
|
||||||
</Card>
|
|
||||||
{:else}
|
|
||||||
<Card>
|
|
||||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={!isPublic ? `/dash/g/${group.id}` : `/profile/g/${group.id}`}>
|
|
||||||
<CardsHeader bind:item={group}>
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</Link>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<ListPagination bind:currentPage bind:pageAmount />
|
|
||||||
{/if}
|
|
||||||
232
dashboard/src/lib/list/List.svelte
Normal file
232
dashboard/src/lib/list/List.svelte
Normal file
@ -0,0 +1,232 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import { Link, useParams } from 'svelte-navigator';
|
||||||
|
|
||||||
|
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
||||||
|
import FaUserCircle from 'svelte-icons/fa/FaUserCircle.svelte';
|
||||||
|
import FaUsers from 'svelte-icons/fa/FaUsers.svelte'
|
||||||
|
|
||||||
|
import MemberBody from '../member/Body.svelte';
|
||||||
|
import GroupBody from '../group/Body.svelte';
|
||||||
|
import NewMember from '../member/NewMember.svelte';
|
||||||
|
import NewGroup from '../group/NewGroup.svelte';
|
||||||
|
import CardsHeader from '../CardsHeader.svelte';
|
||||||
|
import ListPagination from '../ListPagination.svelte';
|
||||||
|
import ListControl from './ListControl.svelte';
|
||||||
|
import ListSearch from './ListSearch.svelte';
|
||||||
|
|
||||||
|
import { Member, Group } from '../../api/types';
|
||||||
|
import api from '../../api';
|
||||||
|
|
||||||
|
export let members: Member[] = [];
|
||||||
|
export let groups: Group[] = [];
|
||||||
|
|
||||||
|
let list: Member[] | Group[] = [];
|
||||||
|
let processedList: Member[] | Group[] = [];
|
||||||
|
|
||||||
|
$: groupList = groups && 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));
|
||||||
|
$: memberList = members && 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;
|
||||||
|
|
||||||
|
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
||||||
|
|
||||||
|
let pageAmount: number;
|
||||||
|
let currentPage: number = 1;
|
||||||
|
|
||||||
|
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
|
||||||
|
$: itemsPerPage = parseInt(itemsPerPageValue);
|
||||||
|
|
||||||
|
$: indexOfLastItem = currentPage * itemsPerPage;
|
||||||
|
$: indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||||
|
$: pageAmount = Math.ceil(processedList.length / itemsPerPage);
|
||||||
|
|
||||||
|
$: slicedList = processedList.slice(indexOfFirstItem, indexOfLastItem);
|
||||||
|
|
||||||
|
export let isPublic: boolean;
|
||||||
|
export let isMainDash = true;
|
||||||
|
export let itemType: string;
|
||||||
|
|
||||||
|
let searchValue: string = "";
|
||||||
|
let searchBy: string = "";
|
||||||
|
|
||||||
|
let params = useParams();
|
||||||
|
$: id = $params.id;
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
if (token || isPublic) fetchList();
|
||||||
|
});
|
||||||
|
|
||||||
|
async function fetchList() {
|
||||||
|
err = "";
|
||||||
|
listLoading = true;
|
||||||
|
try {
|
||||||
|
if (itemType === "member") {
|
||||||
|
const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
|
||||||
|
members = res;
|
||||||
|
list = res;
|
||||||
|
}
|
||||||
|
else if (itemType === "group") {
|
||||||
|
const res: Group[] = await api().systems(isPublic ? id : "@me").groups.get({ auth: !isPublic, query: { with_members: !isPublic } });
|
||||||
|
groups = res;
|
||||||
|
list = res;
|
||||||
|
}
|
||||||
|
else throw new Error(`Unknown list type ${itemType}`);
|
||||||
|
} catch (error) {
|
||||||
|
console.log(error);
|
||||||
|
err = error.message;
|
||||||
|
}
|
||||||
|
listLoading = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function addItemToList(event: any) {
|
||||||
|
if (itemType === "member") {
|
||||||
|
members.push(event.detail);
|
||||||
|
members = members;
|
||||||
|
} else if (itemType === "group") {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
list.push(event.detail);
|
||||||
|
list = list;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* function updateList(event: any) {
|
||||||
|
list = list.map(member => member.id !== event.detail.id ? member : event.detail);
|
||||||
|
} */
|
||||||
|
|
||||||
|
/* function updateGroups(event: any) {
|
||||||
|
groups = event.detail;
|
||||||
|
} */
|
||||||
|
|
||||||
|
function updateDelete(event: any) {
|
||||||
|
list = (list as any[]).filter(item => item.id !== event.detail);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getItemLink(item: Member | Group): string {
|
||||||
|
let url: string;
|
||||||
|
|
||||||
|
if (isMainDash) url = "/dash/";
|
||||||
|
else url = "/profile/";
|
||||||
|
|
||||||
|
if (itemType === "member") url += "m/";
|
||||||
|
else if (itemType === "group") url += "g/";
|
||||||
|
|
||||||
|
url += item.id;
|
||||||
|
|
||||||
|
return url;
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ListControl {itemType} {isPublic} {memberList} {groups} {groupList} {list} bind:finalList={processedList} bind:searchValue bind:searchBy bind:itemsPerPageValue />
|
||||||
|
|
||||||
|
{#if listLoading && !err}
|
||||||
|
<div class="mx-auto text-center">
|
||||||
|
<Spinner class="d-inline-block" />
|
||||||
|
</div>
|
||||||
|
{:else if err}
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} lg={10}>
|
||||||
|
<Alert color="danger">{err}</Alert>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={2}>
|
||||||
|
<Button class="w-100 mb-3" color="primary" on:click={fetchList} aria-label="refresh member list">Refresh</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{:else}
|
||||||
|
<ListSearch bind:searchBy bind:searchValue on:refresh={fetchList} />
|
||||||
|
|
||||||
|
<ListPagination bind:currentPage bind:pageAmount />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !err && !isPublic}
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<NewMember on:create={addItemToList} />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<NewGroup on:create={addItemToList} />
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if !listLoading && !err}
|
||||||
|
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
||||||
|
<Accordion class="my-3" stayOpen>
|
||||||
|
{#each slicedList as item, index}
|
||||||
|
<AccordionItem>
|
||||||
|
<CardsHeader {item} slot="header">
|
||||||
|
<div slot="icon">
|
||||||
|
{#if isPublic || item.privacy.visibility === "public"}
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<FaUserCircle />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<FaUsers />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<FaLock />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</CardsHeader>
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
|
||||||
|
{/if}
|
||||||
|
</AccordionItem>
|
||||||
|
{/each}
|
||||||
|
</Accordion>
|
||||||
|
{:else if settings.accessibility.expandedcards}
|
||||||
|
{#each slicedList as item, index}
|
||||||
|
<Card class="mb-3">
|
||||||
|
<CardHeader>
|
||||||
|
<CardsHeader {item} slot="header">
|
||||||
|
<div slot="icon">
|
||||||
|
{#if isPublic || item.privacy.visibility === "public"}
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<FaUserCircle />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<FaUsers />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<FaLock />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</CardsHeader>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<MemberBody on:deletion={updateDelete} bind:isPublic bind:groups bind:member={item} />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<GroupBody on:deletion={updateDelete} {isPublic} {members} bind:group={item} />
|
||||||
|
{/if}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
|
{/each}
|
||||||
|
{:else}
|
||||||
|
<div class="my-3">
|
||||||
|
{#each slicedList as item, index}
|
||||||
|
<Card>
|
||||||
|
<Link class="accordion-button collapsed" style="text-decoration: none;" to={getItemLink(item)}>
|
||||||
|
<CardsHeader {item} slot="header">
|
||||||
|
<div slot="icon">
|
||||||
|
{#if isPublic || item.privacy.visibility === "public"}
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<FaUserCircle />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<FaUsers />
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<FaLock />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</CardsHeader>
|
||||||
|
</Link>
|
||||||
|
</Card>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<ListPagination bind:currentPage {pageAmount} />
|
||||||
|
{/if}
|
||||||
233
dashboard/src/lib/list/ListControl.svelte
Normal file
233
dashboard/src/lib/list/ListControl.svelte
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Card, CardHeader, CardBody, CardTitle, Alert, Accordion, AccordionItem, InputGroupText, InputGroup, Input, Row, Col, Spinner, Button, Tooltip, Label } from 'sveltestrap';
|
||||||
|
import FaSearch from 'svelte-icons/fa/FaSearch.svelte'
|
||||||
|
import Svelecte, { addFormatter } from 'svelecte';
|
||||||
|
import { Member, Group } from '../../api/types';
|
||||||
|
|
||||||
|
export let list: Member[] | Group[] = [];
|
||||||
|
|
||||||
|
export let itemType: string;
|
||||||
|
export let memberList: any = [];
|
||||||
|
export let groups: Group[] = [];
|
||||||
|
export let groupList: any = [];
|
||||||
|
|
||||||
|
export let searchBy = "name";
|
||||||
|
export let searchValue: string;
|
||||||
|
export let itemsPerPageValue: string;
|
||||||
|
|
||||||
|
let sortBy = "name";
|
||||||
|
let sortOrder = "ascending";
|
||||||
|
let privacyFilter = "all";
|
||||||
|
let groupSearchMode = "include";
|
||||||
|
let selectedGroups = [];
|
||||||
|
|
||||||
|
export let currentPage = 1;
|
||||||
|
export let isPublic: boolean;
|
||||||
|
|
||||||
|
$: {searchValue; privacyFilter; currentPage = 1};
|
||||||
|
|
||||||
|
// converting list to any[] avoids a "this expression is not calleable" error
|
||||||
|
$: searchedList = (list as any[]).filter((item: Member | Group) => {
|
||||||
|
if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
|
||||||
|
|
||||||
|
switch (searchBy) {
|
||||||
|
case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||||
|
break;
|
||||||
|
case "display name": if (!searchValue) {
|
||||||
|
if (!item.display_name) return true;
|
||||||
|
else return false;
|
||||||
|
}
|
||||||
|
if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||||
|
break;
|
||||||
|
case "description": if (!searchValue) {
|
||||||
|
if (!item.description) return true;
|
||||||
|
else return false;
|
||||||
|
}
|
||||||
|
else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||||
|
break;
|
||||||
|
case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||||
|
break;
|
||||||
|
default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
|
||||||
|
$: filteredList = searchedList.filter((item) => {
|
||||||
|
if (privacyFilter === "all") return true;
|
||||||
|
if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
|
||||||
|
if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
let sortedList = [];
|
||||||
|
|
||||||
|
$: if (filteredList) {
|
||||||
|
switch (sortBy) {
|
||||||
|
case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
break;
|
||||||
|
case "display name": sortedList = filteredList.sort((a, b) => {
|
||||||
|
if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
|
||||||
|
else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
|
||||||
|
else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
|
||||||
|
else return a.name.localeCompare(b.name);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "creation date": sortedList = filteredList.sort((a, b) => {
|
||||||
|
if (a.created && b.created) return a.created.localeCompare(b.created);
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
|
||||||
|
break;
|
||||||
|
default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let memberFilteredList = [];
|
||||||
|
$: memberFilteredList = sortedList.filter((item: Member | Group): boolean => {
|
||||||
|
if (itemType === "member") {
|
||||||
|
if (groupSearchMode === "none") {
|
||||||
|
if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedGroups.length < 1) return true;
|
||||||
|
|
||||||
|
switch (groupSearchMode) {
|
||||||
|
case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
|
||||||
|
break;
|
||||||
|
case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
|
||||||
|
break;
|
||||||
|
case "match": if (selectedGroups.every(group => group.members && group.members.includes(item.uuid))) return true;
|
||||||
|
break;
|
||||||
|
default: return true;
|
||||||
|
}
|
||||||
|
} else if (itemType === "group") {
|
||||||
|
let group = (item as Group);
|
||||||
|
|
||||||
|
if (groupSearchMode === "none") {
|
||||||
|
if (group.members && group.members.length > 0) return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (selectedGroups.length < 1) return true;
|
||||||
|
|
||||||
|
switch (groupSearchMode) {
|
||||||
|
case "include": if (group.members && selectedGroups.some(member => group.members.includes(member.id))) return true;
|
||||||
|
break;
|
||||||
|
case "exclude": if (group.members && selectedGroups.every(member => !group.members.includes(member.id))) return true;
|
||||||
|
break;
|
||||||
|
case "match": if (group.members && selectedGroups.every(member => group.members.includes(member.id))) return true;
|
||||||
|
break;
|
||||||
|
default: return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
})
|
||||||
|
|
||||||
|
export let finalList = [];
|
||||||
|
$:{sortOrder; if (sortOrder === "descending") finalList = memberFilteredList.reverse(); else finalList = memberFilteredList;}
|
||||||
|
|
||||||
|
function groupListRenderer(item: any) {
|
||||||
|
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
addFormatter({
|
||||||
|
'group-list': groupListRenderer
|
||||||
|
});
|
||||||
|
|
||||||
|
function memberListRenderer(item: any) {
|
||||||
|
return `${item.name} (<code>${item.shortid}</code>)`;
|
||||||
|
}
|
||||||
|
|
||||||
|
addFormatter({
|
||||||
|
'member-list': memberListRenderer
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Card class="mb-3">
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle>
|
||||||
|
<CardTitle style="margin-top: 8px; outline: none;">
|
||||||
|
<div class="icon d-inline-block">
|
||||||
|
<FaSearch />
|
||||||
|
</div> Search {itemType === "member" ? "members" : "groups"}
|
||||||
|
</CardTitle>
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardBody>
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} lg={3} class="mb-2">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupText>Page length</InputGroupText>
|
||||||
|
<Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
|
||||||
|
<option>10</option>
|
||||||
|
<option>25</option>
|
||||||
|
<option>50</option>
|
||||||
|
</Input>
|
||||||
|
</InputGroup>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={3} class="mb-2">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupText>Search by</InputGroupText>
|
||||||
|
<Input bind:value={searchBy} type="select" aria-label="search by">
|
||||||
|
<option>name</option>
|
||||||
|
<option>display name</option>
|
||||||
|
<option>description</option>
|
||||||
|
<option>ID</option>
|
||||||
|
</Input>
|
||||||
|
</InputGroup>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={3} class="mb-2">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupText>Sort by</InputGroupText>
|
||||||
|
<Input bind:value={sortBy} type="select" aria-label="sort by">
|
||||||
|
<option>name</option>
|
||||||
|
<option>display name</option>
|
||||||
|
{#if !isPublic}<option>creation date</option>{/if}
|
||||||
|
<option>ID</option>
|
||||||
|
</Input>
|
||||||
|
</InputGroup>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={3} class="mb-2">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupText>Sort order</InputGroupText>
|
||||||
|
<Input bind:value={sortOrder} type="select" aria-label="sort order">
|
||||||
|
<option>ascending</option>
|
||||||
|
<option>descending</option>
|
||||||
|
</Input>
|
||||||
|
</InputGroup>
|
||||||
|
</Col>
|
||||||
|
{#if !isPublic}
|
||||||
|
<Col xs={12} lg={3} class="mb-2">
|
||||||
|
<InputGroup>
|
||||||
|
<InputGroupText>Only show</InputGroupText>
|
||||||
|
<Input bind:value={privacyFilter} type="select" aria-label="only show">
|
||||||
|
<option>all</option>
|
||||||
|
<option>public</option>
|
||||||
|
<option>private</option>
|
||||||
|
</Input>
|
||||||
|
</InputGroup>
|
||||||
|
</Col>
|
||||||
|
{/if}
|
||||||
|
</Row>
|
||||||
|
{#if !isPublic}
|
||||||
|
<hr/>
|
||||||
|
<Label>Filter {itemType === "member" ? "member" : "group"} by {itemType === "member" ? "group" : "member"}</Label>
|
||||||
|
{#if itemType === "member"}
|
||||||
|
<Svelecte disableHighlight renderer="group-list" valueAsObject bind:value={selectedGroups} options={groupList} multiple style="margin-bottom: 0.5rem" />
|
||||||
|
{:else if itemType === "group"}
|
||||||
|
<Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={memberList} multiple style="margin-bottom: 0.5rem" />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
|
||||||
|
| <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
|
||||||
|
| <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
|
||||||
|
| <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
|
||||||
|
<Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
|
||||||
|
<Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
|
||||||
|
<Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
|
||||||
|
<Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
|
||||||
|
{/if}
|
||||||
|
</CardBody>
|
||||||
|
</Card>
|
||||||
23
dashboard/src/lib/list/ListSearch.svelte
Normal file
23
dashboard/src/lib/list/ListSearch.svelte
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { createEventDispatcher } from "svelte";
|
||||||
|
import { Button, Col, Input, Row } from "sveltestrap";
|
||||||
|
|
||||||
|
export let searchValue: string;
|
||||||
|
export let searchBy: string;
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
|
function update() {
|
||||||
|
dispatch("refresh");
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Row>
|
||||||
|
<Col xs={12} lg={10}>
|
||||||
|
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
|
||||||
|
</Col>
|
||||||
|
<Col xs={12} lg={2} class="mb-3 mb-lg-0">
|
||||||
|
<Button class="w-100 mb-3" color="primary" on:click={() => update()} aria-label="refresh member list">Refresh</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
@ -1,366 +0,0 @@
|
|||||||
<script lang="ts">
|
|
||||||
import { Link } from 'svelte-navigator';
|
|
||||||
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'
|
|
||||||
import { useParams } from 'svelte-navigator';
|
|
||||||
import CardsHeader from '../CardsHeader.svelte';
|
|
||||||
import ListPagination from '../ListPagination.svelte';
|
|
||||||
import Svelecte, { addFormatter } from 'svelecte';
|
|
||||||
import FaLock from 'svelte-icons/fa/FaLock.svelte';
|
|
||||||
import Body from './Body.svelte';
|
|
||||||
import NewMember from './NewMember.svelte';
|
|
||||||
|
|
||||||
import { Member, Group } from '../../api/types';
|
|
||||||
import api from '../../api';
|
|
||||||
|
|
||||||
export let isPublic: boolean;
|
|
||||||
|
|
||||||
export let list: Member[] = [];
|
|
||||||
export let groups: Group[] = [];
|
|
||||||
export let isMainDash = true;
|
|
||||||
|
|
||||||
$: grouplist = groups && 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;
|
|
||||||
|
|
||||||
let settings = JSON.parse(localStorage.getItem("pk-settings"));
|
|
||||||
|
|
||||||
let itemsPerPageValue = settings && settings.accessibility && settings.accessibility.expandedcards ? "10" : "25";
|
|
||||||
$: itemsPerPage = parseInt(itemsPerPageValue);
|
|
||||||
|
|
||||||
let searchBy = "name";
|
|
||||||
let sortBy = "name";
|
|
||||||
let sortOrder = "ascending";
|
|
||||||
let privacyFilter = "all";
|
|
||||||
let groupSearchMode = "include";
|
|
||||||
let selectedGroups = [];
|
|
||||||
|
|
||||||
let currentPage = 1;
|
|
||||||
|
|
||||||
let params = useParams();
|
|
||||||
$: id = $params.id;
|
|
||||||
|
|
||||||
onMount(() => {
|
|
||||||
if (token || isPublic) fetchMembers();
|
|
||||||
});
|
|
||||||
|
|
||||||
async function fetchMembers() {
|
|
||||||
err = "";
|
|
||||||
listLoading = true;
|
|
||||||
try {
|
|
||||||
const res: Member[] = await api().systems(isPublic ? id : "@me").members.get({ auth: !isPublic });
|
|
||||||
list = res;
|
|
||||||
listLoading = false;
|
|
||||||
} catch (error) {
|
|
||||||
console.log(error);
|
|
||||||
err = error.message;
|
|
||||||
listLoading = false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let searchValue: string;
|
|
||||||
|
|
||||||
$: {searchValue; privacyFilter; currentPage = 1};
|
|
||||||
|
|
||||||
$: searchedList = list.filter((item) => {
|
|
||||||
if (!searchValue && searchBy !== "description" && searchBy !== "display name") return true;
|
|
||||||
|
|
||||||
switch (searchBy) {
|
|
||||||
case "name": if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "display name": if (!searchValue) {
|
|
||||||
if (!item.display_name) return true;
|
|
||||||
else return false;
|
|
||||||
}
|
|
||||||
if (item.display_name && item.display_name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "description": if (!searchValue) {
|
|
||||||
if (!item.description) return true;
|
|
||||||
else return false;
|
|
||||||
}
|
|
||||||
else if (item.description && item.description.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
case "ID": if (item.id.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
default: if (item.name.toLowerCase().includes(searchValue.toLowerCase())) return true;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
return false;
|
|
||||||
})
|
|
||||||
|
|
||||||
$: filteredList = searchedList.filter((item) => {
|
|
||||||
if (privacyFilter === "all") return true;
|
|
||||||
if (privacyFilter === "public" && item.privacy.visibility === "public") return true;
|
|
||||||
if (privacyFilter === "private" && item.privacy.visibility === "private") return true;
|
|
||||||
return false;
|
|
||||||
});
|
|
||||||
|
|
||||||
let sortedList = [];
|
|
||||||
|
|
||||||
$: if (filteredList) {
|
|
||||||
switch (sortBy) {
|
|
||||||
case "name": sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
break;
|
|
||||||
case "display name": sortedList = filteredList.sort((a, b) => {
|
|
||||||
if (a.display_name && b.display_name) return a.display_name.localeCompare(b.display_name);
|
|
||||||
else if (a.display_name && !b.display_name) return a.display_name.localeCompare(b.name);
|
|
||||||
else if (!a.display_name && b.display_name) return a.name.localeCompare(b.display_name);
|
|
||||||
else return a.name.localeCompare(b.name);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "creation date": sortedList = filteredList.sort((a, b) => {
|
|
||||||
if (a.created && b.created) return a.created.localeCompare(b.created);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case "ID": sortedList = filteredList.sort((a, b) => a.id.localeCompare(b.id));
|
|
||||||
break;
|
|
||||||
default: sortedList = filteredList.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
let memberFilteredList = [];
|
|
||||||
$: memberFilteredList = sortedList.filter((item: Member) => {
|
|
||||||
if (groupSearchMode === "none") {
|
|
||||||
if (groups.some(group => group.members && group.members.includes(item.uuid))) return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (selectedGroups.length < 1) return true;
|
|
||||||
|
|
||||||
switch (groupSearchMode) {
|
|
||||||
case "include": if (selectedGroups.some(group => group.members && group.members.includes(item.uuid))) return true;
|
|
||||||
break;
|
|
||||||
case "exclude": if (selectedGroups.every(group => group.members && !group.members.includes(item.uuid))) return true;
|
|
||||||
break;
|
|
||||||
case "match": if (selectedGroups.every(group => group.members && 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(finalList.length / itemsPerPage);
|
|
||||||
|
|
||||||
$: slicedList = finalList.slice(indexOfFirstItem, indexOfLastItem);
|
|
||||||
|
|
||||||
function groupListRenderer(item: any) {
|
|
||||||
return `${item.name} (<code>${item.shortid}</code>)`;
|
|
||||||
}
|
|
||||||
|
|
||||||
addFormatter({
|
|
||||||
'member-list': groupListRenderer
|
|
||||||
});
|
|
||||||
|
|
||||||
function updateList(event: any) {
|
|
||||||
list = list.map(member => member.id !== event.detail.id ? member : event.detail);
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateGroups(event: any) {
|
|
||||||
groups = event.detail;
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDelete(event: any) {
|
|
||||||
list = list.filter(member => member.id !== event.detail);
|
|
||||||
}
|
|
||||||
|
|
||||||
function addMemberToList(event: any) {
|
|
||||||
list.push(event.detail);
|
|
||||||
list = list;
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>
|
|
||||||
<CardTitle style="margin-top: 8px; outline: none;">
|
|
||||||
<div class="icon d-inline-block">
|
|
||||||
<FaSearch />
|
|
||||||
</div> Search members
|
|
||||||
</CardTitle>
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Page length</InputGroupText>
|
|
||||||
<Input bind:value={itemsPerPageValue} type="select" aria-label="page length">
|
|
||||||
<option>10</option>
|
|
||||||
<option>25</option>
|
|
||||||
<option>50</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Search by</InputGroupText>
|
|
||||||
<Input bind:value={searchBy} type="select" aria-label="search by">
|
|
||||||
<option>name</option>
|
|
||||||
<option>display name</option>
|
|
||||||
<option>description</option>
|
|
||||||
<option>ID</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Sort by</InputGroupText>
|
|
||||||
<Input bind:value={sortBy} type="select" aria-label="sort by">
|
|
||||||
<option>name</option>
|
|
||||||
<option>display name</option>
|
|
||||||
{#if !isPublic}<option>creation date</option>{/if}
|
|
||||||
<option>ID</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Sort order</InputGroupText>
|
|
||||||
<Input bind:value={sortOrder} type="select" aria-label="sort order">
|
|
||||||
<option>ascending</option>
|
|
||||||
<option>descending</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
{#if !isPublic}
|
|
||||||
<Col xs={12} lg={3} class="mb-2">
|
|
||||||
<InputGroup>
|
|
||||||
<InputGroupText>Only show</InputGroupText>
|
|
||||||
<Input bind:value={privacyFilter} type="select" aria-label="only show">
|
|
||||||
<option>all</option>
|
|
||||||
<option>public</option>
|
|
||||||
<option>private</option>
|
|
||||||
</Input>
|
|
||||||
</InputGroup>
|
|
||||||
</Col>
|
|
||||||
{/if}
|
|
||||||
</Row>
|
|
||||||
{#if !isPublic}
|
|
||||||
<hr/>
|
|
||||||
<Label>Filter members by group</Label>
|
|
||||||
<Svelecte disableHighlight renderer="member-list" valueAsObject bind:value={selectedGroups} options={grouplist} multiple style="margin-bottom: 0.5rem">
|
|
||||||
</Svelecte>
|
|
||||||
<span style="cursor: pointer" id="m-include" on:click={() => groupSearchMode = "include"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "include" : ""} tabindex={0}>{@html groupSearchMode === "include" ? "<b>include</b>" : "include"}</span>
|
|
||||||
| <span style="cursor: pointer" id="m-exclude" on:click={() => groupSearchMode = "exclude"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "exclude" : ""} tabindex={0}>{@html groupSearchMode === "exclude" ? "<b>exclude</b>" : "exclude"}</span>
|
|
||||||
| <span style="cursor: pointer" id="m-match" on:click={() => groupSearchMode = "match"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "match" : ""} tabindex={0}>{@html groupSearchMode === "match" ? "<b>exact match</b>" : "exact match"}</span>
|
|
||||||
| <span style="cursor: pointer" id="m-none" on:click={() => groupSearchMode = "none"} on:keyup={e => e.key === "Enter" ? groupSearchMode = "none" : ""} tabindex={0}>{@html groupSearchMode === "none" ? "<b>none</b>" : "none"}</span>
|
|
||||||
<Tooltip placement="bottom" target="m-include">Includes every member who's a part of any of the groups.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="m-exclude">Excludes every member who's a part of any of the groups, the opposite of include.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="m-match">Only includes members who are a part of every group.</Tooltip>
|
|
||||||
<Tooltip placement="bottom" target="m-none">Only includes members that are in no groups.</Tooltip>
|
|
||||||
{/if}
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
|
|
||||||
{#if listLoading && !err}
|
|
||||||
<div class="mx-auto text-center">
|
|
||||||
<Spinner class="d-inline-block" />
|
|
||||||
</div>
|
|
||||||
{:else if err}
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={10}>
|
|
||||||
<Alert color="danger">{err}</Alert>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={2}>
|
|
||||||
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{:else}
|
|
||||||
|
|
||||||
<Row>
|
|
||||||
<Col xs={12} lg={10}>
|
|
||||||
<Input class="mb-3" bind:value={searchValue} placeholder="search by {searchBy}..."/>
|
|
||||||
</Col>
|
|
||||||
<Col xs={12} lg={2} class="mb-3 mb-lg-0">
|
|
||||||
<Button class="w-100 mb-3" color="primary" on:click={fetchMembers} aria-label="refresh member list">Refresh</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<ListPagination bind:currentPage bind:pageAmount />
|
|
||||||
{#if !isPublic}
|
|
||||||
<NewMember on:create={addMemberToList} />
|
|
||||||
{/if}
|
|
||||||
{#if settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true}
|
|
||||||
<Accordion class="my-3" stayOpen>
|
|
||||||
{#each slicedList as member, index (member.id)}
|
|
||||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
|
||||||
<AccordionItem>
|
|
||||||
<CardsHeader bind:item={member} slot="header">
|
|
||||||
<FaUserCircle slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
|
||||||
</AccordionItem>
|
|
||||||
{:else}
|
|
||||||
<AccordionItem>
|
|
||||||
<CardsHeader bind:item={member} slot="header">
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
|
||||||
</AccordionItem>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</Accordion>
|
|
||||||
{:else if settings.accessibility.expandedcards}
|
|
||||||
{#each slicedList as member, index (member.id)}
|
|
||||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardsHeader bind:item={member}>
|
|
||||||
<FaUserCircle slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
{:else}
|
|
||||||
<Card class="mb-3">
|
|
||||||
<CardHeader>
|
|
||||||
<CardsHeader bind:item={member}>
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</CardHeader>
|
|
||||||
<CardBody>
|
|
||||||
<Body on:deletion={updateDelete} on:update={updateList} on:updateGroups={updateGroups} bind:isPublic bind:groups bind:member />
|
|
||||||
</CardBody>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{:else}
|
|
||||||
<div class="my-3">
|
|
||||||
{#each slicedList as member, index (member.id)}
|
|
||||||
{#if (!isPublic && member.privacy.visibility === "public") || isPublic}
|
|
||||||
<Card>
|
|
||||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
|
||||||
<CardsHeader bind:item={member}>
|
|
||||||
<FaUserCircle slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</Link>
|
|
||||||
</Card>
|
|
||||||
{:else}
|
|
||||||
<Card>
|
|
||||||
<Link class="accordion-button collapsed" style="text-decoration: none;" to={isMainDash ? `/dash/m/${member.id}` : `/profile/m/${member.id}`}>
|
|
||||||
<CardsHeader bind:item={member}>
|
|
||||||
<FaLock slot="icon" />
|
|
||||||
</CardsHeader>
|
|
||||||
</Link>
|
|
||||||
</Card>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
<ListPagination bind:currentPage bind:pageAmount />
|
|
||||||
{/if}
|
|
||||||
@ -4,14 +4,11 @@
|
|||||||
import { currentUser, loggedIn } from '../stores';
|
import { currentUser, loggedIn } from '../stores';
|
||||||
|
|
||||||
import SystemMain from '../lib/system/Main.svelte';
|
import SystemMain from '../lib/system/Main.svelte';
|
||||||
import MemberList from '../lib/member/List.svelte';
|
import List from '../lib/list/List.svelte';
|
||||||
import GroupList from '../lib/group/List.svelte';
|
|
||||||
|
|
||||||
import { System } from '../api/types';
|
import { System } from '../api/types';
|
||||||
import api from '../api';
|
import api from '../api';
|
||||||
|
|
||||||
let isPublic = false;
|
|
||||||
|
|
||||||
// get the state from the navigator so that we know which tab to start on
|
// get the state from the navigator so that we know which tab to start on
|
||||||
let location = useLocation();
|
let location = useLocation();
|
||||||
let params = $location.search && new URLSearchParams($location.search);
|
let params = $location.search && new URLSearchParams($location.search);
|
||||||
@ -82,13 +79,13 @@
|
|||||||
<h2 class="visually-hidden">Viewing your own system</h2>
|
<h2 class="visually-hidden">Viewing your own system</h2>
|
||||||
<TabContent class="mt-3">
|
<TabContent class="mt-3">
|
||||||
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
<TabPane tabId="system" tab="System" active={tabPane === "system"}>
|
||||||
<SystemMain bind:user={user} bind:isPublic />
|
<SystemMain bind:user={user} isPublic={false} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
||||||
<MemberList bind:groups={groups} bind:list={members} bind:isPublic />
|
<List bind:groups={groups} bind:members={members} isPublic={false} itemType={"member"}/>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
||||||
<GroupList bind:members={members} bind:list={groups} bind:isPublic />
|
<List bind:members={members} bind:groups={groups} isPublic={false} itemType={"group"}/>
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
@ -4,8 +4,7 @@
|
|||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
|
|
||||||
import SystemMain from '../../lib/system/Main.svelte';
|
import SystemMain from '../../lib/system/Main.svelte';
|
||||||
import MemberList from '../../lib/member/List.svelte';
|
import List from '../../lib/list/List.svelte';
|
||||||
import GroupList from '../../lib/group/List.svelte';
|
|
||||||
|
|
||||||
import { System } from '../../api/types';
|
import { System } from '../../api/types';
|
||||||
import api from '../../api';
|
import api from '../../api';
|
||||||
@ -72,10 +71,10 @@
|
|||||||
<SystemMain bind:user isPublic={true} />
|
<SystemMain bind:user isPublic={true} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
<TabPane tabId="members" tab="Members" active={tabPane === "members"}>
|
||||||
<MemberList bind:list={members} isPublic={true} />
|
<List members={members} groups={groups} isPublic={true} itemType={"member"} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
<TabPane tabId="groups" tab="Groups" active={tabPane === "groups"}>
|
||||||
<GroupList bind:members={members} bind:list={groups} isPublic={true}/>
|
<List members={members} groups={groups} isPublic={true} itemType={"group"} />
|
||||||
</TabPane>
|
</TabPane>
|
||||||
</TabContent>
|
</TabContent>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user