joseph
/
ManagementSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Build page Ticket management

This commit is contained in:
Truong Vo 2024-08-08 17:09:12 +07:00
parent 4fd24d2407
commit 64d3bc72f0
4 changed files with 269 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
BACKEND/Modules/Admin/app/Http/Controllers/TicketController.php
View File

@ -49,6 +49,21 @@ class TicketController extends Controller
]
);
$this->searchRequest(
builder: $tickets,
value: $request->get('search'),
fields: [
'users.name',
"start_date",
"startPeriod.c_name",
"end_date",
"endPeriod.c_name",
"typeReason.c_name",
'status',
"reason",
]
);
$responseData = array_merge(
$tickets
->join('users', 'tickets.user_id', '=', 'users.id')
@ -111,8 +126,58 @@ class TicketController extends Controller
]
);
$this->searchRequest(
builder: $tickets,
value: $request->get('search'),
fields: [
'users.name',
"start_date",
"startPeriod.c_name",
"end_date",
"endPeriod.c_name",
"typeReason.c_name",
'status',
"reason",
"admin_note"
]
);
if ($request->typeReason != '') {
$tickets = $tickets->where('tickets.type', '=', $request->typeReason);
}
if ($request->statusFilter != '') {
$tickets = $tickets->where('tickets.status', '=', $request->statusFilter);
}
$responseData = array_merge(
$tickets->orderBy('created_at', 'desc')->paginate($request->get('per_page'))->toArray(),
$tickets
->join('users', 'tickets.user_id', '=', 'users.id')
->leftJoin("categories as startPeriod", function ($join) {
$join->on('start_period', '=', 'startPeriod.c_code');
$join->on('startPeriod.c_type', DB::raw("CONCAT('TIME_TYPE')"));
})
->leftJoin("categories as endPeriod", function ($join) {
$join->on('end_period', '=', 'endPeriod.c_code');
$join->on('endPeriod.c_type', DB::raw("CONCAT('TIME_TYPE')"));
})
->leftJoin("categories as typeReason", function ($join) {
$join->on('type', '=', 'typeReason.c_code');
$join->on('typeReason.c_type', DB::raw("CONCAT('REASON')"));
})
->leftJoin("categories as statusTickets", function ($join) {
$join->on('status', '=', 'statusTickets.c_code');
$join->on('statusTickets.c_type', DB::raw("CONCAT('STATUS_TICKETS')"));
})
->select(
'users.name as user_name',
'users.email',
'tickets.*',
'startPeriod.c_name as startPeriodName',
'endPeriod.c_name as endPeriodName',
'typeReason.c_name as typeReasonName',
'statusTickets.c_name as statusTicketsName',
)
->orderBy('tickets.created_at', 'desc')->paginate($request->get('per_page'))->toArray(),
['status' => true]
);
@ -251,6 +316,7 @@ class TicketController extends Controller
$ticket['updated_by'] = $admin->name;
$ticket['admin_note'] = $admin_note;
$ticket['status'] = 'REFUSED';
$ticket->save();
return response()->json(['message' => "refused", 'status' => true]);
}

2
FRONTEND/src/api/Admin.ts
View File

@ -78,6 +78,8 @@ export const getLeaveManagement = API_URL + 'v1/admin/leave-management'
export const updateNoteLeave = API_URL + 'v1/admin/leave-management/saveNoteLeave'
//Tickets
export const getTickets = API_URL + 'v1/admin/ticket/all'
export const getTicketsOfUser = API_URL + 'v1/admin/ticket/getByUserId'
export const deleteTicket = API_URL + 'v1/admin/ticket/delete'
export const addTicket = API_URL + 'v1/admin/ticket/create'
export const handleTicket = API_URL + 'v1/admin/ticket/handle-ticket'

57
FRONTEND/src/pages/Tickets/Tickets.tsx
View File

