fix: delete flow

src/routes/(sidebar)/crud/products/+page.server.ts

@@ -5,16 +5,16 @@ export const actions = {
 	delete: async ({ request }) => {
 		const id = (await request.formData()).get('deleteId')?.toString();
 
-		console.log('id', id);
-
-		if (!id) return fail(400, { missingId: true });
+		if (!id) return fail(400, { error: 400, message: 'Id is missing' });
 
 		const resposne = await deleteProduct(parseInt(id));
 
-		console.log(resposne);
+		const responseData = await resposne.json();
 
 		if (resposne.status === 200) {
 			throw redirect(303, '/crud/products');
 		}
+
+		return fail(resposne.status, responseData);
 	}
 };

src/routes/(sidebar)/crud/products/+page.svelte

@@ -26,12 +26,14 @@
 	import _ from 'underscore';
 	import Delete from './Delete.svelte';
 	import type { ListWithPagingResponse } from '$lib/apis/types';
+	import Alert from '$lib/ui-components/views/alert.svelte';
 
 	const path: string = '/crud/products';
 	const description: string = 'A place to create product';
 	const title: string = 'Admin – Products list';
 	const subtitle: string = 'Products list';
 
+	export let form;
 	export let data: ListWithPagingResponse<ProductResponseData>;
 	const extractChainNames = (product: ProductResponseData) =>
 		product.attributes.filter((att) => att.name === 'Chain').map((att) => att.value);
@@ -61,6 +63,13 @@
 			All products
 		</Heading>
 
