86 lines
2.8 KiB
Vue
86 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
|
|
const props = defineProps<{
|
|
checkInPhotoUrl: string | null;
|
|
checkOutPhotoUrl: string | null;
|
|
checkInLocationTag?: string | null;
|
|
checkOutLocationTag?: string | null;
|
|
}>();
|
|
|
|
const previewOpen = ref(false);
|
|
const previewUrl = ref<string | null>(null);
|
|
const previewTitle = ref('');
|
|
const previewLocationTag = ref<string | null>(null);
|
|
|
|
function openPreview(url: string, title: string, locationTag: string | null | undefined) {
|
|
previewUrl.value = url;
|
|
previewTitle.value = title;
|
|
previewLocationTag.value = locationTag ?? null;
|
|
previewOpen.value = true;
|
|
}
|
|
</script>
|
|
|
|
<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"
|
|
/>
|
|
<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"
|
|
/>
|
|
<span class="text-muted-foreground text-[10px] font-medium">Pulang</span>
|
|
</button>
|
|
</div>
|
|
|
|
<span v-else class="text-muted-foreground">-</span>
|
|
|
|
<Dialog v-model:open="previewOpen">
|
|
<DialogContent class="sm:max-w-2xl">
|
|
<DialogHeader>
|
|
<DialogTitle>{{ previewTitle }}</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<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"
|
|
/>
|
|
</div>
|
|
|
|
<p v-if="previewLocationTag" class="text-muted-foreground text-xs whitespace-pre-line">
|
|
{{ previewLocationTag }}
|
|
</p>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|