danak/negareh-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

form builder

Browse Source
This commit is contained in:
hamid zarghami
2026-01-29 11:17:20 +03:30
parent f9899f108c
commit acbd06425b
9 changed files with 234 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/formBuilder/AttributeValues.tsx
+7 -7
View File
@@ -1,18 +1,18 @@
import { type FC } from 'react'
import { useParams } from 'react-router-dom'
import { useDeleteAttributeValue, useGetAttributeValues } from '../hooks/useProductData'
import CreateValue from '../components/CreateValue'
import { useDeleteFieldValue, useGetFieldValues } from './hooks/useFormBuilderData'
import CreateValue from './components/CreateValue'
import Table from '@/components/Table'
import UpdateValue from '../components/UpdateValue'
import UpdateValue from './components/UpdateValue'
import TrashWithConfrim from '@/components/TrashWithConfrim'
import { toast } from 'react-toastify'
import { extractErrorMessage } from '@/config/func'
const AttributeValues: FC = () => {
const FormBuilderValues: FC = () => {
const { id } = useParams()
const { data, refetch } = useGetAttributeValues(Number(id))
const { mutate: deleteValue, isPending } = useDeleteAttributeValue()
const { data, refetch } = useGetFieldValues(Number(id))
const { mutate: deleteValue, isPending } = useDeleteFieldValue()
const handleDelete = (id: number) => {
deleteValue(id, {
@@ -76,4 +76,4 @@ const AttributeValues: FC = () => {
)
}
export default AttributeValues
export default FormBuilderValues
src/pages/formBuilder/Create.tsx
+4 -4
View File
@@ -26,7 +26,7 @@ const FormBuilderCreate: FC = () => {
isRequired: true,
order: 1,
type: FieldTypeEnum.text,
entityType: 'product',
entityType: type!,
multiple: false,
},
validationSchema: Yup.object({
@@ -49,7 +49,7 @@ const FormBuilderCreate: FC = () => {
<div className='mt-5'>
<div className='flex justify-between items-center'>
<h1 className='text-lg font-light'>ساخت ویژگی جدید</h1>
<h1 className='text-lg font-light'>ساخت فیلد جدید</h1>
<Button
className='w-fit px-6'
onClick={() => formik.handleSubmit()}
@@ -57,7 +57,7 @@ const FormBuilderCreate: FC = () => {
>
<div className='flex gap-1.5'>
<AddSquare size={18} color='black' />
<div className='text-[13px] font-light'>ویژگی جدید</div>
<div className='text-[13px] font-light'>فیلد جدید</div>
</div>
</Button>
</div>
@@ -65,7 +65,7 @@ const FormBuilderCreate: FC = () => {
<div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
<div className='rowTwoInput'>
<Input
label='نام ویژگی'
label='نام فیلد'
{...formik.getFieldProps('name')}
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
/>
src/pages/formBuilder/List.tsx
+5 -5
View File
@@ -11,7 +11,7 @@ import { extractErrorMessage } from '@/config/func'
const FormBuilderList: FC = () => {
const { id } = useParams()
const { id, type } = useParams()
const { mutate: deleteField, isPending } = useDeleteField()
const { data, refetch } = useGetFields(Number(id))
@@ -30,17 +30,17 @@ const FormBuilderList: FC = () => {
return (
<div className='mt-5'>
<div className='flex justify-between items-center'>
<h1 className='text-lg font-light'>ویژگی ها</h1>
<h1 className='text-lg font-light'>فیلد ها</h1>
<Link
to={Paths.formBuilder.create + id}
to={Paths.formBuilder.create + id + `/${type}`}
>
<Button
className='w-fit px-6'
>
<div className='flex gap-1.5'>
<AddSquare size={18} color='black' />
<div className='text-[13px] font-light'>ویژگی جدید</div>
<div className='text-[13px] font-light'>فیلد جدید</div>
</div>
</Button>
</Link>
@@ -71,7 +71,7 @@ const FormBuilderList: FC = () => {
title: 'مقادیر',
render: (item) => {
return (
<Link to={Paths.formBuilder.list + item.id}>
<Link to={Paths.formBuilder.values + item.id}>
<Button className='w-fit px-5'>
میدیریت مقادیر
</Button>
src/pages/formBuilder/Update.tsx
+4 -4
View File
@@ -26,7 +26,7 @@ const FormBuilderUpdate: FC = () => {
isRequired: true,
order: 1,
type: FieldTypeEnum.text,
entityType: 'product',
entityType: '',
multiple: false
},
validationSchema: Yup.object({
@@ -67,7 +67,7 @@ const FormBuilderUpdate: FC = () => {
<div className='mt-5'>
<div className='flex justify-between items-center'>
<h1 className='text-lg font-light'>ویرایش ویژگی</h1>
<h1 className='text-lg font-light'>ویرایش فیلد</h1>
<Button
className='w-fit px-6'
onClick={() => formik.handleSubmit()}
@@ -75,7 +75,7 @@ const FormBuilderUpdate: FC = () => {
>
<div className='flex gap-1.5'>
<AddSquare size={18} color='black' />
<div className='text-[13px] font-light'>ویرایش ویژگی</div>
<div className='text-[13px] font-light'>ویرایش فیلد</div>
</div>
</Button>
</div>
@@ -83,7 +83,7 @@ const FormBuilderUpdate: FC = () => {
<div className='mt-8 bg-white p-6 rounded-3xl flex-1'>
<div className='rowTwoInput'>
<Input
label='نام ویژگی'
label='نام فیلد'
{...formik.getFieldProps('name')}
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
/>
src/pages/formBuilder/components/CreateValue.tsx
+99
View File
@@ -0,0 +1,99 @@
import { useState, type FC } from 'react'
import Button from '@/components/Button'
import { AddSquare, TickCircle } from 'iconsax-react'
import DefaulModal from '@/components/DefaulModal'
import { useFormik } from 'formik'
import type { CreateFieldValueType } from '../types/Types'
import * as Yup from 'yup'
import Input from '@/components/Input'
import { useCreateFieldValue } from '../hooks/useFormBuilderData'
import { extractErrorMessage } from '@/config/func'
import { toast } from 'react-toastify'
type Props = {
id: number,
refetch: () => void,
}
const CreateValue: FC<Props> = ({ id, refetch }) => {
const { mutate: createValue } = useCreateFieldValue()
const [showModal, setShowModal] = useState<boolean>(false)
const formik = useFormik<CreateFieldValueType>({
initialValues: {
value: '',
order: 1
},
validationSchema: Yup.object({
value: Yup.string().required('این فیلد اجباری است')
}),
onSubmit: (values) => {
createValue({ id: id, params: values }, {
onSuccess: () => {
refetch()
setShowModal(false)
},
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
})
return (
<div>
<Button
className='w-fit px-6'
onClick={() => setShowModal(true)}
>
<div className='flex gap-1.5'>
<AddSquare size={18} color='black' />
<div className='text-[13px] font-light'>مقدار جدید</div>
</div>
</Button>
<DefaulModal
open={showModal}
close={() => setShowModal(false)}
isHeader
title_header='ساخت مقدار جدید'
>
<div className='mt-5'>
<Input
label='مقدار'
{...formik.getFieldProps('value')}
error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
/>
</div>
<div className='mt-5'>
<Input
label='ترتیب اولویت'
{...formik.getFieldProps('order')}
/>
</div>
<div className='mt-6 flex justify-end'>
<Button
className='w-fit px-6'
onClick={() => formik.handleSubmit()}
>
<div className='flex gap-2 items-center'>
<TickCircle
size={18}
color='black'
/>
<div>ذخیره</div>
</div>
</Button>
</div>
</DefaulModal>
</div>
)
}
export default CreateValue
src/pages/formBuilder/components/UpdateValue.tsx
+110
View File
@@ -0,0 +1,110 @@
import { useEffect, useState, type FC } from 'react'
import Button from '@/components/Button'
import { Edit, TickCircle } from 'iconsax-react'
import DefaulModal from '@/components/DefaulModal'
import { useFormik } from 'formik'
import type { CreateFieldValueType } from '../types/Types'
import * as Yup from 'yup'
import Input from '@/components/Input'
import { useGetFieldValueDetail, useUpdateFieldValue } from '../hooks/useFormBuilderData'
import { extractErrorMessage } from '@/config/func'
import { toast } from 'react-toastify'
type Props = {
id: number,
refetch: () => void,
}
const UpdateValue: FC<Props> = ({ id, refetch }) => {
const [showModal, setShowModal] = useState<boolean>(false)
const { mutate: updateValue } = useUpdateFieldValue()
const { data, refetch: refetchDeetail } = useGetFieldValueDetail(id, showModal)
const formik = useFormik<CreateFieldValueType>({
initialValues: {
value: '',
order: 1
},
validationSchema: Yup.object({
value: Yup.string().required('این فیلد اجباری است')
}),
onSubmit: (values) => {
updateValue({ id: id, params: values }, {
onSuccess: () => {
refetch()
refetchDeetail()
setShowModal(false)
},
onError: (error) => {
toast.error(extractErrorMessage(error))
}
})
}
})
useEffect(() => {
if (data) {
formik.setValues({
value: data?.data.value,
order: data?.data.order
})
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data])
return (
<div>
<Edit
onClick={() => setShowModal(true)}
size={20}
color='#0037FF'
/>
<DefaulModal
open={showModal}
close={() => setShowModal(false)}
isHeader
title_header='ویرایش مقدار'
>
<div className='mt-5'>
<Input
label='مقدار'
{...formik.getFieldProps('value')}
error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
/>
</div>
<div className='mt-5'>
<Input
label='ترتیب اولویت'
{...formik.getFieldProps('order')}
/>
</div>
<div className='mt-6 flex justify-end'>
<Button
className='w-fit px-6'
onClick={() => formik.handleSubmit()}
>
<div className='flex gap-2 items-center'>
<TickCircle
size={18}
color='black'
/>
<div>ذخیره</div>
</div>
</Button>
</div>
</DefaulModal>
</div>
)
}
export default UpdateValue
src/pages/formBuilder/types/Types.ts
+2 -2
View File
@@ -7,7 +7,7 @@ export type CreateFieldType = {
type: FieldTypeEnum,
order: number,
multiple: boolean,
entityType: 'product' | 'print'
entityType:string, // 'product' | 'print'
}
export type FieldType = {
@@ -19,7 +19,7 @@ export type FieldType = {
product: number,
type: FieldTypeEnum,
multiple: boolean,
entityType: 'product' | 'print'
entityType:string, // 'product' | 'print'
}
export type FieldResponseType = BaseResponse<FieldType[]>;