form builder service and hooks
This commit is contained in:
hamid zarghami
@@ -0,0 +1,79 @@
|
||||
import { type FC } from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { useDeleteAttributeValue, useGetAttributeValues } from '../hooks/useProductData'
|
||||
import CreateValue from '../components/CreateValue'
|
||||
import Table from '@/components/Table'
|
||||
import UpdateValue from '../components/UpdateValue'
|
||||
import TrashWithConfrim from '@/components/TrashWithConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
|
||||
const AttributeValues: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { data, refetch } = useGetAttributeValues(Number(id))
|
||||
const { mutate: deleteValue, isPending } = useDeleteAttributeValue()
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
deleteValue(id, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-lg font-light'>مقادیر</h1>
|
||||
|
||||
<CreateValue
|
||||
id={Number(id)}
|
||||
refetch={refetch}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
key: 'value',
|
||||
title: 'مقدار'
|
||||
},
|
||||
{
|
||||
key: 'order',
|
||||
title: 'ترتیب'
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: '',
|
||||
render: (item) => {
|
||||
return (
|
||||
<div className='flex gap-2 items-center'>
|
||||
<UpdateValue
|
||||
id={item.id}
|
||||
refetch={refetch}
|
||||
/>
|
||||
|
||||
<TrashWithConfrim
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
colorIcon='red'
|
||||
isloading={isPending}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]}
|
||||
data={data?.data}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AttributeValues
|
||||
@@ -0,0 +1,127 @@
|
||||
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))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default CreateAttribute
|
||||
@@ -0,0 +1,113 @@
|
||||
import Button from '@/components/Button'
|
||||
import { Paths } from '@/config/Paths'
|
||||
import { AddSquare, Edit } from 'iconsax-react'
|
||||
import { type FC } from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { useDeleteAttribute, useGetAttributes } from '../hooks/useProductData'
|
||||
import Table from '@/components/Table'
|
||||
import TrashWithConfrim from '@/components/TrashWithConfrim'
|
||||
import { toast } from 'react-toastify'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
|
||||
const AttributeList: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const { mutate: deleteAttribute, isPending } = useDeleteAttribute()
|
||||
const { data, refetch } = useGetAttributes(Number(id))
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
deleteAttribute(id, {
|
||||
onSuccess: () => {
|
||||
refetch()
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className='mt-5'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<h1 className='text-lg font-light'>ویژگی ها</h1>
|
||||
|
||||
<Link
|
||||
to={Paths.product.attribute.create + id}
|
||||
>
|
||||
<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>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Table
|
||||
columns={[
|
||||
{
|
||||
key: 'name',
|
||||
title: 'نام'
|
||||
},
|
||||
{
|
||||
key: 'type',
|
||||
title: 'نوع'
|
||||
},
|
||||
{
|
||||
key: 'isRequired',
|
||||
title: 'احباری',
|
||||
render: (item) => {
|
||||
return (
|
||||
<div>{item.isRequired ? 'اجباری' : 'اختیاری'}</div>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'value',
|
||||
title: 'مقادیر',
|
||||
render: (item) => {
|
||||
return (
|
||||
<Link to={Paths.product.attributeValue.list + item.id}>
|
||||
<Button className='w-fit px-5'>
|
||||
میدیریت مقادیر
|
||||
</Button>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
key: 'actions',
|
||||
title: '',
|
||||
render: (item) => {
|
||||
return (
|
||||
<div className='flex gap-2 items-center'>
|
||||
<Link to={Paths.product.attribute.update + item.id}>
|
||||
<Edit
|
||||
color='#0037FF'
|
||||
size={20}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
<TrashWithConfrim
|
||||
isloading={isPending}
|
||||
colorIcon='red'
|
||||
onDelete={() => handleDelete(item.id)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
]}
|
||||
data={data?.data}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default AttributeList
|
||||
@@ -0,0 +1,143 @@
|
||||
import { useFormik } from 'formik'
|
||||
import { useEffect, 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 { useGetAttributeDetail, useUpdateAttribute } from '../hooks/useProductData'
|
||||
import { useNavigate, useParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import { extractErrorMessage } from '@/config/func'
|
||||
|
||||
const UpdateAttribute: FC = () => {
|
||||
|
||||
const { id } = useParams()
|
||||
const navigate = useNavigate()
|
||||
const { data, refetch } = useGetAttributeDetail(Number(id))
|
||||
const { mutate: createAttribute, isPending } = useUpdateAttribute()
|
||||
|
||||
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('با موفقیت ذخیره شد')
|
||||
refetch()
|
||||
navigate(-1)
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(extractErrorMessage(error))
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (data) {
|
||||
formik.setValues({
|
||||
isRequired: data?.data?.isRequired,
|
||||
name: data?.data?.name,
|
||||
order: data?.data?.order,
|
||||
type: data?.data?.type
|
||||
})
|
||||
}
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [data])
|
||||
|
||||
|
||||
return (
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
export default UpdateAttribute
|
||||
@@ -0,0 +1,9 @@
|
||||
export const enum FieldTypeEnum {
|
||||
text = "text",
|
||||
textarea = "textarea",
|
||||
number = "number",
|
||||
select = "select",
|
||||
radio = "radio",
|
||||
checkbox = "checkbox",
|
||||
date = "date",
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import { QueryClient, useMutation, useQuery } from "@tanstack/react-query";
|
||||
import * as api from "../service/FormBuilderService";
|
||||
import type { CreateFieldType, CreateFieldValueType } from "../types/Types";
|
||||
|
||||
export const useCreateField = () => {
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
return useMutation({
|
||||
mutationFn: ({ id, params }: { id: number; params: CreateFieldType }) =>
|
||||
api.createField(id, params),
|
||||
onSuccess: (_, params) => {
|
||||
queryClient.refetchQueries({
|
||||
queryKey: ["product-Fields", params.id],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetFields = (id: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["product-Fields", id],
|
||||
queryFn: () => api.getFields(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetFieldDetail = (id: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["product-Field", id],
|
||||
queryFn: () => api.getFieldDetail(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateField = () => {
|
||||
const queryClient = new QueryClient();
|
||||
return useMutation({
|
||||
mutationFn: ({ id, params }: { id: number; params: CreateFieldType }) =>
|
||||
api.updateField(id, params),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({
|
||||
queryKey: ["product-Fields"],
|
||||
});
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteField = () => {
|
||||
return useMutation({
|
||||
mutationFn: (id: number) => api.deleteFields(id),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetFieldValues = (id: number) => {
|
||||
return useQuery({
|
||||
queryKey: ["attrbute-values", id],
|
||||
queryFn: () => api.getFieldValues(id),
|
||||
enabled: !!id,
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateFieldValue = () => {
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
params,
|
||||
}: {
|
||||
id: number;
|
||||
params: CreateFieldValueType;
|
||||
}) => api.createFieldValues(id, params),
|
||||
});
|
||||
};
|
||||
|
||||
export const useUpdateFieldValue = () => {
|
||||
return useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
params,
|
||||
}: {
|
||||
id: number;
|
||||
params: CreateFieldValueType;
|
||||
}) => api.updateFieldValues(id, params),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetFieldValueDetail = (id: number, enabled: boolean) => {
|
||||
return useQuery({
|
||||
queryKey: ["attrbute-values-detail", id],
|
||||
queryFn: () => api.getFieldValueDetail(id),
|
||||
enabled: !!id && enabled,
|
||||
});
|
||||
};
|
||||
|
||||
export const useDeleteFieldValue = () => {
|
||||
return useMutation({
|
||||
mutationFn: (id: number) => api.deleteFieldValue(id),
|
||||
});
|
||||
};
|
||||
@@ -0,0 +1,76 @@
|
||||
import axios from "@/config/axios";
|
||||
import type {
|
||||
CreateFieldType,
|
||||
CreateFieldValueType,
|
||||
FieldDetailResponseType,
|
||||
FieldResponseType,
|
||||
FieldValueDetailResponseType,
|
||||
FieldValuesResponseType,
|
||||
} from "../types/Types";
|
||||
|
||||
export const createField = async (id: number, params: CreateFieldType) => {
|
||||
const { data } = await axios.post(`/admin/entity/${id}/field`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getFields = async (id: number) => {
|
||||
const { data } = await axios.get<FieldResponseType>(
|
||||
`/admin/entity/${id}/field`,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getFieldDetail = async (id: number) => {
|
||||
const { data } = await axios.get<FieldDetailResponseType>(
|
||||
`/admin/entity/field/${id}`,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateField = async (id: number, params: CreateFieldType) => {
|
||||
const { data } = await axios.patch(`/admin/entity/field/${id}`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteFields = async (id: number) => {
|
||||
const { data } = await axios.delete(`/admin/entity/field/${id}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getFieldValues = async (id: number) => {
|
||||
const { data } = await axios.get<FieldValuesResponseType>(
|
||||
`/admin/entity/field/${id}/option`,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createFieldValues = async (
|
||||
id: number,
|
||||
params: CreateFieldValueType,
|
||||
) => {
|
||||
const { data } = await axios.post(`/admin/entity/field/${id}/option`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const updateFieldValues = async (
|
||||
id: number,
|
||||
params: CreateFieldValueType,
|
||||
) => {
|
||||
const { data } = await axios.patch(
|
||||
`/admin/entity/field/option/${id}`,
|
||||
params,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getFieldValueDetail = async (id: number) => {
|
||||
const { data } = await axios.get<FieldValueDetailResponseType>(
|
||||
`/admin/entity/field/option/${id}`,
|
||||
);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const deleteFieldValue = async (id: number) => {
|
||||
const { data } = await axios.delete(`/admin/entity/field/option/${id}`);
|
||||
return data;
|
||||
};
|
||||
@@ -0,0 +1,41 @@
|
||||
import { type BaseResponse } from "@/shared/types/Types";
|
||||
import type { FieldTypeEnum } from "../enum/Enum";
|
||||
|
||||
export type CreateFieldType = {
|
||||
name: string,
|
||||
isRequired: boolean,
|
||||
type: FieldTypeEnum,
|
||||
order: number,
|
||||
multiple: boolean,
|
||||
entityType: 'product' | 'print'
|
||||
}
|
||||
|
||||
export type FieldType = {
|
||||
createdAt: string,
|
||||
id: number,
|
||||
isRequired: boolean,
|
||||
name: string,
|
||||
order: number,
|
||||
product: number,
|
||||
type: FieldTypeEnum,
|
||||
multiple: boolean,
|
||||
entityType: 'product' | 'print'
|
||||
}
|
||||
|
||||
export type FieldResponseType = BaseResponse<FieldType[]>;
|
||||
export type FieldDetailResponseType = BaseResponse<FieldType>;
|
||||
|
||||
export type CreateFieldValueType = {
|
||||
value: string,
|
||||
order: number,
|
||||
}
|
||||
|
||||
export type FieldValueType = {
|
||||
createdAt: string,
|
||||
id: number,
|
||||
order: number,
|
||||
value: string,
|
||||
}
|
||||
|
||||
export type FieldValuesResponseType = BaseResponse<FieldValueType[]>;
|
||||
export type FieldValueDetailResponseType = BaseResponse<FieldValueType>;
|
||||
Reference in New Issue
Block a user