louiscklaw/HKSingleParty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

"implement product CRUD API endpoints and frontend integration"

Browse Source
This commit is contained in:
louiscklaw
2025-06-15 02:47:25 +08:00
parent 48e90bca1b
commit f53cf9d932
30 changed files with 623 additions and 342 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
03_source/cms_backend/prisma/schema.prisma
View File

@@ -195,32 +195,32 @@ model ProductItem {
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
//
sku String
name String
code String
price Float
taxes Float
tags String[]
sizes String[]
publish String
gender String[]
coverUrl String
images String[]
colors String[]
quantity Int
category String
available Int
totalSold Int
category String
code String
colors String[]
coverUrl String
description String
totalRatings Float
totalReviews Int
gender String[]
images String[]
inventoryType String
subDescription String
priceSale Float?
name String
newLabel Json
saleLabel Json
price Float
priceSale Float?
publish String
quantity Int
ratings Json[]
reviews ProductReview[]
saleLabel Json
sizes String[]
sku String
subDescription String
tags String[]
taxes Float
totalRatings Float
totalReviews Int
totalSold Int
}
model MailSender {

43
03_source/cms_backend/src/app/api/product/create/route.ts Normal file
View File

@@ -0,0 +1,43 @@
// src/app/api/product/createProduct/route.ts
// REQ0183 frontend product new
//
// PURPOSE:
// create product to db
//
// RULES:
// T.B.A.
//
import type { NextRequest } from 'next/server';
import { STATUS, response, handleError } from 'src/utils/response';
import { isDev } from 'src/constants';
import prisma from '../../../lib/prisma';
// ----------------------------------------------------------------------
/** **************************************
* POST - Products
*************************************** */
export async function POST(req: NextRequest) {
const { productData } = await req.json();
try {
if (isDev) {
console.log({ productData });
}
await prisma.productItem.create({ data: productData });
if (isDev) {
console.log('create done');
}
return response({ hello: 'world' }, STATUS.OK);
} catch (error) {
console.log({ hello: 'world', productData });
return handleError('Product - Create', error);
}
}

51
03_source/cms_backend/src/app/api/product/create/test.http Normal file
View File

@@ -0,0 +1,51 @@
###
POST http://localhost:7272/api/product/createProduct
Content-Type: application/json
{
"data": {
"available": 99,
"category": "T-shirts",
"code": "PD-12345",
"colors": [
"Red"
],
"coverUrl": "",
"description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
"gender": [
"Men"
],
"images": [
"data:image/png;base64,C",
"data:image/png;base64,C"
],
"inventoryType": "test",
"name": "hello product",
"newLabel": {
"enabled": false,
"content": ""
},
"price": 99.99,
"priceSale": null,
"publish": "yes",
"quantity": 99,
"saleLabel": {
"enabled": false,
"content": ""
},
"sizes": [
"7"
],
"sku": "SK-122345",
"subDescription": "this is test sub-description",
"tags": [
"Travel",
"Finance"
],
"taxes": 0,
"totalRatings": 1,
"totalReviews": 1,
"totalSold": 1
}
}

58
03_source/cms_backend/src/app/api/product/createProduct/route.ts
View File

@@ -1,4 +1,5 @@
// src/app/api/product/createProduct/route.ts
// REQ0183 frontend product new
//
// PURPOSE:
// create product to db
@@ -11,6 +12,8 @@ import type { NextRequest } from 'next/server';
import { STATUS, response, handleError } from 'src/utils/response';
import { isDev } from 'src/constants';
import prisma from '../../../lib/prisma';
// ----------------------------------------------------------------------
@@ -19,57 +22,22 @@ import prisma from '../../../lib/prisma';
* POST - Products
*************************************** */
export async function POST(req: NextRequest) {
// logger('[Product] list', products.length);
const { data } = await req.json();
const createForm: CreateProductData = data as unknown as CreateProductData;
console.log({ createForm });
try {
console.log({ data });
await prisma.productItem.create({ data: createForm });
if (isDev) {
console.log({ data });
}
await prisma.productItem.create({ data });
if (isDev) {
console.log('create done');
}
return response({ hello: 'world' }, STATUS.OK);
} catch (error) {
console.log({ hello: 'world', data });
return handleError('Product - Create', error);
}
}
type CreateProductData = {
// id: string;
sku: string;
name: string;
code: string;
price: number;
taxes: number;
tags: string[];
sizes: string[];
publish: string;
gender: string[];
coverUrl: string;
images: string[];
colors: string[];
quantity: number;
category: string;
available: number;
totalSold: number;
description: string;
totalRatings: number;
totalReviews: number;
inventoryType: string;
subDescription: string;
priceSale: number;
newLabel: {
content: string;
enabled: boolean;
};
saleLabel: {
content: string;
enabled: boolean;
};
// ratings: {
// name: string;
// starCount: number;
// reviewCount: number;
// }[];
};

51
03_source/cms_backend/src/app/api/product/createProduct/test.http Normal file
View File

@@ -0,0 +1,51 @@
###
POST http://localhost:7272/api/product/createProduct
Content-Type: application/json
{
"data": {
"available": 99,
"category": "T-shirts",
"code": "PD-12345",
"colors": [
"Red"
],
"coverUrl": "",
"description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
"gender": [
"Men"
],
"images": [
"data:image/png;base64,C",
"data:image/png;base64,C"
],
"inventoryType": "test",
"name": "hello product",
"newLabel": {
"enabled": false,
"content": ""
},
"price": 99.99,
"priceSale": null,
"publish": "yes",
"quantity": 99,
"saleLabel": {
"enabled": false,
"content": ""
},
"sizes": [
"7"
],
"sku": "SK-122345",
"subDescription": "this is test sub-description",
"tags": [
"Travel",
"Finance"
],
"taxes": 0,
"totalRatings": 1,
"totalReviews": 1,
"totalSold": 1
}
}

22
03_source/cms_backend/src/app/api/product/delete/route.ts Normal file
View File

@@ -0,0 +1,22 @@
import type { NextRequest } from 'next/server';
import { STATUS, response, handleError } from 'src/utils/response';
import { deleteProduct } from 'src/app/services/product.service';
/** **************************************
* PATCH - Delete product
*************************************** */
export async function PATCH(req: NextRequest) {
try {
const { productId } = await req.json();
if (!productId) throw new Error('productId cannot be null');
await deleteProduct(productId);
return response({ productId }, STATUS.OK);
} catch (error) {
return handleError('Product - Delete', error);
}
}

2
03_source/cms_backend/src/app/api/product/details/route.ts
View File

@@ -1,5 +1,7 @@
// src/app/api/product/details/route.ts
//
// REQ0182 frontend product details
//
// PURPOSE:
// get product from db by id
//

4
03_source/cms_backend/src/app/api/product/details/test.http
View File

@@ -1,3 +1,5 @@
###
GET http://localhost:7272/api/product/details?productId=e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01
###
GET http://localhost:7272/api/product/details?productId=e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01

23
03_source/cms_backend/src/app/api/product/list/route.ts.bak
View File

@@ -1,23 +0,0 @@
import { logger } from 'src/utils/logger';
import { STATUS, response, handleError } from 'src/utils/response';
import { _products } from 'src/_mock/_product';
// ----------------------------------------------------------------------
export const runtime = 'edge';
/** **************************************
* GET - Products
*************************************** */
export async function GET() {
try {
const products = _products();
logger('[Product] list', products.length);
return response({ products }, STATUS.OK);
} catch (error) {
return handleError('Product - Get list', error);
}
}

2
03_source/cms_backend/src/app/api/product/saveProduct/route.ts
View File

@@ -17,7 +17,7 @@ import prisma from '../../../lib/prisma';
/** **************************************
* GET - Products
*************************************** */
export async function POST(req: NextRequest) {
export async function PUT(req: NextRequest) {
// logger('[Product] list', products.length);
const { data } = await req.json();

51
03_source/cms_backend/src/app/api/product/saveProduct/test.http Normal file
View File

@@ -0,0 +1,51 @@
###
PUT http://localhost:7272/api/product/createProduct
Content-Type: application/json
{
"data": {
"available": 99,
"category": "T-shirts",
"code": "PD-12345",
"colors": [
"Red"
],
"coverUrl": "",
"description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
"gender": [
"Men"
],
"images": [
"data:image/png;base64,C",
"data:image/png;base64,C"
],
"inventoryType": "test",
"name": "hello product",
"newLabel": {
"enabled": false,
"content": ""
},
"price": 99.99,
"priceSale": null,
"publish": "yes",
"quantity": 99,
"saleLabel": {
"enabled": false,
"content": ""
},
"sizes": [
"7"
],
"sku": "SK-122345",
"subDescription": "this is test sub-description",
"tags": [
"Travel",
"Finance"
],
"taxes": 0,
"totalRatings": 1,
"totalReviews": 1,
"totalSold": 1
}
}

129
03_source/cms_backend/src/app/api/product/update/route.ts Normal file
View File

@@ -0,0 +1,129 @@
// src/app/api/product/saveProduct/route.ts
//
// PURPOSE:
// save product to db by id
//
// RULES:
// T.B.A.
import type { NextRequest } from 'next/server';
import { STATUS, response, handleError } from 'src/utils/response';
import prisma from '../../../lib/prisma';
// ----------------------------------------------------------------------
/** **************************************
* GET - Products
*************************************** */
export async function PUT(req: NextRequest) {
// logger('[Product] list', products.length);
const { productData } = await req.json();
try {
const products = await prisma.productItem.updateMany({
data: {
name: productData.name,
sku: productData.sku,
code: productData.code,
price: productData.price,
taxes: productData.taxes,
tags: productData.tags,
sizes: productData.sizes,
publish: productData.publish,
gender: productData.gender,
coverUrl: productData.coverUrl,
images: productData.images,
colors: productData.colors,
quantity: productData.quantity,
category: productData.category,
available: productData.available,
totalSold: productData.totalSold,
description: productData.description,
totalRatings: productData.totalRatings,
totalReviews: productData.totalReviews,
inventoryType: productData.inventoryType,
subDescription: productData.subDescription,
priceSale: productData.priceSale,
//
newLabel: {
content: productData.newLabel?.content || '',
enabled: productData.newLabel?.enabled ?? false,
},
saleLabel: {
content: productData.saleLabel?.content || '',
enabled: productData.saleLabel?.enabled ?? false,
},
ratings: {
set: productData.ratings.map((rating: { name: string; starCount: number; reviewCount: number }) => ({
name: rating.name,
starCount: rating.starCount,
reviewCount: rating.reviewCount,
})),
},
},
where: { id: productData.id },
});
return response({ data: productData }, STATUS.OK);
} catch (error) {
console.log({ data: productData });
return handleError('Product - Get list', error);
}
}
export type IProductItem = {
id: string;
sku: string;
name: string;
code: string;
price: number;
taxes: number;
tags: string[];
sizes: string[];
publish: string;
gender: string[];
coverUrl: string;
images: string[];
colors: string[];
quantity: number;
category: string;
available: number;
totalSold: number;
description: string;
totalRatings: number;
totalReviews: number;
// createdAt: IDateValue;
inventoryType: string;
subDescription: string;
priceSale: number | null;
// reviews: IProductReview[];
newLabel: {
content: string;
enabled: boolean;
};
saleLabel: {
content: string;
enabled: boolean;
};
ratings: {
name: string;
starCount: number;
reviewCount: number;
}[];
};
export type IDateValue = string | number | null;
export type IProductReview = {
id: string;
name: string;
rating: number;
comment: string;
helpful: number;
avatarUrl: string;
postedAt: IDateValue;
isPurchased: boolean;
attachments?: string[];
};

51
03_source/cms_backend/src/app/api/product/update/test.http Normal file
View File

@@ -0,0 +1,51 @@
###
PUT http://localhost:7272/api/product/createProduct
Content-Type: application/json
{
"data": {
"available": 99,
"category": "T-shirts",
"code": "PD-12345",
"colors": [
"Red"
],
"coverUrl": "",
"description": "this is description, 会員管理機能は、単なるデータ管理ツール以上の価値を持ちます。 企業は顧客の情報や動向を深く理解し、長期的な顧客関係の構築やロイヤルティの確立、そして迅速な市場変動への対応に直結します。 会員管理機能は、現代のビジネスにおいて企業の競争力を高める基盤として欠かせないものとなっています。",
"gender": [
"Men"
],
"images": [
"data:image/png;base64,C",
"data:image/png;base64,C"
],
"inventoryType": "test",
"name": "hello product",
"newLabel": {
"enabled": false,
"content": ""
},
"price": 99.99,
"priceSale": null,
"publish": "yes",
"quantity": 99,
"saleLabel": {
"enabled": false,
"content": ""
},
"sizes": [
"7"
],
"sku": "SK-122345",
"subDescription": "this is test sub-description",
"tags": [
"Travel",
"Finance"
],
"taxes": 0,
"totalRatings": 1,
"totalReviews": 1,
"totalSold": 1
}
}

14
03_source/cms_backend/src/app/services/product.service.ts
View File

@@ -1,5 +1,7 @@
// src/app/services/product.service.ts
//
// REQ0182 frontend product details
//
// PURPOSE:
// - Service for handling ProductItem Record
//
@@ -65,11 +67,19 @@ type UpdateProduct = {
};
async function listProducts(): Promise<ProductItem[]> {
return prisma.productItem.findMany();
return prisma.productItem.findMany({
include: {
reviews: true,
},
});
}
async function getProduct(productId: string): Promise<ProductItem | null> {
return prisma.productItem.findUnique({ where: { id: productId } });
return prisma.productItem.findUnique({
where: { id: productId },
include: { reviews: true },
//
});
}
async function createProduct(createForm: CreateProduct) {

194
03_source/frontend/src/actions/product.ts
View File

@@ -1,9 +1,11 @@
//
// src/actions/product.ts
//
import { useMemo } from 'react';
import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
import type { IProductItem } from 'src/types/product';
import type { SWRConfiguration } from 'swr';
import useSWR from 'swr';
import useSWR, { mutate } from 'swr';
// ----------------------------------------------------------------------
@@ -22,11 +24,7 @@ type ProductsData = {
export function useGetProducts() {
const url = endpoints.product.list;
const { data, isLoading, error, isValidating, mutate } = useSWR<ProductsData>(
url,
fetcher,
swrOptions
);
const { data, isLoading, error, isValidating } = useSWR<ProductsData>(url, fetcher, swrOptions);
const memoizedValue = useMemo(
() => ({
@@ -35,9 +33,8 @@ export function useGetProducts() {
productsError: error,
productsValidating: isValidating,
productsEmpty: !isLoading && !isValidating && !data?.products.length,
mutate,
}),
[data?.products, error, isLoading, isValidating, mutate]
[data?.products, error, isLoading, isValidating]
);
return memoizedValue;
@@ -56,10 +53,11 @@ export function useGetProduct(productId: string) {
const memoizedValue = useMemo(
() => ({
currentProduct: data?.product,
product: data?.product,
productLoading: isLoading,
productError: error,
productValidating: isValidating,
mutate,
}),
[data?.product, error, isLoading, isValidating]
);
@@ -97,140 +95,80 @@ export function useSearchProducts(query: string) {
// ----------------------------------------------------------------------
type SaveProductData = {
// id: string;
export async function createProduct(productData: IProductItem) {
/**
* Work on server
*/
const data = { productData };
await axiosInstance.post(endpoints.product.create, data);
sku: string;
name: string;
code: string;
price: number | null;
taxes: number | null;
tags: string[];
sizes: string[];
// publish: string;
gender: string[];
// coverUrl: string;
images: (string | File)[];
colors: string[];
quantity: number | null;
category: string;
// available: number;
// totalSold: number;
description: string;
// totalRatings: number;
// totalReviews: number;
// inventoryType: string;
subDescription: string;
priceSale: number | null;
newLabel: {
content: string;
enabled: boolean;
};
saleLabel: {
content: string;
enabled: boolean;
};
// ratings: {
// name: string;
// starCount: number;
// reviewCount: number;
// }[];
};
/**
* Work in local
*/
mutate(
endpoints.product.list,
(currentData: any) => {
const currentProducts: IProductItem[] = currentData?.products;
export async function saveProduct(productId: string, saveProductData: SaveProductData) {
console.log('save product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
const products = [...currentProducts, productData];
const res = await axiosInstance.post('http://localhost:7272/api/product/saveProduct', {
data: saveProductData,
});
return res;
}
export async function uploadProductImage(saveProductData: SaveProductData) {
console.log('save product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
const res = await axiosInstance.get('http://localhost:7272/api/product/helloworld');
return res;
return { ...currentData, products };
},
false
);
}
// ----------------------------------------------------------------------
type CreateProductData = {
// id: string;
sku: string;
name: string;
code: string;
price: number | null;
taxes: number | null;
tags: string[];
sizes: string[];
publish: string;
gender: string[];
coverUrl: string;
images: (string | File)[];
colors: string[];
quantity: number | null;
category: string;
available: number;
totalSold: number;
description: string;
totalRatings: number;
totalReviews: number;
inventoryType: string;
subDescription: string;
priceSale: number | null;
newLabel: {
content: string;
enabled: boolean;
};
saleLabel: {
content: string;
enabled: boolean;
};
// ratings: {
// name: string;
// starCount: number;
// reviewCount: number;
// }[];
};
export async function updateProduct(productData: Partial<IProductItem>) {
/**
* Work on server
*/
const data = { productData };
await axiosInstance.put(endpoints.product.update, data);
export async function createProduct(createProductData: CreateProductData) {
console.log('create product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
/**
* Work in local
*/
const res = await axiosInstance.post('http://localhost:7272/api/product/createProduct', {
data: createProductData,
});
mutate(
endpoints.product.list,
(currentData: any) => {
const currentProducts: IProductItem[] = currentData?.products;
return res;
const products = currentProducts.map((product) =>
product.id === productData.id ? { ...product, ...productData } : product
);
return { ...currentData, products };
},
false
);
}
// ----------------------------------------------------------------------
type DeleteProductResponse = {
success: boolean;
message?: string;
};
export async function deleteProduct(productId: string) {
/**
* Work on server
*/
const data = { productId };
await axiosInstance.patch(endpoints.product.delete, data);
export async function deleteProduct(productId: string): Promise<DeleteProductResponse> {
const url = `http://localhost:7272/api/product/deleteProduct?productId=${productId}`;
/**
* Work in local
*/
try {
const res = await axiosInstance.delete(url);
console.log({ res });
mutate(
endpoints.product.list,
(currentData: any) => {
console.log({ currentData });
const currentProducts: IProductItem[] = currentData?.products;
return {
success: true,
message: 'Product deleted successfully',
};
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to delete product',
};
}
const products = currentProducts.filter((product) => product.id !== productId);
return { ...currentData, products };
},
false
);
}

8
03_source/frontend/src/pages/dashboard/product/details.tsx
View File

@@ -1,10 +1,8 @@
// src/pages/dashboard/product/details.tsx
import { useParams } from 'src/routes/hooks';
import { CONFIG } from 'src/global-config';
import { useGetProduct } from 'src/actions/product';
import { CONFIG } from 'src/global-config';
import { useParams } from 'src/routes/hooks';
import { ProductDetailsView } from 'src/sections/product/view';
// ----------------------------------------------------------------------
@@ -14,7 +12,7 @@ const metadata = { title: `Product details | Dashboard - ${CONFIG.appName}` };
export default function Page() {
const { id = '' } = useParams();
const { currentProduct: product, productLoading, productError } = useGetProduct(id);
const { product, productLoading, productError } = useGetProduct(id);
return (
<>

10
03_source/frontend/src/pages/dashboard/product/edit.tsx
View File

@@ -1,8 +1,6 @@
import { useParams } from 'src/routes/hooks';
import { CONFIG } from 'src/global-config';
import { useGetProduct } from 'src/actions/product';
import { CONFIG } from 'src/global-config';
import { useParams } from 'src/routes/hooks';
import { ProductEditView } from 'src/sections/product/view';
// ----------------------------------------------------------------------
@@ -12,13 +10,13 @@ const metadata = { title: `Product edit | Dashboard - ${CONFIG.appName}` };
export default function Page() {
const { id = '' } = useParams();
const { currentProduct } = useGetProduct(id);
const { product } = useGetProduct(id);
return (
<>
<title>{metadata.title}</title>
<ProductEditView product={currentProduct} />
<ProductEditView product={product} />
</>
);
}

2
03_source/frontend/src/pages/dashboard/product/list.tsx
View File

@@ -1,5 +1,5 @@
// src/pages/dashboard/product/list.tsx
//
import { CONFIG } from 'src/global-config';
import { ProductListView } from 'src/sections/product/view';

2
03_source/frontend/src/pages/product/details.tsx
View File

@@ -12,7 +12,7 @@ const metadata = { title: `Product details - ${CONFIG.appName}` };
export default function Page() {
const { id = '' } = useParams();
const { currentProduct: product, productLoading, productError } = useGetProduct(id);
const { product, productLoading, productError } = useGetProduct(id);
return (
<>

5
03_source/frontend/src/pages/product/helloworld.tsx Normal file
View File

@@ -0,0 +1,5 @@
function Helloworld() {
return <>helloworld</>;
}
export default Helloworld;

3
03_source/frontend/src/pages/product/list.tsx
View File

@@ -1,6 +1,5 @@
import { CONFIG } from 'src/global-config';
import { useGetProducts } from 'src/actions/product';
import { CONFIG } from 'src/global-config';
import { ProductShopView } from 'src/sections/product/view';
// ----------------------------------------------------------------------

21
03_source/frontend/src/sections/product/product-item.tsx
View File

@@ -1,21 +1,16 @@
import type { IProductItem } from 'src/types/product';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
import Fab, { fabClasses } from '@mui/material/Fab';
import Link from '@mui/material/Link';
import Stack from '@mui/material/Stack';
import Tooltip from '@mui/material/Tooltip';
import Fab, { fabClasses } from '@mui/material/Fab';
import { RouterLink } from 'src/routes/components';
import { fCurrency } from 'src/utils/format-number';
import { Label } from 'src/components/label';
import { Image } from 'src/components/image';
import { Iconify } from 'src/components/iconify';
import { ColorPreview } from 'src/components/color-utils';
import { Iconify } from 'src/components/iconify';
import { Image } from 'src/components/image';
import { Label } from 'src/components/label';
import { RouterLink } from 'src/routes/components';
import type { IProductItem } from 'src/types/product';
import { fCurrency } from 'src/utils/format-number';
import { useCheckoutContext } from '../checkout/context';
// ----------------------------------------------------------------------

5
03_source/frontend/src/sections/product/product-list.tsx
View File

@@ -1,11 +1,8 @@
import type { BoxProps } from '@mui/material/Box';
import type { IProductItem } from 'src/types/product';
import Box from '@mui/material/Box';
import Pagination, { paginationClasses } from '@mui/material/Pagination';
import { paths } from 'src/routes/paths';
import type { IProductItem } from 'src/types/product';
import { ProductItem } from './product-item';
import { ProductItemSkeleton } from './product-skeleton';

11
03_source/frontend/src/sections/product/product-new-edit-form.tsx
View File

@@ -21,7 +21,7 @@ import {
PRODUCT_COLOR_NAME_OPTIONS,
PRODUCT_SIZE_OPTIONS,
} from 'src/_mock';
import { createProduct, saveProduct } from 'src/actions/product';
import { createProduct, updateProduct } from 'src/actions/product';
import { Field, Form, schemaHelper } from 'src/components/hook-form';
import { Iconify } from 'src/components/iconify';
import { toast } from 'src/components/snackbar';
@@ -194,9 +194,6 @@ export function ProductNewEditForm({ currentProduct }: Props) {
};
try {
// await new Promise((resolve) => setTimeout(resolve, 500));
// reset();
// sanitize file field
for (let i = 0; i < values.images.length; i++) {
const temp: any = values.images[i];
@@ -205,12 +202,14 @@ export function ProductNewEditForm({ currentProduct }: Props) {
}
}
const sanitizedValues: IProductItem = values as unknown as IProductItem;
if (currentProduct) {
// perform save
await saveProduct(currentProduct.id, values);
updateProduct(sanitizedValues);
} else {
// perform create
await createProduct(values);
createProduct(sanitizedValues);
}
toast.success(currentProduct ? 'Update success!' : 'Create success!');

18
03_source/frontend/src/sections/product/product-table-row.tsx
View File

@@ -1,18 +1,14 @@
// src/sections/product/product-table-row.tsx
import type { GridCellParams } from '@mui/x-data-grid';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Avatar from '@mui/material/Avatar';
import ListItemText from '@mui/material/ListItemText';
import Box from '@mui/material/Box';
import LinearProgress from '@mui/material/LinearProgress';
import { RouterLink } from 'src/routes/components';
import { fCurrency } from 'src/utils/format-number';
import { fTime, fDate } from 'src/utils/format-time';
import Link from '@mui/material/Link';
import ListItemText from '@mui/material/ListItemText';
import type { GridCellParams } from '@mui/x-data-grid';
import { Label } from 'src/components/label';
import { RouterLink } from 'src/routes/components';
import { fCurrency } from 'src/utils/format-number';
import { fDate, fTime } from 'src/utils/format-time';
// ----------------------------------------------------------------------

7
03_source/frontend/src/sections/product/view/product-create-view.tsx
View File

@@ -1,9 +1,6 @@
import { paths } from 'src/routes/paths';
import { DashboardContent } from 'src/layouts/dashboard';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import { ProductNewEditForm } from '../product-new-edit-form';
// ----------------------------------------------------------------------

10
03_source/frontend/src/sections/product/view/product-edit-view.tsx
View File

@@ -1,11 +1,7 @@
import type { IProductItem } from 'src/types/product';
import { paths } from 'src/routes/paths';
import { DashboardContent } from 'src/layouts/dashboard';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { DashboardContent } from 'src/layouts/dashboard';
import { paths } from 'src/routes/paths';
import type { IProductItem } from 'src/types/product';
import { ProductNewEditForm } from '../product-new-edit-form';
// ----------------------------------------------------------------------

28
03_source/frontend/src/sections/product/view/product-list-view.tsx
View File

@@ -35,9 +35,11 @@ import { EmptyContent } from 'src/components/empty-content';
import { Iconify } from 'src/components/iconify';
import { toast } from 'src/components/snackbar';
import { DashboardContent } from 'src/layouts/dashboard';
import { endpoints } from 'src/lib/axios';
import { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import type { IProductItem, IProductTableFilters } from 'src/types/product';
import { mutate } from 'swr';
import { ProductTableFiltersResult } from '../product-table-filters-result';
import {
RenderCellCreatedAt,
@@ -59,6 +61,8 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
export function ProductListView() {
const { t } = useTranslation();
const confirmDialog = useBoolean();
const PRODUCT_STOCK_OPTIONS = [
{ value: 'in stock', label: t('In stock') },
{ value: 'low stock', label: t('Low stock') },
@@ -75,7 +79,7 @@ export function ProductListView() {
const confirmDeleteSingleItemDialog = useBoolean();
const [idToDelete, setIdToDelete] = useState<string | null>(null);
const { products, productsLoading, mutate } = useGetProducts();
const { products, productsLoading } = useGetProducts();
const [tableData, setTableData] = useState<IProductItem[]>(products);
const [selectedRowIds, setSelectedRowIds] = useState<GridRowSelectionModel>([]);
@@ -113,13 +117,29 @@ export function ProductListView() {
toast.error('Delete failed!');
}
// TODO: reload table here
mutate();
// setTableData(deleteRow);
setDeleteInProgress(false);
}, [idToDelete, mutate]);
// NOTE: this is working using example from calendar
const handleDeleteRow = useCallback(
async (id: string) => {
try {
await deleteProduct(id);
// invalidate cache to reload list
await mutate(endpoints.product.list);
toast.success('Delete success!');
} catch (error) {
console.error(error);
toast.error('Delete error!');
}
},
[tableData]
);
const handleDeleteRows = useCallback(() => {
const deleteRows = tableData.filter((row) => !selectedRowIds.includes(row.id));

43
03_source/frontend/src/sections/product/view/product-shop-details-view.tsx
View File

@@ -1,33 +1,28 @@
import type { IProductItem } from 'src/types/product';
import type { Theme, SxProps } from '@mui/material/styles';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import type { SxProps, Theme } from '@mui/material/styles';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';
import { useTabs } from 'minimal-shared/hooks';
import { varAlpha } from 'minimal-shared/utils';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Container from '@mui/material/Container';
import Typography from '@mui/material/Typography';
import { paths } from 'src/routes/paths';
import { RouterLink } from 'src/routes/components';
import { Iconify } from 'src/components/iconify';
import { EmptyContent } from 'src/components/empty-content';
import { useTranslation } from 'react-i18next';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { CartIcon } from '../cart-icon';
import { EmptyContent } from 'src/components/empty-content';
import { Iconify } from 'src/components/iconify';
import { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import type { IProductItem } from 'src/types/product';
import { useCheckoutContext } from '../../checkout/context';
import { ProductDetailsSkeleton } from '../product-skeleton';
import { ProductDetailsReview } from '../product-details-review';
import { ProductDetailsSummary } from '../product-details-summary';
import { CartIcon } from '../cart-icon';
import { ProductDetailsCarousel } from '../product-details-carousel';
import { ProductDetailsDescription } from '../product-details-description';
import { useTranslation } from 'react-i18next';
import { ProductDetailsReview } from '../product-details-review';
import { ProductDetailsSummary } from '../product-details-summary';
import { ProductDetailsSkeleton } from '../product-skeleton';
// ----------------------------------------------------------------------

57
03_source/frontend/src/types/product.ts
View File

@@ -29,41 +29,32 @@ export type IProductReview = {
export type IProductItem = {
id: string;
sku: string;
name: string;
code: string;
price: number;
taxes: number;
tags: string[];
sizes: string[];
publish: string;
gender: string[];
coverUrl: string;
images: string[];
colors: string[];
quantity: number;
category: string;
createdAt: IDateValue;
//
available: number;
totalSold: number;
category: string;
code: string;
colors: string[];
coverUrl: string;
description: string;
gender: string[];
images: string[];
inventoryType: string;
name: string;
newLabel: { content: string; enabled: boolean };
price: number;
priceSale: number | null;
publish: string;
quantity: number;
ratings: { name: string; starCount: number; reviewCount: number }[];
reviews: IProductReview[];
saleLabel: { content: string; enabled: boolean };
sizes: string[];
sku: string;
subDescription: string;
tags: string[];
taxes: number;
totalRatings: number;
totalReviews: number;
createdAt: IDateValue;
inventoryType: string;
subDescription: string;
priceSale: number | null;
reviews: IProductReview[];
newLabel: {
content: string;
enabled: boolean;
};
saleLabel: {
content: string;
enabled: boolean;
};
ratings: {
name: string;
starCount: number;
reviewCount: number;
}[];
totalSold: number;
};