diff options
| author | Wolfgang Müller | 2024-03-05 18:08:09 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2024-03-05 19:25:59 +0100 |
| commit | d1d654ebac2d51e3841675faeb56480e440f622f (patch) | |
| tree | 56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/routes/namespaces | |
| download | hircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz | |
Initial commit0.1.0
Diffstat (limited to 'frontend/src/routes/namespaces')
| -rw-r--r-- | frontend/src/routes/namespaces/+page.svelte | 101 | ||||
| -rw-r--r-- | frontend/src/routes/namespaces/+page.ts | 12 |
2 files changed, 113 insertions, 0 deletions
diff --git a/frontend/src/routes/namespaces/+page.svelte b/frontend/src/routes/namespaces/+page.svelte new file mode 100644 index 0000000..f6568f9 --- /dev/null +++ b/frontend/src/routes/namespaces/+page.svelte @@ -0,0 +1,101 @@ +<script lang="ts"> + import { deleteNamespaces } from '$gql/Mutations'; + import { fetchNamespace, namespacesQuery } from '$gql/Queries'; + import type { Namespace } from '$gql/graphql'; + import { NamespaceSortLabel } from '$lib/Enums'; + import { BasicFilterContext, initFilterContext } from '$lib/Filter'; + import { initPaginationContext } from '$lib/Pagination'; + import { initSelectionContext } from '$lib/Selection'; + import { initSortContext } from '$lib/Sort'; + import { toastFinally } from '$lib/Toasts'; + import AddButton from '$lib/components/AddButton.svelte'; + import Cardlet from '$lib/components/Cardlet.svelte'; + import Empty from '$lib/components/Empty.svelte'; + import Guard from '$lib/components/Guard.svelte'; + import Head from '$lib/components/Head.svelte'; + import Cardlets from '$lib/containers/Cardlets.svelte'; + import Column from '$lib/containers/Column.svelte'; + import AddNamespace from '$lib/dialogs/AddNamespace.svelte'; + import EditNamespace from '$lib/dialogs/EditNamespace.svelte'; + import Pagination from '$lib/pagination/Pagination.svelte'; + import Selectable from '$lib/selection/Selectable.svelte'; + import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte'; + import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte'; + import Search from '$lib/toolbar/Search.svelte'; + import SelectItems from '$lib/toolbar/SelectItems.svelte'; + import SelectSort from '$lib/toolbar/SelectSort.svelte'; + import SelectionControls from '$lib/toolbar/SelectionControls.svelte'; + import Toolbar from '$lib/toolbar/Toolbar.svelte'; + import { getContextClient } from '@urql/svelte'; + import { openModal } from 'svelte-modals'; + import type { PageData } from './$types'; + + const client = getContextClient(); + export let data: PageData; + + $: result = namespacesQuery(client, { + pagination: data.pagination, + filter: data.filter, + sort: data.sort + }); + + $: namespaces = $result.data?.namespaces; + + const selection = initSelectionContext<Namespace>('Namespace', (n) => n.name); + $: if (namespaces) { + $selection.view = namespaces.edges; + $pagination.total = namespaces.count; + } + + const filter = initFilterContext<BasicFilterContext>(); + $: $filter = new BasicFilterContext(data.filter); + + const sort = initSortContext(data.sort, NamespaceSortLabel); + $: $sort.update = data.sort; + + const pagination = initPaginationContext(); + $: $pagination.update = data.pagination; + + const edit = (id: number) => { + fetchNamespace(client, id) + .then((namespace) => openModal(EditNamespace, { namespace })) + .catch(toastFinally); + }; +</script> + +<Head section="Namespaces" /> + +<Column> + <Toolbar> + <SelectionControls slot="start"> + <DeleteSelection mutation={deleteNamespaces} /> + </SelectionControls> + <svelte:fragment slot="center"> + <Search name="Namespaces" bind:field={$filter.include.controls.name.contains} /> + <SelectSort /> + <SelectItems /> + </svelte:fragment> + <svelte:fragment slot="end"> + <AddButton title="Add Namespace" on:click={() => openModal(AddNamespace)} /> + </svelte:fragment> + </Toolbar> + {#if namespaces} + <Pagination /> + <main> + <Cardlets> + {#each namespaces.edges as { id, name }, index (id)} + <Selectable {index} {id} {edit} let:handle let:selected> + <Cardlet {name} on:click={handle} filter="tags" id={`${id}:`}> + <SelectionOverlay slot="overlay" position="right" centered {selected} /> + </Cardlet> + </Selectable> + {:else} + <Empty /> + {/each} + </Cardlets> + </main> + <Pagination /> + {:else} + <Guard {result} /> + {/if} +</Column> diff --git a/frontend/src/routes/namespaces/+page.ts b/frontend/src/routes/namespaces/+page.ts new file mode 100644 index 0000000..893b540 --- /dev/null +++ b/frontend/src/routes/namespaces/+page.ts @@ -0,0 +1,12 @@ +import { NamespaceSort, type NamespaceFilterInput } from '$gql/graphql'; +import { parseFilter, parsePaginationData, parseSortData } from '$lib/Navigation'; + +export const trailingSlash = 'always'; + +export function load({ url }: { url: URL; params: Record<string, string> }) { + return { + sort: parseSortData(url.searchParams, NamespaceSort.Name), + filter: parseFilter<NamespaceFilterInput>(url.searchParams), + pagination: parsePaginationData(url.searchParams) + }; +} |