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

1
03_source/frontend/src/_mock/_product.ts
View File

@@ -50,6 +50,7 @@ export const PRODUCT_STOCK_OPTIONS = [
{ value: 'out of stock', label: 'Out of stock' },
];
// not used due to i18n
export const PRODUCT_PUBLISH_OPTIONS = [
{ value: 'published', label: 'Published' },
{ value: 'draft', label: 'Draft' },

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

@@ -1,10 +1,8 @@
import type { SWRConfiguration } from 'swr';
import type { IProductItem } from 'src/types/product';
import useSWR from 'swr';
import { useMemo } from 'react';
import axiosInstance, { fetcher, endpoints } from 'src/lib/axios';
import axiosInstance, { endpoints, fetcher } from 'src/lib/axios';
import type { IProductItem } from 'src/types/product';
import type { SWRConfiguration } from 'swr';
import useSWR from 'swr';
// ----------------------------------------------------------------------
@@ -23,7 +21,11 @@ type ProductsData = {
export function useGetProducts() {
const url = endpoints.product.list;
const { data, isLoading, error, isValidating } = useSWR<ProductsData>(url, fetcher, swrOptions);
const { data, isLoading, error, isValidating, mutate } = useSWR<ProductsData>(
url,
fetcher,
swrOptions
);
const memoizedValue = useMemo(
() => ({
@@ -32,8 +34,9 @@ export function useGetProducts() {
productsError: error,
productsValidating: isValidating,
productsEmpty: !isLoading && !isValidating && !data?.products.length,
mutate,
}),
[data?.products, error, isLoading, isValidating]
[data?.products, error, isLoading, isValidating, mutate]
);
return memoizedValue;
@@ -94,20 +97,81 @@ export function useSearchProducts(query: string) {
// ----------------------------------------------------------------------
type SaveProductData = {
id: string;
// id: string;
sku: string;
name: string;
code: string;
price: number;
taxes: number;
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 saveProduct(productId: string, saveProductData: SaveProductData) {
console.log('save product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
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;
}
// ----------------------------------------------------------------------
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[];
images: (string | File)[];
colors: string[];
quantity: number;
quantity: number | null;
category: string;
available: number;
totalSold: number;
@@ -125,39 +189,46 @@ type SaveProductData = {
content: string;
enabled: boolean;
};
ratings: {
name: string;
starCount: number;
reviewCount: number;
}[];
// ratings: {
// name: string;
// starCount: number;
// reviewCount: number;
// }[];
};
export async function saveProduct(productId: string, saveProductData: SaveProductData) {
console.log('save product ?');
export async function createProduct(createProductData: CreateProductData) {
console.log('create product ?');
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
const res = await axiosInstance.post('http://localhost:7272/api/product/saveProduct', {
data: saveProductData,
const res = await axiosInstance.post('http://localhost:7272/api/product/createProduct', {
data: createProductData,
});
return res;
// const url = productId ? [endpoints.product.details, { params: { productId } }] : '';
// const { data, isLoading, error, isValidating } = useSWR<SaveProductData>(
// url,
// fetcher,
// swrOptions
// );
// const memoizedValue = useMemo(
// () => ({
// product: data?.product,
// productLoading: isLoading,
// productError: error,
// productValidating: isValidating,
// }),
// [data?.product, error, isLoading, isValidating]
// );
// return memoizedValue;
}
// ----------------------------------------------------------------------
type DeleteProductResponse = {
success: boolean;
message?: string;
};
export async function deleteProduct(productId: string): Promise<DeleteProductResponse> {
const url = `http://localhost:7272/api/product/deleteProduct?productId=${productId}`;
try {
const res = await axiosInstance.delete(url);
console.log({ res });
return {
success: true,
message: 'Product deleted successfully',
};
} catch (error) {
return {
success: false,
message: error instanceof Error ? error.message : 'Failed to delete product',
};
}
}

28
03_source/frontend/src/app.tsx
View File

@@ -1,26 +1,20 @@
import 'src/global.css';
import { useEffect } from 'react';
import { usePathname } from 'src/routes/hooks';
import { AuthProvider as AmplifyAuthProvider } from 'src/auth/context/amplify';
import { AuthProvider as Auth0AuthProvider } from 'src/auth/context/auth0';
import { AuthProvider as FirebaseAuthProvider } from 'src/auth/context/firebase';
import { AuthProvider as JwtAuthProvider } from 'src/auth/context/jwt';
import { AuthProvider as SupabaseAuthProvider } from 'src/auth/context/supabase';
import { MotionLazy } from 'src/components/animate/motion-lazy';
import { ProgressBar } from 'src/components/progress-bar';
import { defaultSettings, SettingsDrawer, SettingsProvider } from 'src/components/settings';
import { Snackbar } from 'src/components/snackbar';
import { CONFIG } from 'src/global-config';
import { LocalizationProvider } from 'src/locales';
import { themeConfig, ThemeProvider } from 'src/theme';
import { I18nProvider } from 'src/locales/i18n-provider';
import { Snackbar } from 'src/components/snackbar';
import { ProgressBar } from 'src/components/progress-bar';
import { MotionLazy } from 'src/components/animate/motion-lazy';
import { SettingsDrawer, defaultSettings, SettingsProvider } from 'src/components/settings';
import { usePathname } from 'src/routes/hooks';
import { CheckoutProvider } from 'src/sections/checkout/context';
import { AuthProvider as JwtAuthProvider } from 'src/auth/context/jwt';
import { AuthProvider as Auth0AuthProvider } from 'src/auth/context/auth0';
import { AuthProvider as AmplifyAuthProvider } from 'src/auth/context/amplify';
import { AuthProvider as SupabaseAuthProvider } from 'src/auth/context/supabase';
import { AuthProvider as FirebaseAuthProvider } from 'src/auth/context/firebase';
import { themeConfig, ThemeProvider } from 'src/theme';
// ----------------------------------------------------------------------

29
03_source/frontend/src/components/file-thumbnail/file-thumbnail.tsx
View File

@@ -1,13 +1,10 @@
import { mergeClasses } from 'minimal-shared/utils';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { mergeClasses } from 'minimal-shared/utils';
import { DownloadButton, RemoveButton } from './action-buttons';
import { fileThumbnailClasses } from './classes';
import { fileData, fileThumb, fileFormat } from './utils';
import { RemoveButton, DownloadButton } from './action-buttons';
import type { FileThumbnailProps } from './types';
import { fileData, fileFormat, fileThumb } from './utils';
// ----------------------------------------------------------------------
@@ -29,14 +26,26 @@ export function FileThumbnail({
const previewUrl = typeof file === 'string' ? file : URL.createObjectURL(file);
const format = fileFormat(path ?? previewUrl);
const isDataUrl = format.startsWith('data');
const renderItem = () => (
<ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
{format === 'image' && imageView ? (
const TestImg = () => (
<>
{!isDataUrl && format === 'image' && imageView ? (
<ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
) : (
<ItemIcon src={fileThumb(format)} className={fileThumbnailClasses.icon} {...icon} />
)}
</>
);
const DataUrlImg = () => (
<ItemImg src={previewUrl} className={fileThumbnailClasses.img} {...slotProps?.img} />
);
const renderItem = () => (
<ItemRoot className={mergeClasses([fileThumbnailClasses.root, className])} sx={sx} {...other}>
{/* */}
{isDataUrl ? <DataUrlImg /> : <TestImg />}
{onRemove && (
<RemoveButton

6
03_source/frontend/src/components/hook-form/fields.tsx
View File

@@ -1,17 +1,21 @@
// src/components/hook-form/fields.tsx
//
import { RHFCode } from './rhf-code';
import { RHFRating } from './rhf-rating';
import { RHFEditor } from './rhf-editor';
import { RHFSlider } from './rhf-slider';
import { RHFUpload } from './rhf-upload';
import { RHFTextField } from './rhf-text-field';
import { RHFUploadBox } from './rhf-upload-box';
import { RHFRadioGroup } from './rhf-radio-group';
import { RHFPhoneInput } from './rhf-phone-input';
import { RHFNumberInput } from './rhf-number-input';
import { RHFAutocomplete } from './rhf-autocomplete';
import { RHFUploadAvatar } from './rhf-upload-avatar';
import { RHFCountrySelect } from './rhf-country-select';
import { RHFSwitch, RHFMultiSwitch } from './rhf-switch';
import { RHFSelect, RHFMultiSelect } from './rhf-select';
import { RHFCheckbox, RHFMultiCheckbox } from './rhf-checkbox';
import { RHFUpload, RHFUploadBox, RHFUploadAvatar } from './rhf-upload';
import { RHFDatePicker, RHFMobileDateTimePicker } from './rhf-date-picker';
// ----------------------------------------------------------------------

45
03_source/frontend/src/components/hook-form/rhf-upload-avatar.tsx Normal file
View File

@@ -0,0 +1,45 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import Box from '@mui/material/Box';
import { HelperText } from './help-text';
import { UploadAvatar } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
export type RHFUploadProps = UploadProps & {
name: string;
slotProps?: {
wrapper?: BoxProps;
};
};
export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
const { control, setValue } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
const onDrop = (acceptedFiles: File[]) => {
const value = acceptedFiles[0];
setValue(name, value, { shouldValidate: true });
};
return (
<Box {...slotProps?.wrapper}>
<UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
<HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
</Box>
);
}}
/>
);
}

30
03_source/frontend/src/components/hook-form/rhf-upload-box.tsx Normal file
View File

@@ -0,0 +1,30 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import { UploadBox } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
export type RHFUploadProps = UploadProps & {
name: string;
slotProps?: {
wrapper?: BoxProps;
};
};
export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (
<UploadBox value={field.value} error={!!error} {...other} />
)}
/>
);
}

52
03_source/frontend/src/components/hook-form/rhf-upload.tsx
View File

@@ -1,12 +1,6 @@
import type { BoxProps } from '@mui/material/Box';
import { Controller, useFormContext } from 'react-hook-form';
import Box from '@mui/material/Box';
import { HelperText } from './help-text';
import { Upload, UploadBox, UploadAvatar } from '../upload';
import { Upload } from '../upload';
import type { UploadProps } from '../upload';
// ----------------------------------------------------------------------
@@ -18,48 +12,6 @@ export type RHFUploadProps = UploadProps & {
};
};
export function RHFUploadAvatar({ name, slotProps, ...other }: RHFUploadProps) {
const { control, setValue } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => {
const onDrop = (acceptedFiles: File[]) => {
const value = acceptedFiles[0];
setValue(name, value, { shouldValidate: true });
};
return (
<Box {...slotProps?.wrapper}>
<UploadAvatar value={field.value} error={!!error} onDrop={onDrop} {...other} />
<HelperText errorMessage={error?.message} sx={{ textAlign: 'center' }} />
</Box>
);
}}
/>
);
}
// ----------------------------------------------------------------------
export function RHFUploadBox({ name, ...other }: RHFUploadProps) {
const { control } = useFormContext();
return (
<Controller
name={name}
control={control}
render={({ field, fieldState: { error } }) => (
<UploadBox value={field.value} error={!!error} {...other} />
)}
/>
);
}
// ----------------------------------------------------------------------
export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadProps) {
@@ -83,6 +35,8 @@ export function RHFUpload({ name, multiple, helperText, ...other }: RHFUploadPro
setValue(name, value, { shouldValidate: true });
};
// return <>{JSON.stringify({ t: field.value })}</>;
return <Upload {...uploadProps} value={field.value} onDrop={onDrop} {...other} />;
}}
/>

14
03_source/frontend/src/components/nav-section/vertical/nav-item.tsx
View File

@@ -1,16 +1,12 @@
import type { CSSObject } from '@mui/material/styles';
import { mergeClasses } from 'minimal-shared/utils';
import Tooltip from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import ButtonBase from '@mui/material/ButtonBase';
import type { CSSObject } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import Tooltip from '@mui/material/Tooltip';
import { mergeClasses } from 'minimal-shared/utils';
import { Iconify } from '../../iconify';
import { createNavItem } from '../utils';
import { navItemStyles, navSectionClasses } from '../styles';
import type { NavItemProps } from '../types';
import { createNavItem } from '../utils';
// ----------------------------------------------------------------------

13
03_source/frontend/src/components/nav-section/vertical/nav-list.tsx
View File

@@ -1,14 +1,12 @@
import { useBoolean } from 'minimal-shared/hooks';
import { useRef, useEffect, useCallback } from 'react';
import { isActiveLink, isExternalLink } from 'minimal-shared/utils';
import { useCallback, useEffect, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { usePathname } from 'src/routes/hooks';
import { NavItem } from './nav-item';
import { NavCollapse, NavLi, NavUl } from '../components';
import { navSectionClasses } from '../styles';
import { NavUl, NavLi, NavCollapse } from '../components';
import type { NavListProps, NavSubListProps } from '../types';
import { NavItem } from './nav-item';
// ----------------------------------------------------------------------
@@ -40,6 +38,7 @@ export function NavList({
}
}, [data.children, onToggle]);
const { t } = useTranslation();
const renderNavItem = () => (
<NavItem
ref={navItemRef}
@@ -47,7 +46,7 @@ export function NavList({
path={data.path}
icon={data.icon}
info={data.info}
title={data.title}
title={t(data.title)}
caption={data.caption}
// state
open={open}

12
03_source/frontend/src/components/nav-section/vertical/nav-section-vertical.tsx
View File

@@ -1,14 +1,11 @@
import { useBoolean } from 'minimal-shared/hooks';
import { mergeClasses } from 'minimal-shared/utils';
import Collapse from '@mui/material/Collapse';
import { useTheme } from '@mui/material/styles';
import { NavList } from './nav-list';
import { Nav, NavUl, NavLi, NavSubheader } from '../components';
import { useBoolean } from 'minimal-shared/hooks';
import { mergeClasses } from 'minimal-shared/utils';
import { Nav, NavLi, NavSubheader, NavUl } from '../components';
import { navSectionClasses, navSectionCssVars } from '../styles';
import type { NavGroupProps, NavSectionProps } from '../types';
import { NavList } from './nav-list';
// ----------------------------------------------------------------------
@@ -90,7 +87,6 @@ function Group({
>
{subheader}
</NavSubheader>
<Collapse in={groupOpen.value}>{renderContent()}</Collapse>
</>
) : (

1
03_source/frontend/src/components/upload/upload.tsx
View File

@@ -59,6 +59,7 @@ export function Upload({
{onUpload && (
<Button
type="button"
size="small"
variant="contained"
onClick={onUpload}

1
03_source/frontend/src/constants.ts Normal file
View File

@@ -0,0 +1 @@
export const isDev = process.env.NODE_ENV === 'development';

1
03_source/frontend/src/global.css
View File

@@ -1,6 +1,7 @@
/** **************************************
* Fonts: app
*************************************** */
@import '@fontsource-variable/noto-sans';
@import '@fontsource-variable/noto-sans-tc';
@import '@fontsource-variable/noto-sans-sc';
@import '@fontsource-variable/noto-sans-jp';

59
03_source/frontend/src/layouts/dashboard/layout.tsx
View File

@@ -1,46 +1,39 @@
import Alert from '@mui/material/Alert';
import Box from '@mui/material/Box';
import { iconButtonClasses } from '@mui/material/IconButton';
import type { Breakpoint } from '@mui/material/styles';
import type { NavItemProps, NavSectionProps } from 'src/components/nav-section';
import { useTheme } from '@mui/material/styles';
import { merge } from 'es-toolkit';
import { useBoolean } from 'minimal-shared/hooks';
import Box from '@mui/material/Box';
import Alert from '@mui/material/Alert';
import { useTheme } from '@mui/material/styles';
import { iconButtonClasses } from '@mui/material/IconButton';
import { allLangs } from 'src/locales';
import { _contacts, _notifications } from 'src/_mock';
import { Logo } from 'src/components/logo';
import { useSettingsContext } from 'src/components/settings';
import { useMockedUser } from 'src/auth/hooks';
import { NavMobile } from './nav-mobile';
import { VerticalDivider } from './content';
import { NavVertical } from './nav-vertical';
import { layoutClasses } from '../core/classes';
import { NavHorizontal } from './nav-horizontal';
import { _account } from '../nav-config-account';
import { MainSection } from '../core/main-section';
import { Searchbar } from '../components/searchbar';
import { _workspaces } from '../nav-config-workspace';
import { MenuButton } from '../components/menu-button';
import { HeaderSection } from '../core/header-section';
import { LayoutSection } from '../core/layout-section';
import { Logo } from 'src/components/logo';
import type { NavItemProps, NavSectionProps } from 'src/components/nav-section';
import { useSettingsContext } from 'src/components/settings';
import { allLangs } from 'src/locales';
import { AccountDrawer } from '../components/account-drawer';
import { SettingsButton } from '../components/settings-button';
import { LanguagePopover } from '../components/language-popover';
import { ContactsPopover } from '../components/contacts-popover';
import { WorkspacesPopover } from '../components/workspaces-popover';
import { navData as dashboardNavData } from '../nav-config-dashboard';
import { dashboardLayoutVars, dashboardNavColorVars } from './css-vars';
import { LanguagePopover } from '../components/language-popover';
import { MenuButton } from '../components/menu-button';
import { NotificationsDrawer } from '../components/notifications-drawer';
import type { MainSectionProps } from '../core/main-section';
import { Searchbar } from '../components/searchbar';
import { SettingsButton } from '../components/settings-button';
import { WorkspacesPopover } from '../components/workspaces-popover';
import { layoutClasses } from '../core/classes';
import { HeaderSection } from '../core/header-section';
import type { HeaderSectionProps } from '../core/header-section';
import { LayoutSection } from '../core/layout-section';
import type { LayoutSectionProps } from '../core/layout-section';
import { MainSection } from '../core/main-section';
import type { MainSectionProps } from '../core/main-section';
import { _account } from '../nav-config-account';
import { navData as dashboardNavData } from '../nav-config-dashboard';
import { _workspaces } from '../nav-config-workspace';
import { VerticalDivider } from './content';
import { dashboardLayoutVars, dashboardNavColorVars } from './css-vars';
import { NavHorizontal } from './nav-horizontal';
import { NavMobile } from './nav-mobile';
import { NavVertical } from './nav-vertical';
// ----------------------------------------------------------------------

16
03_source/frontend/src/layouts/dashboard/nav-vertical.tsx
View File

@@ -1,18 +1,14 @@
import type { Breakpoint } from '@mui/material/styles';
import type { NavSectionProps } from 'src/components/nav-section';
import { varAlpha, mergeClasses } from 'minimal-shared/utils';
import Box from '@mui/material/Box';
import type { Breakpoint } from '@mui/material/styles';
import { styled } from '@mui/material/styles';
import { mergeClasses, varAlpha } from 'minimal-shared/utils';
import { Logo } from 'src/components/logo';
import { Scrollbar } from 'src/components/scrollbar';
import type { NavSectionProps } from 'src/components/nav-section';
import { NavSectionMini, NavSectionVertical } from 'src/components/nav-section';
import { layoutClasses } from '../core/classes';
import { NavUpgrade } from '../components/nav-upgrade';
import { Scrollbar } from 'src/components/scrollbar';
import { NavToggleButton } from '../components/nav-toggle-button';
import { NavUpgrade } from '../components/nav-upgrade';
import { layoutClasses } from '../core/classes';
// ----------------------------------------------------------------------

15
03_source/frontend/src/layouts/nav-config-dashboard.tsx
View File

@@ -1,12 +1,9 @@
import type { NavSectionProps } from 'src/components/nav-section';
import { paths } from 'src/routes/paths';
import { CONFIG } from 'src/global-config';
import { Label } from 'src/components/label';
import { Iconify } from 'src/components/iconify';
import { Label } from 'src/components/label';
import type { NavSectionProps } from 'src/components/nav-section';
import { SvgColor } from 'src/components/svg-color';
import { CONFIG } from 'src/global-config';
import { paths } from 'src/routes/paths';
// ----------------------------------------------------------------------
@@ -158,7 +155,7 @@ export const navData: NavSectionProps['data'] = [
{ title: 'Edit', path: paths.dashboard.tour.demo.edit },
],
},
{ title: 'File manager', path: paths.dashboard.fileManager, icon: ICONS.folder },
{ title: 'File-manager', path: paths.dashboard.fileManager, icon: ICONS.folder },
{
title: 'Mail',
path: paths.dashboard.mail,
@@ -263,7 +260,7 @@ export const navData: NavSectionProps['data'] = [
icon: ICONS.parameter,
},
{
title: 'External link',
title: 'External-link',
path: 'https://www.google.com/',
icon: ICONS.external,
info: <Iconify width={18} icon="eva:external-link-fill" />,

38
03_source/frontend/src/locales/all-langs.ts
View File

@@ -1,25 +1,28 @@
// core (MUI)
import {
arSA as arSACore,
frFR as frFRCore,
viVN as viVNCore,
zhCN as zhCNCore,
arSA as arSACore,
zhHK as zhHKCore,
} from '@mui/material/locale';
// data grid (MUI)
import {
arSD as arSDDataGrid,
enUS as enUSDataGrid,
frFR as frFRDataGrid,
viVN as viVNDataGrid,
zhCN as zhCNDataGrid,
zhHK as zhHKDataGrid,
} from '@mui/x-data-grid/locales';
// date pickers (MUI)
import {
enUS as enUSDate,
frFR as frFRDate,
viVN as viVNDate,
zhCN as zhCNDate,
zhHK as zhHKDate,
} from '@mui/x-date-pickers/locales';
// data grid (MUI)
import {
enUS as enUSDataGrid,
frFR as frFRDataGrid,
viVN as viVNDataGrid,
zhCN as zhCNDataGrid,
arSD as arSDDataGrid,
} from '@mui/x-data-grid/locales';
// ----------------------------------------------------------------------
@@ -74,6 +77,23 @@ export const allLangs = [
components: { ...arSACore.components, ...arSDDataGrid.components },
},
},
{
value: 'hk',
label: 'Hong Kong',
countryCode: 'HK',
adapterLocale: 'zh-hk',
numberFormat: {
code: 'zh-HK',
currency: 'HKD',
},
systemValue: {
components: {
...zhHKCore.components,
...zhHKDate,
...zhHKDataGrid.components,
},
},
},
];
/**

14
03_source/frontend/src/locales/i18n-provider.tsx
View File

@@ -1,10 +1,10 @@
import i18next from 'i18next';
import { getStorage } from 'minimal-shared/utils';
import resourcesToBackend from 'i18next-resources-to-backend';
import LanguageDetector from 'i18next-browser-languagedetector/cjs';
import resourcesToBackend from 'i18next-resources-to-backend';
import { getStorage } from 'minimal-shared/utils';
import { initReactI18next, I18nextProvider as Provider } from 'react-i18next';
import { i18nOptions, fallbackLng } from './locales-config';
import { isDev } from 'src/constants';
import { fallbackLng, i18nOptions } from './locales-config';
// ----------------------------------------------------------------------
@@ -19,7 +19,11 @@ i18next
.use(LanguageDetector)
.use(initReactI18next)
.use(resourcesToBackend((lang: string, ns: string) => import(`./langs/${lang}/${ns}.json`)))
.init({ ...i18nOptions(lng), detection: { caches: ['localStorage'] } });
.init({
...i18nOptions(lng),
detection: { caches: ['localStorage'] },
debug: isDev,
});
// ----------------------------------------------------------------------

3
03_source/frontend/src/locales/langs/cn/common.json
View File

@@ -2,5 +2,6 @@
"demo": {
"lang": "Chinese",
"description": "您的下一个项目的起点基于 MUI。简单的定制可帮助您更快、更好地构建应用程序。"
}
},
"new-product": "新產品"
}

62
03_source/frontend/src/locales/langs/hk/common.json Executable file
View File

@@ -0,0 +1,62 @@
{
"demo": {
"lang": "中文",
"description": "您下一個項目的起點基於 MUI。簡單的定制可幫助您更快、更好地構建應用程序。"
},
"new-product": "新產品",
"back": "返回",
"App": "應用程式",
"Ecommerce": "電子商務",
"Analytics": "分析",
"Banking": "銀行",
"Booking": "預訂",
"File": "文件",
"Course": "課程",
"User": "用戶",
"Product": "產品",
"Order": "訂單",
"Invoice": "發票",
"Blog": "博客",
"Job": "工作",
"Tour": "旅遊",
"manager": "管理員",
"Mail": "郵件",
"Chat": "聊天",
"Calendar": "日曆",
"Kanban": "看板",
"Permission": "權限",
"Level": "級別",
"Disabled": "禁用",
"Label": "標籤",
"Caption": "標題",
"Params": "參數",
"link": "鏈接",
"Blank": "空白",
"File-manager": "文件管理器",
"External-link": "外部鏈接",
"Profile": "個人資料",
"Cards": "卡片",
"List": "列表",
"Create": "創建",
"Edit": "編輯",
"Account": "賬戶",
"Details": "詳情",
"Create-at": "創建於",
"Category": "分類",
"Stock": "庫存",
"Price": "價格",
"Publish": "發布",
"in stock": "有貨",
"low stock": "低庫存",
"out of stock": "缺貨",
"In stock": "有貨",
"Low stock": "低庫存",
"Out of stock": "缺貨",
"Published": "已發布",
"Draft": "草稿",
"published": "已發布",
"draft": "草稿",
"Dashboard": "儀表板",
"Apply": "應用",
"hello": "world"
}

12
03_source/frontend/src/locales/langs/hk/navbar.json Executable file
View File

@@ -0,0 +1,12 @@
{
"app": "應用",
"job": "工作",
"user": "用戶",
"travel": "旅行",
"invoice": "發票",
"blog": {
"title": "部落格",
"caption": "自定義鍵盤快捷鍵。"
},
"subheader": "子標題"
}

7
03_source/frontend/src/locales/locales-config.ts
View File

@@ -1,7 +1,7 @@
// ----------------------------------------------------------------------
export const fallbackLng = 'en';
export const languages = ['en', 'fr', 'vi', 'cn', 'ar'];
export const languages = ['en', 'fr', 'vi', 'cn', 'ar', 'hk'];
export const defaultNS = 'common';
export type LanguageValue = (typeof languages)[number];
@@ -51,4 +51,9 @@ export const changeLangMessages: Record<
error: 'خطأ في تغيير اللغة!',
loading: 'جارٍ التحميل...',
},
hk: {
success: '語言已更改！',
error: '更改語言時出錯！',
loading: '加載中...',
},
};

5
03_source/frontend/src/locales/localization-provider.tsx
View File

@@ -3,12 +3,9 @@ import 'dayjs/locale/vi';
import 'dayjs/locale/fr';
import 'dayjs/locale/zh-cn';
import 'dayjs/locale/ar-sa';
import dayjs from 'dayjs';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import { LocalizationProvider as Provider } from '@mui/x-date-pickers/LocalizationProvider';
import dayjs from 'dayjs';
import { useTranslate } from './use-locales';
// ----------------------------------------------------------------------

3
03_source/frontend/src/locales/use-locales.ts
View File

@@ -1,12 +1,9 @@
import dayjs from 'dayjs';
import { useCallback } from 'react';
import { useTranslation } from 'react-i18next';
import { toast } from 'src/components/snackbar';
import { allLangs } from './all-langs';
import { fallbackLng, changeLangMessages as messages } from './locales-config';
import type { LanguageValue } from './locales-config';
// ----------------------------------------------------------------------

5
03_source/frontend/src/main.tsx
View File

@@ -1,10 +1,9 @@
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { Outlet, RouterProvider, createBrowserRouter } from 'react-router';
import { createBrowserRouter, Outlet, RouterProvider } from 'react-router';
import App from './app';
import { routesSection } from './routes/sections';
import { ErrorBoundary } from './routes/components';
import { routesSection } from './routes/sections';
// ----------------------------------------------------------------------

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

@@ -1,5 +1,4 @@
import { CONFIG } from 'src/global-config';
import { ProductListView } from 'src/sections/product/view';
// ----------------------------------------------------------------------

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>

6
03_source/frontend/src/theme/theme-config.ts
View File

@@ -25,9 +25,13 @@ type ThemeConfig = {
};
const navigator_language = navigator.language;
let primaryFont = 'Noto Sans TC Variable';
let primaryFont = 'Noto Sans Variable';
if (navigator_language.startsWith('zh')) primaryFont = 'Noto Sans TC Variable';
// TODO: not tested, T.B.C.
if (navigator_language.startsWith('sc')) primaryFont = 'Noto Sans SC Variable';
// TODO: not tested, T.B.C.
if (navigator_language.startsWith('jp')) primaryFont = 'Noto Sans JP Variable';
export const themeConfig: ThemeConfig = {

12
03_source/frontend/src/utils/file-to-base64.ts Normal file
View File

@@ -0,0 +1,12 @@
export function fileToBase64(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
resolve(reader.result as string);
};
reader.onerror = () => {
reject(new Error('Error converting file to base64'));
};
});
}