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

create role

Browse Source
This commit is contained in:
hamid zarghami
2025-02-18 17:16:18 +03:30
parent 71a11ff2e7
commit d0be217ea1
9 changed files with 150 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/users/RoleCreate.tsx
+93 -59
View File
@@ -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
label={t('user.title_role')}
/>
<Input
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='flex flex-1 min-w-[23%] items-center'>
<CheckBoxComponent
checked
{/* <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>{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 className='flex flex-1 min-w-[23%] items-center'>
<CheckBoxComponent
checked
onChange={() => { }}
/>
<div>{t('all')}</div>
</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
+16
View File
@@ -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
+12
View File
@@ -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
+4
View File
@@ -0,0 +1,4 @@
export type CreateRoleType = {
name: string;
permissions: string[];
};