refactor: clean up attendance-related components by removing unused permissions and optimizing template structure for better readability

This commit is contained in:
Yoga Pangestu 2026-06-19 21:44:48 +07:00
parent 0b4418862d
commit 33ddf5b73d
3 changed files with 26 additions and 66 deletions

View File

@ -197,7 +197,6 @@ public function permissions(): array
Permission::ATTENDANCES_VIEW,
Permission::ATTENDANCES_CREATE,
Permission::ATTENDANCES_DELETE,
Permission::LEAVE_REQUESTS_VIEW,
Permission::LEAVE_REQUESTS_CREATE,

View File

@ -17,12 +17,18 @@ const props = defineProps<{
const hasCoordinates = computed(() => props.checkInLat != null && props.checkInLng != null);
const checkInSrc = computed(() => {
if (props.checkInLat == null || props.checkInLng == null) return '';
if (props.checkInLat == null || props.checkInLng == null) {
return '';
}
return `https://www.google.com/maps?q=${props.checkInLat},${props.checkInLng}&z=18&t=k&output=embed`;
});
const checkOutSrc = computed(() => {
if (props.checkOutLat == null || props.checkOutLng == null) return '';
if (props.checkOutLat == null || props.checkOutLng == null) {
return '';
}
return `https://www.google.com/maps?q=${props.checkOutLat},${props.checkOutLng}&z=18&t=k&output=embed`;
});
@ -38,18 +44,13 @@ function escapeHtml(value: string): string {
function buildLabel(
title: string,
color: string,
time: string,
locationTag: string | null,
lat: number | null,
lng: number | null,
): string {
const lines: string[] = [];
lines.push(`<strong style="color:${color}">${title}</strong>`);
if (props.employeeName) lines.push(`<span>Karyawan: <b>${escapeHtml(props.employeeName)}</b></span>`);
lines.push(`<span>Tanggal: ${escapeHtml(props.attendanceDateFormatted)}</span>`);
lines.push(`<span>Jam: <b>${escapeHtml(time)}</b></span>`);
lines.push(`<span>Lokasi: ${escapeHtml(locationTag ?? '-')}</span>`);
lines.push(`<span style="font-family:monospace;font-size:11px">Koordinat: ${lat}, ${lng}</span>`);
return lines.join('<br>');
}
</script>
@ -62,34 +63,16 @@ function buildLabel(
<!-- Check-in map -->
<div class="space-y-1.5">
<div
class="text-xs font-medium"
v-html="buildLabel('Masuk', '#16a34a', checkInAtFormatted, checkInLocationTag, checkInLat, checkInLng)"
/>
<iframe
:src="checkInSrc"
class="h-56 w-full overflow-hidden rounded-lg"
style="border: 0"
allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
/>
<div class="text-xs font-medium" v-html="buildLabel('Masuk', '#16a34a', checkInLocationTag)" />
<iframe :src="checkInSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
</div>
<!-- Check-out map -->
<div v-if="checkOutLat != null && checkOutLng != null" class="space-y-1.5">
<div
class="text-xs font-medium"
v-html="buildLabel('Pulang', '#dc2626', checkOutAtFormatted ?? '-', checkOutLocationTag, checkOutLat, checkOutLng)"
/>
<iframe
:src="checkOutSrc"
class="h-56 w-full overflow-hidden rounded-lg"
style="border: 0"
allowfullscreen
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
/>
<div class="text-xs font-medium" v-html="buildLabel('Pulang', '#dc2626', checkOutLocationTag)" />
<iframe :src="checkOutSrc" class="h-56 w-full overflow-hidden rounded-lg" style="border: 0" allowfullscreen
loading="lazy" referrerpolicy="no-referrer-when-downgrade" />
</div>
</div>
</template>

View File

@ -29,31 +29,17 @@ function openPreview(url: string, title: string, locationTag: string | null | un
<template>
<div v-if="checkInPhotoUrl || checkOutPhotoUrl" class="flex flex-wrap gap-2">
<button
v-if="checkInPhotoUrl"
type="button"
class="group flex flex-col items-center gap-1"
@click="openPreview(checkInPhotoUrl, 'Foto Presensi Masuk', checkInLocationTag)"
>
<img
:src="checkInPhotoUrl"
alt="Foto presensi masuk"
class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80"
/>
<button v-if="checkInPhotoUrl" type="button" class="group flex flex-col items-center gap-1"
@click="openPreview(checkInPhotoUrl, 'Foto Presensi Masuk', checkInLocationTag)">
<img :src="checkInPhotoUrl" alt="Foto presensi masuk"
class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80" />
<span class="text-muted-foreground text-[10px] font-medium">Masuk</span>
</button>
<button
v-if="checkOutPhotoUrl"
type="button"
class="group flex flex-col items-center gap-1"
@click="openPreview(checkOutPhotoUrl, 'Foto Presensi Pulang', checkOutLocationTag)"
>
<img
:src="checkOutPhotoUrl"
alt="Foto presensi pulang"
class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80"
/>
<button v-if="checkOutPhotoUrl" type="button" class="group flex flex-col items-center gap-1"
@click="openPreview(checkOutPhotoUrl, 'Foto Presensi Pulang', checkOutLocationTag)">
<img :src="checkOutPhotoUrl" alt="Foto presensi pulang"
class="size-12 rounded-md border object-cover transition-opacity group-hover:opacity-80" />
<span class="text-muted-foreground text-[10px] font-medium">Pulang</span>
</button>
</div>
@ -68,17 +54,9 @@ function openPreview(url: string, title: string, locationTag: string | null | un
<div class="space-y-3">
<div class="overflow-hidden rounded-lg border bg-muted">
<img
v-if="previewUrl"
:src="previewUrl"
:alt="previewTitle"
class="max-h-[70vh] w-full object-contain"
/>
<img v-if="previewUrl" :src="previewUrl" :alt="previewTitle"
class="max-h-[70vh] w-full object-contain" />
</div>
<p v-if="previewLocationTag" class="text-muted-foreground text-xs whitespace-pre-line">
{{ previewLocationTag }}
</p>
</div>
</DialogContent>
</Dialog>