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:
@@ -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;
|
||||||
|
|||||||
@@ -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;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user