summaryrefslogtreecommitdiffstatshomepage
path: root/frontend/src/lib/dialogs/ConfirmDeletion.svelte
diff options
context:
space:
mode:
authorWolfgang Müller2024-03-05 18:08:09 +0100
committerWolfgang Müller2024-03-05 19:25:59 +0100
commitd1d654ebac2d51e3841675faeb56480e440f622f (patch)
tree56ef123c1a15a10dfd90836e4038e27efde950c6 /frontend/src/lib/dialogs/ConfirmDeletion.svelte
downloadhircine-d1d654ebac2d51e3841675faeb56480e440f622f.tar.gz
Initial commit0.1.0
Diffstat (limited to 'frontend/src/lib/dialogs/ConfirmDeletion.svelte')
-rw-r--r--frontend/src/lib/dialogs/ConfirmDeletion.svelte51
1 files changed, 51 insertions, 0 deletions
diff --git a/frontend/src/lib/dialogs/ConfirmDeletion.svelte b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
new file mode 100644
index 0000000..6b0cbf8
--- /dev/null
+++ b/frontend/src/lib/dialogs/ConfirmDeletion.svelte
@@ -0,0 +1,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>