summaryrefslogblamecommitdiffstatshomepage
path: root/frontend/src/routes/archives/+page.svelte
blob: b75c14032fa48c30e81705e01700b8692b8e873f (plain) (tree)
1
2
3
4
5
6




                                                                        
                                                                  









                                                                         
                                                                               











                                                                              
                                                  
 


                                                   
 


                                                                  
 




                                                                                        

           



                                                                   





                           



















                                                                                                                                                        

                      
                                                                  


                                                                                                          

                                                                                          
                                                                                                                              
















                                                                                                                                                        





                                                     
                                                                  



                                  
<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 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>