90 lines
2.8 KiB
Vue
90 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import { Head, router } from '@inertiajs/vue3';
|
|
import { Loader2, Send } from '@lucide/vue';
|
|
import { ref } from 'vue';
|
|
import BackButton from '@/components/button/BackButton.vue';
|
|
import { Button } from '@/components/ui/button';
|
|
import AdminLayout from '@/layouts/AdminLayout.vue';
|
|
import { index, submit } from '@/routes/admin/manage/stok-opnames';
|
|
import type { CatalogProduct } from '@/types/stok-opname';
|
|
import StokOpnameAutoSaveStatus from './form/StokOpnameAutoSaveStatus.vue';
|
|
import StokOpnameInfoSection from './form/StokOpnameInfoSection.vue';
|
|
import StokOpnameProductTable from './form/StokOpnameProductTable.vue';
|
|
import { useStokOpnameForm } from './form/useStokOpnameForm';
|
|
|
|
const props = defineProps<{
|
|
catalog: CatalogProduct[];
|
|
}>();
|
|
|
|
const submitting = ref(false);
|
|
|
|
const {
|
|
opnameDate,
|
|
notes,
|
|
stokOpnameId,
|
|
saving,
|
|
lastSaved,
|
|
variantRows,
|
|
itemsPayload,
|
|
groupedProducts,
|
|
onRowChange,
|
|
} = useStokOpnameForm({
|
|
catalog: () => props.catalog,
|
|
initialOpnameDate: new Date().toISOString().split('T')[0],
|
|
initialNotes: '',
|
|
initialStokOpnameId: null,
|
|
});
|
|
|
|
function submitForVerification() {
|
|
if (!stokOpnameId.value) {
|
|
return;
|
|
}
|
|
|
|
submitting.value = true;
|
|
router.post(submit.url(stokOpnameId.value), {}, {
|
|
onFinish: () => {
|
|
submitting.value = false;
|
|
},
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Tambah Stok Opname" />
|
|
|
|
<AdminLayout>
|
|
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="space-y-1">
|
|
<h2 class="text-2xl font-bold tracking-tight">Stok Opname</h2>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-3">
|
|
<StokOpnameAutoSaveStatus :saving="saving" :last-saved="lastSaved" />
|
|
<BackButton :href="index.url()" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-6">
|
|
<StokOpnameInfoSection v-model:opname-date="opnameDate" v-model:notes="notes" />
|
|
|
|
<StokOpnameProductTable
|
|
:grouped-products="groupedProducts"
|
|
:is-empty="variantRows.length === 0"
|
|
@row-change="onRowChange"
|
|
/>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<BackButton :href="index.url()" label="Kembali" />
|
|
<Button
|
|
:disabled="!stokOpnameId || itemsPayload.length === 0 || submitting"
|
|
@click="submitForVerification"
|
|
>
|
|
<Send v-if="!submitting" class="mr-1.5 size-4" />
|
|
<Loader2 v-else class="mr-1.5 size-4 animate-spin" />
|
|
{{ submitting ? 'Mengajukan...' : 'Ajukan Verifikasi' }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</AdminLayout>
|
|
</template>
|