diff options
Diffstat (limited to 'frontend/src/lib/dialogs/ConfirmDeletion.svelte')
| -rw-r--r-- | frontend/src/lib/dialogs/ConfirmDeletion.svelte | 51 |
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> |