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

[Update] Tambah item

Browse Source
This commit is contained in:
Baghaztra 2025-09-12 14:15:42 +07:00
parent 75648b52d9
commit e67fb10e37
3 changed files with 76 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Controllers/ItemController.php
View File

@ -31,6 +31,8 @@ class ItemController extends Controller
$item = Item::create($validated);
$item->load('nampan');
return response()->json([
'message' => 'Item berhasil dibuat',
'data' => $item

1
resources/js/components/BrankasList.vue
View File

@ -1,4 +1,3 @@
// brankas list
<template>
<div v-if="loading" class="flex justify-center items-center h-screen">
<div class="animate-spin rounded-full h-8 w-8 border-b-2 border-C"></div>

103
resources/js/components/CreateItemModal.vue
View File

@ -1,9 +1,9 @@
<template>
<Modal :active="isOpen" size="md" @close="handleClose" clickOutside="false">
<div class="p-6">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
<div v-if="!success">
<h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Pilih Nampan</label>
<InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
@ -31,21 +31,22 @@
<!-- Success State -->
<div v-else>
<div class="text-center">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7">
</path>
</svg>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
<!-- QR Code -->
<div class="flex justify-center mb-4">
<div class="p-2 border border-gray-300 rounded-lg">
<img :src="qrCodeUrl" alt="QR Code" class="w-36 h-36" />
</div>
</div>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
<p class="text-gray-600 mb-2">
Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{
selectedNampanName }}.
</p>
<p class="text-sm text-gray-500 mb-6">
ID Item: <strong>{{ createdItem.id }}</strong>
</p>
<!-- Item Info -->
<div class="text-center text-gray-700 font-medium mb-1">
{{ createdItem?.kode_item }}
</div>
<div class="text-center text-gray-500 text-sm mb-6">
{{ product?.nama }} - {{ createdItem?.nampan?.nama || 'Brankas' }}
</div>
<div class="flex flex-row justify-between gap-3">
<button @click="handleClose"
@ -53,9 +54,8 @@
Selesai
</button>
<button @click="printItem"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors opacity-50 cursor-not-allowed"
disabled>
Print
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
<i class="fas fa-print mr-1"></i>Print
</button>
<button @click="addNewItem"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
@ -99,15 +99,15 @@ const success = ref(false);
const loading = ref(false);
const createdItem = ref(null);
// Computed
const selectedNampanName = computed(() => {
if (!selectedNampan.value) return 'Brankas';
console.log("Selected nampan ID:", selectedNampan.value);
const nampan = nampanList.value.find(n => n.id === Number(selectedNampan.value));
console.log("All nampan:", nampanList.value);
console.log("Selected nampan:", nampan);
return nampan ? nampan.nama : 'Brankas';
// QR Code generator - berdasarkan logika dari brankas list
const qrCodeUrl = computed(() => {
if (createdItem.value && props.product) {
const itemId = createdItem.value.id || createdItem.value.kode_item;
const productName = props.product.nama.replace(/\s/g, "");
const data = `ITM-${itemId}-${productName}`;
return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
}
return "";
});
// Methods
@ -156,6 +156,7 @@ const createItem = async () => {
createdItem.value = response.data.data
console.log('Item created:', createdItem);
loadNampanList();
} catch (error) {
console.error('Error creating item:', error);
alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
@ -167,10 +168,52 @@ const createItem = async () => {
const addNewItem = () => {
success.value = false;
selectedNampan.value = '';
createdItem.value = null;
};
// Fungsi print berdasarkan logika dari brankas list
const printItem = () => {
alert('Wak waw');
if (qrCodeUrl.value && createdItem.value && props.product) {
const printWindow = window.open('', '_blank');
const itemCode = createdItem.value.kode_item || createdItem.value.id;
printWindow.document.write(`
<html>
<head>
<title>Print QR Code - ${itemCode}</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
.qr-container {
border: 2px solid #ccc;
padding: 20px;
display: inline-block;
margin: 20px;
}
.item-info {
margin-top: 10px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="qr-container">
<img src="${qrCodeUrl.value}" alt="QR Code" style="width: 200px; height: 200px;" />
<div class="item-info">
<div style="font-weight: bold; margin-bottom: 5px;">${itemCode}</div>
<div>${props.product.nama}</div>
<div style="color: #666; margin-top: 5px;">${props.product.berat}g</div>
</div>
</div>
</body>
</html>
`);
printWindow.document.close();
printWindow.print();
}
};
const handleClose = () => {
@ -178,6 +221,7 @@ const handleClose = () => {
selectedNampan.value = '';
success.value = false;
loading.value = false;
createdItem.value = null;
emit('close');
};
@ -188,8 +232,9 @@ watch(() => props.isOpen, (newValue) => {
selectedNampan.value = '';
success.value = false;
loading.value = false;
createdItem.value = null;
loadNampanList();
}
});
</script>
</script>