Align CMS products list and detail with shared list-view patterns.

Drop mount-time form clearValidate, add table row-key, unify status tags, and simplify load error handling to match other CMS list views.
This commit is contained in:
2026-09-16 20:42:28 +02:00
parent 9cd7059928
commit 17a26b60ed
2 changed files with 6 additions and 9 deletions
-2
View File
@@ -201,8 +201,6 @@ onBeforeMount(async () => {
productForm.descriptionHtml = currentProduct.value.descriptionHtml; productForm.descriptionHtml = currentProduct.value.descriptionHtml;
productForm.isDraft = currentProduct.value.isDraft; productForm.isDraft = currentProduct.value.isDraft;
selectedCategoryIds.value = (currentProduct.value.categories ?? []).map(c => c.id); selectedCategoryIds.value = (currentProduct.value.categories ?? []).map(c => c.id);
productFormRef.value?.clearValidate();
} }
} catch { } catch {
loadError.value = true; loadError.value = true;
+5 -6
View File
@@ -9,6 +9,7 @@
<el-table <el-table
v-loading="loading" v-loading="loading"
:data="products" :data="products"
row-key="id"
stripe stripe
empty-text="No products yet" empty-text="No products yet"
class="clickable-table" class="clickable-table"
@@ -22,8 +23,9 @@
<el-table-column label="Status" width="100"> <el-table-column label="Status" width="100">
<template #default="{ row }"> <template #default="{ row }">
<el-tag v-if="row.isDraft" type="info" size="small">Draft</el-tag> <el-tag :type="row.isDraft ? 'info' : 'success'" size="small">
<el-tag v-else type="success" size="small">Live</el-tag> {{ row.isDraft ? 'Draft' : 'Live' }}
</el-tag>
</template> </template>
</el-table-column> </el-table-column>
@@ -89,7 +91,6 @@ import { useProductsStore } from '@/stores/products';
import type { Category } from '@/types/product/Category'; import type { Category } from '@/types/product/Category';
import type { ProductWithVariantsExtended } from '@/types/product/ProductWithVariantsExtended'; import type { ProductWithVariantsExtended } from '@/types/product/ProductWithVariantsExtended';
import { DeliveryMode } from '@/types/product/DeliveryMode'; import { DeliveryMode } from '@/types/product/DeliveryMode';
import { HttpStatusCode, isAxiosError } from 'axios';
import { formatDate } from '@/utils/formatDate'; import { formatDate } from '@/utils/formatDate';
import { formatDeliveryMode } from '@/utils/product/formatDeliveryMode'; import { formatDeliveryMode } from '@/utils/product/formatDeliveryMode';
import { getProductTitle } from '@/utils/product/getProductTitle'; import { getProductTitle } from '@/utils/product/getProductTitle';
@@ -127,10 +128,8 @@ const loadProducts = async (): Promise<void> => {
total.value = data.total; total.value = data.total;
page.value = data.page; page.value = data.page;
limit.value = data.limit; limit.value = data.limit;
} catch (e) { } catch {
if (!isAxiosError(e) || e.response?.status !== HttpStatusCode.Unauthorized) {
ElMessage.error('Failed to load products'); ElMessage.error('Failed to load products');
}
} finally { } finally {
loading.value = false; loading.value = false;
} }