category ticket and group user and ...
This commit is contained in:
hamid zarghami
@@ -0,0 +1,136 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { useCreateGroup, useGetUsers } from './hooks/useUserData'
|
||||
import { useFormik } from 'formik'
|
||||
import { TickCircle } from 'iconsax-react'
|
||||
import { CreateGroupType, UserItemType } from './types/UserTypes'
|
||||
import * as Yup from 'yup'
|
||||
import PageLoading from '../../components/PageLoading'
|
||||
import Input from '../../components/Input'
|
||||
import CheckBoxComponent from '../../components/CheckBoxComponent'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { toast } from 'react-toastify'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
|
||||
const GroupCreate: FC = () => {
|
||||
|
||||
const navigate = useNavigate()
|
||||
const { t } = useTranslation('global')
|
||||
const [users, setUsers] = useState<string[]>([])
|
||||
const createGroup = useCreateGroup()
|
||||
const getUsers = useGetUsers('')
|
||||
|
||||
const formik = useFormik<CreateGroupType>({
|
||||
initialValues: {
|
||||
name: '',
|
||||
description: '',
|
||||
userIds: []
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
name: Yup.string()
|
||||
.required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: (values) => {
|
||||
if (users.length > 0) {
|
||||
values.userIds = users
|
||||
createGroup.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
navigate(Pages.users.groupList)
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error?.message[0])
|
||||
}
|
||||
})
|
||||
} else {
|
||||
toast.error(t('user.error_count_users'))
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
const handleAdd = (id: string) => {
|
||||
if (users.includes(id)) {
|
||||
setUsers(users.filter(user => user !== id))
|
||||
} else {
|
||||
setUsers([...users, id])
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex justify-between items-center'>
|
||||
<div>
|
||||
{t('user.group_add')}
|
||||
</div>
|
||||
<Button
|
||||
className='w-fit px-8'
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createGroup.isPending}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<TickCircle
|
||||
className='size-5'
|
||||
color='white'
|
||||
/>
|
||||
<div className='text-sm'>
|
||||
{t('user.submit_group')}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{
|
||||
getUsers.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.name')}
|
||||
{...formik.getFieldProps('name')}
|
||||
error_text={formik.touched.name && formik.errors.name ? formik.errors.name : ''}
|
||||
/>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Textarea
|
||||
label={t('description')}
|
||||
{...formik.getFieldProps('description')}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<div className='text-sm'>
|
||||
{t('user.users')}
|
||||
</div>
|
||||
|
||||
<div className='mt-5 text-sm flex flex-wrap gap-5'>
|
||||
{
|
||||
getUsers.data?.data?.users?.map((item: UserItemType) => {
|
||||
return (
|
||||
<div key={item.id} className='flex flex-1 min-w-[23%] items-center'>
|
||||
<CheckBoxComponent
|
||||
checked={users.includes(item.id)}
|
||||
onChange={() => handleAdd(item.id)}
|
||||
/>
|
||||
<div className='mt-0.5'>{item.firstName + ' ' + item.lastName}</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupCreate
|
||||
@@ -0,0 +1,72 @@
|
||||
import { FC } from 'react'
|
||||
import { useGetGroups } from './hooks/useUserData'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../components/Button'
|
||||
import { useNavigate } from 'react-router-dom'
|
||||
import { Pages } from '../../config/Pages'
|
||||
import { Add } from 'iconsax-react'
|
||||
import Td from '../../components/Td'
|
||||
import { GroupItemType } from './types/UserTypes'
|
||||
|
||||
const GroupList: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const navigate = useNavigate()
|
||||
const getGroups = useGetGroups()
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
<div className='flex w-full justify-between items-center'>
|
||||
<div>
|
||||
{t('user.groups')}
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className='px-5'
|
||||
onClick={() => navigate(Pages.users.groupList)}
|
||||
>
|
||||
<div className='flex gap-2'>
|
||||
<Add
|
||||
className='size-5'
|
||||
color='#fff'
|
||||
/>
|
||||
<div>{t('user.group_add')}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</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.group_name')} />
|
||||
<Td text={t('user.user')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{
|
||||
getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => {
|
||||
return (
|
||||
<tr key={item.id} className='tr'>
|
||||
<Td text={item.name} />
|
||||
<Td text={''}>
|
||||
{item.users.map((user) => user.firstName + ' ' + user.lastName).join(', ')}
|
||||
</Td>
|
||||
{/* <Td text={''}>
|
||||
<Link to={Pages.ticket.detail + '1'}>
|
||||
<Eye size={20} color='#8C90A3' />
|
||||
</Link>
|
||||
</Td> */}
|
||||
</tr>
|
||||
)
|
||||
})
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default GroupList
|
||||
@@ -1,6 +1,10 @@
|
||||
import * as api from "../service/UserService";
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { CreateRoleType, CreateUserType } from "../types/UserTypes";
|
||||
import {
|
||||
CreateGroupType,
|
||||
CreateRoleType,
|
||||
CreateUserType,
|
||||
} from "../types/UserTypes";
|
||||
|
||||
export const useGetPermissions = () => {
|
||||
return useQuery({
|
||||
@@ -34,3 +38,16 @@ export const useGetUsers = (search: string) => {
|
||||
queryFn: () => api.getUsers(search),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateGroup = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateGroupType) => api.createGroup(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetGroups = () => {
|
||||
return useQuery({
|
||||
queryKey: ["users-group"],
|
||||
queryFn: () => api.getGroups(),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { CreateRoleType, CreateUserType } from "../types/UserTypes";
|
||||
import {
|
||||
CreateGroupType,
|
||||
CreateRoleType,
|
||||
CreateUserType,
|
||||
} from "../types/UserTypes";
|
||||
|
||||
export const getPermissions = async () => {
|
||||
const { data } = await axios.get(`/users/permissions`);
|
||||
@@ -25,3 +29,13 @@ export const getUsers = async (search: string) => {
|
||||
const { data } = await axios.get(`/users/admins?q=${search}`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createGroup = async (params: CreateGroupType) => {
|
||||
const { data } = await axios.post(`/users/user-group`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getGroups = async () => {
|
||||
const { data } = await axios.get(`/users/user-group`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -38,3 +38,18 @@ export type UserItemType = {
|
||||
updatedAt: string;
|
||||
roles: RoleItemType[];
|
||||
};
|
||||
|
||||
export type CreateGroupType = {
|
||||
name: string;
|
||||
description: string;
|
||||
userIds: string[];
|
||||
};
|
||||
|
||||
export type GroupItemType = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
users: UserItemType[];
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user