category ticket and group user and ...
This commit is contained in:
hamid zarghami
+102
-52
@@ -4,11 +4,47 @@ import Select from '../../components/Select'
|
||||
import Input from '../../components/Input'
|
||||
import Td from '../../components/Td'
|
||||
import SwitchComponent from '../../components/Switch'
|
||||
import { CloseCircle } from 'iconsax-react'
|
||||
import { useGetGroups } from '../users/hooks/useUserData'
|
||||
import { useFormik } from 'formik'
|
||||
import { CategoriesItemType, CreateCategoryType } from './types/TicketTypes'
|
||||
import * as Yup from 'yup'
|
||||
import { GroupItemType } from '../users/types/UserTypes'
|
||||
import Button from '../../components/Button'
|
||||
import { useCreateCategory, useGetCategories } from './hooks/useTicketData'
|
||||
import Textarea from '../../components/Textarea'
|
||||
import { ErrorType } from '../../helpers/types'
|
||||
import { toast } from 'react-toastify'
|
||||
|
||||
const TicketCategory: FC = () => {
|
||||
|
||||
const { t } = useTranslation('global')
|
||||
const getGroups = useGetGroups()
|
||||
const createCategory = useCreateCategory()
|
||||
const getCategories = useGetCategories()
|
||||
|
||||
const formik = useFormik<CreateCategoryType>({
|
||||
initialValues: {
|
||||
title: '',
|
||||
description: '',
|
||||
userGroupId: '',
|
||||
isActive: true
|
||||
},
|
||||
validationSchema: Yup.object({
|
||||
title: Yup.string().required(t('errors.required')),
|
||||
userGroupId: Yup.string().required(t('errors.required')),
|
||||
description: Yup.string().required(t('errors.required')),
|
||||
}),
|
||||
onSubmit: values => {
|
||||
createCategory.mutate(values, {
|
||||
onSuccess: () => {
|
||||
formik.resetForm()
|
||||
},
|
||||
onError: (error: ErrorType) => {
|
||||
toast.error(error.response?.data?.error.message[0])
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div className='mt-4'>
|
||||
@@ -46,22 +82,18 @@ const TicketCategory: FC = () => {
|
||||
<thead className='thead'>
|
||||
<tr>
|
||||
<Td text={t('title')} />
|
||||
<Td text={t('ticket.users_count')} />
|
||||
<Td text={t('status')} />
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr className='tr'>
|
||||
<Td text='بخش فنی' />
|
||||
<Td text={'2'} />
|
||||
<Td text={''}>
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => null}
|
||||
/>
|
||||
</Td>
|
||||
|
||||
</tr>
|
||||
{
|
||||
getCategories.data?.data?.ticketCategories?.map((item: CategoriesItemType) => (
|
||||
<tr className='tr'>
|
||||
<Td text={item.title} />
|
||||
<Td text={item.isActive ? t('active') : t('inactive')} />
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -79,63 +111,81 @@ const TicketCategory: FC = () => {
|
||||
</div>
|
||||
|
||||
<SwitchComponent
|
||||
active
|
||||
onChange={() => null}
|
||||
active={formik.values.isActive}
|
||||
onChange={(value) => formik.setFieldValue('isActive', value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Input
|
||||
label={t('ticket.title_category')}
|
||||
{...formik.getFieldProps('title')}
|
||||
error_text={formik.touched.title && formik.errors.title ? formik.errors.title : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Textarea
|
||||
label={t('description')}
|
||||
{...formik.getFieldProps('description')}
|
||||
error_text={formik.touched.description && formik.errors.description ? formik.errors.description : ''}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6'>
|
||||
<Select
|
||||
label={t('ticket.users')}
|
||||
items={[
|
||||
{
|
||||
label: '',
|
||||
value: ''
|
||||
}
|
||||
]}
|
||||
items={getGroups.data?.data?.usersGroup?.map((item: GroupItemType) => ({
|
||||
label: item.name,
|
||||
value: item.id
|
||||
}))}
|
||||
{...formik.getFieldProps('userGroupId')}
|
||||
error_text={formik.touched.userGroupId && formik.errors.userGroupId ? formik.errors.userGroupId : ''}
|
||||
placeholder={t('select')}
|
||||
className='border'
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
<div className='mt-6'>
|
||||
<Button
|
||||
label={t('submit')}
|
||||
onClick={() => formik.handleSubmit()}
|
||||
isLoading={createCategory.isPending}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* <div className='mt-6 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap'>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
<div className='bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg'>
|
||||
<div className=' '>
|
||||
سیما فرهادی
|
||||
</div>
|
||||
<CloseCircle
|
||||
variant='Bold'
|
||||
className='size-4'
|
||||
color='red'
|
||||
/>
|
||||
</div>
|
||||
</div> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import * as api from "../service/TicketServiec";
|
||||
import { AddMessageTicketType } from "../types/TicketTypes";
|
||||
import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
|
||||
|
||||
export const useGetTickets = (status: string) => {
|
||||
return useQuery({
|
||||
@@ -36,3 +36,17 @@ export const useCloseTicket = () => {
|
||||
mutationFn: (id: string) => api.closeTicket(id),
|
||||
});
|
||||
};
|
||||
|
||||
export const useCreateCategory = () => {
|
||||
return useMutation({
|
||||
mutationFn: (variables: CreateCategoryType) =>
|
||||
api.createCategory(variables),
|
||||
});
|
||||
};
|
||||
|
||||
export const useGetCategories = () => {
|
||||
return useQuery({
|
||||
queryKey: ["categories"],
|
||||
queryFn: () => api.getCategories(),
|
||||
});
|
||||
};
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import axios from "../../../config/axios";
|
||||
import { AddMessageTicketType } from "../types/TicketTypes";
|
||||
import { AddMessageTicketType, CreateCategoryType } from "../types/TicketTypes";
|
||||
|
||||
export const getTickets = async (status: string) => {
|
||||
const { data } = await axios.get(`/tickets/admin?status=${status}`);
|
||||
@@ -23,3 +23,13 @@ export const closeTicket = async (id: string) => {
|
||||
const { data } = await axios.post(`/tickets/${id}/close`);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const createCategory = async (params: CreateCategoryType) => {
|
||||
const { data } = await axios.post(`/tickets/category`, params);
|
||||
return data;
|
||||
};
|
||||
|
||||
export const getCategories = async () => {
|
||||
const { data } = await axios.get(`/tickets/categories`);
|
||||
return data;
|
||||
};
|
||||
|
||||
@@ -53,3 +53,19 @@ export type TicketMessageType = {
|
||||
id: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
export type CreateCategoryType = {
|
||||
title: string;
|
||||
description: string;
|
||||
userGroupId: string;
|
||||
isActive: boolean;
|
||||
};
|
||||
|
||||
export type CategoriesItemType = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
isActive: boolean;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user