Delete confirm

prokawsar · Jul 15, 2024 · e965a3c · e965a3c
1 parent 4e040fa
commit e965a3c
Showing 1 changed file with 24 additions and 6 deletions.
diff --git a/src/routes/history/+page.svelte b/src/routes/history/+page.svelte
@@ -8,6 +8,7 @@
 
 	export let data
 	let isLoading = false
+	let deleteConfirm = false
 
 	$paperHistoryStore = data.histories
 
@@ -52,12 +53,29 @@
 								<p class="text-gray-500">
 									{final_price.toFixed(2)}
 								</p>
-								<button
-									class="border border-gray-400 rounded-md text-red-600 p-1 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
-									on:click|stopPropagation|preventDefault={() => handleDelete(id)}
-								>
-									<Icon icon="ph:trash-light" width="16px" />
-								</button>
+								<div class="flex flex-row items-center gap-[2px]">
+									<button
+										class:hidden={deleteConfirm}
+										class="border border-gray-400 rounded-md text-red-600 p-1 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
+										on:click|stopPropagation|preventDefault={() => (deleteConfirm = true)}
+									>
+										<Icon icon="ph:trash-light" width="16px" />
+									</button>
+									{#if deleteConfirm}
+										<button
+											class="border border-gray-400 p-1 rounded-md text-red-700 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
+											on:click|stopPropagation|preventDefault={() => (deleteConfirm = false)}
+										>
+											<Icon icon="majesticons:multiply" width="16px" />
+										</button>
+										<button
+											class="border border-gray-400 p-1 rounded-md text-green-700 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
+											on:click|stopPropagation|preventDefault={() => handleDelete(id)}
+										>
+											<Icon icon="teenyicons:tick-solid" width="15px" />
+										</button>
+									{/if}
+								</div>
 							</a>
 						</div>
 					{/each}