diff options
| author | Wolfgang Müller | 2025-02-13 17:52:16 +0100 |
|---|---|---|
| committer | Wolfgang Müller | 2025-02-13 17:52:16 +0100 |
| commit | dc4db405d2991d3ec6a114f3b08d3fccd057d3ee (patch) | |
| tree | 2c620c9af2062ba09fa591f8b3ed961664adab58 /frontend/src/routes/worlds | |
| parent | 4df870d793123be95c8af031a340a39b5b8402ac (diff) | |
| download | hircine-dc4db405d2991d3ec6a114f3b08d3fccd057d3ee.tar.gz | |
frontend: Migrate to Svelte 5
Diffstat (limited to 'frontend/src/routes/worlds')
| -rw-r--r-- | frontend/src/routes/worlds/+page.svelte | 91 |
1 files changed, 44 insertions, 47 deletions
diff --git a/frontend/src/routes/worlds/+page.svelte b/frontend/src/routes/worlds/+page.svelte index e0366e9..f223a61 100644 --- a/frontend/src/routes/worlds/+page.svelte +++ b/frontend/src/routes/worlds/+page.svelte @@ -3,10 +3,7 @@ import { fetchWorld, worldsQuery } from '$gql/Queries'; import type { World } from '$gql/graphql'; import { WorldSortLabel } 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 EditWorld from '$lib/dialogs/EditWorld.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,75 +25,74 @@ 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'; - const client = getContextClient(); + let { data }: PageProps = $props(); + let pagination = $derived(data.pagination); + let sort = $derived(data.sort); - export let data: PageData; + const client = getContextClient(); + let result = $derived(worldsQuery(client, { ...data })); + let worlds = $derived($result.data?.worlds); - $: result = worldsQuery(client, { - pagination: data.pagination, - filter: data.filter, - sort: data.sort + let selection = initSelectionContext<World>('World', (a) => a.name); + $effect(() => { + if (worlds) { + selection.view = worlds.edges; + } }); - $: worlds = $result.data?.worlds; - - const selection = initSelectionContext<World>('World', (w) => w.name); - $: if (worlds) { - $selection.view = worlds.edges; - $pagination.total = worlds.count; - } - - const filter = initFilterContext<BasicFilterContext>(); - $: $filter = new BasicFilterContext(data.filter); - - const sort = initSortContext(data.sort, WorldSortLabel); - $: $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) => { fetchWorld(client, id) - .then((world) => openModal(EditWorld, { world })) + .then((world) => modals.open(EditWorld, { world })) .catch(toastFinally); }; </script> -<Head section="Worlds" /> +<Head section="worlds" /> <Column> <Toolbar> - <SelectionControls slot="start"> - <DeleteSelection mutation={deleteWorlds} /> - </SelectionControls> - <svelte:fragment slot="center"> - <Search name="Worlds" bind:field={$filter.include.controls.name.contains} /> - <SelectSort /> - <SelectItems /> - </svelte:fragment> - <svelte:fragment slot="end"> - <AddButton title="Add World" on:click={() => openModal(AddWorld)} /> - </svelte:fragment> + {#snippet start()} + <SelectionControls> + <DeleteSelection mutation={deleteWorlds} /> + </SelectionControls> + {/snippet} + {#snippet center()} + <Search name="Worlds" {filter} bind:field={filter.include.name.contains} /> + <SelectSort {sort} labels={WorldSortLabel} /> + <SelectItems {pagination} /> + {/snippet} + {#snippet end()} + <AddButton title="Add World" onclick={() => modals.open(AddWorld)} /> + {/snippet} </Toolbar> {#if worlds} - <Pagination /> + <Pagination {pagination} total={worlds.count} /> <main> <Cardlets> {#each worlds.edges as { id, name }, index (id)} - <Selectable {index} {id} {edit} let:handle let:selected> - <Cardlet {name} on:click={handle} filter="worlds" {id}> - <SelectionOverlay slot="overlay" position="right" centered {selected} /> - </Cardlet> + <Selectable {index} {id} {edit}> + {#snippet children({ onclick, selected })} + <Cardlet {name} {onclick} filter="worlds" {id}> + {#snippet overlay()} + <SelectionOverlay position="right" centered {selected} /> + {/snippet} + </Cardlet> + {/snippet} </Selectable> {:else} <Empty /> {/each} </Cardlets> </main> - <Pagination /> + <Pagination {pagination} total={worlds.count} /> {:else} <Guard {result} /> {/if} |