From 6f4c909ab25060056ba1caef4bd9f905cdc5c21a Mon Sep 17 00:00:00 2001 From: xWyvernPx Date: Wed, 11 Oct 2023 13:25:30 +0700 Subject: [PATCH] HK-52 fix syntax --- src/base/hooks/useAwsS3.ts | 96 ++- src/data/@mk/mock/Customer.tsx | 4 +- .../customer/components/AddCustomerModal.tsx | 79 +- .../form/CustomerManipulateForm.tsx | 673 +++++++++--------- src/modules/customer/hook/useCustomerData.ts | 101 +-- src/modules/customer/hook/useCustomerForm.ts | 20 +- src/modules/customer/pages/list/list.tsx | 105 +-- .../kitchen/components/AddKitchenModal.tsx | 71 +- src/types/@mk/entity/customer.ts | 2 +- 9 files changed, 583 insertions(+), 568 deletions(-) diff --git a/src/base/hooks/useAwsS3.ts b/src/base/hooks/useAwsS3.ts index 681f10d..6d97eda 100644 --- a/src/base/hooks/useAwsS3.ts +++ b/src/base/hooks/useAwsS3.ts @@ -1,58 +1,52 @@ -import { PutObjectCommand, PutObjectRequest, S3Client, S3ClientConfig } from '@aws-sdk/client-s3' -import React, { useMemo } from 'react' +import { + PutObjectCommand, + PutObjectRequest, + S3Client, + S3ClientConfig, +} from "@aws-sdk/client-s3"; +import { useMemo } from "react"; import { v4 as uuidv4 } from "uuid"; -import { getSignedUrl } from "@aws-sdk/s3-request-presigner"; -const config:S3ClientConfig = { - credentials : { - accessKeyId : "AKIAWPKX6GSPLAZFCWG5", - secretAccessKey: "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" - }, - region:"ap-southeast-1" -} +const config: S3ClientConfig = { + credentials: { + accessKeyId: "AKIAWPKX6GSPLAZFCWG5", + secretAccessKey: "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", + }, + region: "ap-southeast-1", +}; type UploadParams = { - object: Blob | File - path : string -} - + object: Blob | File; + path: string; +}; const useAwsS3 = () => { - /** - * ISSUE with s3 client : build version @aws-sdk/client-s3@3.427.0 - * https://stackoverflow.com/questions/77229817/failed-to-fetch-aws - * https://github.com/aws/aws-sdk-js-v3/issues/5334 - * downgrade to @aws-sdk/client-s3@3.317.0 for working - * */ - const s3Client = useMemo(()=> new S3Client(config) , []); - const putObject = async({ - object, - path - } : UploadParams)=> { - try { - - const fileName = object instanceof File ? object.name : uuidv4(); - const input: PutObjectRequest = { - Bucket: "momkitchen", - Key: path+fileName, - Body: object, - - } - const command = new PutObjectCommand(input); - await s3Client.send(command); - // const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 }); - // return url - const objectPath = `https://momkitchen.s3.amazonaws.com/${input.Key}`; - return objectPath; - - - } catch (error) { - console.error("Error s3 upload => ", error); - return null; - } - + /** + * ISSUE with s3 client : build version @aws-sdk/client-s3@3.427.0 + * https://stackoverflow.com/questions/77229817/failed-to-fetch-aws + * https://github.com/aws/aws-sdk-js-v3/issues/5334 + * downgrade to @aws-sdk/client-s3@3.317.0 for working + * */ + const s3Client = useMemo(() => new S3Client(config), []); + const putObject = async ({ object, path }: UploadParams) => { + try { + const fileName = object instanceof File ? object.name : uuidv4(); + const input: PutObjectRequest = { + Bucket: "momkitchen", + Key: path + fileName, + Body: object, + }; + const command = new PutObjectCommand(input); + await s3Client.send(command); + // const url = await getSignedUrl(s3Client, command, { expiresIn: 3600 }); + // return url + const objectPath = `https://momkitchen.s3.amazonaws.com/${input.Key}`; + return objectPath; + } catch (error) { + console.error("Error s3 upload => ", error); + return null; } - return { putObject }; -} - + }; + return { putObject }; +}; -export default useAwsS3 \ No newline at end of file +export default useAwsS3; diff --git a/src/data/@mk/mock/Customer.tsx b/src/data/@mk/mock/Customer.tsx index de5a671..b1fbd21 100644 --- a/src/data/@mk/mock/Customer.tsx +++ b/src/data/@mk/mock/Customer.tsx @@ -24,7 +24,7 @@ export function generateRandomCustomer(): CustomerAdmin { orders: [], order_quantity: faker.datatype.number({ min: 1, max: 10 }), // Adjust the range as needed spentMoney: faker.datatype.float({ min: 50, max: 1000, precision: 0.01 }), // Adjust the range as needed - selection: true, + // selection: true, }; } @@ -70,6 +70,6 @@ export const customer: CustomerAdmin[] = [ orders: [], // You can populate this array with Order objects order_quantity: 5, spentMoney: 500.0, - selection: true, + // selection: true, }, ]; diff --git a/src/modules/customer/components/AddCustomerModal.tsx b/src/modules/customer/components/AddCustomerModal.tsx index 8beca42..666b855 100644 --- a/src/modules/customer/components/AddCustomerModal.tsx +++ b/src/modules/customer/components/AddCustomerModal.tsx @@ -1,39 +1,24 @@ +import { mockRole } from "@/data/@mk/mock/Role"; import { User } from "@/types/@mk/entity/user"; -import { CustomerStatus } from "@/types/@mk/enum/customerStatus"; -import { CameraOutlined, DeleteFilled } from "@ant-design/icons"; +import { DeleteFilled } from "@ant-design/icons"; +import { yupResolver } from "@hookform/resolvers/yup"; import { Button, DialogActions, DialogContent, DialogTitle, Divider, - FormControl, - FormControlLabel, - FormHelperText, - FormLabel, Grid, IconButton, - InputLabel, - ListItemText, - MenuItem, - OutlinedInput, - Select, - Switch, - TextField, Tooltip, - Typography, } from "@mui/material"; -import { Box, Stack, useTheme } from "@mui/system"; -import { DatePicker, LocalizationProvider } from "@mui/x-date-pickers"; -import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs"; -import Avatar from "@ui/@extended/Avatar"; -import { MuiTelInput, matchIsValidTel } from "mui-tel-input"; -import { ChangeEvent, ReactNode, useEffect, useState } from "react"; -import { Controller, FormProvider, useForm } from "react-hook-form"; -import { yupResolver } from "@hookform/resolvers/yup"; +import { Box, Stack } from "@mui/system"; +import { useEffect } from "react"; +import { FormProvider, useForm } from "react-hook-form"; +import useCustomerForm, { + ManipulateCustomerForm, +} from "../hook/useCustomerForm"; import CustomerManipulateForm from "./form/CustomerManipulateForm"; -import useCustomerForm, { ManipulateCustomerForm } from "../hook/useCustomerForm"; -import { mockRole } from "@/data/@mk/mock/Role"; interface AddCustomerModalProps { isOpen?: boolean; @@ -42,24 +27,26 @@ interface AddCustomerModalProps { customer: User; } - const AddCustomerModal = ({ customer, onCancel, }: // isOpen, AddCustomerModalProps) => { const isCreating = !customer; - const defaultValue:ManipulateCustomerForm = !isCreating ? { - autoPassword: true, - birthday: customer?.birthday, - email: customer?.email, - phone: customer?.phone, - fullname: customer?.fullName, - status: customer?.customer.status, - role: customer?.roleId - }: {autoPassword: true} + const defaultValue: ManipulateCustomerForm = !isCreating + ? { + autoPassword: true, + birthday: customer?.birthday, + email: customer?.email, + phone: customer?.phone, + fullname: customer?.fullName, + status: customer?.customer.status, + role: customer?.roleId, + } + : { autoPassword: true }; + console.log(defaultValue); - const {CustomerSchema, createCustomerHandler} = useCustomerForm() + const { CustomerSchema, createCustomerHandler } = useCustomerForm(); const deleteHandler = () => { // dispatch(deleteCustomer(customer?.id)); - delete // dispatch( @@ -126,32 +113,32 @@ AddCustomerModalProps) => { const methods = useForm({ mode: "all", resolver: yupResolver(CustomerSchema), - defaultValues:{ - autoPassword:true - } + defaultValues: { + autoPassword: true, + }, }); const roles = mockRole; // TODO: load from be - useEffect(()=>{ - console.log("Error =>",methods.formState?.errors); - - },[methods.formState.errors]) + useEffect(() => { + console.log("Error =>", methods.formState?.errors); + }, [methods.formState.errors]); return ( <> - + { + onSubmit={methods.handleSubmit(async (data) => { console.log("Add customer data => ", data); const res = await createCustomerHandler(data); + console.log(res); })}> {customer ? "Edit Customer" : "New Customer"} - + @@ -192,7 +179,7 @@ AddCustomerModalProps) => { - + ); }; diff --git a/src/modules/customer/components/form/CustomerManipulateForm.tsx b/src/modules/customer/components/form/CustomerManipulateForm.tsx index 2f6d6cf..1774591 100644 --- a/src/modules/customer/components/form/CustomerManipulateForm.tsx +++ b/src/modules/customer/components/form/CustomerManipulateForm.tsx @@ -3,152 +3,151 @@ import { Role } from "@/types/@mk/entity/role"; import { CustomerStatus } from "@/types/@mk/enum/customerStatus"; import { CameraOutlined } from "@ant-design/icons"; import { - FormControl, - FormControlLabel, - FormHelperText, - FormLabel, - Grid, - InputLabel, - ListItemText, - MenuItem, - OutlinedInput, - Select, - Switch, - TextField, - Typography + FormControl, + FormControlLabel, + FormHelperText, + FormLabel, + Grid, + InputLabel, + ListItemText, + MenuItem, + OutlinedInput, + Select, + Switch, + TextField, + Typography, } from "@mui/material"; -import { Box, Stack, useTheme } from '@mui/system'; +import { Box, Stack, useTheme } from "@mui/system"; import { DatePicker } from "@mui/x-date-pickers"; -import Avatar from '@ui/@extended/Avatar'; +import Avatar from "@ui/@extended/Avatar"; import { MuiTelInput, matchIsValidTel } from "mui-tel-input"; -import { ChangeEvent, ReactNode, useEffect, useState } from 'react'; -import { Controller, useFormContext } from 'react-hook-form'; +import { ChangeEvent, ReactNode, useEffect, useState } from "react"; +import { Controller, useFormContext } from "react-hook-form"; import { ManipulateCustomerForm } from "../../hook/useCustomerForm"; type Props = { - customer? : Customer - isCreating?: boolean; - roles: Role[] -} + customer?: Customer; + isCreating?: boolean; + roles: Role[]; +}; // const roles = []; // TODO: load from be const CustomerManipulateForm = (props: Props) => { - const {customer, isCreating = true, roles} = props - const theme = useTheme(); - const { - control, - register, - formState: { errors }, - setValue - } = useFormContext(); - const [autoPasswordToggle, setAutoPasswordToggle] = useState(true); - const [selectedImage, setSelectedImage] = useState( - undefined - ); + const { isCreating = true, roles } = props; + const theme = useTheme(); + const { + control, + register, + formState: { errors }, + setValue, + } = useFormContext(); + const [autoPasswordToggle, setAutoPasswordToggle] = useState(true); + const [selectedImage, setSelectedImage] = useState( + undefined + ); + + const [avatar, setAvatar] = useState(); + useEffect(() => { + if (selectedImage) { + setAvatar(URL.createObjectURL(selectedImage)); + setValue("avatar", selectedImage); + } + }, [selectedImage, setValue]); + useEffect(() => { + console.log("Checked =>", autoPasswordToggle); + }, [autoPasswordToggle]); - const [avatar, setAvatar] = useState(); - useEffect(() => { - if (selectedImage) { - setAvatar(URL.createObjectURL(selectedImage)); - setValue("avatar", selectedImage); - } - }, [selectedImage, setValue]); - useEffect(()=>{ - console.log("Checked =>",autoPasswordToggle); - - },[autoPasswordToggle]) - return ( - - - - - + + - - + + + + + Upload + + + + + ) => + setSelectedImage(e.target.files?.[0]) + } + /> + + + + + + + Full Name + - - Upload - - - - ) => - setSelectedImage(e.target.files?.[0]) - } - /> - - - - - - - Full Name - - - - - - Email - - - - - - Phone - {/* + + + Email + + + + + + Phone + {/* { // helperText={touched.email && errors.email} > */} - ( - { - onChange(value) - }} - defaultCountry="VN" - helperText={ - error?.message - } - error={!!error} - /> - )} - /> - - - - - - Birthday - - - ( - <> - { - onChange(val); - }} + ( + { + onChange(value); + }} + defaultCountry="VN" + helperText={error?.message} + error={!!error} /> - {!!error && {error.message} - } - - - )} + )} /> + + + + + + Birthday + + ( + <> + { + onChange(val); + }} + /> + {!!error && ( + + {error.message} + + )} + + )} + /> - - - - - - Status - - - + } + renderValue={(selected) => { + if (!selected) { + return ( + + Select Status + + ); + } + return ( - - Select Status + + {selected as ReactNode} ); + }}> + {Object.keys(CustomerStatus) + .filter((item) => { + return isNaN(Number(item)); + }) + .map((column) => ( + + + + ))} + + {!!errors?.status && ( + + {errors.status?.message as string} + + )} + + + + + + Role + + - {!!errors?.status && ( - - {errors.status?.message as string} - - )} - - - - - - - - Role - - - - {!!errors?.role && ( - - {errors.role?.message} - - )} - - - - - {/* + {!!errors?.role && ( + + {errors.role?.message} + + )} + + + + + {/* @@ -332,69 +331,77 @@ const CustomerManipulateForm = (props: Props) => { /> */} - - - - Auto generate password - - - Toggling this will let your teammates know that you - are available for acquiring new projects - - - ( - { - - setAutoPasswordToggle(checked); - onChange(e,checked); - }} />} - label="" - labelPlacement="start" - /> - - )} + + + + Auto generate password + + + Toggling this will let your teammates know that you are + available for acquiring new projects + + + ( + { + setAutoPasswordToggle(checked); + onChange(e, checked); + }} + /> + } + label="" + labelPlacement="start" + /> + )} /> - - + + + {!autoPasswordToggle && ( + + + Password + + + + + Confirmation Password + + + + + )} - {!autoPasswordToggle && - - Password - - - - Confirmation Password - - - } - - ) -} + ); +}; -export default CustomerManipulateForm \ No newline at end of file +export default CustomerManipulateForm; diff --git a/src/modules/customer/hook/useCustomerData.ts b/src/modules/customer/hook/useCustomerData.ts index 2890478..1f770cb 100644 --- a/src/modules/customer/hook/useCustomerData.ts +++ b/src/modules/customer/hook/useCustomerData.ts @@ -1,80 +1,85 @@ -import { PaginationState, SortingState } from '@tanstack/react-table'; -import React, { useState } from 'react' -import CustomerApi from '../service/customer.api'; -import { useMutation, useQuery } from 'react-query'; -import { Customer, CustomerAdmin } from '@/types/@mk/entity/customer'; - +import { Customer, CustomerAdmin } from "@/types/@mk/entity/customer"; +import { PaginationState, SortingState } from "@tanstack/react-table"; +import { useState } from "react"; +import { useMutation, useQuery } from "react-query"; +import CustomerApi from "../service/customer.api"; const useCustomerData = () => { - // const [orderData, setOrderData] = useState(); -const [pagination, setPagination] = useState({ + // const [orderData, setOrderData] = useState(); + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25, }); const [sortState, setSortState] = useState([]); const [keyword, setKeyword] = useState(); - - // Define the fetchCustomerDataFunction that fetches orders using the OrderApi - const fetchCustomerDataFunction = async () => { + + // Define the fetchCustomerDataFunction that fetches orders using the OrderApi + const fetchCustomerDataFunction = async () => { try { const response = await CustomerApi.getCustomers({ paging: pagination, // Pass the pagination state - sort: sortState, // Pass the sort state - keyword, // Pass the keyword + sort: sortState, // Pass the sort state + keyword, // Pass the keyword }); // Return the data from the response return response?.data; - } - catch(e){ + } catch (e) { console.log(e); - throw e + throw e; } }; - // Define your initial query key, including dependencies like pagination, sorting, and keyword - // TODO: use debounce technique to prevent many calls at a short time - const queryKey = ['orders', pagination, sortState, keyword]; + // Define your initial query key, including dependencies like pagination, sorting, and keyword + // TODO: use debounce technique to prevent many calls at a short time + const queryKey = ["orders", pagination, sortState, keyword]; - // Fetch order data using React Query's useQuery hook - const { data: customerData, + // Fetch order data using React Query's useQuery hook + const { + data: customerData, // isLoading, error - } = useQuery(queryKey, fetchCustomerDataFunction,{ - onError:(err) => console.log("error at hook",err) - - }); - const createCustomerFunction = async (customer:Customer) => { + } = useQuery(queryKey, fetchCustomerDataFunction, { + onError: (err) => console.log("error at hook", err), + }); + const createCustomerFunction = async (customer: Customer) => { const response = await CustomerApi.createCustomer(customer); return response.data; - } - const createCustomer = useMutation(createCustomerFunction, { + }; + const createCustomer = useMutation(createCustomerFunction, { // You can specify onSuccess and onError callbacks here }); - - // Define your mutation functions for creating, updating, and deleting orders + + // Define your mutation functions for creating, updating, and deleting orders // const createOrder = useMutation(createOrderFunction, { // // You can specify onSuccess and onError callbacks here // }); // Define the updateCustomerFunction to update an order using the OrderApi const updateCustomerFunction = async (customer: CustomerAdmin) => { - const response = await CustomerApi.updateCustomer(customer); - // You can handle the success scenario here if needed - return response?.data; // Return the updated order data + const response = await CustomerApi.updateCustomer(customer); + // You can handle the success scenario here if needed + return response?.data; // Return the updated order data }; - - const updateCustomer = useMutation(updateCustomerFunction, { - // You can specify onSuccess and onError callbacks here - }); - // Define the deleteCustomerFunction to delete an order using the OrderApi + + const updateCustomer = useMutation(updateCustomerFunction, { + // You can specify onSuccess and onError callbacks here + }); + // Define the deleteCustomerFunction to delete an order using the OrderApi const deleteCustomerFunction = async (id: number) => { - const response = await CustomerApi.deleteCustomer(id); - // You can handle the success scenario here if needed - return response?.data; // Return any data indicating the success of deletion - + const response = await CustomerApi.deleteCustomer(id); + // You can handle the success scenario here if needed + return response?.data; // Return any data indicating the success of deletion }; - const deleteCustomer = useMutation(deleteCustomerFunction, { - // You can specify onSuccess and onError callbacks here - }); + const deleteCustomer = useMutation(deleteCustomerFunction, { + // You can specify onSuccess and onError callbacks here + }); - return { customerData, setSortState, setKeyword, setPagination, updateCustomer, deleteCustomer, createCustomer }; -} + return { + customerData, + setSortState, + setKeyword, + setPagination, + updateCustomer, + deleteCustomer, + createCustomer, + }; +}; -export default useCustomerData \ No newline at end of file +export default useCustomerData; diff --git a/src/modules/customer/hook/useCustomerForm.ts b/src/modules/customer/hook/useCustomerForm.ts index 51e70b3..b2f2853 100644 --- a/src/modules/customer/hook/useCustomerForm.ts +++ b/src/modules/customer/hook/useCustomerForm.ts @@ -1,9 +1,8 @@ -import React from "react"; -import * as Yup from "yup"; -import useCustomerData from "./useCustomerData"; +import useAwsS3 from "@/base/hooks/useAwsS3"; import { Customer } from "@/types/@mk/entity/customer"; import { CustomerStatus } from "@/types/@mk/enum/customerStatus"; -import useAwsS3 from "@/base/hooks/useAwsS3"; +import * as Yup from "yup"; +import useCustomerData from "./useCustomerData"; export interface ManipulateCustomerForm { fullname?: string; @@ -21,11 +20,11 @@ export interface ManipulateCustomerForm { const useCustomerForm = () => { const { createCustomer: { - mutateAsync: createCustomer, + // mutateAsync: createCustomer, isLoading: isCreateCustomer, }, } = useCustomerData(); - const {putObject} = useAwsS3(); + const { putObject } = useAwsS3(); const CustomerSchema = Yup.object().shape({ fullname: Yup.string().max(255).required("Name is required"), phone: Yup.string() @@ -69,7 +68,6 @@ const useCustomerForm = () => { status: Yup.string().required(), }); const createCustomerHandler = async (formValues: ManipulateCustomerForm) => { - const { avatar, fullname: fullName, @@ -80,11 +78,11 @@ const useCustomerForm = () => { role, status, } = formValues; - let objectPath = null - if(avatar){ + let objectPath = null; + if (avatar) { objectPath = await putObject({ object: avatar, - path : "customer/avatar/" + path: "customer/avatar/", }); console.log("Uploaded object path => ", objectPath); } @@ -101,7 +99,7 @@ const useCustomerForm = () => { status: CustomerStatus[status], }; console.log("New customer => ", newCustomer); - + // const res = await createCustomer(newCustomer); // return res; }; diff --git a/src/modules/customer/pages/list/list.tsx b/src/modules/customer/pages/list/list.tsx index 1cfe03a..b0248fe 100644 --- a/src/modules/customer/pages/list/list.tsx +++ b/src/modules/customer/pages/list/list.tsx @@ -1,7 +1,15 @@ import { MouseEvent, useCallback, useMemo, useState } from "react"; // material-ui -import { Button, Chip, Dialog, DialogContentText, Stack, Tooltip, Typography } from "@mui/material"; +import { + Button, + Chip, + Dialog, + DialogContentText, + Stack, + Tooltip, + Typography, +} from "@mui/material"; import { useTheme } from "@mui/material/styles"; // third-party @@ -33,7 +41,6 @@ import QuickTable from "@ui/common/table/QuickTable"; import NumberFormat from "react-number-format"; import AddCustomerModal from "../../components/AddCustomerModal"; - // ==============================|| REACT TABLE ||============================== // // ==============================|| CUSTOMER - LIST VIEW ||============================== // @@ -61,7 +68,7 @@ const CustomerList = () => { const columns = useMemo[]>( () => { const cols: ColumnDef[] = [ - columnHelper.accessor("selection", { + columnHelper.accessor("selection", { header: ({ table: { getIsAllRowsSelected, @@ -238,14 +245,11 @@ const CustomerList = () => { [theme] ); - const renderRowSubComponent = useCallback( - (row) => { - console.log(row); + const renderRowSubComponent = useCallback((row) => { + console.log(row); - return ; - }, - [] - ); + return ; + }, []); return ( @@ -288,37 +292,56 @@ const CustomerList = () => { {deleteConfirm && ( - setDeleteConfirmation(false)} aria-labelledby="alert-dialog-title" aria-describedby="alert-dialog-description"> - - - - - - - Are you sure you want to delete? - - - - - By deleting action, that user will not be able to use application no more. - - - - - - - - + setDeleteConfirmation(false)} + aria-labelledby="alert-dialog-title" + aria-describedby="alert-dialog-description"> + + + + + + + Are you sure you want to delete? + + + + + By deleting action, that user will not be able to use + application no more. + + + + + + + + )} ); diff --git a/src/modules/kitchen/components/AddKitchenModal.tsx b/src/modules/kitchen/components/AddKitchenModal.tsx index cf89460..2e4f907 100644 --- a/src/modules/kitchen/components/AddKitchenModal.tsx +++ b/src/modules/kitchen/components/AddKitchenModal.tsx @@ -1,45 +1,46 @@ -import CustomerManipulateForm from '@/modules/customer/components/form/CustomerManipulateForm'; -import { Kitchen, KitchenAdmin } from '@/types/@mk/entity/kitchen'; -import { DeleteFilled } from '@ant-design/icons'; -import { yupResolver } from '@hookform/resolvers/yup'; -import { Tooltip } from '@mui/material'; -import { Button } from '@mui/material'; -import { DialogActions, DialogContent, DialogTitle, Divider, Grid } from '@mui/material'; -import { Box, Stack } from '@mui/system'; -import IconButton from '@ui/@extended/IconButton'; -import React from 'react' -import { FormProvider, useForm } from 'react-hook-form'; +import { KitchenAdmin } from "@/types/@mk/entity/kitchen"; +import { DeleteFilled } from "@ant-design/icons"; +import { yupResolver } from "@hookform/resolvers/yup"; +import { + Button, + DialogActions, + DialogContent, + DialogTitle, + Divider, + Grid, + Tooltip, +} from "@mui/material"; +import { Box, Stack } from "@mui/system"; +import IconButton from "@ui/@extended/IconButton"; +import { FormProvider, useForm } from "react-hook-form"; type Props = { - kitchen?: KitchenAdmin + kitchen?: KitchenAdmin; onCancel: () => void; - -} +}; const AddKitchenModal = (props: Props) => { - const {kitchen, onCancel} = props - const isCreating = !kitchen - const methods = useForm({ - mode: "all", - resolver: yupResolver(null), - defaultValues:{ - autoPassword:true - } - }); - const deleteHandler = ()=>{ - console.log("TODO : Implement"); - } + const { kitchen, onCancel } = props; + const isCreating = !kitchen; + const methods = useForm({ + mode: "all", + resolver: yupResolver(null), + defaultValues: { + autoPassword: true, + }, + }); + const deleteHandler = () => { + console.log("TODO : Implement"); + }; return ( <> - + { + onSubmit={methods.handleSubmit(async (data) => { console.log("Add customer data => ", data); })}> - - {kitchen ? "Edit kitchen" : "New kitchen"} - + {kitchen ? "Edit kitchen" : "New kitchen"} {/* */} @@ -83,9 +84,9 @@ const AddKitchenModal = (props: Props) => { - + - ) -} + ); +}; -export default AddKitchenModal \ No newline at end of file +export default AddKitchenModal; diff --git a/src/types/@mk/entity/customer.ts b/src/types/@mk/entity/customer.ts index b0b6217..5acc181 100644 --- a/src/types/@mk/entity/customer.ts +++ b/src/types/@mk/entity/customer.ts @@ -15,7 +15,7 @@ export interface Customer extends BaseEntity { } export interface CustomerAdmin extends Customer { - orderQuantity: number; + order_quantity: number; spentMoney: number; // selection: boolean; }