Bổ sung tooltip ngày nghỉ , tổng ngày nghỉ, custom màu cho cột total, off, remaining
This commit is contained in:
Truong Vo
parent
f87db7cda5
commit
5e0c48e3b9
|
|
@ -31,25 +31,41 @@ class LeaveManagementController extends Controller
|
|||
$join->on('notes.n_time_type', '=', 'categories.c_code')
|
||||
->where('categories.c_type', 'TIME_TYPE');
|
||||
})
|
||||
->leftJoin("categories as reason", function ($join) {
|
||||
$join->on('n_reason', '=', 'reason.c_code');
|
||||
$join->on('reason.c_type', DB::raw("CONCAT('REASON')"));
|
||||
})
|
||||
->select(
|
||||
DB::raw('notes.n_user_id as n_user_id'),
|
||||
DB::raw('notes.n_time_type as time_type'),
|
||||
DB::raw('notes.n_year as year'),
|
||||
DB::raw('notes.n_month as month'),
|
||||
DB::raw('SUM(categories.c_value) as leave_days')
|
||||
DB::raw('categories.c_value as leave_days'),
|
||||
DB::raw('notes.n_day as day'),
|
||||
'reason.c_name as reason_name',
|
||||
'categories.c_name as time_type_name',
|
||||
// DB::raw('SUM(categories.c_value) as leave_days')
|
||||
)
|
||||
// ->where('notes.n_user_id', "1")
|
||||
->where('notes.n_year', $year)
|
||||
->where('notes.n_reason', 'ONLEAVE')
|
||||
->groupBy("notes.n_user_id", DB::raw('notes.n_month'), DB::raw('notes.n_year'))
|
||||
// ->groupBy("notes.n_user_id")
|
||||
->orderBy('notes.n_month')
|
||||
->orderBy('notes.n_day')
|
||||
->get()
|
||||
->map(function ($item) {
|
||||
return [
|
||||
"day" => $item->day,
|
||||
"n_user_id" => $item->n_user_id,
|
||||
// "time_type" => $item->time_type,
|
||||
"reason_name" => $item->reason_name,
|
||||
"time_type_name" => $item->time_type_name,
|
||||
"month" => $item->month,
|
||||
"leave_days" => $item->leave_days
|
||||
];
|
||||
})
|
||||
->toArray();
|
||||
|
||||
// dd($totalLeaveDaysByMonth);
|
||||
$leaveDays = LeaveDays::join('users', 'leave_days.ld_user_id', '=', 'users.id')
|
||||
->select(
|
||||
'leave_days.*',
|
||||
|
|
@ -65,7 +81,6 @@ class LeaveManagementController extends Controller
|
|||
->where('leave_days.ld_year', $year)
|
||||
->get()
|
||||
->map(function ($item) use ($totalLeaveDaysByMonth) {
|
||||
|
||||
$monthlyLeaveDays = [];
|
||||
foreach ($totalLeaveDaysByMonth as $key => $totalDays) {
|
||||
if ($item->ld_user_id == $totalDays["n_user_id"]) {
|
||||
|
|
|
|||
|
|
@ -46,8 +46,12 @@ interface LeaveDay {
|
|||
}
|
||||
|
||||
interface MonthlyLeaveDays {
|
||||
month: number
|
||||
day: number
|
||||
leave_days: number
|
||||
month: number
|
||||
n_user_id: number
|
||||
reason_name: string
|
||||
time_type_name: string
|
||||
}
|
||||
|
||||
interface UserData {
|
||||
|
|
@ -198,6 +202,28 @@ const LeaveManagement = () => {
|
|||
|
||||
// console.log(customAddNotes, 'customAddNotes')
|
||||
|
||||
const getDetailLeaveDay = (monthlyLeaveDays: MonthlyLeaveDays[]) => {
|
||||
type MonthlyLeaveDaysAcc = {
|
||||
[key: string]: { n_user_id: number; month: number; leave_days: number }
|
||||
}
|
||||
const summedLeaveDaysByUserAndMonth = monthlyLeaveDays.reduce(
|
||||
(acc: MonthlyLeaveDaysAcc, record) => {
|
||||
const { n_user_id, month, leave_days } = record
|
||||
const key = `${month}`
|
||||
|
||||
if (!acc[key]) {
|
||||
acc[key] = { n_user_id, month, leave_days: 0 }
|
||||
}
|
||||
|
||||
acc[key].leave_days += Number(leave_days)
|
||||
|
||||
return acc
|
||||
},
|
||||
{},
|
||||
)
|
||||
return summedLeaveDaysByUserAndMonth
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={classes.title}>
|
||||
|
|
@ -279,7 +305,7 @@ const LeaveManagement = () => {
|
|||
onClick={() => {
|
||||
setDisableBtn(true)
|
||||
if (
|
||||
customAddNotes.id === 0
|
||||
customAddNotes.id === 0
|
||||
// ||
|
||||
// customAddNotes.totalLeave === '' ||
|
||||
// customAddNotes.totalLeave === '0'
|
||||
|
|
@ -409,28 +435,95 @@ const LeaveManagement = () => {
|
|||
</Table.Td>
|
||||
|
||||
{monthInYear.map((d, i) => {
|
||||
let total =
|
||||
user.monthlyLeaveDays.find((item) => {
|
||||
return item.month == d.value
|
||||
})?.leave_days ?? 0
|
||||
let leaveDataByMonth = getDetailLeaveDay(
|
||||
user.monthlyLeaveDays,
|
||||
)
|
||||
|
||||
const monthData = leaveDataByMonth[d.value]
|
||||
let total = monthData ? monthData.leave_days : 0
|
||||
totalDayOff = totalDayOff + total
|
||||
return (
|
||||
<Table.Td bg={total > 0 ? '#ffb5b5' : ''} key={i} ta={'center'}>
|
||||
{total === 0 ? '' : total}
|
||||
<Table.Td
|
||||
bg={total > 0 ? '#ffb5b5' : ''}
|
||||
key={i}
|
||||
ta={'center'}
|
||||
>
|
||||
<Tooltip
|
||||
multiline
|
||||
label={user.monthlyLeaveDays
|
||||
.filter((item) => item.month === d.value)
|
||||
.map((itemDay, indexDay) => {
|
||||
return (
|
||||
<p key={indexDay}>
|
||||
- Xin {itemDay.reason_name} (
|
||||
{itemDay.time_type_name}) {itemDay.day}/
|
||||
{itemDay.month}
|
||||
</p>
|
||||
)
|
||||
})}
|
||||
>
|
||||
<p>{total === 0 ? '' : total}</p>
|
||||
</Tooltip>
|
||||
</Table.Td>
|
||||
)
|
||||
})}
|
||||
|
||||
<Table.Td ta={'center'}>{totalDayLeave}</Table.Td>
|
||||
<Table.Td ta={'center'} bg={'#ffb5b5'}>{totalDayOff}</Table.Td>
|
||||
<Table.Td ta={'center'} bg={'#c3ffc3'}>
|
||||
<Table.Td
|
||||
ta={'center'}
|
||||
bg={totalDayLeave > 0 ? '#92e6f2' : ''}
|
||||
>
|
||||
{totalDayLeave}
|
||||
</Table.Td>
|
||||
<Table.Td ta={'center'} bg={totalDayOff > 0 ? '#ffb5b5' : ''}>
|
||||
{totalDayOff > 0 ? (
|
||||
<Tooltip
|
||||
multiline
|
||||
label={user.monthlyLeaveDays.map(
|
||||
(itemDay, indexDay) => {
|
||||
return (
|
||||
<p key={indexDay}>
|
||||
- Xin {itemDay.reason_name} (
|
||||
{itemDay.time_type_name}) {itemDay.day}/
|
||||
{itemDay.month}
|
||||
</p>
|
||||
)
|
||||
},
|
||||
)}
|
||||
>
|
||||
<p> {totalDayOff}</p>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
</Table.Td>
|
||||
<Table.Td
|
||||
ta={'center'}
|
||||
bg={
|
||||
totalDayLeave - totalDayOff == 0
|
||||
? ''
|
||||
: totalDayLeave - totalDayOff > 0
|
||||
? '#c3ffc3'
|
||||
: '#ffb5b5'
|
||||
}
|
||||
>
|
||||
{totalDayLeave - totalDayOff}
|
||||
</Table.Td>
|
||||
<Table.Td>
|
||||
<Box style={{display: ld_note === "" || ld_note === null? 'none' : 'block'}}>
|
||||
<HoverCard width={280} shadow="md" >
|
||||
<Box
|
||||
style={{
|
||||
display:
|
||||
ld_note === '' || ld_note === null ? 'none' : 'block',
|
||||
}}
|
||||
>
|
||||
<HoverCard width={280} shadow="md">
|
||||
<HoverCard.Target>
|
||||
<Text fz={'sm'}>{ld_note !== null && ld_note !== "" && ld_note.length > 25 ?ld_note.slice(0,25)+"..." : ld_note}</Text>
|
||||
<Text fz={'sm'}>
|
||||
{ld_note !== null &&
|
||||
ld_note !== '' &&
|
||||
ld_note.length > 25
|
||||
? ld_note.slice(0, 25) + '...'
|
||||
: ld_note}
|
||||
</Text>
|
||||
</HoverCard.Target>
|
||||
<HoverCard.Dropdown>
|
||||
<Textarea size="sm" autosize>
|
||||
|
|
@ -444,7 +537,7 @@ const LeaveManagement = () => {
|
|||
<IconEdit
|
||||
color="green"
|
||||
width={20}
|
||||
style={{cursor:'pointer'}}
|
||||
style={{ cursor: 'pointer' }}
|
||||
onClick={() => {
|
||||
let totalLeave =
|
||||
user.leaveDay.ld_day == 0
|
||||
|
|
|
|||
Loading…
Reference in New Issue