114 lines
4.0 KiB
Vue
114 lines
4.0 KiB
Vue
<script setup lang="ts">
|
|
import { router } from '@inertiajs/vue3';
|
|
import { computed, ref } from 'vue';
|
|
import { toast } from 'vue-sonner';
|
|
import { RowApproveAction, RowDeleteAction, RowEditAction, RowPayAction, RowRejectAction } from '@/components/button';
|
|
import ConfirmDialog from '@/components/ConfirmDialog.vue';
|
|
import { useCan } from '@/composables/useCan';
|
|
import { destroy, approve, pay } from '@/routes/admin/finance/employee_advances';
|
|
import type { EmployeeAdvanceListItem } from '@/types/employee-advance';
|
|
|
|
const props = defineProps<{
|
|
employeeAdvance: EmployeeAdvanceListItem;
|
|
authEmployeeId: number | null;
|
|
}>();
|
|
|
|
const emit = defineEmits<{
|
|
edit: [employeeAdvance: EmployeeAdvanceListItem];
|
|
reject: [employeeAdvance: EmployeeAdvanceListItem];
|
|
}>();
|
|
|
|
const { can } = useCan();
|
|
|
|
const isOwner = computed(() => (
|
|
props.authEmployeeId !== null
|
|
&& props.employeeAdvance.employee_id === props.authEmployeeId
|
|
));
|
|
|
|
const canEdit = computed(() => (
|
|
props.employeeAdvance.is_editable
|
|
&& !can('employee_advances.verify')
|
|
&& isOwner.value
|
|
&& can('employee_advances.update')
|
|
));
|
|
|
|
const canDelete = computed(() => (
|
|
props.employeeAdvance.is_editable
|
|
&& !can('employee_advances.verify')
|
|
&& isOwner.value
|
|
&& can('employee_advances.delete')
|
|
));
|
|
|
|
const approveConfirmOpen = ref(false);
|
|
const payConfirmOpen = ref(false);
|
|
const approveProcessing = ref(false);
|
|
const payProcessing = ref(false);
|
|
|
|
function approveEmployeeAdvance() {
|
|
approveProcessing.value = true;
|
|
|
|
router.post(approve.url(props.employeeAdvance.id), {}, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
approveConfirmOpen.value = false;
|
|
},
|
|
onError: (errors: any) => {
|
|
if (errors.system) {
|
|
toast.error(errors.system);
|
|
}
|
|
},
|
|
onFinish: () => {
|
|
approveProcessing.value = false;
|
|
},
|
|
});
|
|
}
|
|
|
|
function payEmployeeAdvance() {
|
|
payProcessing.value = true;
|
|
|
|
router.post(pay.url(props.employeeAdvance.id), {}, {
|
|
preserveScroll: true,
|
|
onSuccess: () => {
|
|
payConfirmOpen.value = false;
|
|
},
|
|
onError: (errors: any) => {
|
|
if (errors.system) {
|
|
toast.error(errors.system);
|
|
}
|
|
},
|
|
onFinish: () => {
|
|
payProcessing.value = false;
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex items-center justify-end gap-1">
|
|
<RowEditAction v-if="canEdit" @click="emit('edit', employeeAdvance)" />
|
|
|
|
<RowApproveAction v-if="employeeAdvance.can_verify && can('employee_advances.verify')" tooltip="Setujui"
|
|
@click="approveConfirmOpen = true" />
|
|
|
|
<RowRejectAction v-if="employeeAdvance.can_verify && can('employee_advances.verify')" tooltip="Tolak"
|
|
@click="emit('reject', employeeAdvance)" />
|
|
|
|
<RowPayAction v-if="employeeAdvance.can_pay && can('employee_advances.pay')" tooltip="Lunasi Kasbon"
|
|
@click="payConfirmOpen = true" />
|
|
|
|
<template v-if="canDelete">
|
|
<RowDeleteAction :action-url="destroy.url(employeeAdvance.id)" title="Hapus kasbon?"
|
|
:description="`Pengajuan kasbon ${employeeAdvance.amount_formatted} akan dihapus.`"
|
|
error-message="Gagal menghapus kasbon." />
|
|
</template>
|
|
</div>
|
|
|
|
<ConfirmDialog v-if="can('employee_advances.verify')" v-model:open="approveConfirmOpen" title="Setujui kasbon?"
|
|
:description="`Kasbon ${employeeAdvance.amount_formatted} untuk ${employeeAdvance.employee_name} akan dicairkan. Saldo kas akan berkurang.`"
|
|
confirm-label="Setujui" cancel-label="Batal" :loading="approveProcessing" @confirm="approveEmployeeAdvance" />
|
|
|
|
<ConfirmDialog v-if="can('employee_advances.pay')" v-model:open="payConfirmOpen" title="Lunasi kasbon?"
|
|
:description="`Pelunasan kasbon ${employeeAdvance.amount_formatted} dari ${employeeAdvance.employee_name}. Saldo kas akan bertambah.`"
|
|
confirm-label="Lunasi" cancel-label="Batal" :loading="payProcessing" @confirm="payEmployeeAdvance" />
|
|
</template>
|