Create theme value

src/pages/theme/Values.tsx

@@ -1,15 +1,18 @@
-import { type FC } from 'react'
+import { type FC, useState } from 'react'
 import { useGetThemeValues } from './hooks/useThemeData'
 import { useParams } from 'react-router-dom'
 import PageTitle from '@/components/PageTitle'
 import Td from '@/components/Td'
-import { Eye } from 'iconsax-react'
+import { Eye, Add } from 'iconsax-react'
 import TrashWithConfrim from '@/components/TrashWithConfrim'
 import { toast } from 'react-toastify'
+import Button from '@/components/Button'
+import CreateThemeValueModal from './components/CreateThemeValueModal'
 
 const Values: FC = () => {
     const { id } = useParams()
     const { data, isLoading } = useGetThemeValues(id!)
+    const [isModalOpen, setIsModalOpen] = useState(false)
 
     if (isLoading) {
         return <div className="flex justify-center items-center h-64">در حال بارگذاری...</div>
@@ -19,7 +22,18 @@ const Values: FC = () => {
 
     return (
         <div>
-            <PageTitle title1='مقادیر تم' />
+            <div className='flex justify-between items-center'>
+                <PageTitle title1='مقادیر تم' />
+                <Button
+                    onClick={() => setIsModalOpen(true)}
+                    className='w-fit'
+                >
+                    <div className='flex whitespace-nowrap gap-2 items-center'>
+                        <Add size={16} color='#fff' />
+                        <div>افزودن مقدار</div>
+                    </div>
+                </Button>
+            </div>
 
             {themeInfo && (
                 <div className='mt-5 p-4 bg-gray-50 rounded-lg'>
@@ -78,6 +92,14 @@ const Values: FC = () => {
                     </tbody>
                 </table>
             </div>
+
+            {id && (
+                <CreateThemeValueModal
+                    open={isModalOpen}
+                    close={() => setIsModalOpen(false)}
+                    themeId={id}
+                />
+            )}
         </div>
     )
 }

src/pages/theme/components/CreateThemeValueModal.tsx

@@ -0,0 +1,114 @@
+import { type FC } from 'react'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import DefaulModal from '@/components/DefaulModal'
+import Input from '@/components/Input'
+import Button from '@/components/Button'
+import { useCreateThemeValue } from '../hooks/useThemeData'
+import { extractErrorMessage } from '@/helpers/utils'
+import { toast } from 'react-toastify'
+import { TickCircle } from 'iconsax-react'
+import type { CreateThemeValueType } from '../type/Types'
+
+interface Props {
+  open: boolean
+  close: () => void
+  themeId: string
+}
+
+const CreateThemeValueModal: FC<Props> = ({ open, close, themeId }) => {
+  const { mutate: createThemeValue, isPending } = useCreateThemeValue()
+
+  const formik = useFormik<Omit<CreateThemeValueType, 'theme'>>({
+    initialValues: {
+      name: '',
+      value: '',
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required('نام الزامی است'),
+      value: Yup.string().required('مقدار الزامی است'),
+    }),
+    onSubmit: (values) => {
+      createThemeValue(
+        {
+          theme: themeId,
+          name: values.name,
+          value: values.value,
+        },
+        {
+          onSuccess: () => {
+            toast.success('مقدار تم با موفقیت ایجاد شد')
+            formik.resetForm()
+            close()
+          },
+          onError: (error) => {
+            toast.error(extractErrorMessage(error))
+          },
+        }
+      )
+    },
+  })
+
+  const handleClose = () => {
+    formik.resetForm()
+    close()
+  }
+
+  return (
+    <DefaulModal
+      open={open}
+      close={handleClose}
+      isHeader
+      title_header="افزودن مقدار تم"
+    >
+      <div className="mt-5 space-y-5 w-[400px]">
+        <Input
+          label="نام"
+          placeholder="نام را وارد کنید"
+          {...formik.getFieldProps('name')}
+          error_text={
+            formik.touched.name && formik.errors.name
+              ? formik.errors.name
+              : ''
+          }
+        />
+
+        <Input
+          label="مقدار"
+          placeholder="مقدار را وارد کنید"
+          {...formik.getFieldProps('value')}
+          error_text={
+            formik.touched.value && formik.errors.value
+              ? formik.errors.value
+              : ''
+          }
+        />
+
+        <div className="flex gap-3 pt-3">
+          <Button
+            variant="outline"
+            onClick={handleClose}
+            disabled={isPending}
+            className="w-fit"
+          >
+            انصراف
+          </Button>
+          <Button
+            onClick={() => formik.handleSubmit()}
+            isLoading={isPending}
+            disabled={!formik.isValid || isPending}
+            className="w-fit"
+          >
+            <div className="flex gap-2 items-center">
+              <TickCircle size={16} color="#fff" />
+              <div>ذخیره</div>
+            </div>
+          </Button>
+        </div>
+      </div>
+    </DefaulModal>
+  )
+}
+
+export default CreateThemeValueModal
+

src/pages/theme/hooks/useThemeData.ts

@@ -56,3 +56,13 @@ export const useGetThemeValues = (id: string) => {
     enabled: !!id,
   });
 };
+
+export const useCreateThemeValue = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: api.createThemeValue,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["theme-values"] });
+    },
+  });
+};

src/pages/theme/service/ThemeService.ts

@@ -4,6 +4,7 @@ import type {
   GetThemesResponseType,
   GetThemeByIdResponseType,
   GetThemeValuesResponseType,
+  CreateThemeValueType,
 } from "../type/Types";
 
 export const getThemes = async (): Promise<GetThemesResponseType> => {
@@ -48,3 +49,26 @@ export const getThemeValues = async (
   );
   return data;
 };
+
+export const createThemeValue = async (params: CreateThemeValueType) => {
+  const { data } = await axios.post(`/admin/category/theme-value`, params);
+  return data;
+};
+
+export const updateThemeValue = async (
+  id: string,
+  params: CreateThemeValueType
+) => {
+  const { data } = await axios.put(
+    `/admin/category/theme-value/${id}/value`,
+    params
+  );
+  return data;
+};
+
+export const deleteThemeValue = async (id: string) => {
+  const { data } = await axios.delete(
+    `/admin/category/theme-value/${id}/value`
+  );
+  return data;
+};