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

tweak(dashboard): properly change items per page when switching view

Browse Source
This commit is contained in:
Jake Fulmine 2022-11-27 20:07:35 +01:00
parent 217afee8a0
commit 9cc4b12130
3 changed files with 45 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
dashboard/src/components/list/PageControl.svelte
View File

@ -28,8 +28,34 @@
}
function resetPage() {
pageOptions.currentPage = 1;
}
pageOptions.currentPage = 1;
}
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
}
}
}
</script>
<Card class="mb-3">
@ -54,20 +80,6 @@
</Input>
</InputGroup>
</Col>
<!-- <Col xs={12} md={6} lg={4} class="mb-2">
<InputGroup>
<InputGroupText>Sort by</InputGroupText>
<Input bind:value={options.sort} type="select">
<option value="name">Name</option>
<option value="display_name">Display name</option>
<option value="id">ID</option>
{#if pageOptions.type === 'member'}
<option value="pronouns">Pronouns</option>
{/if}
<option value="none">API response order</option>
</Input>
</InputGroup>
</Col> -->
<Col xs={12} md={6} lg={4} class="mb-2">
<InputGroup>
<InputGroupText>Order</InputGroupText>
@ -77,20 +89,10 @@
</Input>
</InputGroup>
</Col>
<!-- <Col xs={12} md={6} lg={4} class="mb-2">
<InputGroup>
<InputGroupText>Only show</InputGroupText>
<Input bind:value={options.show} type="select" aria-label="view mode" on:change={() => resetPage()}>
<option value="all">All {pageOptions.type}s</option>
<option value="public">Public {pageOptions.type}s</option>
<option value="private">Private {pageOptions.type}s</option>
</Input>
</InputGroup>
</Col> -->
<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">
<Input bind:value={pageOptions.view} type="select" aria-label="view mode" on:change={(e) => updateItemsPerPage(e)}>
<option value="list">List</option>
<option value="card">Cards</option>
</Input>

8
dashboard/src/routes/Dash/Group/Group.svelte
View File

@ -184,6 +184,7 @@
<Alert color="danger">{memberErr}</Alert>
{:else if lists.rawList && lists.rawList.length > 0}
<PageControl bind:options={listOptions} bind:pageOptions />
<span class="itemcounter">{lists.processedList.length} {pageOptions.type}s ({lists.currentPage.length} shown)</span>
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{#if pageOptions.view === "card"}
<CardView {pageOptions} {lists} otherList={nope} on:update={update} />
@ -207,6 +208,13 @@
min-height: 100%;
z-index: -30;
}
.itemcounter {
width: 100%;
text-align: center;
display: inline-block;
margin-bottom: 0.5rem;
}
</style>
<svelte:head>

8
dashboard/src/routes/Dash/Member/Member.svelte
View File

@ -182,6 +182,7 @@
<Alert color="danger">{groupErr}</Alert>
{:else if lists.rawList && lists.rawList.length > 0}
<PageControl bind:options={listOptions} bind:pageOptions />
<span class="itemcounter">{lists.processedList.length} {pageOptions.type}s ({lists.currentPage.length} shown)</span>
<ListPagination bind:currentPage={pageOptions.currentPage} {pageAmount} />
{#if pageOptions.view === "card"}
<CardView {pageOptions} {lists} otherList={nope} on:update={update} />
@ -205,6 +206,13 @@
min-height: 100%;
z-index: -30;
}
.itemcounter {
width: 100%;
text-align: center;
display: inline-block;
margin-bottom: 0.5rem;
}
</style>
<svelte:head>