118 lines
3.5 KiB
Vue
118 lines
3.5 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, 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';
|
|
|
|
const props = defineProps<{
|
|
type: 'request' | 'cutting';
|
|
id: number;
|
|
}>();
|
|
|
|
const { can } = useCan();
|
|
|
|
const rejectDialogOpen = ref(false);
|
|
|
|
const approveForm = useForm({});
|
|
const rejectForm = useForm({
|
|
reason: '',
|
|
});
|
|
|
|
const approveUrl = computed(() => (
|
|
props.type === 'cutting'
|
|
? approve.url(props.id)
|
|
: approve_request.url(props.id)
|
|
));
|
|
|
|
const rejectUrl = computed(() => (
|
|
props.type === 'cutting'
|
|
? reject.url(props.id)
|
|
: reject_request.url(props.id)
|
|
));
|
|
|
|
const canApprove = computed(() => can('owner_verifications.verify'));
|
|
const canReject = computed(() => can('owner_verifications.reject'));
|
|
|
|
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>
|
|
<template v-if="canApprove">
|
|
<RowApproveAction size="sm" tooltip="Setujui" :disabled="approveForm.processing" @click="submitApprove" />
|
|
</template>
|
|
|
|
<template v-if="canReject">
|
|
<RowRejectAction size="sm" tooltip="Tolak" :disabled="rejectForm.processing" @click="rejectDialogOpen = true" />
|
|
</template>
|
|
|
|
<Dialog v-model:open="rejectDialogOpen">
|
|
<DialogContent class="sm:max-w-lg">
|
|
<DialogHeader>
|
|
<DialogTitle>Tolak Verifikasi</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<div class="space-y-4">
|
|
<Field>
|
|
<FieldLabel for="owner-verification-reject-reason">Alasan Penolakan</FieldLabel>
|
|
<Textarea id="owner-verification-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>
|