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

category ticket and group user and ...

Browse Source
This commit is contained in:
hamid zarghami
2025-03-01 16:41:20 +03:30
parent cfd4284cd8
commit 0cf7dede8b
14 changed files with 430 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Textarea.tsx
+1 -1
View File
@@ -11,7 +11,7 @@ const Textarea: FC<Props> = (props: Props) => {
<div className='w-full relative'>
{
props.label &&
<div className='text-xs text-gray-500 absolute top-2 right-2' >
<div className='text-sm' >
{props.label}
</div>
}
src/config/Pages.ts
+2
View File
@@ -65,6 +65,8 @@ export const Pages = {
create: "/users/create",
roleList: "/users/roles-all",
roleCreate: "/users/roles-add",
groupAdd: "/users/group-add",
groupList: "/users/groups",
},
ads: {
list: "/ads/list",
src/langs/fa.json
+13 -1
View File
@@ -251,6 +251,8 @@
"high": "بالا",
"service": "سرویس"
},
"active": "فعال",
"inactive": "غیرفعال",
"attach": "پیوست",
"date": "تاریخ",
"status": "وضعیت",
@@ -555,8 +557,18 @@
"permissions": "دسترسی ها",
"status_role": "وضعیت نقش",
"error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
"is_admin": "آیا ادمین است؟"
"is_admin": "آیا ادمین است؟",
"user_group": "گروه کاربری",
"add_user_group": "ساخت گروه کاربری",
"users": "کاربران",
"group_add": "ساخت گروه",
"submit_group": "ثبت گروه",
"error_count_users": "حداقل یک کاربر باید انتخاب شود",
"list_user_group": "لیست گروه های کاربری",
"groups": "گروه ها",
"group_name": "نام گروه"
},
"submit": "ثبت",
"yes": "بله",
"no": "خیر",
"profile": {
src/pages/ticket/Category.tsx
+102 -52
View File
@@ -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>
src/pages/ticket/hooks/useTicketData.ts
+15 -1
View File
@@ -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(),
});
};
src/pages/ticket/service/TicketServiec.ts
+11 -1
View File
@@ -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;
};
src/pages/ticket/types/TicketTypes.ts
+16
View File
@@ -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;
};
src/pages/users/GroupCreate.tsx
+136
View File
@@ -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
src/pages/users/GroupList.tsx
+72
View File
@@ -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
src/pages/users/hooks/useUserData.ts
+18 -1
View File
@@ -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(),
});
};
src/pages/users/service/UserService.ts
+15 -1
View File
@@ -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;
};
src/pages/users/types/UserTypes.ts
+15
View File
@@ -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[];
};
src/router/Main.tsx
+4
View File
@@ -52,6 +52,8 @@ import PaymentList from '../pages/payment/List'
import LearningCategory from '../pages/learning/Category'
import CreateLearning from '../pages/learning/Create'
import Plans from '../pages/service/Plans'
import GroupCreate from '../pages/users/GroupCreate'
import GroupList from '../pages/users/GroupList'
const MainRouter: FC = () => {
@@ -112,6 +114,8 @@ const MainRouter: FC = () => {
<Route path={Pages.users.create} element={<CreateUser />} />
<Route path={Pages.users.roleList} element={<RolesList />} />
<Route path={Pages.users.roleCreate} element={<RoleCreate />} />
<Route path={Pages.users.groupAdd} element={<GroupCreate />} />
<Route path={Pages.users.groupList} element={<GroupList />} />
<Route path={Pages.cardBank.create} element={<CreateBankCard />} />
<Route path={Pages.cardBank.list} element={<CardBankList />} />
<Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
src/shared/components/UsersSubMenu.tsx
+10
View File
@@ -46,6 +46,16 @@ const UsersSubMenu: FC = () => {
isActive={isActive('roles-add')}
link={Pages.users.roleCreate}
/>
<SubMenuItem
title={t('user.add_user_group')}
isActive={isActive('group-add')}
link={Pages.users.groupAdd}
/>
<SubMenuItem
title={t('user.list_user_group')}
isActive={isActive('groups')}
link={Pages.users.groupList}
/>
</div>
</div>
)