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

refactor: remove sm: gap

Browse Source
This commit is contained in:
Yoga Pangestu 2026-06-14 13:55:56 +07:00
parent 4aa1abdf0c
commit ac373240e7
1 changed files with 73 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
resources/js/components/admin/hr/attendances/AttendanceWebcamModal.vue
View File

@ -1,8 +1,4 @@
<script setup lang="ts">
import { useForm } from '@inertiajs/vue3';
import { Camera, Loader2 } from '@lucide/vue';
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { toast } from 'vue-sonner';
import { Button } from '@/components/ui/button';
import {
Dialog,
@ -14,6 +10,10 @@ import {
import { useGeolocation } from '@/composables/useGeolocation';
import { useWebcamCapture } from '@/composables/useWebcamCapture';
import type { AttendanceCaptureFormData } from '@/types/attendance';
import { useForm } from '@inertiajs/vue3';
import { Camera, Loader2 } from '@lucide/vue';
import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue';
import { toast } from 'vue-sonner';
const open = defineModel<boolean>('open', { default: false });
@ -37,13 +37,17 @@ const form = useForm<AttendanceCaptureFormData>({
location_tag: '',
});
const title = computed(() => (props.mode === 'check-in' ? 'Presensi Masuk' : 'Presensi Pulang'));
const submitLabel = computed(() => (props.mode === 'check-in' ? 'Konfirmasi Masuk' : 'Konfirmasi Pulang'));
const submitUrl = computed(() => (
const title = computed(() =>
props.mode === 'check-in' ? 'Presensi Masuk' : 'Presensi Pulang',
);
const submitLabel = computed(() =>
props.mode === 'check-in' ? 'Konfirmasi Masuk' : 'Konfirmasi Pulang',
);
const submitUrl = computed(() =>
props.mode === 'check-in'
? '/admin/hr/attendances/check-in'
: '/admin/hr/attendances/check-out'
));
: '/admin/hr/attendances/check-out',
);
async function initializeCamera() {
if (!videoRef.value) {
@ -83,7 +87,10 @@ async function capturePhoto() {
try {
const position = await getCurrentPosition();
const locationTag = buildLocationTag(position.latitude, position.longitude);
const locationTag = buildLocationTag(
position.latitude,
position.longitude,
);
const photo = captureWithLocationTag(videoRef.value, locationTag);
stopCamera();
@ -95,7 +102,11 @@ async function capturePhoto() {
form.longitude = position.longitude;
form.location_tag = locationTag;
} catch (error) {
toast.error(error instanceof Error ? error.message : 'Gagal mengambil foto presensi.');
toast.error(
error instanceof Error
? error.message
: 'Gagal mengambil foto presensi.',
);
} finally {
capturing.value = false;
}
@ -150,51 +161,82 @@ onBeforeUnmount(() => {
</DialogHeader>
<div class="space-y-4">
<p v-if="!previewPhoto" class="text-muted-foreground text-sm">
Ambil foto langsung dari kamera. Upload dari galeri tidak diizinkan.
<p v-if="!previewPhoto" class="text-sm text-muted-foreground">
Ambil foto langsung dari kamera. Upload dari galeri tidak
diizinkan.
</p>
<div v-if="!previewPhoto" class="space-y-2">
<p class="text-sm font-medium">
Kamera
</p>
<div class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted">
<video ref="videoRef" class="size-full scale-x-[-1] object-cover" autoplay muted playsinline />
<p class="text-sm font-medium">Kamera</p>
<div
class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted"
>
<video
ref="videoRef"
class="size-full scale-x-[-1] object-cover"
autoplay
muted
playsinline
/>
<div v-if="cameraLoading"
class="absolute inset-0 flex items-center justify-center bg-background/80">
<Loader2 class="text-muted-foreground size-8 animate-spin" />
<div
v-if="cameraLoading"
class="absolute inset-0 flex items-center justify-center bg-background/80"
>
<Loader2
class="size-8 animate-spin text-muted-foreground"
/>
</div>
</div>
</div>
<div v-else class="space-y-2">
<p class="text-sm font-medium">
Hasil Foto
</p>
<div class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted">
<p class="text-sm font-medium">Hasil Foto</p>
<div
class="relative aspect-4/3 overflow-hidden rounded-lg border bg-muted"
>
<img :src="previewPhoto" alt="Hasil foto presensi" class="size-full object-cover" />
</div>
<p class="text-muted-foreground text-xs whitespace-pre-line">
<p
class="text-xs whitespace-pre-line text-muted-foreground"
>
{{ form.location_tag }}
</p>
</div>
</div>
<DialogFooter class="gap-2 sm:gap-0">
<Button v-if="previewPhoto" type="button" variant="outline" @click="retakePhoto">
<DialogFooter>
<Button
v-if="previewPhoto"
type="button"
variant="outline"
@click="retakePhoto"
>
Ambil Ulang
</Button>
<Button v-if="!previewPhoto" type="button" :disabled="!cameraReady || capturing" @click="capturePhoto">
<Button
v-if="!previewPhoto"
type="button"
:disabled="!cameraReady || capturing"
@click="capturePhoto"
>
<Loader2 v-if="capturing" class="size-4 animate-spin" />
<Camera v-else class="size-4" />
Ambil Foto
</Button>
<Button v-else type="button" :disabled="form.processing" @click="submitAttendance">
<Loader2 v-if="form.processing" class="size-4 animate-spin" />
<Button
v-else
type="button"
:disabled="form.processing"
@click="submitAttendance"
>
<Loader2
v-if="form.processing"
class="size-4 animate-spin"
/>
{{ submitLabel }}
</Button>
</DialogFooter>