fix: reload

aura-nw · Aug 16, 2024 · 4262cb2 · 4262cb2
1 parent 74c3933
commit 4262cb2
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 14 deletions.
diff --git a/src/routes/(sidebar)/crud/products/+page.svelte b/src/routes/(sidebar)/crud/products/+page.svelte
@@ -10,8 +10,8 @@
 	} from 'flowbite-svelte';
 	import { Table, TableBody, TableBodyCell, TableBodyRow, TableHead } from 'flowbite-svelte';
 	import { TableHeadCell, Toolbar, ToolbarButton } from 'flowbite-svelte';
-	import { FilterSolid, SearchSolid } from 'flowbite-svelte-icons';
-	import { EditOutline, PlusOutline, TrashBinSolid } from 'flowbite-svelte-icons';
+	import { EyeOutline, FilterSolid, SearchSolid } from 'flowbite-svelte-icons';
+	import { PlusOutline, TrashBinSolid } from 'flowbite-svelte-icons';
 
 	import MetaTag from '$lib/ui-components/meta/meta-tags.svelte';
 	import ChainBadge from '$lib/ui-components/badges/ChainBadge.svelte';
@@ -149,8 +149,8 @@
 						</div>
 					</TableBodyCell>
 					<TableBodyCell class="space-x-2 p-4">
-						<Button size="sm" class="gap-2 px-3" href="/crud/products/{product.id}?mode=edit">
-							<EditOutline size="sm" /> Edit
+						<Button color="blue" size="sm" class="gap-2 px-3" href="/crud/products/{product.id}">
+							<EyeOutline size="sm" /> View
 						</Button>
 						<Button color="red" size="sm" class="gap-2 px-3">
 							<TrashBinSolid size="sm" /> Delete

diff --git a/src/routes/(sidebar)/crud/products/+page.ts b/src/routes/(sidebar)/crud/products/+page.ts
@@ -5,7 +5,6 @@ import * as _ from 'underscore';
 import { type ProductGetResponseData } from '$lib/apis/product/get-product';
 
 export interface ProductPageData {
-	mode?: string;
 	product: ProductGetResponseData;
 	statuses: string[];
 	selected_statuses?: string[];

diff --git a/src/routes/(sidebar)/crud/products/Product.svelte b/src/routes/(sidebar)/crud/products/Product.svelte
@@ -29,20 +29,24 @@
 	import Alert from '$lib/ui-components/views/alert.svelte';
 
 	export let data: ProductPageData;
-	export let mode: string = PAGE_MODE.CREATE;
 	export let form: any;
+	export let mode: string = PAGE_MODE.VIEW;
 
 	const path: string = '/crud/products/create';
 	$: description = `A place to ${mode} a single product`;
 	$: title = `Admin – Products ${mode}`;
 	$: subtitle = `Products ${mode}`;
 
 	let openDelete: boolean = false;
-	$: isViewMode = mode === PAGE_MODE.VIEW;
+	$: isViewMode = mode === PAGE_MODE.VIEW || form?.reload;
 </script>
 
 <MetaTag {path} {description} {title} {subtitle} />
 
+<!-- TODO find a more systematical way to reload a page -->
+{#if form?.reload}
+	{window.location.reload()}
+{/if}
 <form method="POST" enctype="multipart/form-data" use:enhance>
 	<main class="relative h-full w-full overflow-y-auto bg-white dark:bg-gray-800">
 		<div class="mt-10 p-4">
@@ -55,7 +59,7 @@
 			{/if}
 			<Breadcrumb class="mb-5">
 				<BreadcrumbItem home href="/crud/products">Products</BreadcrumbItem>
-				<BreadcrumbItem>{isViewMode ? 'View' : 'Edit'}</BreadcrumbItem>
+				<BreadcrumbItem>{mode}</BreadcrumbItem>
 			</Breadcrumb>
 			<Heading tag="h1" class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">
 				Edit product

diff --git a/src/routes/(sidebar)/crud/products/[id]/+page.server.ts b/src/routes/(sidebar)/crud/products/[id]/+page.server.ts
@@ -1,6 +1,6 @@
 import { updateProduct } from '$lib/apis/product/update-product.js';
+import { PAGE_MODE } from '$lib/constants.js';
 import { fail, redirect } from '@sveltejs/kit';
-import { invalidateAll } from '$app/navigation';
 
 export const actions = {
 	default: async ({ params, request }) => {
@@ -50,7 +50,8 @@ export const actions = {
 		console.log('responseData', responseData); // TODO remove
 
 		if (updateResponse.status === 200) {
-			throw redirect(303, `/crud/products/${id}`); // TODO force reload from server
+			// TODO find a more systematical way to reload a page
+			return fail(responseData.statusCode, { reload: true, mode: PAGE_MODE.VIEW });
 		} else {
 			return fail(responseData.statusCode, responseData);
 		}

diff --git a/src/routes/(sidebar)/crud/products/[id]/+page.svelte b/src/routes/(sidebar)/crud/products/[id]/+page.svelte
@@ -5,8 +5,8 @@
 	import ProductPage from '../Product.svelte';
 
 	export let data: ProductPageData;
-	export let mode: string = data.mode || PAGE_MODE.VIEW;
 	export let form: any = undefined;
+	export let mode: string = form?.mode || PAGE_MODE.VIEW;
 
 	const path: string = '/crud/products';
 	$: description = `A place to ${mode} a single product`;
@@ -16,4 +16,4 @@
 
 <MetaTag {path} {description} {title} {subtitle} />
 
-<ProductPage {data} {mode} {form} />
+<ProductPage {data} bind:mode bind:form />
diff --git a/src/routes/(sidebar)/crud/products/[id]/+page.ts b/src/routes/(sidebar)/crud/products/[id]/+page.ts
@@ -13,7 +13,6 @@ export async function load(pageLoadEvent): Promise<ProductPageData> {
 	const selectedNameToValues = _.groupBy(product.attributes, 'name');
 
 	return {
-		mode: pageLoadEvent.url.searchParams.get('mode') as string,
 		product,
 		statuses: nameToValues['status']?.map((v) => v.value),
 		selected_statuses: selectedNameToValues['status']?.map((v) => v.value),

diff --git a/src/routes/(sidebar)/crud/products/create/+page.svelte b/src/routes/(sidebar)/crud/products/create/+page.svelte
@@ -16,4 +16,4 @@
 
 <MetaTag {path} {description} {title} {subtitle} />
 
-<ProductPage {data} {mode} bind:form />
+<ProductPage {data} bind:mode bind:form />
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,4 +16,4 @@

		<MetaTag {path} {description} {title} {subtitle} />

		<ProductPage {data} {mode} bind:form />
		<ProductPage {data} bind:mode bind:form />