Merge pull request 'truong-sprint-1' (#6) from truong-sprint-1 into master
Reviewed-on: #6
This commit is contained in:
commit
348d09e1b8
|
|
@ -50,7 +50,35 @@ class TicketController extends Controller
|
|||
);
|
||||
|
||||
$responseData = array_merge(
|
||||
$tickets->where('user_id', auth('admins')->user()->id)->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')"));
|
||||
})
|
||||
->where('user_id', auth('admins')->user()->id)->orderBy('tickets.created_at', 'desc')
|
||||
->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',
|
||||
)
|
||||
->paginate($request->get('per_page'))->toArray(),
|
||||
['status' => true]
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -76,3 +76,8 @@ export const getListMaster = API_URL + 'v1/admin/category/get-list-master'
|
|||
//LeaveManagement
|
||||
export const getLeaveManagement = API_URL + 'v1/admin/leave-management'
|
||||
export const updateNoteLeave = API_URL + 'v1/admin/leave-management/saveNoteLeave'
|
||||
|
||||
//Tickets
|
||||
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'
|
||||
|
|
@ -27,7 +27,9 @@ import {
|
|||
IconPasswordUser,
|
||||
IconReport,
|
||||
IconScan,
|
||||
IconSun
|
||||
IconSun,
|
||||
IconTicket,
|
||||
IconDevices,
|
||||
} from '@tabler/icons-react'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { useLocation, useNavigate } from 'react-router-dom'
|
||||
|
|
@ -44,6 +46,8 @@ const data = [
|
|||
label: 'Leave Management',
|
||||
icon: IconCalendarClock,
|
||||
},
|
||||
{ link: '/tickets', label: 'Tickets', icon: IconTicket },
|
||||
{ link: '/tickets-management', label: 'Tickets Management', icon: IconDevices },
|
||||
// { link: '/jira', label: 'Jira', icon: IconSubtask },
|
||||
// { link: '/custom-theme', label: 'Custom Theme', icon: IconBrush },
|
||||
// { link: '/general-setting', label: 'General Setting', icon: IconSettings },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
.title {
|
||||
background-color: light-dark(var(white), var(--mantine-color-dark-7));
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-lg)
|
||||
var(--mantine-spacing-sm);
|
||||
border-bottom: solid rgba(201, 201, 201, 0.377) 1px;
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
|
||||
.editIcon {
|
||||
color: rgb(9, 132, 132);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.editIcon:hover {
|
||||
background-color: rgba(203, 203, 203, 0.809);
|
||||
}
|
||||
|
||||
.deleteIcon:hover {
|
||||
background-color: rgba(203, 203, 203, 0.809);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background-color: light-dark(white, #2d353c);
|
||||
text-align: center;
|
||||
border: solid 1px rgb(255, 145, 0);
|
||||
}
|
||||
|
||||
.dialogText {
|
||||
color: light-dark(#2d353c, white);
|
||||
}
|
||||
|
|
@ -0,0 +1,474 @@
|
|||
import {
|
||||
addTicket,
|
||||
deleteTicket,
|
||||
getListMaster,
|
||||
getTicketsOfUser,
|
||||
} from '@/api/Admin'
|
||||
import { DataTablePagination } from '@/components/DataTable/DataTable'
|
||||
import { Xdelete, create } from '@/rtk/helpers/CRUD'
|
||||
import { get } from '@/rtk/helpers/apiService'
|
||||
import {
|
||||
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 moment from 'moment'
|
||||
import { useEffect, useState } from 'react'
|
||||
import classes from './Tickets.module.css'
|
||||
|
||||
type TTickets = {
|
||||
id: number
|
||||
start_period: string
|
||||
end_period: string
|
||||
type: string
|
||||
start_date: Date
|
||||
end_date: Date
|
||||
reason: string
|
||||
}
|
||||
|
||||
type TListTickets = {
|
||||
data: User[]
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
email: string
|
||||
email_verified_at: string | null
|
||||
permission: string
|
||||
remember_token: string | null
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
interface DataReason {
|
||||
id: number
|
||||
c_code: string
|
||||
c_name: string
|
||||
}
|
||||
|
||||
interface DataTimeType {
|
||||
id: number
|
||||
c_code: string
|
||||
c_name: string
|
||||
}
|
||||
|
||||
const Tickets = () => {
|
||||
const [listTickets, setListTiskets] = useState<TListTickets>({
|
||||
data: [],
|
||||
})
|
||||
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 [dataReason, setDataReason] = useState<DataReason[]>([])
|
||||
|
||||
const getListMasterByType = async (type: string) => {
|
||||
try {
|
||||
const params = {
|
||||
type: type,
|
||||
}
|
||||
const res = await get(getListMaster, params)
|
||||
if (res.status) {
|
||||
return res.data
|
||||
}
|
||||
} catch (error: any) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: error.message ?? error,
|
||||
color: 'red',
|
||||
})
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'id',
|
||||
size: '3%',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
name: 'user_name',
|
||||
size: '17%',
|
||||
header: 'User',
|
||||
},
|
||||
{
|
||||
name: 'startPeriodName',
|
||||
size: '8%',
|
||||
header: 'Start Period',
|
||||
},
|
||||
{
|
||||
name: 'start_date',
|
||||
size: '11%',
|
||||
header: 'From Date',
|
||||
render: (row: any) => {
|
||||
return moment(row.start_date).format('DD/MM/YYYY')
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'endPeriodName',
|
||||
size: '8%',
|
||||
header: 'End Period',
|
||||
},
|
||||
{
|
||||
name: 'end_date',
|
||||
size: '10%',
|
||||
header: 'End Date',
|
||||
render: (row: any) => {
|
||||
return moment(row.end_date).format('DD/MM/YYYY')
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'typeReasonName',
|
||||
size: '10%',
|
||||
header: 'Reason',
|
||||
},
|
||||
{
|
||||
name: 'reason',
|
||||
size: '20%',
|
||||
header: 'Notes',
|
||||
render: (row: any) => {
|
||||
return (
|
||||
<HoverCard width={280} shadow="md">
|
||||
<HoverCard.Target>
|
||||
<Text fz={'sm'}>
|
||||
{row.reason !== null &&
|
||||
row.reason !== '' &&
|
||||
row.reason.length > 25
|
||||
? row.reason.slice(0, 25) + '...'
|
||||
: row.reason}
|
||||
</Text>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
<Textarea size="sm" autosize>
|
||||
{row.reason}
|
||||
</Textarea>
|
||||
</HoverCard.Dropdown>
|
||||
</HoverCard>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
size: '8%',
|
||||
header: 'Status',
|
||||
},
|
||||
{
|
||||
name: '#',
|
||||
size: '5%',
|
||||
header: 'Action',
|
||||
render: (row: any) => {
|
||||
return (
|
||||
<Box className={classes.optionIcon}>
|
||||
<IconTrash
|
||||
className={classes.deleteIcon}
|
||||
onClick={() => {
|
||||
setAction('delete')
|
||||
setItem(row)
|
||||
}}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
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 getAllTickets = async () => {
|
||||
try {
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
const params = {}
|
||||
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
if (key === 'page' && value === '') {
|
||||
Object.assign(params, { [`${key}`]: 1 })
|
||||
} else {
|
||||
Object.assign(params, { [`${key}`]: value })
|
||||
}
|
||||
}
|
||||
|
||||
const res = await get(getTicketsOfUser, params)
|
||||
if (res.status) {
|
||||
setListTiskets(res)
|
||||
}
|
||||
} catch (error: any) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: error.message ?? error,
|
||||
color: 'red',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async (values: TTickets) => {
|
||||
try {
|
||||
const res = await create(
|
||||
addTicket,
|
||||
{
|
||||
// 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,
|
||||
},
|
||||
getAllTickets,
|
||||
)
|
||||
if (res === true) {
|
||||
setAction('')
|
||||
form.reset()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await Xdelete(deleteTicket, { ticket_id: id }, getAllTickets)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllTickets()
|
||||
}, [])
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
id: 0,
|
||||
start_date: new Date(),
|
||||
start_period: '',
|
||||
end_date: new Date(),
|
||||
end_period: '',
|
||||
type: '',
|
||||
reason: '',
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classes.title}>
|
||||
<h3>
|
||||
<Text>Admin/</Text>
|
||||
Tickets
|
||||
</h3>
|
||||
<Button
|
||||
m={5}
|
||||
onClick={() => {
|
||||
setAction('add')
|
||||
form.reset()
|
||||
}}
|
||||
>
|
||||
+ Add
|
||||
</Button>
|
||||
</div>
|
||||
<Box p={20}>
|
||||
{listTickets.data.length > 0 && (
|
||||
<DataTablePagination
|
||||
filterInfo={filterInfo}
|
||||
data={listTickets}
|
||||
columns={columns}
|
||||
// searchInput
|
||||
size=""
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Add/Edit User modal */}
|
||||
<Modal
|
||||
opened={action === 'add' || action === 'edit'}
|
||||
onClose={() => {
|
||||
setAction('')
|
||||
form.reset()
|
||||
}}
|
||||
title={
|
||||
<Text pl={'sm'} fw={700} fz={'lg'}>
|
||||
{action === 'add' && 'Add Ticket'}
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<form
|
||||
onSubmit={form.onSubmit(async (values) => {
|
||||
setDisableBtn(true)
|
||||
action === 'add' && (await handleCreate(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"
|
||||
required
|
||||
value={form.values.reason}
|
||||
onChange={(e) => form.setFieldValue('reason', e.target.value)}
|
||||
/>
|
||||
<Box ta={'center'}>
|
||||
{action === 'add' && (
|
||||
<Button
|
||||
mt={'lg'}
|
||||
bg={'green'}
|
||||
type="submit"
|
||||
disabled={disableBtn}
|
||||
>
|
||||
Create
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default Tickets
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
.title {
|
||||
background-color: light-dark(var(white), var(--mantine-color-dark-7));
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--mantine-spacing-sm) var(--mantine-spacing-lg)
|
||||
var(--mantine-spacing-sm);
|
||||
border-bottom: solid rgba(201, 201, 201, 0.377) 1px;
|
||||
}
|
||||
|
||||
.optionIcon {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
.deleteIcon {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
|
||||
.editIcon {
|
||||
color: rgb(9, 132, 132);
|
||||
cursor: pointer;
|
||||
padding: 2px;
|
||||
border-radius: 25%;
|
||||
}
|
||||
|
||||
.editIcon:hover {
|
||||
background-color: rgba(203, 203, 203, 0.809);
|
||||
}
|
||||
|
||||
.deleteIcon:hover {
|
||||
background-color: rgba(203, 203, 203, 0.809);
|
||||
}
|
||||
|
||||
.dialog {
|
||||
background-color: light-dark(white, #2d353c);
|
||||
text-align: center;
|
||||
border: solid 1px rgb(255, 145, 0);
|
||||
}
|
||||
|
||||
.dialogText {
|
||||
color: light-dark(#2d353c, white);
|
||||
}
|
||||
|
|
@ -0,0 +1,453 @@
|
|||
import {
|
||||
addTicket,
|
||||
deleteTicket,
|
||||
getListMaster,
|
||||
getTicketsOfUser
|
||||
} from '@/api/Admin'
|
||||
import { DataTablePagination } from '@/components/DataTable/DataTable'
|
||||
import { Xdelete, create } from '@/rtk/helpers/CRUD'
|
||||
import { get } from '@/rtk/helpers/apiService'
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
Group,
|
||||
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 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
|
||||
}
|
||||
|
||||
type TListTickets = {
|
||||
data: User[]
|
||||
}
|
||||
|
||||
interface User {
|
||||
id: number
|
||||
name: string
|
||||
email: string
|
||||
email_verified_at: string | null
|
||||
permission: string
|
||||
remember_token: string | null
|
||||
created_at: string | null
|
||||
updated_at: string | null
|
||||
}
|
||||
|
||||
interface DataReason {
|
||||
id: number
|
||||
c_code: string
|
||||
c_name: string
|
||||
}
|
||||
|
||||
interface DataTimeType {
|
||||
id: number
|
||||
c_code: string
|
||||
c_name: string
|
||||
}
|
||||
|
||||
const TicketsManagement = () => {
|
||||
const [listTickets, setListTiskets] = useState<TListTickets>({
|
||||
data: [],
|
||||
})
|
||||
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 [dataReason, setDataReason] = useState<DataReason[]>([])
|
||||
|
||||
const getListMasterByType = async (type: string) => {
|
||||
try {
|
||||
const params = {
|
||||
type: type,
|
||||
}
|
||||
const res = await get(getListMaster, params)
|
||||
if (res.status) {
|
||||
return res.data
|
||||
}
|
||||
} catch (error: any) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: error.message ?? error,
|
||||
color: 'red',
|
||||
})
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
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)
|
||||
}
|
||||
|
||||
fetchData()
|
||||
}, [])
|
||||
|
||||
const columns = [
|
||||
{
|
||||
name: 'id',
|
||||
size: '3%',
|
||||
header: 'ID',
|
||||
},
|
||||
{
|
||||
name: 'user_name',
|
||||
size: '17%',
|
||||
header: 'User',
|
||||
},
|
||||
{
|
||||
name: 'startPeriodName',
|
||||
size: '8%',
|
||||
header: 'Start Period',
|
||||
},
|
||||
{
|
||||
name: 'start_date',
|
||||
size: '11%',
|
||||
header: 'From Date',
|
||||
render: (row: any) => {
|
||||
return moment(row.start_date).format('DD/MM/YYYY')
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'endPeriodName',
|
||||
size: '8%',
|
||||
header: 'End Period',
|
||||
},
|
||||
{
|
||||
name: 'end_date',
|
||||
size: '10%',
|
||||
header: 'End Date',
|
||||
render: (row: any) => {
|
||||
return moment(row.end_date).format('DD/MM/YYYY')
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'typeReasonName',
|
||||
size: '10%',
|
||||
header: 'Reason',
|
||||
},
|
||||
{
|
||||
name: 'reason',
|
||||
size: '20%',
|
||||
header: 'Notes',
|
||||
},
|
||||
{
|
||||
name: 'status',
|
||||
size: '8%',
|
||||
header: 'Status',
|
||||
},
|
||||
{
|
||||
name: '#',
|
||||
size: '5%',
|
||||
header: 'Action',
|
||||
render: (row: any) => {
|
||||
return (
|
||||
<Box className={classes.optionIcon}>
|
||||
<IconTrash
|
||||
className={classes.deleteIcon}
|
||||
onClick={() => {
|
||||
setAction('delete')
|
||||
setItem(row)
|
||||
}}
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
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 getAllTickets = async () => {
|
||||
try {
|
||||
const searchParams = new URLSearchParams(window.location.search)
|
||||
const params = {}
|
||||
|
||||
for (const [key, value] of searchParams.entries()) {
|
||||
if (key === 'page' && value === '') {
|
||||
Object.assign(params, { [`${key}`]: 1 })
|
||||
} else {
|
||||
Object.assign(params, { [`${key}`]: value })
|
||||
}
|
||||
}
|
||||
|
||||
const res = await get(getTicketsOfUser, params)
|
||||
if (res.status) {
|
||||
setListTiskets(res)
|
||||
}
|
||||
} catch (error: any) {
|
||||
notifications.show({
|
||||
title: 'Error',
|
||||
message: error.message ?? error,
|
||||
color: 'red',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleCreate = async (values: TTickets) => {
|
||||
try {
|
||||
const res = await create(
|
||||
addTicket,
|
||||
{
|
||||
// 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,
|
||||
},
|
||||
getAllTickets,
|
||||
)
|
||||
if (res === true) {
|
||||
setAction('')
|
||||
form.reset()
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
try {
|
||||
await Xdelete(deleteTicket, { ticket_id: id }, getAllTickets)
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getAllTickets()
|
||||
}, [])
|
||||
|
||||
const form = useForm({
|
||||
initialValues: {
|
||||
id: 0,
|
||||
start_date: new Date(),
|
||||
start_period: '',
|
||||
end_date: new Date(),
|
||||
end_period: '',
|
||||
type: '',
|
||||
reason: '',
|
||||
},
|
||||
})
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classes.title}>
|
||||
<h3>
|
||||
<Text>Admin/</Text>
|
||||
Tickets Management
|
||||
</h3>
|
||||
<Button
|
||||
m={5}
|
||||
onClick={() => {
|
||||
setAction('add')
|
||||
form.reset()
|
||||
}}
|
||||
>
|
||||
+ Add
|
||||
</Button>
|
||||
</div>
|
||||
<Box p={20}>
|
||||
{listTickets.data.length > 0 && (
|
||||
<DataTablePagination
|
||||
filterInfo={filterInfo}
|
||||
data={listTickets}
|
||||
columns={columns}
|
||||
// searchInput
|
||||
size=""
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Add/Edit User modal */}
|
||||
<Modal
|
||||
opened={action === 'add' || action === 'edit'}
|
||||
onClose={() => {
|
||||
setAction('')
|
||||
form.reset()
|
||||
}}
|
||||
title={
|
||||
<Text pl={'sm'} fw={700} fz={'lg'}>
|
||||
{action === 'add' && 'Add Ticket'}
|
||||
</Text>
|
||||
}
|
||||
>
|
||||
<form
|
||||
onSubmit={form.onSubmit(async (values) => {
|
||||
setDisableBtn(true)
|
||||
action === 'add' && (await handleCreate(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"
|
||||
required
|
||||
value={form.values.reason}
|
||||
onChange={(e) => form.setFieldValue('reason', e.target.value)}
|
||||
/>
|
||||
<Box ta={'center'}>
|
||||
{action === 'add' && (
|
||||
<Button
|
||||
mt={'lg'}
|
||||
bg={'green'}
|
||||
type="submit"
|
||||
disabled={disableBtn}
|
||||
>
|
||||
Create
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default TicketsManagement
|
||||
|
|
@ -8,6 +8,8 @@ import Dashboard from '@/pages/Dashboard/Dashboard'
|
|||
import GeneralSetting from '@/pages/GeneralSetting/GeneralSetting'
|
||||
import LeaveManagement from '@/pages/LeaveManagement/LeaveManagement'
|
||||
import PageNotFound from '@/pages/NotFound/NotFound'
|
||||
import Tickets from '@/pages/Tickets/Tickets'
|
||||
import TicketsManagement from '@/pages/TicketsManagement/TicketsManagement'
|
||||
import Timekeeping from '@/pages/Timekeeping/Timekeeping'
|
||||
import Tracking from '@/pages/Tracking/Tracking'
|
||||
import PageWelcome from '@/pages/Welcome/Welcome'
|
||||
|
|
@ -144,6 +146,34 @@ const mainRoutes = [
|
|||
</ProtectedRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/tickets',
|
||||
element: (
|
||||
<ProtectedRoute mode="route">
|
||||
<BasePage
|
||||
main={
|
||||
<>
|
||||
<Tickets />
|
||||
</>
|
||||
}
|
||||
></BasePage>
|
||||
</ProtectedRoute>
|
||||
),
|
||||
},
|
||||
{
|
||||
path: '/tickets-management',
|
||||
element: (
|
||||
<ProtectedRoute mode="route">
|
||||
<BasePage
|
||||
main={
|
||||
<>
|
||||
<TicketsManagement />
|
||||
</>
|
||||
}
|
||||
></BasePage>
|
||||
</ProtectedRoute>
|
||||
),
|
||||
},
|
||||
// {
|
||||
// path: '/packages',
|
||||
// element: (
|
||||
|
|
|
|||
Loading…
Reference in New Issue