111 lines
3.5 KiB
Svelte
111 lines
3.5 KiB
Svelte
<script lang="ts">
|
|
import { createLibrary } from '$lib/api/library.remote';
|
|
import * as Dialog from '$lib/components/ui/dialog/index.js';
|
|
import * as Field from '$lib/components/ui/field/index.js';
|
|
import { Input } from '$lib/components/ui/input/index.js';
|
|
import { Textarea } from '$lib/components/ui/textarea/index';
|
|
import { Button } from '$lib/components/ui/button/index.js';
|
|
import { IconPicker } from '$lib/components/ui/icon-picker/index.js';
|
|
import { toast } from 'svelte-sonner';
|
|
import { getLibraryState } from '$lib/state/library.svelte';
|
|
|
|
let { open = $bindable(false) } = $props();
|
|
|
|
let selectedIcon = $state('library');
|
|
|
|
const libraryState = getLibraryState();
|
|
</script>
|
|
|
|
<Dialog.Root bind:open>
|
|
<Dialog.Content>
|
|
<Dialog.Header>
|
|
<Dialog.Title>Create a new Library</Dialog.Title>
|
|
</Dialog.Header>
|
|
|
|
<form
|
|
{...createLibrary.enhance(async ({ form, submit }) => {
|
|
try {
|
|
await submit();
|
|
|
|
// Check if there are any validation issues
|
|
const issues = createLibrary.fields.allIssues();
|
|
if (issues && issues.length > 0) {
|
|
return;
|
|
}
|
|
|
|
const libraryName = createLibrary.fields.name.value();
|
|
|
|
form.reset();
|
|
selectedIcon = 'library';
|
|
open = false;
|
|
toast.success(`Library '${libraryName}' created.`);
|
|
|
|
libraryState.addLibrary(createLibrary.result);
|
|
} catch (error) {
|
|
console.error('Failed to create library: ', error);
|
|
toast.error('Failed to create library');
|
|
}
|
|
})}
|
|
class="flex flex-col gap-3"
|
|
>
|
|
<Field.Set>
|
|
<Field.Group>
|
|
<!-- Library name and Icon -->
|
|
<div class="flex items-end gap-3">
|
|
<div class="flex-1">
|
|
<Field.Field>
|
|
<Field.Label for="name">Library name</Field.Label>
|
|
<Input {...createLibrary.fields.name.as('text')} />
|
|
{#each createLibrary.fields.name.issues() ?? [] as issue}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
</Field.Field>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2">
|
|
<Field.Label>Icon</Field.Label>
|
|
<IconPicker bind:value={selectedIcon} />
|
|
<input type="hidden" name="icon" value={selectedIcon} />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<Field.Field>
|
|
<Field.Label for="description">Description</Field.Label>
|
|
<Textarea {...createLibrary.fields.description.as('text')} />
|
|
{#each createLibrary.fields.description.issues() ?? [] as issue}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
</Field.Field>
|
|
|
|
<!-- Root Path -->
|
|
<Field.Field>
|
|
<Field.Label for="root_path">Root Path</Field.Label>
|
|
<Input {...createLibrary.fields.root_path.as('text')} />
|
|
{#each createLibrary.fields.root_path.issues() ?? [] as issue}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
<Field.Description class="text-xs">
|
|
Path the books in this library will be stored
|
|
</Field.Description>
|
|
</Field.Field>
|
|
|
|
<!-- Path Template -->
|
|
<Field.Field>
|
|
<Field.Label for="path_template">Path Template</Field.Label>
|
|
<Input {...createLibrary.fields.path_template.as('text')} />
|
|
{#each createLibrary.fields.path_template.issues() ?? [] as issue}
|
|
<Field.Error>{issue.message}</Field.Error>
|
|
{/each}
|
|
<Field.Description class="text-xs">
|
|
The directory structure of your library
|
|
</Field.Description>
|
|
</Field.Field>
|
|
</Field.Group>
|
|
</Field.Set>
|
|
|
|
<Button type="submit" class="ml-auto w-24">Create</Button>
|
|
</form>
|
|
</Dialog.Content>
|
|
</Dialog.Root>
|