mirror of
https://github.com/PluralKit/PluralKit.git
synced 2026-02-04 04:56:49 +00:00
feat(dashboard): add more views/filter/sort options to group/member pages
This commit is contained in:
Jake Fulmine
parent
87430e5748
commit
94e848ee4c
3 changed files with 82 additions and 35 deletions
|
|
@ -18,6 +18,11 @@
|
|||
default: 24,
|
||||
large: 60
|
||||
}
|
||||
else if (pageOptions.view === "tiny") itemsPerPageSelection = {
|
||||
small: 18,
|
||||
default: 36,
|
||||
large: 60
|
||||
}
|
||||
else {
|
||||
itemsPerPageSelection = {
|
||||
small: 10,
|
||||
|
|
@ -27,34 +32,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
function resetPage() {
|
||||
pageOptions.currentPage = 1;
|
||||
}
|
||||
$: updateItemsPerPage(pageOptions.view)
|
||||
|
||||
function updateItemsPerPage(event) {
|
||||
resetPage();
|
||||
if (event.target?.value === 'card') {
|
||||
switch (pageOptions.itemsPerPage) {
|
||||
case 10: pageOptions.itemsPerPage = 12;
|
||||
break;
|
||||
case 25: pageOptions.itemsPerPage = 24;
|
||||
break;
|
||||
case 50: pageOptions.itemsPerPage = 60;
|
||||
break;
|
||||
default: pageOptions.itemsPerPage = 24;
|
||||
break;
|
||||
}
|
||||
} else if (event.target?.value === 'list') {
|
||||
switch (pageOptions.itemsPerPage) {
|
||||
case 12: pageOptions.itemsPerPage = 10;
|
||||
break;
|
||||
case 24: pageOptions.itemsPerPage = 25;
|
||||
break;
|
||||
case 60: pageOptions.itemsPerPage = 50;
|
||||
break;
|
||||
default: pageOptions.itemsPerPage = 25
|
||||
}
|
||||
}
|
||||
function updateItemsPerPage(..._: any) {
|
||||
if (pageOptions.view === "card") pageOptions.itemsPerPage = 24
|
||||
else if (pageOptions.view === "tiny") pageOptions.itemsPerPage = 36
|
||||
else pageOptions.itemsPerPage = 25
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -73,10 +56,10 @@
|
|||
<Col xs={12} md={6} lg={4} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Page length</InputGroupText>
|
||||
<Input bind:value={pageOptions.itemsPerPage} type="select" aria-label="page length" on:change={() => resetPage()}>
|
||||
<option>{itemsPerPageSelection.small}</option>
|
||||
<option>{itemsPerPageSelection.default}</option>
|
||||
<option>{itemsPerPageSelection.large}</option>
|
||||
<Input bind:value={pageOptions.itemsPerPage} type="select" aria-label="page length">
|
||||
<option value={itemsPerPageSelection.small}>{itemsPerPageSelection.small}</option>
|
||||
<option value={itemsPerPageSelection.default}>{itemsPerPageSelection.default}</option>
|
||||
<option value={itemsPerPageSelection.large}>{itemsPerPageSelection.large}</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
|
|
@ -92,25 +75,75 @@
|
|||
<Col xs={12} md={6} lg={4} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>View mode</InputGroupText>
|
||||
<Input bind:value={pageOptions.view} type="select" aria-label="view mode" on:change={(e) => updateItemsPerPage(e)}>
|
||||
<Input bind:value={pageOptions.view} type="select" aria-label="view mode">
|
||||
<option value="list">List</option>
|
||||
<option value="card">Cards</option>
|
||||
<option value="tiny">Tiny</option>
|
||||
<option value="text">Text Only</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={4} class="mb-2">
|
||||
<InputGroup>
|
||||
<InputGroupText>Sort By</InputGroupText>
|
||||
<Input bind:value={options.sort} type="select" aria-label="page length">
|
||||
<option value="name">Name</option>
|
||||
<option value="display_name">Display name</option>
|
||||
<option value="id">ID</option>
|
||||
<option value="color">Color</option>
|
||||
<option value="created">Creation date</option>
|
||||
<option value="none">API response order</option>
|
||||
</Input>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<hr/>
|
||||
<Row>
|
||||
<Col xs={12} class="mb-2">
|
||||
<Col xs={12} lg={12} class="mb-2">
|
||||
<InputGroup class="mb-2">
|
||||
<InputGroupText>Name</InputGroupText>
|
||||
<Input
|
||||
style="resize: none; overflow: hidden;"
|
||||
rows={1} type="textarea"
|
||||
bind:value={options.search.name}
|
||||
on:keydown={() => resetPage()}
|
||||
bind:value={options.search.name}
|
||||
placeholder="Search by name..."/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
<details>
|
||||
<summary class="mb-3"><b>Toggle extra search fields</b></summary>
|
||||
<Row>
|
||||
<Col xs={12} lg={6} class="mb-2">
|
||||
<InputGroup class="mb-2">
|
||||
<InputGroupText>Display Name</InputGroupText>
|
||||
<Input
|
||||
style="resize: none; overflow: hidden;"
|
||||
rows={1} type="textarea"
|
||||
bind:value={options.search.display_name}
|
||||
placeholder="Search by display name..."/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-2">
|
||||
<InputGroup class="mb-2">
|
||||
<InputGroupText>ID</InputGroupText>
|
||||
<Input
|
||||
style="resize: none; overflow: hidden;"
|
||||
rows={1} type="textarea"
|
||||
bind:value={options.search.id}
|
||||
placeholder="Search by id..."/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
<Col xs={12} lg={6} class="mb-2">
|
||||
<InputGroup class="mb-2">
|
||||
<InputGroupText>Description</InputGroupText>
|
||||
<Input
|
||||
style="resize: none; overflow: hidden;"
|
||||
rows={1} type="textarea"
|
||||
bind:value={options.search.description}
|
||||
placeholder="Search by description..."/>
|
||||
</InputGroup>
|
||||
</Col>
|
||||
</Row>
|
||||
</details>
|
||||
</CardBody>
|
||||
</Card>
|
||||
|
|
@ -15,6 +15,8 @@
|
|||
import { filterList, paginateList, getPageAmount } from '../../../components/list/functions';
|
||||
import PageControl from "../../../components/list/PageControl.svelte";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import TinyView from "../../../components/list/TinyView.svelte";
|
||||
import TextView from "../../../components/list/TextView.svelte";
|
||||
|
||||
// get the state from the navigator so that we know which tab to start on
|
||||
let location = useLocation();
|
||||
|
|
@ -110,6 +112,7 @@
|
|||
|
||||
function getDefaultItemsPerpage(): number {
|
||||
if (listView === 'card') return 24;
|
||||
else if (listView === 'tiny') return 36;
|
||||
else if (settings && settings.accessibility && settings.accessibility.expandedcards)
|
||||
return 10;
|
||||
else return 25;
|
||||
|
|
@ -184,6 +187,10 @@
|
|||
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
|
||||
{#if pageOptions.view === "card"}
|
||||
<CardView {pageOptions} currentList={currentPage} />
|
||||
{:else if pageOptions.view === "tiny"}
|
||||
<TinyView {pageOptions} currentList={currentPage} />
|
||||
{:else if pageOptions.view === "text"}
|
||||
<TextView {pageOptions} currentList={currentPage} {listOptions} />
|
||||
{:else}
|
||||
<ListView {pageOptions} currentList={currentPage} fullListLength={groupMembers.length}/>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@
|
|||
import { filterList, getPageAmount, paginateList } from '../../../components/list/functions';
|
||||
import PageControl from "../../../components/list/PageControl.svelte";
|
||||
import { writable, type Writable } from "svelte/store";
|
||||
import TinyView from "../../../components/list/TinyView.svelte";
|
||||
import TextView from "../../../components/list/TextView.svelte";
|
||||
|
||||
// get the state from the navigator so that we know which tab to start on
|
||||
let location = useLocation();
|
||||
|
|
@ -113,6 +115,7 @@
|
|||
|
||||
function getDefaultItemsPerpage(): number {
|
||||
if (listView === 'card') return 24;
|
||||
else if (listView === 'tiny') return 36;
|
||||
else if (settings && settings.accessibility && settings.accessibility.expandedcards)
|
||||
return 10;
|
||||
else return 25
|
||||
|
|
@ -186,6 +189,10 @@
|
|||
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
|
||||
{#if pageOptions.view === "card"}
|
||||
<CardView {pageOptions} currentList={currentPage} />
|
||||
{:else if pageOptions.view === "tiny"}
|
||||
<TinyView {pageOptions} currentList={currentPage} />
|
||||
{:else if pageOptions.view === "text"}
|
||||
<TextView {pageOptions} currentList={currentPage} {listOptions} />
|
||||
{:else}
|
||||
<ListView {pageOptions} currentList={currentPage} fullListLength={memberGroups.length}/>
|
||||
{/if}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue