dst/store
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: display work duration in attendance calendar events

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 15:07:36 +07:00
parent c140192453
commit bdeb8cc59f
1 changed files with 25 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
resources/js/components/admin/hr/attendances/AttendanceCalendar.vue
View File

@ -71,11 +71,15 @@ function buildEventTitle(attendance: AttendanceListItem): string {
? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
: `${attendance.check_in_at_formatted} (belum pulang)`;
const duration = attendance.work_duration_formatted
? ` (${attendance.work_duration_formatted})`
: '';
if (props.canManageAll && attendance.employee_name) {
return `${attendance.employee_name}: ${timeRange}`;
return `${attendance.employee_name}: ${timeRange}${duration}`;
}
return timeRange;
return `${timeRange}${duration}`;
}
function renderEventContent(arg: EventContentArg) {
@ -90,6 +94,10 @@ function renderEventContent(arg: EventContentArg) {
? `${attendance.check_in_at_formatted} – ${attendance.check_out_at_formatted}`
: `${attendance.check_in_at_formatted}`;
const durationMarkup = attendance.work_duration_formatted
? `<span class="attendance-event__duration">${escapeHtml(attendance.work_duration_formatted)}</span>`
: '';
const nameMarkup = props.canManageAll && attendance.employee_name
? `<span class="attendance-event__name">${escapeHtml(attendance.employee_name)}</span>`
: '';
@ -99,6 +107,7 @@ function renderEventContent(arg: EventContentArg) {
<div class="attendance-event__inner">
${nameMarkup}
<span class="attendance-event__time">${escapeHtml(timeLabel)}</span>
${durationMarkup}
</div>
`,
};
@ -413,6 +422,12 @@ watch(
opacity: 0.95;
}
.attendance-calendar .fc .attendance-event__duration {
font-size: 0.6875rem;
font-weight: 500;
opacity: 0.85;
}
.attendance-calendar .fc .attendance-event__status {
align-self: flex-start;
background: color-mix(in oklch, currentColor 12%, transparent);
@ -425,14 +440,16 @@ watch(
}
.attendance-calendar .fc .attendance-event--complete .attendance-event__time,
.attendance-calendar .fc .attendance-event--complete .attendance-event__name {
.attendance-calendar .fc .attendance-event--complete .attendance-event__name,
.attendance-calendar .fc .attendance-event--complete .attendance-event__duration {
color: oklch(0.99 0 0);
opacity: 0.95;
}
.attendance-calendar .fc .attendance-event--active .attendance-event__time,
.attendance-calendar .fc .attendance-event--active .attendance-event__name,
.attendance-calendar .fc .attendance-event--active .attendance-event__status {
.attendance-calendar .fc .attendance-event--active .attendance-event__status,
.attendance-calendar .fc .attendance-event--active .attendance-event__duration {
color: var(--primary-foreground);
opacity: 0.95;
}
@ -452,7 +469,8 @@ watch(
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__time,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__name,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__status {
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__status,
.dark .attendance-calendar .fc .attendance-event--active .attendance-event__duration {
color: var(--primary-foreground);
}
@ -462,7 +480,8 @@ watch(
}
.attendance-calendar .fc .attendance-event__name,
.attendance-calendar .fc .attendance-event__time {
.attendance-calendar .fc .attendance-event__time,
.attendance-calendar .fc .attendance-event__duration {
font-size: 0.625rem;
}
}