user
This commit is contained in:
hamid zarghami
+4
-1
@@ -540,8 +540,11 @@
|
||||
"title_role": "عنوان نقش",
|
||||
"permissions": "دسترسی ها",
|
||||
"status_role": "وضعیت نقش",
|
||||
"error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید"
|
||||
"error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
|
||||
"is_admin": "آیا ادمین است؟"
|
||||
},
|
||||
"yes": "بله",
|
||||
"no": "خیر",
|
||||
"profile": {
|
||||
"account_user": "حساب کاربری",
|
||||
"image_profile": "تصویر حساب کاربری",
|
||||
|
||||
@@ -1,14 +1,80 @@
|
||||
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 Select from '../../components/Select'
|
||||
import UploadBoxDraggble from '../../components/UploadBoxDraggble'
|
||||
import { useFormik } from 'formik'
|
||||
import { CreateUserType, RoleItemType } from './types/UserTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { useSingleUpload } from '../service/hooks/useServiceData'
|
||||
import { useCreateUser, useGetRoles } from './hooks/useUserData'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
|
||||
const CreateUser: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [file, setFile] = useState<File>()
|
||||
const getRoles = useGetRoles('')
|
||||
const singleUpload = useSingleUpload()
|
||||
const createUser = useCreateUser()
|
||||
|
||||
const handleCreateUser = (values: CreateUserType) => {
|
||||
createUser.mutate(values, {
|
||||
onSuccess: () => {
|
||||
toast.success(t('success'))
|
||||
navigate(Pages.users.list)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const formik = useFormik<CreateUserType>({
|
||||
initialValues: {
|
||||
email: '',
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
password: '',
|
||||
repeatPassword: '',
|
||||
phone: '',
|
||||
profilePic: '',
|
||||
roleId: ''
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
email: Yup.string().email('Invalid email').required(t('errors.required')),
|
||||
firstName: Yup.string().required(t('errors.required')),
|
||||
lastName: Yup.string().required(t('errors.required')),
|
||||
password: Yup.string().required(t('errors.required')),
|
||||
repeatPassword: Yup.string().required(t('errors.required')),
|
||||
phone: Yup.string().required(t('errors.required')),
|
||||
roleId: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: async (values) => {
|
||||
if (file) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', file)
|
||||
await singleUpload.mutateAsync(formData, {
|
||||
onSuccess: (data) => {
|
||||
values.profilePic = data?.data?.url
|
||||
handleCreateUser(values)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
values.profilePic = undefined
|
||||
handleCreateUser(values)
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -18,6 +84,8 @@ const CreateUser: FC = () => {
|
||||
</div>
|
||||
<Button
|
||||
className='w-fit px-8'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createUser.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
@@ -40,31 +108,43 @@ const CreateUser: FC = () => {
|
||||
<div className='rowTwoInput mt-8'>
|
||||
<Input
|
||||
label={t('user.name')}
|
||||
{...formik.getFieldProps('firstName')}
|
||||
error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('user.family')}
|
||||
{...formik.getFieldProps('lastName')}
|
||||
error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
|
||||
/>
|
||||
</div>
|
||||
<div className='rowTwoInput mt-8'>
|
||||
<Input
|
||||
{/* <Input
|
||||
label={t('user.title_job')}
|
||||
/>
|
||||
/> */}
|
||||
<Select
|
||||
label={t('user.role')}
|
||||
placeholder={t('select')}
|
||||
items={[
|
||||
{ label: 'Admin', value: 'admin' },
|
||||
{ label: 'User', value: 'user' },
|
||||
]}
|
||||
items={getRoles.data?.data?.roles?.map((item: RoleItemType) => {
|
||||
return {
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}
|
||||
})}
|
||||
{...formik.getFieldProps('roleId')}
|
||||
error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='rowTwoInput mt-8'>
|
||||
<Input
|
||||
label={t('user.email')}
|
||||
{...formik.getFieldProps('email')}
|
||||
error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
|
||||
/>
|
||||
<Input
|
||||
label={t('user.phone_number')}
|
||||
{...formik.getFieldProps('phone')}
|
||||
error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -73,11 +153,17 @@ const CreateUser: FC = () => {
|
||||
<div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
|
||||
<Input
|
||||
label={t('user.password')}
|
||||
{...formik.getFieldProps('password')}
|
||||
error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
|
||||
type='password'
|
||||
/>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('user.reapeat_password')}
|
||||
{...formik.getFieldProps('repeatPassword')}
|
||||
error_text={formik.touched.repeatPassword && formik.errors.repeatPassword ? formik.errors.repeatPassword : ''}
|
||||
type='password'
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -88,7 +174,7 @@ const CreateUser: FC = () => {
|
||||
<div className='mt-2'>
|
||||
<UploadBoxDraggble
|
||||
label={t('user.image')}
|
||||
onChange={() => null}
|
||||
onChange={(file) => setFile(file[0])}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
+56
-54
@@ -1,16 +1,21 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetUsers } from './hooks/useUserData'
|
||||
import { UserItemType } from './types/UserTypes'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
|
||||
const UsersList: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const getUsers = useGetUsers(search)
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -21,6 +26,7 @@ const UsersList: FC = () => {
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => navigate(Pages.users.create)}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
@@ -34,66 +40,62 @@ const UsersList: FC = () => {
|
||||
</div>
|
||||
|
||||
<div className='flex justify-between items-center mt-12'>
|
||||
<div className='flex gap-4'>
|
||||
<Select
|
||||
className='w-36'
|
||||
items={[
|
||||
{ label: 'All', value: 'all' },
|
||||
{ label: 'Active', value: 'active' },
|
||||
{ label: 'Inactive', value: 'inactive' },
|
||||
]}
|
||||
placeholder={t('service.category')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Input
|
||||
variant='search'
|
||||
placeholder={t('service.search')}
|
||||
className='bg-white border border-border'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('user.name')} />
|
||||
<Td text={t('user.title_job')} />
|
||||
<Td text={t('user.email')} />
|
||||
<Td text={t('user.role')} />
|
||||
<Td text={t('detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text='مهرداد مظفری' />
|
||||
<Td text={'کارشناس فنی'} />
|
||||
<Td text={'info@example.com'} />
|
||||
<Td text={'سطح ۱'} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text='مهرداد مظفری' />
|
||||
<Td text={'کارشناس فنی'} />
|
||||
<Td text={'info@example.com'} />
|
||||
<Td text={'سطح ۱'} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{
|
||||
getUsers.isPending ?
|
||||
<PageLoading />
|
||||
:
|
||||
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
|
||||
<table className='w-full text-sm '>
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('user.name')} />
|
||||
<Td text={t('user.email')} />
|
||||
<Td text={t('user.role')} />
|
||||
<Td text={t('detail')} />
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getUsers.data?.data?.users?.map((item: UserItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.firstName + ' ' + item.lastName} />
|
||||
<Td text={item.email} />
|
||||
<Td text={''}>
|
||||
{
|
||||
item.roles.map((role) => (
|
||||
<div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
|
||||
{role.name}
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</Td>
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
<Td text={''} />
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -1,15 +1,21 @@
|
||||
import { FC } from 'react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { Add, Eye } from 'iconsax-react'
|
||||
import { Add } from 'iconsax-react'
|
||||
import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { useGetRoles } from './hooks/useUserData'
|
||||
import { RoleItemType } from './types/UserTypes'
|
||||
|
||||
const RolesList: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [search, setSearch] = useState<string>('')
|
||||
const getRoles = useGetRoles(search)
|
||||
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -20,6 +26,7 @@ const RolesList: FC = () => {
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => navigate(Pages.users.roleCreate)}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
@@ -38,6 +45,7 @@ const RolesList: FC = () => {
|
||||
variant='search'
|
||||
placeholder={t('user.role_search')}
|
||||
className='bg-white border border-border'
|
||||
onChangeSearchFinal={(value) => setSearch(value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -48,28 +56,26 @@ const RolesList: FC = () => {
|
||||
<tr>
|
||||
<Td text={t('user.title')} />
|
||||
<Td text={t('user.user')} />
|
||||
<Td text={t('detail')} />
|
||||
<Td text={t('user.is_admin')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text='ادمین' />
|
||||
<Td text={'۳ کاربر'} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
<tr className='tr'>
|
||||
<Td text='ادمین' />
|
||||
<Td text={'۳ کاربر'} />
|
||||
<Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td>
|
||||
</tr>
|
||||
{
|
||||
getRoles.data?.data?.roles?.map((item: RoleItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.name} />
|
||||
<Td text={item.userCount + ''} />
|
||||
<Td text={item.isAdmin ? t('yes') : t('no')} />
|
||||
{/* <Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td> */}
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as api from "../service/UserService";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { CreateRoleType } from "../types/UserTypes";
|
||||
import { CreateRoleType, CreateUserType } from "../types/UserTypes";
|
||||
|
||||
export const useGetPermissions = () => {
|
||||
return useQuery({
|
||||
@@ -14,3 +14,23 @@ export const useCreateRole = () => {
|
||||
mutationFn: (variables: CreateRoleType) => api.createRole(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetRoles = (search: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["roles", search],
|
||||
queryFn: () => api.getRoles(search),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateUser = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateUserType) => api.createUser(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetUsers = (search: string) => {
|
||||
return useQuery({
|
||||
queryKey: ["users", search],
|
||||
queryFn: () => api.getUsers(search),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateRoleType } from "../types/UserTypes";
|
||||
import { CreateRoleType, CreateUserType } from "../types/UserTypes";
|
||||
|
||||
export const getPermissions = async () => {
|
||||
const { data } = await axios.get(`/users/permissions`);
|
||||
@@ -10,3 +10,18 @@ export const createRole = async (params: CreateRoleType) => {
|
||||
const { data } = await axios.post(`/users/roles`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getRoles = async (search: string) => {
|
||||
const { data } = await axios.get(`/users/roles?q=${search}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createUser = async (params: CreateUserType) => {
|
||||
const { data } = await axios.post(`/users/admins`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getUsers = async (search: string) => {
|
||||
const { data } = await axios.get(`/users/admins?q=${search}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -2,3 +2,39 @@ export type CreateRoleType = {
|
||||
name: string;
|
||||
permissions: string[];
|
||||
};
|
||||
|
||||
export type RoleItemType = {
|
||||
id: string;
|
||||
name: string;
|
||||
isAdmin: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
userCount: number;
|
||||
};
|
||||
|
||||
export type CreateUserType = {
|
||||
phone: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
password: string;
|
||||
repeatPassword: string;
|
||||
email: string;
|
||||
roleId: string;
|
||||
profilePic?: string;
|
||||
};
|
||||
|
||||
export type UserItemType = {
|
||||
id: string;
|
||||
firstName: string;
|
||||
lastName: string;
|
||||
email: string;
|
||||
emailVerified: boolean;
|
||||
phone: string;
|
||||
profilePic?: string;
|
||||
userName: string;
|
||||
birthDate: string | null;
|
||||
nationalCode: string | null;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
roles: RoleItemType[];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user