127 lines
3.9 KiB
Vue
127 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { router, useForm } from '@inertiajs/vue3';
|
|
import { X } from '@lucide/vue';
|
|
import { ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import { RowApproveAction, RowRejectAction } from '@/components/button';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@/components/ui/dialog';
|
|
import {
|
|
Field,
|
|
FieldError,
|
|
FieldLabel,
|
|
} from '@/components/ui/field';
|
|
import { Textarea } from '@/components/ui/textarea';
|
|
import { useCan } from '@/composables/useCan';
|
|
import type { CuttingListItem } from '@/types/cutting';
|
|
import { approve, reject } from '@/routes/admin/manage/owner_verifications';
|
|
|
|
const props = defineProps<{
|
|
cutting: CuttingListItem;
|
|
}>();
|
|
|
|
const { can } = useCan();
|
|
|
|
const rejectDialogOpen = ref(false);
|
|
|
|
const approveForm = useForm({});
|
|
|
|
const rejectForm = useForm({
|
|
reason: '',
|
|
});
|
|
|
|
function submitApprove() {
|
|
approveForm
|
|
.post(approve.url(props.cutting.id), {
|
|
preserveScroll: true,
|
|
onError: (errors) => {
|
|
const message = Object.values(errors)[0];
|
|
toast.error(message ?? 'Gagal menyetujui verifikasi.');
|
|
},
|
|
});
|
|
}
|
|
|
|
function submitReject() {
|
|
rejectForm
|
|
.post(reject.url(props.cutting.id), {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
rejectDialogOpen.value = false;
|
|
rejectForm.reset();
|
|
},
|
|
onError: (errors) => {
|
|
const message = Object.values(errors)[0];
|
|
toast.error(message ?? 'Gagal menolak verifikasi.');
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="can('owner_verifications.verify')" class="flex items-center gap-1">
|
|
<RowApproveAction size="sm" tooltip="Setujui Verifikasi" :disabled="approveForm.processing"
|
|
@click="submitApprove" />
|
|
<RowRejectAction size="sm" tooltip="Tolak Verifikasi" @click="rejectDialogOpen = true" />
|
|
</div>
|
|
|
|
<!-- Reject Dialog -->
|
|
<Dialog v-model:open="rejectDialogOpen">
|
|
<DialogContent class="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Tolak Verifikasi</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div class="space-y-4">
|
|
<div class="rounded-md border p-3 text-xs space-y-2">
|
|
<div>
|
|
<span class="text-muted-foreground">Cutting:</span>
|
|
<span class="ml-1 font-medium">#{{ cutting.id }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted-foreground">Deskripsi:</span>
|
|
<span class="ml-1 font-medium">{{ cutting.description ?? '-' }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<Field>
|
|
<FieldLabel for="reject-reason">Alasan Penolakan</FieldLabel>
|
|
<Textarea
|
|
id="reject-reason"
|
|
v-model="rejectForm.reason"
|
|
placeholder="Jelaskan alasan penolakan..."
|
|
rows="3"
|
|
/>
|
|
<FieldError
|
|
:errors="rejectForm.errors.reason ? [rejectForm.errors.reason] : []"
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<DialogFooter>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
@click="rejectDialogOpen = false"
|
|
>
|
|
Batal
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="destructive"
|
|
:disabled="rejectForm.processing"
|
|
@click="submitReject"
|
|
>
|
|
<X class="size-4" />
|
|
Tolak
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</template>
|