eightball/PluralKit
1
0
Fork 0
mirror of https://github.com/PluralKit/PluralKit.git synced 2026-02-06 13:57:54 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

feat(dashboard): add more views/filter/sort options to group/member pages

Browse source
This commit is contained in:
Jake Fulmine 2023-09-21 13:19:29 +02:00
parent 87430e5748
commit 94e848ee4c
3 changed files with 82 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

103
dashboard/src/components/list/PageControl.svelte
View file

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