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

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;
};