refactor: clean up attendance-related components by removing unused permissions and optimizing template structure for better readability
This commit is contained in:
parent
0b4418862d
commit
33ddf5b73d
@ -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,
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user