업데이트

This commit is contained in:
익희 김 2025-01-19 18:02:10 +09:00
parent 3af1d68b85
commit 03baa76f6f
2 changed files with 27 additions and 24 deletions

View File

@ -1,6 +1,6 @@
'use client'; 'use client';
import * as Yup from 'yup'; import * as Yup from 'yup';
import React from 'react'; import React, { useEffect } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import { capitalCase } from 'change-case'; import { capitalCase } from 'change-case';
@ -92,7 +92,7 @@ export default function ProductForm({
// brand: Yup.string().required('brand is required'), // brand: Yup.string().required('brand is required'),
// metaTitle: Yup.string().required('Meta title is required'), // metaTitle: Yup.string().required('Meta title is required'),
// metaDescription: Yup.string().required('Meta description is required'), // metaDescription: Yup.string().required('Meta description is required'),
images: Yup.array().min(1, 'Images is required'), images: Yup.array().min(1, 'Images is required')
// sku: Yup.string().required('Sku is required'), // sku: Yup.string().required('Sku is required'),
// available: Yup.number().required('Quantaty is required') // available: Yup.number().required('Quantaty is required')
// colors: Yup.array().required('Color is required'), // colors: Yup.array().required('Color is required'),
@ -102,13 +102,15 @@ export default function ProductForm({
// .required('Sale price is required') // .required('Sale price is required')
// .lessThan(Yup.ref('price'), 'Sale price should be smaller than price') // .lessThan(Yup.ref('price'), 'Sale price should be smaller than price')
}); });
const formik = useFormik({ const formik = useFormik({
enableReinitialize: true, enableReinitialize: true,
initialValues: { initialValues: {
name: currentProduct?.name || '', name: currentProduct?.name || '',
description: currentProduct?.description || '', description: currentProduct?.description || '',
code: currentProduct?.code || `${now.getFullYear()}${now.getMonth()}${now.getDay()}${now.getHours()}${now.getMinutes()}${now.getSeconds()}`, code:
currentProduct?.code ||
`${now.getFullYear()}${now.getMonth()}${now.getDay()}${now.getHours()}${now.getMinutes()}${now.getSeconds()}`,
slug: currentProduct?.slug || '', slug: currentProduct?.slug || '',
metaTitle: currentProduct?.metaTitle || '', metaTitle: currentProduct?.metaTitle || '',
metaDescription: currentProduct?.metaDescription || '', metaDescription: currentProduct?.metaDescription || '',
@ -127,7 +129,7 @@ export default function ProductForm({
colors: currentProduct?.colors || '', colors: currentProduct?.colors || '',
sizes: currentProduct?.sizes || '', sizes: currentProduct?.sizes || '',
available: currentProduct?.available || '1', available: currentProduct?.available || '1',
images: currentProduct?.images || [], images: currentProduct?.images || []
}, },
validationSchema: NewProductSchema, validationSchema: NewProductSchema,
@ -191,8 +193,6 @@ export default function ProductForm({
setFieldValue('images', removeImage); setFieldValue('images', removeImage);
}; };
// const handleAnnotationsChange = (updatedAnnotations) => { // const handleAnnotationsChange = (updatedAnnotations) => {
// setAnnotations(updatedAnnotations); // setAnnotations(updatedAnnotations);
// formik.setFieldValue('metaDescription', updatedAnnotations) // formik.setFieldValue('metaDescription', updatedAnnotations)
@ -207,6 +207,11 @@ export default function ProductForm({
formik.setFieldValue('slug', slug); // set the value of slug in the formik state formik.setFieldValue('slug', slug); // set the value of slug in the formik state
formik.handleChange(event); // handle the change in formik formik.handleChange(event); // handle the change in formik
}; };
useEffect(() => {
console.log('this Value', values)
}, [values])
return ( return (
<Stack spacing={3}> <Stack spacing={3}>
<FormikProvider value={formik}> <FormikProvider value={formik}>
@ -337,7 +342,7 @@ export default function ProductForm({
)} )}
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} md={6} sx={{display:'none'}}> <Grid item xs={12} md={6} sx={{ display: 'none' }}>
<FormControl fullWidth> <FormControl fullWidth>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={100} /> <Skeleton variant="text" width={100} />
@ -362,7 +367,7 @@ export default function ProductForm({
)} )}
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} md={6} sx={{display:'none'}}> <Grid item xs={12} md={6} sx={{ display: 'none' }}>
<LabelStyle component={'label'} htmlFor="size"> <LabelStyle component={'label'} htmlFor="size">
{'Sizes'} {'Sizes'}
</LabelStyle> </LabelStyle>
@ -391,7 +396,7 @@ export default function ProductForm({
)} )}
/> />
</Grid> </Grid>
<Grid item xs={12} md={6} sx={{display:'none'}}> <Grid item xs={12} md={6} sx={{ display: 'none' }}>
<LabelStyle component={'label'} htmlFor="color"> <LabelStyle component={'label'} htmlFor="color">
{'Colors'} {'Colors'}
</LabelStyle> </LabelStyle>
@ -421,7 +426,7 @@ export default function ProductForm({
/> />
</Grid> </Grid>
<Grid item xs={12} md={6} sx={{display:'none'}}> <Grid item xs={12} md={6} sx={{ display: 'none' }}>
<FormControl fullWidth> <FormControl fullWidth>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={80} /> <Skeleton variant="text" width={80} />
@ -451,7 +456,7 @@ export default function ProductForm({
)} )}
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} md={4} sx={{display:'none'}}> <Grid item xs={12} md={4} sx={{ display: 'none' }}>
<FormControl fullWidth> <FormControl fullWidth>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={80} /> <Skeleton variant="text" width={80} />
@ -484,7 +489,7 @@ export default function ProductForm({
)} )}
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12} md={4} sx={{display:'none'}}> <Grid item xs={12} md={4} sx={{ display: 'none' }}>
<div> <div>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={120} /> <Skeleton variant="text" width={120} />
@ -506,7 +511,7 @@ export default function ProductForm({
)} )}
</div> </div>
</Grid> </Grid>
<Grid item xs={12} md={4} sx={{display:'none'}}> <Grid item xs={12} md={4} sx={{ display: 'none' }}>
<div> <div>
<LabelStyle component={'label'} htmlFor="product-sku"> <LabelStyle component={'label'} htmlFor="product-sku">
{'Product Sku'} {'Product Sku'}
@ -520,7 +525,7 @@ export default function ProductForm({
/> />
</div> </div>
</Grid> </Grid>
<Grid item xs={12} md={12} sx={{display:'none'}}> <Grid item xs={12} md={12} sx={{ display: 'none' }}>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={70} /> <Skeleton variant="text" width={70} />
) : ( ) : (
@ -556,7 +561,7 @@ export default function ProductForm({
/> />
)} )}
</Grid> </Grid>
<Grid item xs={12} md={12} sx={{display:'none'}}> <Grid item xs={12} md={12} sx={{ display: 'none' }}>
<div> <div>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={100} /> <Skeleton variant="text" width={100} />
@ -624,7 +629,6 @@ export default function ProductForm({
formik.setFieldValue('metaDescription', value); formik.setFieldValue('metaDescription', value);
} }
}} }}
error={Boolean(touched.images && errors.images)} error={Boolean(touched.images && errors.images)}
/> />
{touched.images && errors.images && ( {touched.images && errors.images && (
@ -663,7 +667,7 @@ export default function ProductForm({
/> />
)} )}
</div> </div>
<div style={{display:'none'}}> <div style={{ display: 'none' }}>
{isInitialized ? ( {isInitialized ? (
<Skeleton variant="text" width={140} /> <Skeleton variant="text" width={140} />
) : ( ) : (
@ -686,7 +690,7 @@ export default function ProductForm({
)} )}
</div> </div>
<div style={{display:'none'}}> <div style={{ display: 'none' }}>
<LabelStyle component={'label'} htmlFor="quantity"> <LabelStyle component={'label'} htmlFor="quantity">
{'Quantity'} {'Quantity'}
</LabelStyle> </LabelStyle>
@ -700,7 +704,7 @@ export default function ProductForm({
/> />
</div> </div>
<div style={{display:'none'}}> <div style={{ display: 'none' }}>
<LabelStyle component={'label'} htmlFor="regular-price"> <LabelStyle component={'label'} htmlFor="regular-price">
{'Regular Price'} {'Regular Price'}
</LabelStyle> </LabelStyle>
@ -717,7 +721,7 @@ export default function ProductForm({
helperText={touched.price && errors.price} helperText={touched.price && errors.price}
/> />
</div> </div>
<div style={{display:'none'}}> <div style={{ display: 'none' }}>
<LabelStyle component={'label'} htmlFor="sale-price"> <LabelStyle component={'label'} htmlFor="sale-price">
{'Sale Price'} {'Sale Price'}
</LabelStyle> </LabelStyle>

View File

@ -1,5 +1,5 @@
'use client'; 'use client';
import React, { useState } from 'react'; import React, { useEffect, useState } from 'react';
import { useMutation } from 'react-query'; import { useMutation } from 'react-query';
import toast from 'react-hot-toast'; import toast from 'react-hot-toast';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
@ -59,7 +59,6 @@ export default function SubCategoryForm({
isInitialized = false isInitialized = false
}) { }) {
const router = useRouter(); const router = useRouter();
const [state, setstate] = useState({ const [state, setstate] = useState({
loading: false, loading: false,
name: '', name: '',
@ -110,7 +109,7 @@ export default function SubCategoryForm({
file: currentCategory?.cover || '', file: currentCategory?.cover || '',
slug: currentCategory?.slug || '', slug: currentCategory?.slug || '',
status: currentCategory?.status || STATUS_OPTIONS[0], status: currentCategory?.status || STATUS_OPTIONS[0],
parentCategory: currentCategory?.category || (categories && categories[0]?._id) || '' parentCategory: currentCategory?.parentCategory || (categories && categories[0]?._id) || ''
}, },
enableReinitialize: true, enableReinitialize: true,
validationSchema: NewCategorySchema, validationSchema: NewCategorySchema,