From acbd06425bc3df5f849b5ebf7a7616c1301d55f0 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Thu, 29 Jan 2026 11:17:20 +0330 Subject: [PATCH] form builder --- src/config/Paths.tsx | 1 + src/pages/formBuilder/AttributeValues.tsx | 14 +-- src/pages/formBuilder/Create.tsx | 8 +- src/pages/formBuilder/List.tsx | 10 +- src/pages/formBuilder/Update.tsx | 8 +- .../formBuilder/components/CreateValue.tsx | 99 ++++++++++++++++ .../formBuilder/components/UpdateValue.tsx | 110 ++++++++++++++++++ src/pages/formBuilder/types/Types.ts | 4 +- src/router/MainRouter.tsx | 2 + 9 files changed, 234 insertions(+), 22 deletions(-) create mode 100644 src/pages/formBuilder/components/CreateValue.tsx create mode 100644 src/pages/formBuilder/components/UpdateValue.tsx diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx index 1f7e239..5ddb833 100644 --- a/src/config/Paths.tsx +++ b/src/config/Paths.tsx @@ -24,6 +24,7 @@ export const Paths = { list: '/form-builder/list/', create: '/form-builder/create/', update: '/form-builder/update/', + values: '/form-builder/values/' }, order: { list: '/order/list' diff --git a/src/pages/formBuilder/AttributeValues.tsx b/src/pages/formBuilder/AttributeValues.tsx index 8576ec7..9e05286 100644 --- a/src/pages/formBuilder/AttributeValues.tsx +++ b/src/pages/formBuilder/AttributeValues.tsx @@ -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 \ No newline at end of file +export default FormBuilderValues \ No newline at end of file diff --git a/src/pages/formBuilder/Create.tsx b/src/pages/formBuilder/Create.tsx index 83d2502..a556f92 100644 --- a/src/pages/formBuilder/Create.tsx +++ b/src/pages/formBuilder/Create.tsx @@ -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 = () => {
-

ساخت ویژگی جدید

+

ساخت فیلد جدید

@@ -65,7 +65,7 @@ const FormBuilderCreate: FC = () => {
diff --git a/src/pages/formBuilder/List.tsx b/src/pages/formBuilder/List.tsx index d6195eb..73816e5 100644 --- a/src/pages/formBuilder/List.tsx +++ b/src/pages/formBuilder/List.tsx @@ -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 (
-

ویژگی ها

+

فیلد ها

@@ -71,7 +71,7 @@ const FormBuilderList: FC = () => { title: 'مقادیر', render: (item) => { return ( - + diff --git a/src/pages/formBuilder/Update.tsx b/src/pages/formBuilder/Update.tsx index b294ba5..970979f 100644 --- a/src/pages/formBuilder/Update.tsx +++ b/src/pages/formBuilder/Update.tsx @@ -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 = () => {
-

ویرایش ویژگی

+

ویرایش فیلد

@@ -83,7 +83,7 @@ const FormBuilderUpdate: FC = () => {
diff --git a/src/pages/formBuilder/components/CreateValue.tsx b/src/pages/formBuilder/components/CreateValue.tsx new file mode 100644 index 0000000..65ec5db --- /dev/null +++ b/src/pages/formBuilder/components/CreateValue.tsx @@ -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 = ({ id, refetch }) => { + + + const { mutate: createValue } = useCreateFieldValue() + const [showModal, setShowModal] = useState(false) + + const formik = useFormik({ + 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 ( +
+ + + setShowModal(false)} + isHeader + title_header='ساخت مقدار جدید' + > +
+ +
+ +
+ +
+ +
+ +
+ + +
+ ) +} + +export default CreateValue \ No newline at end of file diff --git a/src/pages/formBuilder/components/UpdateValue.tsx b/src/pages/formBuilder/components/UpdateValue.tsx new file mode 100644 index 0000000..9086d2f --- /dev/null +++ b/src/pages/formBuilder/components/UpdateValue.tsx @@ -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 = ({ id, refetch }) => { + + + const [showModal, setShowModal] = useState(false) + const { mutate: updateValue } = useUpdateFieldValue() + const { data, refetch: refetchDeetail } = useGetFieldValueDetail(id, showModal) + + const formik = useFormik({ + 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 ( +
+ setShowModal(true)} + size={20} + color='#0037FF' + /> + + setShowModal(false)} + isHeader + title_header='ویرایش مقدار' + > +
+ +
+ +
+ +
+ +
+ +
+ + +
+ ) +} + +export default UpdateValue \ No newline at end of file diff --git a/src/pages/formBuilder/types/Types.ts b/src/pages/formBuilder/types/Types.ts index d129fe9..ac92f45 100644 --- a/src/pages/formBuilder/types/Types.ts +++ b/src/pages/formBuilder/types/Types.ts @@ -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; diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx index deea42b..420f203 100644 --- a/src/router/MainRouter.tsx +++ b/src/router/MainRouter.tsx @@ -36,6 +36,7 @@ import AttributeValues from '@/pages/product/attribute/AttributeValues' import FormBuilderList from '@/pages/formBuilder/List' import FormBuilderCreate from '@/pages/formBuilder/Create' import FormBuilderUpdate from '@/pages/formBuilder/Update' +import FormBuilderValues from '@/pages/formBuilder/AttributeValues' const MainRouter: FC = () => { return ( @@ -67,6 +68,7 @@ const MainRouter: FC = () => { } /> } /> } /> + } /> } /> } />