Delete history

src/lib/elements/Input.svelte

@@ -26,6 +26,6 @@
 
 <style lang="postcss">
 	.input-field {
-		@apply border border-gray-400 w-14 p-1 rounded;
+		@apply border border-gray-400 w-12 p-1 rounded;
 	}
 </style>

src/routes/history/+page.svelte

@@ -1,10 +1,18 @@
 <script lang="ts">
+	import { invalidateAll } from '$app/navigation'
 	import { paperHistoryStore } from '$lib/stores'
+	import { deleteHistory } from '$lib/utils/services.js'
+	import Icon from '@iconify/svelte'
 	import days from 'dayjs'
 
 	export let data
 
 	$paperHistoryStore = data.histories
+
+	const handleDelete = async (id: string) => {
+		await deleteHistory(id)
+		await invalidateAll()
+	}
 </script>
 
 <svelte:head>
@@ -24,7 +32,7 @@
 			{#if data.histories.length}
 				{#each data.histories.reverse() as { name, id, final_price, papers, created_at }, i}
 					<div
-						class="flex flex-col gap-1 items-center w-full p-2 border border-dashed rounded shadow-sm"
+						class="flex flex-col gap-1 items-center w-full p-1 border border-dashed rounded shadow-sm"
 					>
 						<a href="/history/{id}" class="flex flex-row items-center pl-1 justify-between w-full">
 							<p class:hidden={!name} class="w-fit">
@@ -36,6 +44,12 @@
 							<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>
 						</a>
 					</div>
 				{/each}

src/routes/history/[id]/+page.svelte

@@ -4,7 +4,7 @@
 	import Result from '$lib/elements/Result.svelte'
 	import { paperHistoryStore } from '$lib/stores'
 	import dayjs from 'dayjs'
-	import type { CostHistoryType } from '$lib/utils/services'
+	import { calculateCost, type CostHistoryType } from '$lib/utils/services'
 
 	const data: CostHistoryType[] = $paperHistoryStore.filter(
 		(history) => history.id == $page.params.id
@@ -29,18 +29,20 @@
 		<div class="flex flex-col overflow-y-auto w-full max-w-3xl py-2">
 			{#if data.length}
 				{#each data as history, i}
-					{#each history.papers as { length, width, thickness, rate }, i}
-						<div class="flex flex-col gap-1 items-center w-full rounded">
-							<div class="grid grid-cols-4 w-full gap-1 items-center overflow-x-auto p-1">
+					{#each history.papers as { length, width, thickness, rate, id }, i}
+						<div class="flex flex-col items-center w-full rounded">
+							<div
+								class="flex flex-row w-full gap-1 items-center justify-between overflow-x-auto p-1"
+							>
 								<Input bind:value={length} disabled />
 								<Input bind:value={width} disabled />
 								<Input bind:value={thickness} disabled />
 								<Input bind:value={rate} disabled />
-								<!-- <div class="flex justify-start">
-								<p>
-									= {finalPrice.toFixed(2)}
-								</p>
-							</div> -->
+								<div class="flex justify-center">
+									<p class="font-semibold">
+										= {calculateCost({ length, width, thickness, rate, id }).toFixed(2)}
+									</p>
+								</div>
 							</div>
 						</div>
 					{/each}