@ -64,6 +64,12 @@ interface DataTimeType {
c_name: string
}
interface FilterInfo {
key: string
name: string
type: string
}
const Tickets = () => {
const [listTickets, setListTiskets] = useState<TListTickets>({
data: [],
@ -127,7 +133,7 @@ const Tickets = () => {
},
{
name: 'start_date',
size: '11%',
size: '8%',
header: 'From Date',
render: (row: any) => {
return moment(row.start_date).format('DD/MM/YYYY')
@ -140,7 +146,7 @@ const Tickets = () => {
},
{
name: 'end_date',
size: '10%',
size: '8%',
header: 'End Date',
render: (row: any) => {
return moment(row.end_date).format('DD/MM/YYYY')
@ -153,7 +159,7 @@ const Tickets = () => {
},
{
name: 'reason',
size: '20%',
size: '15%',
header: 'Notes',
render: (row: any) => {
return (
@ -178,7 +184,7 @@ const Tickets = () => {
},
{
name: 'status',
size: '8%',
size: '5%',
header: 'Status',
render: (row: any) => {
switch (row.status) {
@ -193,6 +199,31 @@ const Tickets = () => {
}
},
},
{
name: 'admin_note',
size: '15%',
header: 'Admin Notes',
render: (row: any) => {
return (
<HoverCard width={280} shadow="md">
<HoverCard.Target>
<Text fz={'sm'}>
{row.admin_note !== null &&
row.admin_note !== '' &&
row.admin_note.length > 25
? row.admin_note.slice(0, 25) + '...'
: row.admin_note}
</Text>
</HoverCard.Target>
<HoverCard.Dropdown>
<Textarea size="sm" autosize>
{row.admin_note}
</Textarea>
</HoverCard.Dropdown>
</HoverCard>
)
},
},
{
name: '#',
size: '5%',
@ -215,23 +246,7 @@ const Tickets = () => {
},
]
const filterInfo = [
{
key: 'reason',
name: 'Notes',
type: 'text',
},
{
key: 'start_date',
name: 'From Date',
type: 'date',
},
{
key: 'end_date',
name: 'End Date',
type: 'date',
},
]
const filterInfo: FilterInfo[] = []
const getAllTickets = async () => {
try {

358
FRONTEND/src/pages/TicketsManagement/TicketsManagement.tsx
View File

@ -1,40 +1,28 @@
import {
addTicket,
deleteTicket,
getListMaster,
getTicketsOfUser,
} from '@/api/Admin'
import { getListMaster, getTickets, handleTicket } from '@/api/Admin'
import { DataTablePagination } from '@/components/DataTable/DataTable'
import { Xdelete, create } from '@/rtk/helpers/CRUD'
import { create } from '@/rtk/helpers/CRUD'
import { get } from '@/rtk/helpers/apiService'
import {
Badge,
Box,
Button,
Dialog,
Group,
HoverCard,
Modal,
Select,
Text,
Textarea,
} from '@mantine/core'
import { DateInput } from '@mantine/dates'
import { useForm } from '@mantine/form'
import { notifications } from '@mantine/notifications'
import { IconTrash } from '@tabler/icons-react'
import { IconCheckbox, IconSquareXFilled } from '@tabler/icons-react'
import moment from 'moment'
import { useEffect, useState } from 'react'
import classes from './TicketsManagement.module.css'
type TTickets = {
id: number
start_period: string
end_period: string
type: string
start_date: Date
end_date: Date
reason: string
ticket_id: number
admin_note: string
action: string
}
type TListTickets = {
@ -52,13 +40,13 @@ interface User {
updated_at: string | null
}
interface DataReason {
id: number
c_code: string
c_name: string
interface FilterInfo {
key: string
name: string
type: string
}
interface DataTimeType {
interface DataReason {
id: number
c_code: string
c_name: string
@ -70,10 +58,11 @@ const TicketsManagement = () => {
})
const [action, setAction] = useState('')
const [item, setItem] = useState({ id: 0 })
const [activeBtn, setActiveBtn] = useState(false)
const [disableBtn, setDisableBtn] = useState(false)
const [dataTimeType, setDataTimeType] = useState<DataTimeType[]>([])
const [filter, setFilter] = useState({
typeReason: '',
statusFilter: '',
})
const [dataReason, setDataReason] = useState<DataReason[]>([])
const getListMasterByType = async (type: string) => {
@ -97,11 +86,6 @@ const TicketsManagement = () => {
useEffect(() => {
const fetchData = async () => {
const resultTimeType = await getListMasterByType('TIME_TYPE')
setDataTimeType(
resultTimeType.filter((item: DataTimeType) => item.c_code !== 'ALL'),
)
const resultReason = await getListMasterByType('REASON')
setDataReason(resultReason)
}
@ -127,7 +111,7 @@ const TicketsManagement = () => {
},
{
name: 'start_date',
size: '11%',
size: '8%',
header: 'From Date',
render: (row: any) => {
return moment(row.start_date).format('DD/MM/YYYY')
@ -140,7 +124,7 @@ const TicketsManagement = () => {
},
{
name: 'end_date',
size: '10%',
size: '8%',
header: 'End Date',
render: (row: any) => {
return moment(row.end_date).format('DD/MM/YYYY')
@ -153,7 +137,7 @@ const TicketsManagement = () => {
},
{
name: 'reason',
size: '20%',
size: '15%',
header: 'Notes',
render: (row: any) => {
return (
@ -178,7 +162,7 @@ const TicketsManagement = () => {
},
{
name: 'status',
size: '8%',
size: '5%',
header: 'Status',
render: (row: any) => {
switch (row.status) {
@ -193,6 +177,31 @@ const TicketsManagement = () => {
}
},
},
{
name: 'admin_note',
size: '15%',
header: 'Admin Notes',
render: (row: any) => {
return (
<HoverCard width={280} shadow="md">
<HoverCard.Target>
<Text fz={'sm'}>
{row.admin_note !== null &&
row.admin_note !== '' &&
row.admin_note.length > 25
? row.admin_note.slice(0, 25) + '...'
: row.admin_note}
</Text>
</HoverCard.Target>
<HoverCard.Dropdown>
<Textarea size="sm" autosize>
{row.admin_note}
</Textarea>
</HoverCard.Dropdown>
</HoverCard>
)
},
},
{
name: '#',
size: '5%',
@ -200,11 +209,22 @@ const TicketsManagement = () => {
render: (row: any) => {
return row.status === 'WAITING' ? (
<Box className={classes.optionIcon}>
<IconTrash
<IconCheckbox
className={classes.editIcon}
onClick={() => {
setAction('confirm')
setItem(row)
form.reset()
}}
width={20}
height={20}
/>
<IconSquareXFilled
className={classes.deleteIcon}
onClick={() => {
setAction('delete')
setAction('refuse')
setItem(row)
form.reset()
}}
width={20}
height={20}
@ -215,28 +235,53 @@ const TicketsManagement = () => {
},
]
const filterInfo = [
{
key: 'reason',
name: 'Notes',
type: 'text',
},
{
key: 'start_date',
name: 'From Date',
type: 'date',
},
{
key: 'end_date',
name: 'End Date',
type: 'date',
},
const filterInfo: FilterInfo[] = [
// {
// key: 'users.name',
// name: 'User',
// type: 'text',
// },
// {
// key: 'start_date',
// name: 'From Date',
// type: 'date',
// },
// {
// key: 'startPeriod.c_name',
// name: 'Start Period',
// type: 'text',
// },
// {
// key: 'end_date',
// name: 'End Date',
// type: 'date',
// },
// {
// key: 'endPeriod.c_name',
// name: 'End Period',
// type: 'text',
// },
// {
// key: 'typeReason.c_name',
// name: 'Reason',
// type: 'text',
// },
// {
// key: 'status',
// name: 'Status',
// type: 'text',
// }
]
const getAllTickets = async () => {
try {
const searchParams = new URLSearchParams(window.location.search)
const params = {}
console.log(searchParams, 'searchParams')
const params = {
typeReason: filter.typeReason,
statusFilter: filter.statusFilter,
}
for (const [key, value] of searchParams.entries()) {
if (key === 'page' && value === '') {
@ -245,8 +290,9 @@ const TicketsManagement = () => {
Object.assign(params, { [`${key}`]: value })
}
}
console.log(params, 'params')
const res = await get(getTicketsOfUser, params)
const res = await get(getTickets, params)
if (res.status) {
setListTiskets(res)
}
@ -259,18 +305,14 @@ const TicketsManagement = () => {
}
}
const handleCreate = async (values: TTickets) => {
const handleSave = async (values: TTickets) => {
try {
const res = await create(
addTicket,
handleTicket,
{
// time_string: moment(values.time_string).format('YYYY-MM-DD HH:mm:ss'),
start_date: moment(values.start_date).format('YYYY-MM-DD'),
start_period: values.start_period,
end_date: moment(values.end_date).format('YYYY-MM-DD'),
end_period: values.end_period,
type: values.type,
reason: values.reason,
ticket_id: item.id,
action: action,
admin_note: values.admin_note,
},
getAllTickets,
)
@ -283,27 +325,15 @@ const TicketsManagement = () => {
}
}
const handleDelete = async (id: number) => {
try {
await Xdelete(deleteTicket, { ticket_id: id }, getAllTickets)
} catch (error) {
console.log(error)
}
}
useEffect(() => {
getAllTickets()
}, [])
}, [filter])
const form = useForm({
initialValues: {
id: 0,
start_date: new Date(),
start_period: '',
end_date: new Date(),
end_period: '',
type: '',
reason: '',
ticket_id: 0,
action: '',
admin_note: '',
},
})
@ -314,172 +344,94 @@ const TicketsManagement = () => {
<Text>Admin/</Text>
Tickets Management
</h3>
<Button
m={5}
onClick={() => {
setAction('add')
form.reset()
}}
>
+ Add
</Button>
</div>
<Box p={20}>
<Box display={'flex'} p={15}>
<Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
<Box w="100%" display={'flex'}>
<Select
clearable
w="50%"
value={filter.typeReason}
size="xs"
label="Reason"
data={dataReason.map((user) => ({
value: user.c_code.toString(),
label: user.c_name,
}))}
onChange={(e) => {
setFilter({ ...filter, typeReason: e! })
}}
></Select>
<Select
clearable
w="50%"
value={filter.statusFilter}
size="xs"
ml={'sm'}
label="Status"
data={[
{ value: 'WAITING', label: 'WAITING' },
{ value: 'CONFIRM', label: 'CONFIRM' },
{ value: 'REFUSED', label: 'REFUSED' },
]}
onChange={(e) => {
setFilter({ ...filter, statusFilter: e! })
}}
></Select>
</Box>
</Box>
</Box>
<Box>
{listTickets.data.length > 0 && (
<DataTablePagination
filterInfo={filterInfo}
data={listTickets}
columns={columns}
// searchInput
searchInput
size=""
/>
)}
</Box>
{/* Add/Edit User modal */}
<Modal
opened={action === 'add' || action === 'edit'}
opened={action === 'confirm' || action === 'refuse'}
onClose={() => {
setAction('')
form.reset()
}}
title={
<Text pl={'sm'} fw={700} fz={'lg'}>
{action === 'add' && 'Add Ticket'}
{action === 'confirm' ? 'Confirm Ticket' : 'Refuse Ticket'}
</Text>
}
>
<form
onSubmit={form.onSubmit(async (values) => {
setDisableBtn(true)
action === 'add' && (await handleCreate(values))
await handleSave(values)
setDisableBtn(false)
})}
>
<Box pl={'md'} pr={'md'}>
<Box display={'flex'}>
<Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
<DateInput
required
mb={'md'}
label={'From Date'}
value={new Date(form.values.start_date)}
valueFormat="DD/MM/YYYY"
onChange={(e) => form.setFieldValue('start_date', e!)}
></DateInput>
<Select
required
mb={'md'}
label={'Start Period'}
data={dataTimeType.map((item) => {
return { value: item.c_code.toString(), label: item.c_name }
})}
value={form.values.start_period}
error={form.errors.start_period}
onChange={(e) => form.setFieldValue('start_period', e!)}
/>
<Select
required
mb={'md'}
searchable
label="Type"
data={dataReason.map((user) => ({
value: user.c_code.toString(),
label: user.c_name,
}))}
value={form.values.type}
error={form.errors.type}
onChange={(e) => form.setFieldValue('type', e!)}
/>
</Box>
<Box
style={{ display: 'flex', flexFlow: 'column' }}
w={'20%'}
></Box>
<Box style={{ display: 'flex', flexFlow: 'column' }} w={'40%'}>
<DateInput
required
mb={'md'}
label={'End Date'}
value={new Date(form.values.end_date)}
valueFormat="DD/MM/YYYY"
onChange={(e) => form.setFieldValue('end_date', e!)}
></DateInput>
<Select
required
mb={'md'}
label={'End Period'}
data={dataTimeType.map((item) => {
return { value: item.c_code.toString(), label: item.c_name }
})}
value={form.values.end_period}
error={form.errors.end_period}
onChange={(e) => form.setFieldValue('end_period', e!)}
/>
</Box>
</Box>
<Textarea
label="Reason"
label="Admin Notes"
required
value={form.values.reason}
onChange={(e) => form.setFieldValue('reason', e.target.value)}
value={form.values.admin_note}
onChange={(e) => form.setFieldValue('admin_note', e.target.value)}
/>
<Box ta={'center'}>
{action === 'add' && (
<Button
mt={'lg'}
bg={'green'}
type="submit"
disabled={disableBtn}
>
Create
Save
</Button>
)}
</Box>
</Box>
</form>
</Modal>
<Dialog
className={classes.dialog}
opened={action === 'delete'}
withCloseButton
onClose={() => setAction('')}
size="lg"
radius="md"
position={{ top: 30, right: 10 }}
>
<Text className={classes.dialogText} size="sm" mb="xs" fw={500}>
Do you want to delete this record?
<Group justify="center" m={10}>
<Button
disabled={activeBtn}
fw={700}
size="xs"
variant="light"
onClick={async () => {
setActiveBtn(true)
await handleDelete(item.id)
setActiveBtn(false)
setAction('')
}}
>
Yes
</Button>
<Button
fw={700}
size="xs"
variant="light"
onClick={() => setAction('')}
>
Cancel
</Button>
</Group>
</Text>
</Dialog>
</div>
)
}