1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-08-05 21:25:19 +02:00

feat: Add ConfirmModal component for delete confirmation

This commit is contained in:
Sean Morley 2024-05-04 17:41:37 +00:00
parent 87cc6da518
commit 0c2ce8ce93

View file

@ -7,6 +7,7 @@
import type { Adventure } from "$lib/utils/types"; import type { Adventure } from "$lib/utils/types";
import { onMount } from "svelte"; import { onMount } from "svelte";
import exportFile from "$lib/assets/exportFile.svg"; import exportFile from "$lib/assets/exportFile.svg";
import ConfirmModal from "$lib/components/ConfirmModal.svelte";
import deleteIcon from "$lib/assets/deleteIcon.svg"; import deleteIcon from "$lib/assets/deleteIcon.svg";
import SucessToast from "$lib/components/SucessToast.svelte"; import SucessToast from "$lib/components/SucessToast.svelte";
import mapDrawing from "$lib/assets/adventure_map.svg"; import mapDrawing from "$lib/assets/adventure_map.svg";
@ -26,6 +27,7 @@
let isShowingToast: boolean = false; let isShowingToast: boolean = false;
let toastAction: string = ""; let toastAction: string = "";
let confirmModalOpen: boolean = false;
// Sets the adventures array to the data from the server // Sets the adventures array to the data from the server
onMount(async () => { onMount(async () => {
@ -122,6 +124,7 @@
function handleClose() { function handleClose() {
adventureToEdit = undefined; adventureToEdit = undefined;
confirmModalOpen = false;
isShowingMoreFields = false; isShowingMoreFields = false;
} }
@ -239,7 +242,7 @@
<button class="btn btn-neutral" on:click={exportData}> <button class="btn btn-neutral" on:click={exportData}>
<img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File <img src={exportFile} class="inline-block -mt-1" alt="Logo" /> Save as File
</button> </button>
<button class="btn btn-neutral" on:click={deleteData}> <button class="btn btn-neutral" on:click={() => (confirmModalOpen = true)}>
<img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data <img src={deleteIcon} class="inline-block -mt-1" alt="Logo" /> Delete Data
</button> </button>
<button class="btn btn-neutral" on:click={shareLink}> <button class="btn btn-neutral" on:click={shareLink}>
@ -249,6 +252,16 @@
</div> </div>
{/if} {/if}
{#if confirmModalOpen}
<ConfirmModal
on:close={handleClose}
on:confirm={deleteData}
title="Delete all Adventures"
isWarning={false}
message="Are you sure you want to delete all adventures?"
/>
{/if}
<svelte:head> <svelte:head>
<title>My Log | AdventureLog</title> <title>My Log | AdventureLog</title>
<meta <meta