60 lines
2.1 KiB
Vue
60 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
|
|
defineProps<{
|
|
checkInPhotoUrl: string | null;
|
|
checkOutPhotoUrl: string | null;
|
|
}>();
|
|
|
|
const previewOpen = ref(false);
|
|
const previewUrl = ref<string | null>(null);
|
|
const previewTitle = ref('');
|
|
|
|
function openPreview(url: string, title: string) {
|
|
previewUrl.value = url;
|
|
previewTitle.value = title;
|
|
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')">
|
|
<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')">
|
|
<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>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|