blob: 3fc4ed463e10d331b9d0a437fd025b380adc4fa1 (
plain) (
tree)
|
|
<script lang="ts">
import { deleteArchives, updateArchives } from '$gql/Mutations';
import { archivesQuery } from '$gql/Queries';
import type { ArchiveFragment } from '$gql/graphql';
import { ArchiveSortLabel } from '$lib/Enums';
import { ArchiveFilterContext } from '$lib/Filter.svelte';
import Card from '$lib/components/Card.svelte';
import Empty from '$lib/components/Empty.svelte';
import Guard from '$lib/components/Guard.svelte';
import Head from '$lib/components/Head.svelte';
import RefreshButton from '$lib/components/RefreshButton.svelte';
import Cards from '$lib/containers/Cards.svelte';
import Column from '$lib/containers/Column.svelte';
import Pagination from '$lib/pagination/Pagination.svelte';
import Pill from '$lib/pills/Pill.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 FilterOrganized from '$lib/toolbar/FilterOrganized.svelte';
import MarkOrganized from '$lib/toolbar/MarkOrganized.svelte';
import MarkSelection from '$lib/toolbar/MarkSelection.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 { filesize } from 'filesize';
import type { PageProps } from './$types';
let { data }: PageProps = $props();
let pagination = $derived(data.pagination);
let sort = $derived(data.sort);
const client = getContextClient();
let result = $derived(archivesQuery(client, { ...data }));
let archives = $derived($result.data?.archives);
let selection = initSelectionContext<ArchiveFragment>('Archive', (a) => a.name);
$effect(() => {
if (archives) {
selection.view = archives.edges;
}
});
let filter = $state(new ArchiveFilterContext(data.filter));
$effect(() => {
filter = new ArchiveFilterContext(data.filter);
});
</script>
<Head section="Archives" />
<Column>
<Toolbar>
{#snippet start()}
<SelectionControls>
<MarkSelection>
<MarkOrganized mutation={updateArchives} />
</MarkSelection>
<DeleteSelection
mutation={deleteArchives}
warning="Deleting an archive will also delete its archive file on disk as well as all comics that belong to it."
/>
</SelectionControls>
{/snippet}
{#snippet center()}
<Search name="Archives" {filter} bind:field={filter.include.path.contains} />
<FilterOrganized {filter} />
<SelectSort {sort} labels={ArchiveSortLabel} />
<SelectItems {pagination} />
{/snippet}
{#snippet end()}
<RefreshButton onclick={() => result.reexecute({ requestPolicy: 'network-only' })} />
{/snippet}
</Toolbar>
{#if archives}
<Pagination {pagination} total={archives.count} />
<main>
<Cards>
{#each archives.edges as { id, name, cover, size, pageCount }, index (id)}
<Selectable {index} {id}>
{#snippet children({ onclick, selected })}
<Card
ellipsis={false}
href={id.toString()}
details={{ title: name, cover }}
{onclick}
>
{#snippet overlay()}
<SelectionOverlay position="left" {selected} />
{/snippet}
<div class="flex gap-1 text-xs">
<Pill name={`${pageCount} pages`}>
{#snippet icon()}
<span class="icon-[material-symbols--note] mr-0.5"></span>
{/snippet}
</Pill>
<Pill name={filesize(size, { base: 2 })}>
{#snippet icon()}
<span class="icon-[material-symbols--hard-drive] mr-0.5"></span>
{/snippet}
</Pill>
</div>
</Card>
{/snippet}
</Selectable>
{:else}
<Empty />
{/each}
</Cards>
</main>
<Pagination {pagination} total={archives.count} />
{:else}
<Guard {result} />
{/if}
</Column>
|
