Add search and view controls to sites page

Adds SearchQuery input and ViewSelector components with create site
button to provide filtering and display options for the sites list.
This commit is contained in:
Torsten Dittmann
2025-06-03 17:20:56 +02:00
parent 4a36260152
commit 745a5964c4
2 changed files with 24 additions and 2 deletions
@@ -72,6 +72,24 @@
<Container>
{#if data.sitesLive}
<Layout.Stack direction="row" justifyContent="space-between">
<Layout.Stack direction="row" alignItems="center">
<SearchQuery placeholder="Search by name" />
</Layout.Stack>
<Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
<ViewSelector
{columns}
view={data.view}
hideColumns
hideView={!data.siteList.total} />
{#if $canWriteSites}
<Button on:mousedown={() => (show = true)} event="create_site" size="s">
<Icon icon={IconPlus} slot="start" size="s" />
Create site
</Button>
{/if}
</Layout.Stack>
</Layout.Stack>
{#if data.siteList.total}
{#if data.view === View.Grid}
<Grid siteList={data.siteList} />
@@ -1,4 +1,4 @@
import { Query } from '@appwrite.io/console';
import { Query, type Models } from '@appwrite.io/console';
import { sdk } from '$lib/stores/sdk';
import { getLimit, getPage, getSearch, getView, pageToOffset, View } from '$lib/helpers/load';
import { CARD_LIMIT, Dependencies } from '$lib/constants';
@@ -19,7 +19,11 @@ export const load = async ({ url, depends, route, params }) => {
offset,
limit,
search,
view
view,
siteList: {
total: 0,
sites: []
} as Models.SiteList
};
const siteList = await sdk