From d1d654ebac2d51e3841675faeb56480e440f622f Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Tue, 5 Mar 2024 18:08:09 +0100
Subject: Initial commit
---
frontend/src/routes/circles/+page.svelte | 101 +++++++++++++++++++++++++++++++
frontend/src/routes/circles/+page.ts | 12 ++++
2 files changed, 113 insertions(+)
create mode 100644 frontend/src/routes/circles/+page.svelte
create mode 100644 frontend/src/routes/circles/+page.ts
(limited to 'frontend/src/routes/circles')
diff --git a/frontend/src/routes/circles/+page.svelte b/frontend/src/routes/circles/+page.svelte
new file mode 100644
index 0000000..14b0866
--- /dev/null
+++ b/frontend/src/routes/circles/+page.svelte
@@ -0,0 +1,101 @@
+<script lang="ts">
+ import { deleteCircles } from '$gql/Mutations';
+ import { circlesQuery, fetchCircle } from '$gql/Queries';
+ import type { Circle } from '$gql/graphql';
+ import { CircleSortLabel } 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 AddCircle from '$lib/dialogs/AddCircle.svelte';
+ import EditCircle from '$lib/dialogs/EditCircle.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 = circlesQuery(client, {
+ pagination: data.pagination,
+ filter: data.filter,
+ sort: data.sort
+ });
+
+ $: circles = $result.data?.circles;
+
+ const selection = initSelectionContext<Circle>('Circle', (c) => c.name);
+ $: if (circles) {
+ $selection.view = circles.edges;
+ $pagination.total = circles.count;
+ }
+
+ const filter = initFilterContext<BasicFilterContext>();
+ $: $filter = new BasicFilterContext(data.filter);
+
+ const sort = initSortContext(data.sort, CircleSortLabel);
+ $: $sort.update = data.sort;
+
+ const pagination = initPaginationContext();
+ $: $pagination.update = data.pagination;
+
+ const edit = (id: number) => {
+ fetchCircle(client, id)
+ .then((circle) => openModal(EditCircle, { circle }))
+ .catch(toastFinally);
+ };
+</script>
+
+<Head section="circles" />
+
+<Column>
+ <Toolbar>
+ <SelectionControls slot="start">
+ <DeleteSelection mutation={deleteCircles} />
+ </SelectionControls>
+ <svelte:fragment slot="center">
+ <Search name="Circles" bind:field={$filter.include.controls.name.contains} />
+ <SelectSort />
+ <SelectItems />
+ </svelte:fragment>
+ <svelte:fragment slot="end">
+ <AddButton title="Add Circle" on:click={() => openModal(AddCircle)} />
+ </svelte:fragment>
+ </Toolbar>
+ {#if circles}
+ <Pagination />
+ <main>
+ <Cardlets>
+ {#each circles.edges as { id, name }, index (id)}
+ <Selectable {index} {id} {edit} let:handle let:selected>
+ <Cardlet {name} on:click={handle} filter="circles" {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/circles/+page.ts b/frontend/src/routes/circles/+page.ts
new file mode 100644
index 0000000..ea5c3df
--- /dev/null
+++ b/frontend/src/routes/circles/+page.ts
@@ -0,0 +1,12 @@
+import { CircleSort, type CircleFilterInput } 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, CircleSort.Name),
+ filter: parseFilter<CircleFilterInput>(url.searchParams),
+ pagination: parsePaginationData(url.searchParams)
+ };
+}
--
cgit v1.2.3-2-gb3c3