+		{#if form?.error}
+			<Alert
+				class="fixed left-[60%] z-20 translate-x-[-50%]"
+				type="error"
+				description={form.message}
+			/>
+		{/if}
 		<Toolbar embedded class="w-full py-4 text-gray-500  dark:text-gray-400">
 			<Input
 				inputProps={{ placeholder: 'Search for products' }}

src/routes/(sidebar)/crud/products/Delete.svelte

@@ -13,7 +13,17 @@
 	</h3>
 
 	<div class="flex items-center justify-center">
-		<Button type="submit" color="red" class="mr-2">Yes, I'm sure</Button>
+		<Button
+			type="button"
+			color="red"
+			class="mr-2"
+			on:click={async (event) => {
+				await event?.target
+					?.closest('form')
+					.submit()
+					.then(() => (open = false));
+			}}>Yes, I'm sure</Button
+		>
 		<Button color="alternative" on:click={() => (open = false)}>No, cancel</Button>
 	</div>
 </Modal>

src/routes/(sidebar)/crud/products/Product.svelte

@@ -185,7 +185,8 @@
 						name="Creator"
 						class="w-22 mb-2 me-4 mt-3 w-full"
 						items={data.users.map((u) => ({ name: u.name, value: u.id.toString() }))}
-						selected={data.users.find((u) => u.id === data.product.owner.id)?.id?.toString() || ''}
+						selected={data.users.find((u) => u.id === data.product?.owner?.id)?.id?.toString() ||
+							''}
 						selectProps={{
 							name: 'creator',
 							disabled: isViewMode
@@ -310,7 +311,7 @@
 	</main>
 </form>
 
-<form method="POST" action="?/delete">
+<form method="POST" action="?/delete" use:enhance>
 	<input name="deleteId" type="hidden" bind:value={deleteId} />
 	<Delete bind:open={openDelete} />
 </form>

src/routes/(sidebar)/crud/products/[id]/+page.server.ts

@@ -9,8 +9,6 @@ export const actions = {
 		const id = parseInt(params.id);
 		const data = await request.formData();
 
-		console.log('form', data);
-
 		let banner = data.get('banner_img') as File;
 		let avatar = data.get('avatar_img') as File;
 		let previews = data.getAll('previews') as File[];
@@ -67,8 +65,6 @@ export const actions = {
 			]
 		};
 
-		console.log('request', requestData);
-
 		const updateResponse = await updateProduct(id, requestData);
 
 		const responseData = await updateResponse.json();
@@ -83,16 +79,16 @@ export const actions = {
 	delete: async ({ request }) => {
 		const id = (await request.formData()).get('deleteId')?.toString();
 
-		console.log('id', id);
-
-		if (!id) return fail(400, { missingId: true });
+		if (!id) return fail(400, { error: 400, message: 'Id is missing' });
 
 		const resposne = await deleteProduct(parseInt(id));
 
-		console.log(resposne);
+		const responseData = await resposne.json();
 
 		if (resposne.status === 200) {
 			throw redirect(303, '/crud/products');
 		}
+
+		return fail(resposne.status, responseData);
 	}
 };

src/routes/(sidebar)/crud/products/create/+page.server.ts

@@ -64,8 +64,6 @@ export const actions = {
 
 		const responseData = await createResponse.json();
 
-		console.log('responseData', responseData); // TODO remove
-
 		if (createResponse.status === 200) {
 			throw redirect(303, `/crud/products/${responseData.data.id}`);
 		} else {

src/routes/(sidebar)/crud/users/+page.server.ts

@@ -5,16 +5,16 @@ export const actions = {
 	delete: async ({ request }) => {
 		const id = (await request.formData()).get('deleteId')?.toString();
 
-		console.log('id', id);
+		if (!id) return fail(400, { error: 400, message: 'Id is missing' });
 
-		if (!id) return fail(400, { missingId: true });
+		const resposne = await deleteUser(parseInt(id));
 
-		const response = await deleteUser(parseInt(id));
+		const responseData = await resposne.json();
 
-		console.log(await response.json());
-
-		if (response.status === 200) {
+		if (resposne.status === 200) {
 			throw redirect(303, '/crud/users');
 		}
+
+		return fail(resposne.status, responseData);
 	}
 };

src/routes/(sidebar)/crud/users/+page.svelte

@@ -13,13 +13,16 @@
 	import _ from 'underscore';
 	import Delete from './Delete.svelte';
 	import type { ListWithPagingResponse } from '$lib/apis/types';
+	import { enhance } from '$app/forms';
+	import Alert from '$lib/ui-components/views/alert.svelte';
 
 	const path: string = '/crud/users';
 	const description: string = 'A place to create user';
 	const title: string = 'Admin – Users list';
 	const subtitle: string = 'Users list';
 
 	export let data: ListWithPagingResponse<UserResponse>;
+	export let form;
 
 	let searchConditions: ListUserQuery = _.omit(data.paging, 'total');
 	async function handleSearch(pageQuery?: { limit: number; offset: number }) {
@@ -46,6 +49,13 @@
 			All users
 		</Heading>
 
+		{#if form?.error}
+			<Alert
+				class="fixed left-[60%] z-20 translate-x-[-50%]"
+				type="error"
+				description={form.message}
+			/>
+		{/if}
 		<Toolbar embedded class="w-full py-4 text-gray-500  dark:text-gray-400">
 			<Input
 				inputProps={{ placeholder: 'Search for users' }}
@@ -145,7 +155,8 @@
 		handleSearch(event.detail);
 	}}
 />
-<form method="POST" action="?/delete">
+
+<form method="POST" action="?/delete" use:enhance>
 	<input name="deleteId" type="hidden" bind:value={deleteId} />
 	<Delete bind:open={openDelete} />
 </form>

src/routes/(sidebar)/crud/users/Delete.svelte

@@ -12,7 +12,19 @@
 	</h3>
 
 	<div class="flex items-center justify-center">
-		<Button type="submit" color="red" class="mr-2">Yes, I'm sure</Button>
+		<Button
+			type="button"
+			color="red"
+			class="mr-2"
+			on:click={async (event) => {
+				await event?.target
+					?.closest('form')
+					.submit()
+					.then(() => (open = false));
+			}}
+		>
+			Yes, I'm sure
+		</Button>
 		<Button color="alternative" on:click={() => (open = false)}>No, cancel</Button>
 	</div>
 </Modal>

src/routes/(sidebar)/crud/users/User.svelte

@@ -193,7 +193,7 @@
 	</main>
 </form>
 
-<form method="POST" action="?/delete">
+<form method="POST" action="?/delete" use:enhance>
 	<input name="deleteId" type="hidden" bind:value={deleteId} />
 	<Delete bind:open={openDelete} />
 </form>

src/routes/(sidebar)/crud/users/[id]/+page.server.ts

@@ -56,16 +56,16 @@ export const actions = {
 	delete: async ({ request }) => {
 		const id = (await request.formData()).get('deleteId')?.toString();
 
-		console.log('id', id);
-
-		if (!id) return fail(400, { missingId: true });
+		if (!id) return fail(400, { error: 400, message: 'Id is missing' });
 
 		const resposne = await deleteUser(parseInt(id));
 
-		console.log(resposne);
+		const responseData = await resposne.json();
 
 		if (resposne.status === 200) {
 			throw redirect(303, '/crud/users');
 		}
+
+		return fail(resposne.status, responseData);
 	}
 };