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

update

Browse Source
This commit is contained in:
louiscklaw
2025-05-28 21:06:12 +08:00
parent 4007227418
commit db805f23b6
61 changed files with 1279 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
03_source/frontend/src/sections/product/product-details-toolbar.tsx
View File

@@ -1,18 +1,15 @@
import type { BoxProps } from '@mui/material/Box';
import { usePopover } from 'minimal-shared/hooks';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';
import Tooltip from '@mui/material/Tooltip';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import IconButton from '@mui/material/IconButton';
import { RouterLink } from 'src/routes/components';
import { Iconify } from 'src/components/iconify';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import Tooltip from '@mui/material/Tooltip';
import { usePopover } from 'minimal-shared/hooks';
import { useTranslation } from 'react-i18next';
import { CustomPopover } from 'src/components/custom-popover';
import { Iconify } from 'src/components/iconify';
import { RouterLink } from 'src/routes/components';
// ----------------------------------------------------------------------
@@ -36,6 +33,7 @@ export function ProductDetailsToolbar({
...other
}: Props) {
const menuActions = usePopover();
const { t } = useTranslation();
const renderMenuActions = () => (
<CustomPopover
@@ -77,7 +75,7 @@ export function ProductDetailsToolbar({
href={backHref}
startIcon={<Iconify icon="eva:arrow-ios-back-fill" width={16} />}
>
Back
{t('back')}
</Button>
<Box sx={{ flexGrow: 1 }} />

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

@@ -1,65 +1,91 @@
import type { IProductItem } from 'src/types/product';
import { z as zod } from 'zod';
import { useForm } from 'react-hook-form';
import { useState, useCallback } from 'react';
import { useBoolean } from 'minimal-shared/hooks';
import { zodResolver } from '@hookform/resolvers/zod';
import Box from '@mui/material/Box';
import Chip from '@mui/material/Chip';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import CardHeader from '@mui/material/CardHeader';
import Chip from '@mui/material/Chip';
import Collapse from '@mui/material/Collapse';
import Divider from '@mui/material/Divider';
import FormControlLabel from '@mui/material/FormControlLabel';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';
import Stack from '@mui/material/Stack';
import Switch from '@mui/material/Switch';
import Button from '@mui/material/Button';
import Divider from '@mui/material/Divider';
import Collapse from '@mui/material/Collapse';
import IconButton from '@mui/material/IconButton';
import CardHeader from '@mui/material/CardHeader';
import Typography from '@mui/material/Typography';
import InputAdornment from '@mui/material/InputAdornment';
import FormControlLabel from '@mui/material/FormControlLabel';
import { paths } from 'src/routes/paths';
import { useRouter } from 'src/routes/hooks';
import { saveProduct } from 'src/actions/product';
import { useBoolean } from 'minimal-shared/hooks';
import { useCallback, useEffect, useState } from 'react';
import { useForm } from 'react-hook-form';
import {
_tags,
PRODUCT_SIZE_OPTIONS,
PRODUCT_GENDER_OPTIONS,
PRODUCT_COLOR_NAME_OPTIONS,
PRODUCT_CATEGORY_GROUP_OPTIONS,
PRODUCT_COLOR_NAME_OPTIONS,
PRODUCT_SIZE_OPTIONS,
} from 'src/_mock';
import { toast } from 'src/components/snackbar';
import { createProduct, saveProduct } from 'src/actions/product';
import { Field, Form, schemaHelper } from 'src/components/hook-form';
import { Iconify } from 'src/components/iconify';
import { Form, Field, schemaHelper } from 'src/components/hook-form';
import { toast } from 'src/components/snackbar';
import { useRouter } from 'src/routes/hooks';
import { paths } from 'src/routes/paths';
import type { IProductItem } from 'src/types/product';
import { fileToBase64 } from 'src/utils/file-to-base64';
import { z as zod } from 'zod';
// ----------------------------------------------------------------------
const PRODUCT_PUBLISH_OPTIONS = [
{ value: 'published', label: 'Published' },
{ value: 'draft', label: 'Draft' },
];
const PRODUCT_COLOR_OPTIONS = [
'#FF4842',
'#1890FF',
'#FFC0CB',
'#00AB55',
'#FFC107',
'#7F00FF',
'#000000',
'#FFFFFF',
];
const _tags = [
`Technology`,
`Health and Wellness`,
`Travel`,
`Finance`,
`Education`,
`Food and Beverage`,
`Fashion`,
`Home and Garden`,
`Sports`,
`Entertainment`,
`Business`,
`Science`,
`Automotive`,
`Beauty`,
`Fitness`,
`Lifestyle`,
`Real Estate`,
`Parenting`,
`Pet Care`,
`Environmental`,
`DIY and Crafts`,
`Gaming`,
`Photography`,
`Music`,
];
const PRODUCT_GENDER_OPTIONS = [
{ label: 'Men', value: 'Men' },
{ label: 'Women', value: 'Women' },
{ label: 'Kids', value: 'Kids' },
];
export type NewProductSchemaType = zod.infer<typeof NewProductSchema>;
export const NewProductSchema = zod.object({
name: zod.string().min(1, { message: 'Name is required!' }),
description: schemaHelper
.editor({ message: 'Description is required!' })
.min(100, { message: 'Description must be at least 100 characters' })
.max(50000, { message: 'Description must be less than 50000 characters' }),
images: schemaHelper.files({ message: 'Images is required!' }),
code: zod.string().min(1, { message: 'Product code is required!' }),
sku: zod.string().min(1, { message: 'Product sku is required!' }),
quantity: schemaHelper.nullableInput(
zod.number({ coerce: true }).min(1, { message: 'Quantity is required!' }),
{
// message for null value
message: 'Quantity is required!',
}
),
colors: zod.string().array().min(1, { message: 'Choose at least one option!' }),
sizes: zod.string().array().min(1, { message: 'Choose at least one option!' }),
tags: zod.string().array().min(2, { message: 'Must have at least 2 items!' }),
gender: zod.array(zod.string()).min(1, { message: 'Choose at least one option!' }),
name: zod.string().min(1, { message: 'Name is required!' }),
code: zod.string().min(1, { message: 'Product code is required!' }),
price: schemaHelper.nullableInput(
zod.number({ coerce: true }).min(1, { message: 'Price is required!' }),
{
@@ -67,13 +93,35 @@ export const NewProductSchema = zod.object({
message: 'Price is required!',
}
),
// Not required
category: zod.string(),
subDescription: zod.string(),
taxes: zod.number({ coerce: true }).nullable(),
tags: zod.string().array().min(2, { message: 'Must have at least 2 items!' }),
sizes: zod.string().array().min(1, { message: 'Choose at least one option!' }),
publish: zod.string(),
gender: zod.array(zod.string()).min(1, { message: 'Choose at least one option!' }),
coverUrl: zod.string(),
images: schemaHelper.files({ message: 'Images is required!' }),
colors: zod.string().array().min(1, { message: 'Choose at least one option!' }),
quantity: schemaHelper.nullableInput(
zod.number({ coerce: true }).min(1, { message: 'Quantity is required!' }),
{
// message for null value
message: 'Quantity is required!',
}
),
category: zod.string(),
available: zod.number(),
totalSold: zod.number(),
description: schemaHelper
.editor({ message: 'Description is required!' })
.min(10, { message: 'Description must be at least 10 characters' })
.max(50000, { message: 'Description must be less than 50000 characters' }),
totalRatings: zod.number(),
totalReviews: zod.number(),
inventoryType: zod.string(),
subDescription: zod.string(),
priceSale: zod.number({ coerce: true }).nullable(),
saleLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
newLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
saleLabel: zod.object({ enabled: zod.boolean(), content: zod.string() }),
});
// ----------------------------------------------------------------------
@@ -92,22 +140,32 @@ export function ProductNewEditForm({ currentProduct }: Props) {
const [includeTaxes, setIncludeTaxes] = useState(false);
const defaultValues: NewProductSchemaType = {
name: '',
description: '',
subDescription: '',
sku: '321',
name: 'hello product',
code: '123',
price: 1.1,
taxes: 1.1,
tags: [_tags[0], _tags[1]],
sizes: ['9'],
publish: PRODUCT_PUBLISH_OPTIONS[0].value,
gender: [
PRODUCT_GENDER_OPTIONS[0].value,
PRODUCT_GENDER_OPTIONS[1].value,
PRODUCT_GENDER_OPTIONS[2].value,
],
coverUrl: '',
images: [],
/********/
code: '',
sku: '',
price: null,
taxes: null,
priceSale: null,
quantity: null,
tags: [],
gender: [],
colors: [PRODUCT_COLOR_OPTIONS[0], PRODUCT_COLOR_OPTIONS[1]],
quantity: 3,
category: PRODUCT_CATEGORY_GROUP_OPTIONS[0].classify[1],
colors: [],
sizes: [],
available: 0,
totalSold: 0,
description: 'hello description',
totalRatings: 0,
totalReviews: 0,
inventoryType: '',
subDescription: '',
priceSale: 0.9,
newLabel: { enabled: false, content: '' },
saleLabel: { enabled: false, content: '' },
};
@@ -123,13 +181,11 @@ export function ProductNewEditForm({ currentProduct }: Props) {
watch,
setValue,
handleSubmit,
formState: { isSubmitting },
formState: { errors, isSubmitting },
} = methods;
const values = watch();
// const saveProduct = useSaveProduct('e99f09a7-dd88-49d5-b1c8-1daf80c2d7b01');
const onSubmit = handleSubmit(async (data) => {
const updatedData = {
...data,
@@ -140,15 +196,27 @@ export function ProductNewEditForm({ currentProduct }: Props) {
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];
if (temp instanceof File) {
values.images[i] = await fileToBase64(temp);
}
}
if (currentProduct) {
console.log('save product');
// perform save
await saveProduct(currentProduct.id, values);
} else {
// perform create
await createProduct(values);
}
toast.success(currentProduct ? 'Update success!' : 'Create success!');
router.push(paths.dashboard.product.root);
console.info('DATA', updatedData);
// router.push(paths.dashboard.product.root);
// console.info('DATA', updatedData);
} catch (error) {
console.error(error);
}
@@ -176,6 +244,16 @@ export function ProductNewEditForm({ currentProduct }: Props) {
</IconButton>
);
function handleProductImageUpload() {
console.log(values);
}
const [disableUserInput, setDisableUserInput] = useState<boolean>(false);
useEffect(() => {
setDisableUserInput(isSubmitting);
}, [isSubmitting]);
const renderDetails = () => (
<Card>
<CardHeader
@@ -189,9 +267,15 @@ export function ProductNewEditForm({ currentProduct }: Props) {
<Divider />
<Stack spacing={3} sx={{ p: 3 }}>
<Field.Text name="name" label="Product name" />
<Field.Text disabled={disableUserInput} name="name" label="產品名稱 / Product name" />
<Field.Text name="subDescription" label="Sub description" multiline rows={4} />
<Field.Text
disabled={disableUserInput}
name="subDescription"
label="Sub description"
multiline
rows={4}
/>
<Stack spacing={1.5}>
<Typography variant="subtitle2">Content</Typography>
@@ -207,7 +291,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
maxSize={3145728}
onRemove={handleRemoveFile}
onRemoveAll={handleRemoveAllFiles}
onUpload={() => console.info('ON UPLOAD')}
onUpload={handleProductImageUpload}
/>
</Stack>
</Stack>
@@ -236,11 +320,12 @@ export function ProductNewEditForm({ currentProduct }: Props) {
gridTemplateColumns: { xs: 'repeat(1, 1fr)', md: 'repeat(2, 1fr)' },
}}
>
<Field.Text name="code" label="Product code" />
<Field.Text disabled={disableUserInput} name="code" label="Product code" />
<Field.Text name="sku" label="Product SKU" />
<Field.Text disabled={disableUserInput} name="sku" label="Product SKU" />
<Field.Text
disabled={disableUserInput}
name="quantity"
label="Quantity"
placeholder="0"
@@ -249,6 +334,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
/>
<Field.Select
disabled={disableUserInput}
name="category"
label="Category"
slotProps={{
@@ -278,6 +364,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
</Box>
<Field.Autocomplete
disabled={disableUserInput}
name="tags"
label="Tags"
placeholder="+ Tags"
@@ -355,6 +442,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
<Stack spacing={3} sx={{ p: 3 }}>
<Field.Text
disabled={disableUserInput}
name="price"
label="Regular price"
placeholder="0.00"
@@ -374,6 +462,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
/>
<Field.Text
disabled={disableUserInput}
name="priceSale"
label="Sale price"
placeholder="0.00"
@@ -395,6 +484,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
<FormControlLabel
control={
<Switch
disabled={disableUserInput}
id="toggle-taxes"
checked={includeTaxes}
onChange={handleChangeIncludeTaxes}
@@ -405,6 +495,7 @@ export function ProductNewEditForm({ currentProduct }: Props) {
{!includeTaxes && (
<Field.Text
disabled={disableUserInput}
name="taxes"
label="Tax (%)"
placeholder="0.00"
@@ -437,9 +528,16 @@ export function ProductNewEditForm({ currentProduct }: Props) {
alignItems: 'center',
}}
>
<div>{JSON.stringify({ errors })}</div>
<FormControlLabel
label="Publish"
control={<Switch defaultChecked slotProps={{ input: { id: 'publish-switch' } }} />}
control={
<Switch
disabled={disableUserInput}
defaultChecked
slotProps={{ input: { id: 'publish-switch' } }}
/>
}
sx={{ pl: 3, flexGrow: 1 }}
/>

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

@@ -43,6 +43,8 @@ export function RenderCellCreatedAt({ params }: ParamsProps) {
}
export function RenderCellStock({ params }: ParamsProps) {
return <>helloworld</>
return (
<Box sx={{ width: 1, typography: 'caption', color: 'text.secondary' }}>
<LinearProgress

49
03_source/frontend/src/sections/product/product-table-toolbar.tsx
View File

@@ -1,21 +1,19 @@
import type { IProductTableFilters } from 'src/types/product';
import type { SelectChangeEvent } from '@mui/material/Select';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import { useState, useCallback } from 'react';
import { varAlpha } from 'minimal-shared/utils';
import { usePopover } from 'minimal-shared/hooks';
import Select from '@mui/material/Select';
import MenuList from '@mui/material/MenuList';
import MenuItem from '@mui/material/MenuItem';
import Checkbox from '@mui/material/Checkbox';
import InputLabel from '@mui/material/InputLabel';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import MenuList from '@mui/material/MenuList';
import OutlinedInput from '@mui/material/OutlinedInput';
import { Iconify } from 'src/components/iconify';
import type { SelectChangeEvent } from '@mui/material/Select';
import Select from '@mui/material/Select';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import { usePopover } from 'minimal-shared/hooks';
import { varAlpha } from 'minimal-shared/utils';
import { useCallback, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { CustomPopover } from 'src/components/custom-popover';
import { Iconify } from 'src/components/iconify';
import type { IProductTableFilters } from 'src/types/product';
// ----------------------------------------------------------------------
@@ -59,6 +57,8 @@ export function ProductTableToolbar({ filters, options }: Props) {
updateFilters({ publish });
}, [publish, updateFilters]);
const { t } = useTranslation();
const renderMenuActions = () => (
<CustomPopover
open={menuActions.open}
@@ -88,14 +88,21 @@ export function ProductTableToolbar({ filters, options }: Props) {
return (
<>
<FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 200 } }}>
<InputLabel htmlFor="filter-stock-select">Stock</InputLabel>
<InputLabel htmlFor="filter-stock-select">{t('Stock')}</InputLabel>
<Select
multiple
value={stock}
onChange={handleChangeStock}
onClose={handleFilterStock}
input={<OutlinedInput label="Stock" />}
renderValue={(selected) => selected.map((value) => value).join(', ')}
renderValue={(selected) => {
return selected
.map((value) => {
console.log(t(value));
return t(value);
})
.join(', ');
}}
inputProps={{ id: 'filter-stock-select' }}
sx={{ textTransform: 'capitalize' }}
>
@@ -126,20 +133,20 @@ export function ProductTableToolbar({ filters, options }: Props) {
}),
]}
>
Apply
{t('Apply')}
</MenuItem>
</Select>
</FormControl>
<FormControl sx={{ flexShrink: 0, width: { xs: 1, md: 200 } }}>
<InputLabel htmlFor="filter-publish-select">Publish</InputLabel>
<InputLabel htmlFor="filter-publish-select">{t('Publish')}</InputLabel>
<Select
multiple
value={publish}
onChange={handleChangePublish}
onClose={handleFilterPublish}
input={<OutlinedInput label="Publish" />}
renderValue={(selected) => selected.map((value) => value).join(', ')}
input={<OutlinedInput label={t('Publish')} />}
renderValue={(selected) => selected.map((value) => t(value)).join(', ')}
inputProps={{ id: 'filter-publish-select' }}
sx={{ textTransform: 'capitalize' }}
>
@@ -173,7 +180,7 @@ export function ProductTableToolbar({ filters, options }: Props) {
}),
]}
>
Apply
{t('Apply')}
</MenuItem>
</Select>
</FormControl>

39
03_source/frontend/src/sections/product/view/confirm-delete-product-dialog.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { useBoolean } from 'minimal-shared/hooks';
import Button from '@mui/material/Button';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogActions from '@mui/material/DialogActions';
import DialogContent from '@mui/material/DialogContent';
// ----------------------------------------------------------------------
export function ConfirmDeleteProductDialog() {
const openDialog = useBoolean();
return (
<>
<Button color="info" variant="outlined" onClick={openDialog.onTrue}>
Open alert dialog
</Button>
<Dialog open onClose={openDialog.onFalse}>
<DialogTitle>Are you sure delete product ?</DialogTitle>
<DialogContent sx={{ color: 'text.secondary' }}>
Are you sure delete product ?
</DialogContent>
<DialogActions>
<Button variant="outlined" onClick={openDialog.onFalse}>
Cancel
</Button>
<Button loading variant="contained" onClick={openDialog.onFalse} autoFocus>
Delete
</Button>
</DialogActions>
</Dialog>
</>
);
}

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

@@ -1,32 +1,27 @@
import type { IProductItem } from 'src/types/product';
import { useTabs } from 'minimal-shared/hooks';
import { varAlpha } from 'minimal-shared/utils';
import { useState, useEffect, useCallback } from 'react';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
import Tabs from '@mui/material/Tabs';
import Button from '@mui/material/Button';
import Card from '@mui/material/Card';
import Grid from '@mui/material/Grid';
import Button from '@mui/material/Button';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';
import { paths } from 'src/routes/paths';
import { RouterLink } from 'src/routes/components';
import { PRODUCT_PUBLISH_OPTIONS } from 'src/_mock';
import { DashboardContent } from 'src/layouts/dashboard';
import { Iconify } from 'src/components/iconify';
import { useTabs } from 'minimal-shared/hooks';
import { varAlpha } from 'minimal-shared/utils';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
// import { PRODUCT_PUBLISH_OPTIONS } from 'src/_mock';
import { EmptyContent } from 'src/components/empty-content';
import { ProductDetailsSkeleton } from '../product-skeleton';
import { Iconify } from 'src/components/iconify';
import { DashboardContent } from 'src/layouts/dashboard';
import { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import type { IProductItem } from 'src/types/product';
import { ProductDetailsCarousel } from '../product-details-carousel';
import { ProductDetailsDescription } from '../product-details-description';
import { ProductDetailsReview } from '../product-details-review';
import { ProductDetailsSummary } from '../product-details-summary';
import { ProductDetailsToolbar } from '../product-details-toolbar';
import { ProductDetailsCarousel } from '../product-details-carousel';
import { ProductDetailsDescription } from '../product-details-description';
import { ProductDetailsSkeleton } from '../product-skeleton';
// ----------------------------------------------------------------------
@@ -57,6 +52,8 @@ type Props = {
};
export function ProductDetailsView({ product, error, loading }: Props) {
const { t } = useTranslation();
const tabs = useTabs('description');
const [publish, setPublish] = useState('');
@@ -71,6 +68,11 @@ export function ProductDetailsView({ product, error, loading }: Props) {
setPublish(newValue);
}, []);
const PRODUCT_PUBLISH_OPTIONS = [
{ value: 'published', label: t('Published') },
{ value: 'draft', label: t('Draft') },
];
if (loading) {
return (
<DashboardContent sx={{ pt: 5 }}>

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

@@ -1,64 +1,54 @@
import type { Theme, SxProps } from '@mui/material/styles';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import type { IProductItem, IProductTableFilters } from 'src/types/product';
import type {
GridColDef,
GridSlotProps,
GridRowSelectionModel,
GridActionsCellItemProps,
GridColumnVisibilityModel,
} from '@mui/x-data-grid';
import { useState, useEffect, useCallback } from 'react';
import { useBoolean, useSetState } from 'minimal-shared/hooks';
import Box from '@mui/material/Box';
import Link from '@mui/material/Link';
import Card from '@mui/material/Card';
import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import Card from '@mui/material/Card';
import Link from '@mui/material/Link';
import ListItemIcon from '@mui/material/ListItemIcon';
import MenuItem from '@mui/material/MenuItem';
import type { SxProps, Theme } from '@mui/material/styles';
import type {
GridActionsCellItemProps,
GridColDef,
GridColumnVisibilityModel,
GridRowSelectionModel,
GridSlotProps,
} from '@mui/x-data-grid';
import {
DataGrid,
gridClasses,
GridToolbarExport,
GridActionsCellItem,
GridToolbarContainer,
GridToolbarQuickFilter,
GridToolbarFilterButton,
gridClasses,
GridToolbarColumnsButton,
GridToolbarContainer,
GridToolbarExport,
GridToolbarFilterButton,
GridToolbarQuickFilter,
} from '@mui/x-data-grid';
import { paths } from 'src/routes/paths';
import { RouterLink } from 'src/routes/components';
import { PRODUCT_STOCK_OPTIONS } from 'src/_mock';
import { useGetProducts } from 'src/actions/product';
import { DashboardContent } from 'src/layouts/dashboard';
import { toast } from 'src/components/snackbar';
import { Iconify } from 'src/components/iconify';
import { EmptyContent } from 'src/components/empty-content';
import { ConfirmDialog } from 'src/components/custom-dialog';
import type { UseSetStateReturn } from 'minimal-shared/hooks';
import { useBoolean, useSetState } from 'minimal-shared/hooks';
import { useCallback, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
// import { PRODUCT_STOCK_OPTIONS } from 'src/_mock';
import { deleteProduct, useGetProducts } from 'src/actions/product';
import { CustomBreadcrumbs } from 'src/components/custom-breadcrumbs';
import { ProductTableToolbar } from '../product-table-toolbar';
import { ConfirmDialog } from 'src/components/custom-dialog';
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 { RouterLink } from 'src/routes/components';
import { paths } from 'src/routes/paths';
import type { IProductItem, IProductTableFilters } from 'src/types/product';
import { ProductTableFiltersResult } from '../product-table-filters-result';
import {
RenderCellStock,
RenderCellPrice,
RenderCellPublish,
RenderCellProduct,
RenderCellCreatedAt,
RenderCellPrice,
RenderCellProduct,
RenderCellPublish,
RenderCellStock,
} from '../product-table-row';
import { ProductTableToolbar } from '../product-table-toolbar';
// ----------------------------------------------------------------------
const PUBLISH_OPTIONS = [
{ value: 'published', label: 'Published' },
{ value: 'draft', label: 'Draft' },
];
const HIDE_COLUMNS = { category: false };
const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
@@ -66,9 +56,13 @@ const HIDE_COLUMNS_TOGGLABLE = ['category', 'actions'];
// ----------------------------------------------------------------------
export function ProductListView() {
const confirmDialog = useBoolean();
const { t } = useTranslation();
const confirmDeleteMultiItemsDialog = useBoolean();
const { products, productsLoading } = useGetProducts();
const confirmDeleteSingleItemDialog = useBoolean();
const [idToDelete, setIdToDelete] = useState<string | null>(null);
const { products, productsLoading, mutate } = useGetProducts();
const [tableData, setTableData] = useState<IProductItem[]>(products);
const [selectedRowIds, setSelectedRowIds] = useState<GridRowSelectionModel>([]);
@@ -80,6 +74,12 @@ export function ProductListView() {
const [columnVisibilityModel, setColumnVisibilityModel] =
useState<GridColumnVisibilityModel>(HIDE_COLUMNS);
const PRODUCT_STOCK_OPTIONS = [
{ value: 'in stock', label: t('In stock') },
{ value: 'low stock', label: t('Low stock') },
{ value: 'out of stock', label: t('Out of stock') },
];
useEffect(() => {
if (products.length) {
setTableData(products);
@@ -93,16 +93,30 @@ export function ProductListView() {
filters: currentFilters,
});
const handleDeleteRow = useCallback(
(id: string) => {
const deleteRow = tableData.filter((row) => row.id !== id);
const PUBLISH_OPTIONS = [
{ value: 'published', label: t('Published') },
{ value: 'draft', label: t('Draft') },
];
toast.success('Delete success!');
const handleDeleteSingleRow = useCallback(async () => {
// const deleteRow = tableData.filter((row) => row.id !== id);
setTableData(deleteRow);
},
[tableData]
);
try {
if (idToDelete) {
await deleteProduct(idToDelete);
toast.success('Delete success!');
}
} catch (error) {
console.error(error);
toast.error('Delete failed!');
}
// TODO: reload table here
mutate();
// setTableData(deleteRow);
setDeleteInProgress(false);
}, [idToDelete, mutate]);
const handleDeleteRows = useCallback(() => {
const deleteRows = tableData.filter((row) => !selectedRowIds.includes(row.id));
@@ -120,7 +134,7 @@ export function ProductListView() {
selectedRowIds={selectedRowIds}
setFilterButtonEl={setFilterButtonEl}
filteredResults={dataFiltered.length}
onOpenConfirmDeleteRows={confirmDialog.onTrue}
onOpenConfirmDeleteRows={confirmDeleteMultiItemsDialog.onTrue}
/>
),
// eslint-disable-next-line react-hooks/exhaustive-deps
@@ -128,10 +142,10 @@ export function ProductListView() {
);
const columns: GridColDef[] = [
{ field: 'category', headerName: 'Category', filterable: false },
{ field: 'category', headerName: t('Category'), filterable: false },
{
field: 'name',
headerName: 'Product',
headerName: t('Product'),
flex: 1,
minWidth: 360,
hideable: false,
@@ -141,13 +155,13 @@ export function ProductListView() {
},
{
field: 'createdAt',
headerName: 'Create at',
headerName: t('Create-at'),
width: 160,
renderCell: (params) => <RenderCellCreatedAt params={params} />,
},
{
field: 'inventoryType',
headerName: 'Stock',
headerName: t('Stock'),
width: 160,
type: 'singleSelect',
valueOptions: PRODUCT_STOCK_OPTIONS,
@@ -155,14 +169,14 @@ export function ProductListView() {
},
{
field: 'price',
headerName: 'Price',
headerName: t('Price'),
width: 140,
editable: true,
renderCell: (params) => <RenderCellPrice params={params} />,
},
{
field: 'publish',
headerName: 'Publish',
headerName: t('Publish'),
width: 110,
type: 'singleSelect',
editable: true,
@@ -196,7 +210,10 @@ export function ProductListView() {
showInMenu
icon={<Iconify icon="solar:trash-bin-trash-bold" />}
label="Delete"
onClick={() => handleDeleteRow(params.row.id)}
onClick={() => {
setIdToDelete(params.row.id);
confirmDeleteSingleItemDialog.onTrue();
}}
sx={{ color: 'error.main' }}
/>,
],
@@ -208,11 +225,11 @@ export function ProductListView() {
.filter((column) => !HIDE_COLUMNS_TOGGLABLE.includes(column.field))
.map((column) => column.field);
const renderConfirmDialog = () => (
const renderDeleteMultipleItemsConfirmDialog = () => (
<ConfirmDialog
open={confirmDialog.value}
onClose={confirmDialog.onFalse}
title="Delete"
open={confirmDeleteMultiItemsDialog.value}
onClose={confirmDeleteMultiItemsDialog.onFalse}
title="Delete multiple products"
content={
<>
Are you sure want to delete <strong> {selectedRowIds.length} </strong> items?
@@ -224,7 +241,31 @@ export function ProductListView() {
color="error"
onClick={() => {
handleDeleteRows();
confirmDialog.onFalse();
confirmDeleteMultiItemsDialog.onFalse();
}}
>
Delete
</Button>
}
/>
);
const [deleteInProgress, setDeleteInProgress] = useState<boolean>(false);
const renderDeleteSingleItemConfirmDialog = () => (
<ConfirmDialog
open={confirmDeleteSingleItemDialog.value}
onClose={confirmDeleteSingleItemDialog.onFalse}
title="Delete product"
content={<>Are you sure want to delete item?</>}
action={
<Button
loading={deleteInProgress}
variant="contained"
color="error"
onClick={() => {
setDeleteInProgress(true);
handleDeleteSingleRow();
confirmDeleteSingleItemDialog.onFalse();
}}
>
Delete
@@ -239,9 +280,9 @@ export function ProductListView() {
<CustomBreadcrumbs
heading="List"
links={[
{ name: 'Dashboard', href: paths.dashboard.root },
{ name: 'Product', href: paths.dashboard.product.root },
{ name: 'List' },
{ name: t('Dashboard'), href: paths.dashboard.root },
{ name: t('Product'), href: paths.dashboard.product.root },
{ name: t('List') },
]}
action={
<Button
@@ -250,7 +291,7 @@ export function ProductListView() {
variant="contained"
startIcon={<Iconify icon="mingcute:add-line" />}
>
New product
{t('new-product')}
</Button>
}
sx={{ mb: { xs: 3, md: 5 } }}
@@ -292,7 +333,8 @@ export function ProductListView() {
</Card>
</DashboardContent>
{renderConfirmDialog()}
{renderDeleteMultipleItemsConfirmDialog()}
{renderDeleteSingleItemConfirmDialog()}
</>
);
}
@@ -322,6 +364,19 @@ function CustomToolbar({
setFilterButtonEl,
onOpenConfirmDeleteRows,
}: CustomToolbarProps) {
const { t } = useTranslation();
const PRODUCT_STOCK_OPTIONS = [
{ value: 'in stock', label: t('In stock') },
{ value: 'low stock', label: t('Low stock') },
{ value: 'out of stock', label: t('Out of stock') },
];
const PUBLISH_OPTIONS = [
{ value: 'published', label: t('Published') },
{ value: 'draft', label: t('Draft') },
];
return (
<>
<GridToolbarContainer>