create role

src/langs/fa.json

@@ -539,7 +539,8 @@
     "submit_role": "ثبت نقش",
     "title_role": "عنوان نقش",
     "permissions": "دسترسی ها",
-    "status_role": "وضعیت نقش"
+    "status_role": "وضعیت نقش",
+    "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید"
   },
   "profile": {
     "account_user": "حساب کاربری",

src/pages/discounts/CreateDiscount.tsx

@@ -19,6 +19,7 @@ import { CustomerItemType } from '../customer/types/CustomerTypes'
 import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { ErrorType } from '../../helpers/types'
+import moment from 'moment-jalaali'
 
 const CreateDiscount: FC = () => {
 
@@ -57,8 +58,8 @@ const CreateDiscount: FC = () => {
                 values.userIds = [customerId]
                 const params: CreateDiscountType = {
                     ...values,
-                    startDate: new Date(values.startDate).toISOString(),
+                    startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
-                    endDate: new Date(values.endDate).toISOString(),
+                    endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
                     amount: +values.amount
                 }
                 createDiscount.mutate(params, {

src/pages/discounts/DiscountsList.tsx

@@ -85,7 +85,7 @@ const DiscountList: FC = () => {
                                         return (
                                             <tr key={item.id} className='tr'>
                                                 <Td text={String(index + 1)} />
-                                                <Td text={item.users[0].firstName + ' ' + item.users[0].lastName} />
+                                                <Td text={item.users[0] ? item.users[0].firstName + ' ' + item.users[0].lastName : ''} />
                                                 <Td text={t(`discount.${item.type}`)} />
                                                 <Td text={item.code} />
                                                 <Td text={moment(item.startDate, 'jYYYY-jMM-jDD').format('jYYYY-jMM-jDD')} />

src/pages/service/AddService.tsx

@@ -60,6 +60,7 @@ const AddService: FC = () => {
             link: '',
             metaDescription: '',
             name: '',
+            title: '',
             serviceLanguage: '',
             softwareLanguage: '',
             userCount: 0,
@@ -67,6 +68,7 @@ const AddService: FC = () => {
         },
         validationSchema: Yup.object({
             name: Yup.string().required(t('errors.required')),
+            title: Yup.string().required(t('errors.required')),
             description: Yup.string().required(t('errors.required')),
             author: Yup.string().required(t('errors.required')),
             createDate: Yup.date().required(t('errors.required')),
@@ -151,12 +153,22 @@ const AddService: FC = () => {
 
 
                     <div className='flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
-                        <Input
+                        <div className='rowTwoInput'>
-                            label={t('service.service_name')}
+                            <Input
-                            name='name'
+                                label={t('service.service_name')}
-                            onChange={formik.handleChange}
+                                name='name'
-                            error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                                onChange={formik.handleChange}
-                        />
+                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                            />
+
+                            <Input
+                                label={t('service.title')}
+                                name='title'
+                                onChange={formik.handleChange}
+                                error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
+                            />
+                        </div>
+
                         <div className='mt-8 rowTwoInput'>
                             <Input
                                 label={t('service.description_short')}

src/pages/service/types/ServiceTypes.ts

@@ -29,6 +29,7 @@ export type ToggleStatusCategoryType = {
 export type CreateServiceType = {
   categoryId: string;
   name: string;
+  title: string;
   description: string;
   author: string;
   userCount: number;

src/pages/users/RoleCreate.tsx

@@ -1,14 +1,61 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
 import { TickCircle } from 'iconsax-react'
 import Input from '../../components/Input'
 import CheckBoxComponent from '../../components/CheckBoxComponent'
-import SwitchComponent from '../../components/Switch'
+import { useCreateRole, useGetPermissions } from './hooks/useUserData'
+import PageLoading from '../../components/PageLoading'
+import { useFormik } from 'formik'
+import { CreateRoleType } from './types/UserTypes'
+import * as Yup from 'yup'
+import { useNavigate } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { ErrorType } from '../../helpers/types'
+import { toast } from 'react-toastify'
 
 const RoleCreate: FC = () => {
 
     const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const [permissions, setPermissions] = useState<string[]>([])
+    const getPermissions = useGetPermissions()
+    const createRole = useCreateRole()
+
+    const handleAdd = (id: string) => {
+        if (permissions.includes(id)) {
+            setPermissions(permissions.filter(permission => permission !== id))
+        } else {
+            setPermissions([...permissions, id])
+        }
+    }
+
+    const formik = useFormik<CreateRoleType>({
+        initialValues: {
+            name: '',
+            permissions: [],
+        },
+        validationSchema: Yup.object({
+            name: Yup.string()
+                .required(t('errors.required'))
+        }),
+        onSubmit: (values) => {
+            if (permissions.length > 0) {
+                values.permissions = permissions
+                createRole.mutate(values, {
+                    onSuccess: () => {
+                        formik.resetForm()
+                        navigate(Pages.users.roleList)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                toast.error(t('user.error_count_permission'))
+            }
+        }
+    })
 
     return (
         <div className='mt-4'>
@@ -18,6 +65,8 @@ const RoleCreate: FC = () => {
                 </div>
                 <Button
                     className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={createRole.isPaused}
                 >
                     <div className='flex gap-2'>
                         <TickCircle
@@ -31,71 +80,56 @@ const RoleCreate: FC = () => {
                 </Button>
             </div>
 
-            <div className='flex gap-6 mt-9'>
+            {
-                <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+                getPermissions.isPending ?
+                    <PageLoading />
+                    :
+                    <div className='flex gap-6 mt-9'>
+                        <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
 
-                    <Input
+                            <Input
-                        label={t('user.title_role')}
+                                label={t('user.title_role')}
-                    />
+                                {...formik.getFieldProps('name')}
+                                error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
+                            />
+
+                            <div className='mt-8'>
+                                <div className='text-sm'>
+                                    {t('user.permissions')}
+                                </div>
+
+                                <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                                    {
+                                        getPermissions.data?.data?.permissions?.map((item: { id: string, name: string }) => {
+                                            return (
+                                                <div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
+                                                    <CheckBoxComponent
+                                                        checked={permissions.includes(item.id)}
+                                                        onChange={() => handleAdd(item.id)}
+                                                    />
+                                                    <div>{item.name}</div>
+                                                </div>
+                                            )
+                                        })
+                                    }
+                                </div>
+                            </div>
 
-                    <div className='mt-8'>
-                        <div className='text-sm'>
-                            {t('user.permissions')}
                         </div>
 
-                        <div className='mt-5 text-sm flex flex-wrap gap-5'>
+                        {/* <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
-                            <div className='flex flex-1 min-w-[23%] items-center'>
+                            <div className='flex justify-between items-center'>
-                                <CheckBoxComponent
+                                <div className='text-sm'>
-                                    checked
+                                    {t('user.status_role')}
+                                </div>
+                                <SwitchComponent
+                                    active
                                     onChange={() => { }}
                                 />
-                                <div>{t('all')}</div>
                             </div>
-                            <div className='flex flex-1 min-w-[23%] items-center'>
+                        </div> */}
-                                <CheckBoxComponent
-                                    checked
-                                    onChange={() => { }}
-                                />
-                                <div>{t('all')}</div>
-                            </div>
-                            <div className='flex flex-1 min-w-[23%] items-center'>
-                                <CheckBoxComponent
-                                    checked
-                                    onChange={() => { }}
-                                />
-                                <div>{t('all')}</div>
-                            </div>
-                            <div className='flex flex-1 min-w-[23%] items-center'>
-                                <CheckBoxComponent
-                                    checked
-                                    onChange={() => { }}
-                                />
-                                <div>{t('all')}</div>
-                            </div>
-                            <div className='flex flex-1 min-w-[23%] items-center'>
-                                <CheckBoxComponent
-                                    checked
-                                    onChange={() => { }}
-                                />
-                                <div>{t('all')}</div>
-                            </div>
-                        </div>
                     </div>
-
+            }
-                </div>
-
-                <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
-                    <div className='flex justify-between items-center'>
-                        <div className='text-sm'>
-                            {t('user.status_role')}
-                        </div>
-                        <SwitchComponent
-                            active
-                            onChange={() => { }}
-                        />
-                    </div>
-                </div>
-            </div>
         </div>
     )
 }

src/pages/users/hooks/useUserData.ts

@@ -0,0 +1,16 @@
+import * as api from "../service/UserService";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { CreateRoleType } from "../types/UserTypes";
+
+export const useGetPermissions = () => {
+  return useQuery({
+    queryKey: ["permissions"],
+    queryFn: () => api.getPermissions(),
+  });
+};
+
+export const useCreateRole = () => {
+  return useMutation({
+    mutationFn: (variables: CreateRoleType) => api.createRole(variables),
+  });
+};

src/pages/users/service/UserService.ts

@@ -0,0 +1,12 @@
+import axios from "../../../config/axios";
+import { CreateRoleType } from "../types/UserTypes";
+
+export const getPermissions = async () => {
+  const { data } = await axios.get(`/users/permissions`);
+  return data;
+};
+
+export const createRole = async (params: CreateRoleType) => {
+  const { data } = await axios.post(`/users/roles`, params);
+  return data;
+};

src/pages/users/types/UserTypes.ts

@@ -0,0 +1,4 @@
+export type CreateRoleType = {
+  name: string;
+  permissions: string[];
+};