From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/routes/circles/+page.svelte | 88 ++++++++++++++++----------------
 1 file changed, 43 insertions(+), 45 deletions(-)

(limited to 'frontend/src/routes/circles/+page.svelte')

diff --git a/frontend/src/routes/circles/+page.svelte b/frontend/src/routes/circles/+page.svelte
index 14b0866..57520f8 100644
--- a/frontend/src/routes/circles/+page.svelte
+++ b/frontend/src/routes/circles/+page.svelte
@@ -3,10 +3,7 @@
 	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 { BasicFilterContext } from '$lib/Filter.svelte';
 	import { toastFinally } from '$lib/Toasts';
 	import AddButton from '$lib/components/AddButton.svelte';
 	import Cardlet from '$lib/components/Cardlet.svelte';
@@ -19,6 +16,7 @@
 	import EditCircle from '$lib/dialogs/EditCircle.svelte';
 	import Pagination from '$lib/pagination/Pagination.svelte';
 	import Selectable from '$lib/selection/Selectable.svelte';
+	import { initSelectionContext } from '$lib/selection/Selection.svelte';
 	import SelectionOverlay from '$lib/selection/SelectionOverlay.svelte';
 	import DeleteSelection from '$lib/toolbar/DeleteSelection.svelte';
 	import Search from '$lib/toolbar/Search.svelte';
@@ -27,38 +25,32 @@
 	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';
+	import { modals } from 'svelte-modals';
+	import type { PageProps } from './$types';
+
+	let { data }: PageProps = $props();
+	let pagination = $derived(data.pagination);
+	let sort = $derived(data.sort);
 
 	const client = getContextClient();
-	export let data: PageData;
+	let result = $derived(circlesQuery(client, { ...data }));
+	let circles = $derived($result.data?.circles);
 
-	$: result = circlesQuery(client, {
-		pagination: data.pagination,
-		filter: data.filter,
-		sort: data.sort
+	let selection = initSelectionContext<Circle>('Circle', (a) => a.name);
+	$effect(() => {
+		if (circles) {
+			selection.view = circles.edges;
+		}
 	});
 
-	$: 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;
+	let filter = $state(new BasicFilterContext(data.filter));
+	$effect(() => {
+		filter = new BasicFilterContext(data.filter);
+	});
 
 	const edit = (id: number) => {
 		fetchCircle(client, id)
-			.then((circle) => openModal(EditCircle, { circle }))
+			.then((circle) => modals.open(EditCircle, { circle }))
 			.catch(toastFinally);
 	};
 </script>
@@ -67,34 +59,40 @@
 
 <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>
+		{#snippet start()}
+			<SelectionControls>
+				<DeleteSelection mutation={deleteCircles} />
+			</SelectionControls>
+		{/snippet}
+		{#snippet center()}
+			<Search name="Circles" {filter} bind:field={filter.include.name.contains} />
+			<SelectSort {sort} labels={CircleSortLabel} />
+			<SelectItems {pagination} />
+		{/snippet}
+		{#snippet end()}
+			<AddButton title="Add Circle" onclick={() => modals.open(AddCircle)} />
+		{/snippet}
 	</Toolbar>
 	{#if circles}
-		<Pagination />
+		<Pagination {pagination} total={circles.count} />
 		<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 {index} {id} {edit}>
+						{#snippet children({ onclick, selected })}
+							<Cardlet {name} {onclick} filter="circles" {id}>
+								{#snippet overlay()}
+									<SelectionOverlay position="right" centered {selected} />
+								{/snippet}
+							</Cardlet>
+						{/snippet}
 					</Selectable>
 				{:else}
 					<Empty />
 				{/each}
 			</Cardlets>
 		</main>
-		<Pagination />
+		<Pagination {pagination} total={circles.count} />
 	{:else}
 		<Guard {result} />
 	{/if}
-- 
cgit v1.2.3-2-gb3c3