diff --git a/dashboard/src/App.svelte b/dashboard/src/App.svelte index 8f6014df..fe71b3bb 100644 --- a/dashboard/src/App.svelte +++ b/dashboard/src/App.svelte @@ -7,8 +7,8 @@ import Public from "./routes/Public.svelte"; import Main from "./routes/dash/Profile.svelte"; import Status from './routes/status/Status.svelte'; - import Member from './routes/dash/Member/Member.svelte'; - import Group from './routes/dash/Group/Group.svelte'; + import Member from './routes/dash/member/Member.svelte'; + import Group from './routes/dash/group/Group.svelte'; import PageNotFound from './routes/PageNotFound.svelte'; import { Alert } from 'sveltestrap'; import DiscordLogin from "./routes/DiscordLogin.svelte"; diff --git a/dashboard/src/components/common/CardsHeader.svelte b/dashboard/src/components/common/CardsHeader.svelte index 6e58bfe1..a29d3899 100644 --- a/dashboard/src/components/common/CardsHeader.svelte +++ b/dashboard/src/components/common/CardsHeader.svelte @@ -15,7 +15,7 @@ let settings = JSON.parse(localStorage.getItem("pk-settings")); $: if (item.name) { - if ((searchBy === "display name" || sortBy === "display name") && item.display_name) htmlName = toHTML(item.display_name); + if ((searchBy === "display_name" || sortBy === "display_name") && item.display_name) htmlName = toHTML(item.display_name); else htmlName = toHTML(item.name); } else htmlName = ""; diff --git a/dashboard/src/components/group/CardView.svelte b/dashboard/src/components/group/CardView.svelte index c30edea9..4c908dcd 100644 --- a/dashboard/src/components/group/CardView.svelte +++ b/dashboard/src/components/group/CardView.svelte @@ -95,8 +95,7 @@ update({...group, ...res}); group = {...group, ...res}; err = []; - success = true; - loading = false; + view = 'card'; } catch (error) { console.log(error); err.push(error.message); @@ -106,7 +105,7 @@ } - +
@@ -133,13 +132,13 @@
- {#if !isPublic}{/if} + {#if !isPublic}{/if} - {#if !isPublic && isDash}{/if} + {#if !isPublic && isDash}{/if} - + {#if !isPublic}Edit group{/if} {#if !isPublic && isDash}View members{/if} @@ -160,13 +159,13 @@
- + - + - + Edit group Back to info @@ -194,9 +193,6 @@
- {#if success} - group edited! - {/if} {#if err} {#each err as errorMessage} {@html errorMessage} @@ -209,14 +205,14 @@ - + Go back Submit edit {/if}
- +
\ No newline at end of file diff --git a/dashboard/src/components/group/Edit.svelte b/dashboard/src/components/group/Edit.svelte index d400aaa5..ff3ddf8d 100644 --- a/dashboard/src/components/group/Edit.svelte +++ b/dashboard/src/components/group/Edit.svelte @@ -51,8 +51,8 @@ let res = await api().groups(group.id).patch({data}); update({...group, ...res}); err = []; - success = true; - loading = false; + editMode = false; + return; } catch (error) { console.log(error); err.push(error.message); diff --git a/dashboard/src/components/list/CardView.svelte b/dashboard/src/components/list/CardView.svelte index 53660c9d..75d039ca 100644 --- a/dashboard/src/components/list/CardView.svelte +++ b/dashboard/src/components/list/CardView.svelte @@ -7,25 +7,19 @@ import type { Member, Group } from '../../api/types'; import MemberCard from '../member/CardView.svelte'; import GroupCard from '../group/CardView.svelte'; + import type { PageOptions, List } from './types'; - export let list: Member[]|Group[]; - export let groups: Group[] = []; - export let members: Group[] = []; - - export let itemType: string; - - export let searchBy = "name"; - export let sortBy = "name"; - export let isPublic = false; - export let isDash = false; + export let lists: List; + export let pageOptions: PageOptions; + export let otherList: List; let copiedItems = {}; function getShortLink(id: string) { let url = "https://pk.mt" - if (itemType === "member") url += "/m/" - else if (itemType === "group") url += "/g/" + if (pageOptions.type === "member") url += "/m/" + else if (pageOptions.type === "group") url += "/g/" url += id; @@ -53,12 +47,12 @@ } - - {#if itemType === "member"} - {#each list as item (item.uuid)} -
- -
copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} > + + {#if pageOptions.type === "member"} + {#each lists.currentPage as item (item.uuid)} +
+ +
copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} > {#if item.privacy && item.privacy.visibility === "private"} {:else} @@ -66,14 +60,14 @@ {/if}
- {copiedItems[item.uuid] ? "Copied!" : "Copy public link"} + {copiedItems[item.uuid] ? "Copied!" : "Copy public link"}
{/each} - {:else if itemType === "group"} - {#each list as item (item.uuid)} -
- -
copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} > + {:else if pageOptions.type === "group"} + {#each lists.currentPage as item (item.uuid)} +
+ +
copyShortLink(item.uuid, item.id)} on:keydown={(e) => copyShortLink(item.uuid, item.id, e)} tabindex={0} > {#if item.privacy && item.privacy.visibility === "private"} {:else} @@ -81,7 +75,7 @@ {/if}
- {copiedItems[item.uuid] ? "Copied!" : "Copy public link"} + {copiedItems[item.uuid] ? "Copied!" : "Copy public link"}
{/each} {/if} diff --git a/dashboard/src/components/list/List.svelte b/dashboard/src/components/list/List.svelte index a2a19ee5..9c55e181 100644 --- a/dashboard/src/components/list/List.svelte +++ b/dashboard/src/components/list/List.svelte @@ -7,80 +7,50 @@ import NewGroup from '../group/NewGroup.svelte'; import ListPagination from '../common/ListPagination.svelte'; import ListControl from './ListControl.svelte'; - import ListSearch from './ListSearch.svelte'; import ListView from './ListView.svelte'; import CardView from './CardView.svelte'; import type { Member, Group } from '../../api/types'; import api from '../../api'; + import type { ListOptions, List, PageOptions } from './types'; + import { createShortList, filterList, getPageAmount, paginateList } from './functions'; - export let members: Member[] = []; - export let groups: Group[] = []; - - export let view: string = "list"; - - export let isDash = false; - - 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)); + export let options: ListOptions; + export let pageOptions: PageOptions; + export let lists: List; + export let otherList: List; 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 pageAmount = 1; - let itemsPerPageValue; - $: { - if (view === "card") itemsPerPageValue = "24"; - - else if (settings && settings.accessibility && settings.accessibility.expandedcards) itemsPerPageValue = "10"; - else itemsPerPageValue = "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 itemType: string; - - let searchValue: string = ""; - let searchBy: string = "name"; - let sortBy: string = "name"; + if (pageOptions.view === "card") pageOptions.itemsPerPage = 24; + else if (settings && settings.accessibility && settings.accessibility.expandedcards) pageOptions.itemsPerPage = 10; + else pageOptions.itemsPerPage = 25; let params = useParams(); $: id = $params.id; onMount(() => { - if (token || isPublic) fetchList(); + if (token || pageOptions.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; + if (pageOptions.type === "member") { + const res: Member[] = await api().systems(pageOptions.isPublic ? id : "@me").members.get({ auth: !pageOptions.isPublic }); + lists.rawList = 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 if (pageOptions.type === "group") { + const res: Group[] = await api().systems(pageOptions.isPublic ? id : "@me").groups.get({ auth: !pageOptions.isPublic, query: { with_members: !pageOptions.isPublic } }); + lists.rawList = res; } - else throw new Error(`Unknown list type ${itemType}`); + else throw new Error(`Unknown list type ${pageOptions.type}`); } catch (error) { console.log(error); err = error.message; @@ -88,39 +58,28 @@ listLoading = false; } + $: lists.shortGroups = createShortList(pageOptions.type === 'group' ? lists.rawList : otherList.rawList); + $: lists.shortMembers = createShortList(pageOptions.type === 'member' ? lists.rawList : otherList.rawList); + $: lists.processedList = filterList(lists.rawList, options, pageOptions.type); + $: lists.currentPage = paginateList(lists.processedList, pageOptions); + $: pageAmount = getPageAmount(lists.processedList, pageOptions); + function addItemToList(event: any) { - if (itemType === "member") { - members.push(event.detail); - list = members; - } else if (itemType === "group") { - groups.push(event.detail); - list = groups; - } + lists.rawList.push(event.detail); + lists.rawList = lists.rawList; } function updateDelete(event: any) { - if (itemType === "member") { - members = members.filter(m => m.id !== event.detail); - list = members; - } else if (itemType === "group") { - groups = groups.filter(g => g.id !== event.detail); - list = groups; - } + lists.rawList = lists.rawList.filter(m => m.id !== event.detail); } function update(event: any) { - if (itemType === "member") { - members = members.map(m => m.id === event.detail.id ? m = event.detail : m); - list = members; - } else if (itemType === "group") { - groups = groups.map(g => g.id === event.detail.id ? g = event.detail : g); - list = groups; - } + lists.rawList = lists.rawList.map(m => m.id === event.detail.id ? m = event.detail : m); } - + {#if listLoading && !err}
@@ -136,26 +95,25 @@ {:else} -{processedList.length} {itemType}s ({slicedList.length} shown) - +{lists.processedList.length} {pageOptions.type}s ({lists.currentPage.length} shown) {e.preventDefault(); fetchList()}}>Refresh list - + -{#if !err && !isPublic} - {#if itemType === "member"} +{#if !err && !pageOptions.isPublic} + {#if pageOptions.type === "member"} - {:else if itemType === "group"} + {:else if pageOptions.type === "group"} {/if} {/if} -{#if view === "card"} - -{:else if view === "tiny"} +{#if pageOptions.view === "card"} + +{:else if pageOptions.view === "tiny"} tiny! {:else} - + {/if} - + {/if} \ No newline at end of file +{#if advanced} +
+ +
+ Filter by {pageOptions.type === "member" ? "groups" : "members"} +
+
+ +
+ Augh + + +

Include {pageOptions.type === 'group' ? "groups with the following members" : "members in the following groups"}

+ + {#if pageOptions.type === "member"} + + {:else if pageOptions.type === "group"} + + {/if} + + + + Exact? + + + + + + + +

Exclude {pageOptions.type === 'group' ? "groups with the following members" : "members in the following groups"}

+ + {#if pageOptions.type === "member"} + + {:else if pageOptions.type === "group"} + + {/if} + + + + Exact? + + + + + + +
+ +
+ Filter by fields +
+
+ +
+ I am so tired + + + + + Display name + resetPage()}> + + + + + + + + + Description + resetPage()}> + + + + + + + {#if pageOptions.type === 'member'} + + + Avatar + resetPage()}> + + + + + + + + + Birthday + resetPage()}> + + + + + + + + + Pronouns + resetPage()}> + + + + + + + {:else} + + + Icon + resetPage()}> + + + + + + + {/if} + + {/if} + + \ No newline at end of file diff --git a/dashboard/src/components/list/ListView.svelte b/dashboard/src/components/list/ListView.svelte index f9e4f375..15aba002 100644 --- a/dashboard/src/components/list/ListView.svelte +++ b/dashboard/src/components/list/ListView.svelte @@ -10,52 +10,43 @@ import MemberBody from '../member/Body.svelte'; import GroupBody from '../group/Body.svelte'; import CardsHeader from '../common/CardsHeader.svelte'; + import { defaultListOptions, type List, type ListOptions, type PageOptions } from './types'; let settings = JSON.parse(localStorage.getItem("pk-settings")); - export let list: Member[]|Group[]; - export let members: Member[] = []; - export let groups: Group[] = []; - - export let isPublic: boolean; - export let itemType: string; - export let itemsPerPage: number; - export let currentPage: number; - export let fullLength: number; - - export let openByDefault = false; - - export let searchBy = "name"; - export let sortBy = "name"; - - $: indexStart = itemsPerPage * (currentPage - 1); + export let options: ListOptions = JSON.parse(JSON.stringify(defaultListOptions)); + export let otherList: List ; + export let lists: List; + export let pageOptions: PageOptions; function getItemLink(item: Member | Group): string { let url: string; - if (!isPublic) url = "/dash/"; + if (!pageOptions.isPublic) url = "/dash/"; else url = "/profile/"; - if (itemType === "member") url += "m/"; - else if (itemType === "group") url += "g/"; + if (pageOptions.type === "member") url += "m/"; + else if (pageOptions.type === "group") url += "g/"; url += item.id; return url; } + $: indexStart = pageOptions.itemsPerPage * (pageOptions.currentPage - 1); + function skipToNextItem(event, index: number) { let el; if (event.key === "ArrowDown") { - if (index + 1 < indexStart + itemsPerPage && index + 1 < fullLength) el = document.getElementById(`${itemType}-card-${index + 1}`); - else el = document.getElementById(`${itemType}-card-${indexStart}`); + if (index + 1 < indexStart + pageOptions.itemsPerPage && index + 1 < lists.processedList.length) el = document.getElementById(`${pageOptions.type}-card-${index + 1}`); + else el = document.getElementById(`${pageOptions.type}-card-${indexStart}`); } if (event.key === "ArrowUp") { - if (index - 1 >= indexStart) el = document.getElementById(`${itemType}-card-${index - 1}`); - else if (fullLength <= indexStart + itemsPerPage) el = document.getElementById(`${itemType}-card-${fullLength - 1}`); - else el = document.getElementById(`${itemType}-card-${indexStart + itemsPerPage - 1}`); + if (index - 1 >= indexStart) el = document.getElementById(`${pageOptions.type}-card-${index - 1}`); + else if (lists.processedList.length <= indexStart + pageOptions.itemsPerPage) el = document.getElementById(`${pageOptions.type}-card-${lists.processedList.length - 1}`); + else el = document.getElementById(`${pageOptions.type}-card-${indexStart + pageOptions.itemsPerPage - 1}`); } if (el) { @@ -66,7 +57,20 @@ let isOpen = {}; - function toggleCard(index: string) { + function toggleCard(index: string, count: number) { + + if (pageOptions.randomized) { + let newIndex = index + '-' + pageOptions.currentPage + '-' + count; + + isOpen[newIndex] = isOpen[newIndex] || {}; + if (isOpen[newIndex] === true) { + isOpen[newIndex] = false; + } else { + isOpen[newIndex] = true; + } + return; + } + isOpen[index] = isOpen[index] || {}; if (isOpen[index] === true) { isOpen[index] = false; @@ -78,8 +82,8 @@ function getShortLink(id: string) { let url = "https://pk.mt" - if (itemType === "member") url += "/m/" - else if (itemType === "group") url += "/g/" + if (pageOptions.type === "member") url += "/m/" + else if (pageOptions.type === "group") url += "/g/" url += id; @@ -108,18 +112,18 @@ } -{#if !openByDefault && (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)} +{#if (settings && settings.accessibility ? (!settings.accessibility.expandedcards && !settings.accessibility.pagelinks) : true)}
- {#each list as item, index (item.uuid)} + {#each lists.currentPage as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)}

-

- + - {#if itemType === "member"} - - {:else if itemType === "group"} - + {#if pageOptions.type === "member"} + + {:else if pageOptions.type === "group"} + {/if} {/each}
-{:else if openByDefault || settings.accessibility.expandedcards} - {#each list as item, index (item.id + index)} +{:else if settings.accessibility.expandedcards} + {#each lists.currentPage as item, index (pageOptions.randomized ? item.uuid + '-' + index : item.uuid)} -