Magang-2025/Kasir
11
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update KasirForm.vue

Browse Source
This commit is contained in:
timotiabbauftech 2025-09-08 14:42:59 +07:00
parent 7766fd8938
commit 7083d585f1
1 changed files with 242 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

249
resources/js/components/KasirForm.vue
View File

@ -1,32 +1,70 @@
<template> <template>
<ConfirmDeleteModal
:isOpen="showDeleteModal"
title="Konfirmasi"
message="Yakin ingin menghapus item ini?"
@confirm="hapusPesanan"
@cancel="closeDeleteModal"
/>
<div> <div>
<div class="grid grid-cols-2 h-full gap-4 mb-4"> <div class="grid grid-cols-2 h-full gap-4 mb-4">
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<label class="block text-sm font-medium text-D">Kode Item *</label> <label class="block text-sm font-medium text-D"
<div class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"> >Kode Item *</label
<input type="text" v-model="kodeItem" @keyup.enter="inputItem" placeholder="Scan atau masukkan kode item" >
class=" bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md" /> <div
<button v-if="!loadingItem" @click="inputItem" class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"><i class="flex flex-row justify-between mt-1 w-full rounded-md bg-A shadow-sm sm:text-sm border-B"
class="fas fa-arrow-right"></i></button> >
<div v-else class="flex items-center justify-center px-3"> <input
<div class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"> type="text"
v-model="kodeItem"
@keyup.enter="inputItem"
placeholder="Scan atau masukkan kode item"
class="bg-A focus:outline-none focus:border-C focus:ring focus:ring-D focus:ring-opacity-50 p-2 w-full rounded-l-md"
/>
<button
v-if="!loadingItem"
@click="inputItem"
class="px-3 bg-D hover:bg-D/80 text-A rounded-r-md"
>
<i class="fas fa-arrow-right"></i>
</button>
<div
v-else
class="flex items-center justify-center px-3"
>
<div
class="rounded-full h-5 w-5 border-b-2 border-A flex items-center justify-center"
>
<i class="fas fa-spinner"></i> <i class="fas fa-spinner"></i>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div> <div>
<label class="block text-sm font-medium text-D">Harga Jual</label> <label class="block text-sm font-medium text-D"
<InputField v-model="hargaJual" type="number" placeholder="Masukkan Harga Jual" /> >Harga Jual</label
>
<InputField
v-model="hargaJual"
type="number"
placeholder="Masukkan Harga Jual"
/>
</div> </div>
<div class="flex justify-between gap-4"> <div class="flex justify-between gap-4">
<button @click="tambahItem" class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"> <button
@click="tambahItem"
class="px-4 py-2 rounded-md bg-C text-D font-medium hover:bg-C/80 transition"
>
Tambah Item Tambah Item
</button> </button>
<button @click="konfirmasiPenjualan" <button
class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"> @click="konfirmasiPenjualan"
class="px-6 py-2 rounded-md bg-D text-A font-semibold hover:bg-D/80 transition"
>
Lanjut Lanjut
</button> </button>
</div> </div>
@ -42,28 +80,58 @@
</div> </div>
<div class="mb-4"> <div class="mb-4">
<p v-if="error" :class="{ 'animate-shake': error }" class="text-sm text-red-600 mt-1">{{ error }}</p> <p
v-if="error"
:class="{ 'animate-shake': error }"
class="text-sm text-red-600 mt-1"
>
{{ error }}
</p>
<p v-if="info" class="text-sm text-C mt-1">{{ info }}</p> <p v-if="info" class="text-sm text-C mt-1">{{ info }}</p>
</div> </div>
<table class="w-full border border-B text-sm rounded-lg overflow-hidden"> <table
class="w-full border border-B text-sm rounded-lg overflow-hidden"
>
<thead class="bg-A text-D"> <thead class="bg-A text-D">
<tr> <tr>
<th class="border border-B p-2">No</th> <th class="border border-B p-2">No</th>
<th class="border border-B p-2">Nam Produk</th> <th class="border border-B p-2">Nam Produk</th>
<th class="border border-B p-2">Posisi</th> <th class="border border-B p-2">Posisi</th>
<th class="border border-B p-2">Harga</th> <th class="border border-B p-2">Harga</th>
<th class="border border-B p-2"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-if="pesanan.length == 0" class="text-center text-D/70"> <tr v-if="pesanan.length == 0" class="text-center text-D/70">
<td colspan="5" class="h-20 border border-B">Belum ada item dipesan</td> <td colspan="5" class="h-20 border border-B">
Belum ada item dipesan
</td>
</tr> </tr>
<tr v-else v-for="(item, index) in pesanan" :key="index" class="hover:bg-gray-50 text-center"> <tr
v-else
v-for="(item, index) in pesanan"
:key="index"
class="hover:bg-gray-50 text-center"
>
<td class="border border-B p-2">{{ index + 1 }}</td> <td class="border border-B p-2">{{ index + 1 }}</td>
<td class="border border-B p-2 text-left">{{ item.produk.nama }}</td> <td class="border border-B p-2 text-left">
<td class="border border-B p-2">{{ item.posisi ? item.posisi : 'Brankas' }}</td> {{ item.produk.nama }}
<td class="border border-B p-2">Rp{{ item.harga_deal.toLocaleString() }}</td> </td>
<td class="border border-B p-2">
{{ item.posisi ? item.posisi : "Brankas" }}
</td>
<td class="border border-B p-2">
Rp{{ item.harga_deal.toLocaleString() }}
</td>
<td class="border border-B p-2 text-center">
<button
@click="openDeleteModal(index)"
class="text-red-500 hover:text-red-700"
>
<i class="fas fa-trash"></i>
</button>
</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
@ -71,115 +139,138 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed } from "vue";
import InputField from './InputField.vue' import InputField from "./InputField.vue";
import axios from 'axios' import axios from "axios";
import ConfirmDeleteModal from "./ConfirmDeleteModal.vue";
const kodeItem = ref('') const kodeItem = ref("");
const info = ref('') const info = ref("");
const error = ref('') const error = ref("");
const hargaJual = ref(null) const hargaJual = ref(null);
const item = ref(null) const item = ref(null);
const loadingItem = ref(false) const loadingItem = ref(false);
const pesanan = ref([]) const pesanan = ref([]);
const showDeleteModal = ref(false)
const deleteIndex = ref(null)
let errorTimeout = null let errorTimeout = null;
let infoTimeout = null let infoTimeout = null;
const inputItem = async () => { const inputItem = async () => {
if (!kodeItem.value) return if (!kodeItem.value) return;
info.value = '' info.value = "";
error.value = '' error.value = "";
clearTimeout(infoTimeout) clearTimeout(infoTimeout);
clearTimeout(errorTimeout) clearTimeout(errorTimeout);
loadingItem.value = true loadingItem.value = true;
try { try {
const response = await axios.get(`/api/item/${kodeItem.value}`, { const response = await axios.get(`/api/item/${kodeItem.value}`, {
headers: { headers: {
Authorization: `Bearer ${localStorage.getItem("token")}`, Authorization: `Bearer ${localStorage.getItem("token")}`,
}, },
});; });
item.value = response.data; item.value = response.data;
hargaJual.value = item.value.produk.harga_jual hargaJual.value = item.value.produk.harga_jual;
if (item.value.is_sold) { if (item.value.is_sold) {
throw new Error('Item sudah terjual') throw new Error("Item sudah terjual");
} }
if (pesanan.value.some(p => p.id === item.value.id)) { if (pesanan.value.some((p) => p.id === item.value.id)) {
throw new Error('Item sedang dipesan') throw new Error("Item sedang dipesan");
} }
info.value = `Item dipilih: ${item.value.produk.nama} dari ${item.value.posisi ? item.value.posisi : 'Brankas'}` info.value = `Item dipilih: ${item.value.produk.nama} dari ${
item.value.posisi ? item.value.posisi : "Brankas"
}`;
infoTimeout = setTimeout(() => { infoTimeout = setTimeout(() => {
info.value = '' info.value = "";
}, 3000) }, 3000);
} catch (err) { } catch (err) {
if (err == '') { if (err == "") {
error.value = 'Error: Item tidak ditemukan' error.value = "Error: Item tidak ditemukan";
} else { } else {
error.value = err error.value = err;
} }
info.value = '' info.value = "";
hargaJual.value = null hargaJual.value = null;
item.value = null item.value = null;
errorTimeout = setTimeout(() => { errorTimeout = setTimeout(() => {
error.value = '' error.value = "";
}, 3000) }, 3000);
} finally { } finally {
loadingItem.value = false loadingItem.value = false;
}
} }
};
const tambahItem = () => { const tambahItem = () => {
if (!item.value || !hargaJual.value) { if (!item.value || !hargaJual.value) {
error.value = 'Scan atau masukkan kode item untuk dijual.' error.value = "Scan atau masukkan kode item untuk dijual.";
if (kodeItem.value) { if (kodeItem.value) {
error.value = 'Masukkan harga jual, atau input dari kode item lagi.' error.value =
"Masukkan harga jual, atau input dari kode item lagi.";
} }
clearTimeout(errorTimeout) clearTimeout(errorTimeout);
errorTimeout = setTimeout(() => { errorTimeout = setTimeout(() => {
error.value = '' error.value = "";
}, 3000) }, 3000);
return return;
} }
// harga deal // harga deal
item.value.harga_deal = hargaJual.value item.value.harga_deal = hargaJual.value;
pesanan.value.push(item.value) pesanan.value.push(item.value);
// Reset input fields // Reset input fields
kodeItem.value = '' kodeItem.value = "";
hargaJual.value = null hargaJual.value = null;
item.value = null item.value = null;
info.value = '' info.value = "";
clearTimeout(infoTimeout) clearTimeout(infoTimeout);
};
const openDeleteModal = (index) => {
deleteIndex.value = index
showDeleteModal.value = true
} }
const closeDeleteModal = () => {
showDeleteModal.value = false
deleteIndex.value = null
}
const hapusPesanan = () => {
if (deleteIndex.value !== null) {
pesanan.value.splice(deleteIndex.value, 1)
}
closeDeleteModal()
}
const konfirmasiPenjualan = () => { const konfirmasiPenjualan = () => {
if (pesanan.value.length === 0) { if (pesanan.value.length === 0) {
error.value = 'Belum ada item yang dipesan.' error.value = "Belum ada item yang dipesan.";
clearTimeout(errorTimeout) clearTimeout(errorTimeout);
errorTimeout = setTimeout(() => { errorTimeout = setTimeout(() => {
error.value = '' error.value = "";
}, 3000) }, 3000);
return return;
} }
// Todo: Implementasi konfirmasi penjualan // Todo: Implementasi konfirmasi penjualan
alert('Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)') alert("Penjualan dikonfirmasi! (Implementasi lebih lanjut diperlukan)");
} };
const total = computed(() => { const total = computed(() => {
let sum = 0; let sum = 0;
pesanan.value.forEach(item => { pesanan.value.forEach((item) => {
sum += item.harga_deal; sum += item.harga_deal;
}); });
return sum; return sum;
}) });
</script> </script>