blob: 6b0cbf8b86fedbb844d48af8d67d0b5c47f652ba (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<script lang="ts">
import { accelerator } from '$lib/Shortcuts';
import Dialog from '$lib/components/Dialog.svelte';
import { closeModal } from 'svelte-modals';
export let isOpen: boolean;
export let callback: () => void;
export let names: string[];
export let typename: string;
export let warning: string | undefined = undefined;
const multiple = names.length > 1;
const formattedTypename = multiple ? `${typename}s` : typename;
const formattedNames = multiple ? `${names.length} ${formattedTypename}` : names[0];
function confirm() {
callback();
closeModal();
}
</script>
<Dialog {isOpen}>
<svelte:fragment slot="header">
<h2>Delete {formattedTypename}</h2>
</svelte:fragment>
<form on:submit|preventDefault={confirm}>
<div class="flex flex-col">
<p class="mb-3">
Are you sure you want to delete <span class="font-semibold">{formattedNames}</span>?
</p>
{#if multiple}
<ul class="mb-3 ml-8 list-disc">
{#each names.slice(0, 10) as name}
<li>{name}</li>
{/each}
</ul>
{#if names.length - 10 > 0}
<p>... and {names.length - 10} more.</p>
{/if}
{/if}
{#if warning}
<p class="font-medium text-red-600">Warning: {warning}</p>
{/if}
</div>
<div class="flex justify-end gap-4">
<button type="submit" class="btn-rose" use:accelerator={'Enter'}>Delete</button>
<button type="button" on:click={closeModal} class="btn-slate">Cancel</button>
</div>
</form>
</Dialog>
|
