create attribute

2026-01-25 09:40:41 +03:30
parent 5fad34cc84
commit a37a7191dd
9 changed files with 165 additions and 12 deletions
@@ -1,8 +1,126 @@
-import React from 'react'
+import { useFormik } from 'formik'
+import { type FC } from 'react'
+import type { CreateAttributeType } from '../types/Types'
+import { FieldTypeEnum } from '../enum/Enum'
+import * as Yup from 'yup'
+import Button from '@/components/Button'
+import { AddSquare } from 'iconsax-react'
+import Input from '@/components/Input'
+import Select from '@/components/Select'
+import SwitchComponent from '@/components/Switch'
+import { useCreateAttribute } from '../hooks/useProductData'
+import { useNavigate, useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/config/func'
+import { Paths } from '@/config/Paths'
+
+const CreateAttribute: FC = () => {
+
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { mutate: createAttribute, isPending } = useCreateAttribute()
+
+    const formik = useFormik<CreateAttributeType>({
+        initialValues: {
+            name: '',
+            isRequired: true,
+            order: 1,
+            type: FieldTypeEnum.text,
+        },
+        validationSchema: Yup.object({
+            name: Yup.string().required('این فیلد اجباری می باشد')
+        }),
+        onSubmit: (values) => {
+            createAttribute({ id: Number(id), params: values }, {
+                onSuccess: () => {
+                    toast.success('با موفقیت ذخیره شد')
+                    navigate(Paths.product.attribute.list + id)
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error))
+                }
+            })
+        }
+    })

-const CreateAttribute = () => {
    return (
-        <div>CreateAttribute</div>
+        <div className='mt-5'>
+            <div className='flex justify-between items-center'>
+
+                <h1 className='text-lg font-light'>ساخت ویژگی جدید</h1>
+                <Button
+                    className='w-fit px-6'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={isPending}
+                >
+                    <div className='flex gap-1.5'>
+                        <AddSquare size={18} color='black' />
+                        <div className='text-[13px] font-light'>ویژگی جدید</div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
+                <div className='rowTwoInput'>
+                    <Input
+                        label='نام ویژگی'
+                        {...formik.getFieldProps('name')}
+                        error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                    />
+
+                    <Select
+                        label='نوع'
+                        items={[
+                            {
+                                label: 'متن',
+                                value: FieldTypeEnum.text
+                            },
+                            {
+                                label: 'چک باکس',
+                                value: FieldTypeEnum.checkbox
+                            },
+                            {
+                                label: 'تاریخ',
+                                value: FieldTypeEnum.date
+                            },
+                            {
+                                label: 'عدد',
+                                value: FieldTypeEnum.number
+                            },
+                            {
+                                label: 'رادیو',
+                                value: FieldTypeEnum.radio
+                            },
+                            {
+                                label: 'کامبوباکس',
+                                value: FieldTypeEnum.select
+                            },
+                            {
+                                label: 'متن بلند',
+                                value: FieldTypeEnum.textarea
+                            },
+                        ]}
+                        {...formik.getFieldProps('type')}
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <Input
+                        label='ترتیب اولویت'
+                        {...formik.getFieldProps('order')}
+                    />
+                </div>
+
+                <div className='mt-6'>
+                    <SwitchComponent
+                        active={formik.values.isRequired}
+                        onChange={(value) => formik.setFieldValue('isRequired', value)}
+                        label='اجباری'
+                    />
+                </div>
+            </div>
+
+        </div>
    )
 }