154 lines
4.7 KiB
Vue
154 lines
4.7 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3';
|
|
import { X } from '@lucide/vue';
|
|
import { computed, ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import { RowApproveAction, RowDetailAction, 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 { approve, reject, approve_request, reject_request } from '@/routes/admin/manage/owner_verifications';
|
|
import type { OwnerVerificationItem } from '@/types/owner-verification';
|
|
|
|
const props = defineProps<{
|
|
item: OwnerVerificationItem;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
view: [];
|
|
}>();
|
|
|
|
const { can } = useCan();
|
|
|
|
const rejectDialogOpen = ref(false);
|
|
|
|
const approveForm = useForm({});
|
|
const rejectForm = useForm({
|
|
reason: '',
|
|
});
|
|
|
|
const approveUrl = computed(() => (
|
|
props.item.source === 'cutting'
|
|
? approve.url(props.item.id)
|
|
: approve_request.url(props.item.id)
|
|
));
|
|
|
|
const rejectUrl = computed(() => (
|
|
props.item.source === 'cutting'
|
|
? reject.url(props.item.id)
|
|
: reject_request.url(props.item.id)
|
|
));
|
|
|
|
function submitApprove() {
|
|
approveForm
|
|
.post(approveUrl.value, {
|
|
preserveScroll: true,
|
|
onError: (errors: Record<string, string>) => {
|
|
if (errors.system) {
|
|
toast.error(errors.system);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
|
|
function submitReject() {
|
|
rejectForm
|
|
.post(rejectUrl.value, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
rejectDialogOpen.value = false;
|
|
rejectForm.reset();
|
|
},
|
|
onError: (errors: Record<string, string>) => {
|
|
if (errors.system) {
|
|
toast.error(errors.system);
|
|
}
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-end gap-1">
|
|
<RowDetailAction tooltip="Lihat" @click="emit('view')" />
|
|
|
|
<template v-if="item.is_pending && can('owner_verifications.verify')">
|
|
<RowApproveAction
|
|
size="sm"
|
|
tooltip="Setujui"
|
|
:disabled="approveForm.processing"
|
|
@click="submitApprove"
|
|
/>
|
|
<RowRejectAction
|
|
size="sm"
|
|
tooltip="Tolak"
|
|
:disabled="rejectForm.processing"
|
|
@click="rejectDialogOpen = true"
|
|
/>
|
|
</template>
|
|
</div>
|
|
|
|
<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">Modul:</span>
|
|
<span class="ml-1 font-medium">{{ item.subject_label }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted-foreground">Item:</span>
|
|
<span class="ml-1 font-medium">{{ item.title }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted-foreground">Aksi:</span>
|
|
<span class="ml-1 font-medium">{{ item.action_label }}</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>
|