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

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>