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

[update] membuat item dari halaman produk

Browse Source
This commit is contained in:
Baghaztra 2025-08-28 23:56:30 +07:00
parent 8046360f6e
commit 4e06c25082
3 changed files with 89 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,40 +4,24 @@
<h3 class="text-lg font-semibold text-gray-900 mb-4">Item {{ product?.nama }}</h3>
<div v-if="!success">
<div class="mb-4">
<p class="text-gray-600 mb-4">Produk "<strong>{{ product?.nama }}</strong>" berhasil dibuat!</p>
<div class="mb-4">
<label class="block text-gray-700 mb-2">Pilih Nampan</label>
<select
v-model="selectedNampan"
class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
:disabled="loading"
>
<option value="">Brankas</option>
<option v-for="nampan in nampanList" :key="nampan.id" :value="nampan.id">
{{ nampan.nama }} ({{ nampan.items_count }} items)
</option>
</select>
</div>
<InputSelect v-model="selectedNampan" :options="positionListOptions" :disabled="loading" />
</div>
<div class="flex justify-end gap-3">
<button
@click="handleClose"
:disabled="loading"
class="px-4 py-2 text-gray-600 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors disabled:opacity-50"
>
<button @click="handleClose" :disabled="loading"
class="px-4 py-2 text-white bg-gray-400 hover:bg-gray-500 rounded-lg transition-colors disabled:opacity-50">
Batal
</button>
<button
@click="createItem"
:disabled="loading"
class="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors disabled:bg-blue-400 disabled:cursor-not-allowed flex items-center gap-2"
>
<button @click="createItem" :disabled="loading"
class="px-4 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors disabled:bg-A disabled:cursor-not-allowed flex items-center gap-2">
<svg v-if="loading" class="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
</circle>
<path class="opacity-75" fill="currentColor"
d="m4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
</path>
</svg>
{{ loading ? 'Membuat...' : 'Buat Item' }}
</button>
@ -48,33 +32,34 @@
<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">
<!-- QR CODe HERE -->
<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>
</div>
<h4 class="text-lg font-semibold text-gray-900 mb-2">Item Berhasil Dibuat!</h4>
<p class="text-gray-600 mb-6">
Item dari produk "<strong>{{ product?.nama }}</strong>" telah ditambahkan ke {{ selectedNampanName }}.
<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>
<div class="flex flex-row justify-between gap-3">
<button
@click="$emit('finish')"
class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors"
>
<button @click="handleClose"
class="flex-1 px-6 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-lg transition-colors">
Selesai
</button>
<button
@click="$emit('print')"
<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
>
disabled>
Print
</button>
<button
@click="addNewItem"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors"
>
Tambah Item Baru
<button @click="addNewItem"
class="flex-1 px-6 py-2 bg-C hover:bg-B text-D rounded-lg transition-colors">
Buat Lagi
</button>
</div>
</div>
@ -87,6 +72,7 @@
import { ref, computed, watch } from 'vue';
import axios from 'axios';
import Modal from './Modal.vue';
import InputSelect from './InputSelect.vue';
// Props
const props = defineProps({
@ -100,16 +86,27 @@ const props = defineProps({
}
});
const emit = defineEmits(['close', 'finish', 'print', 'item-created']);
// Emits
const emit = defineEmits(['close']);
// State
const selectedNampan = ref('');
const nampanList = ref([]);
const positionListOptions = ref([
{ value: '', label: 'Brankas', selected: true },
])
const success = ref(false);
const loading = ref(false);
const createdItem = ref(null);
// Computed
const selectedNampanName = computed(() => {
if (!selectedNampan.value) return 'Brankas';
const nampan = nampanList.value.find(n => n.id === selectedNampan.value);
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';
});
@ -118,6 +115,14 @@ const loadNampanList = async () => {
try {
const response = await axios.get('/api/nampan');
nampanList.value = response.data;
positionListOptions.value = [
{ value: '', label: 'Brankas', selected: !selectedNampan.value },
...nampanList.value.map(n => ({
value: n.id,
label: `${n.nama} (${n.items_count} items)`,
selected: n.id === selectedNampan.value
}))
];
} catch (error) {
console.error('Error loading nampan list:', error);
}
@ -140,11 +145,9 @@ const createItem = async () => {
const response = await axios.post('/api/item', payload);
success.value = true;
emit('item-created', {
item: response.data,
product: props.product,
nampan: selectedNampanName.value
});
createdItem.value = response.data.data
console.log('Item created:', createdItem);
} catch (error) {
console.error('Error creating item:', error);
alert('Gagal membuat item: ' + (error.response?.data?.message || error.message));
@ -154,15 +157,12 @@ const createItem = async () => {
};
const addNewItem = () => {
// Reset state untuk item baru
success.value = false;
selectedNampan.value = '';
};
// Emit event untuk membuat item baru
emit('item-created', {
newItem: true,
product: props.product
});
const printItem = () => {
alert('Wak waw');
};
const handleClose = () => {

22
resources/js/pages/InputProduk.vue
View File

@ -5,9 +5,6 @@
:isOpen="openItemModal"
:product="createdProduct"
@close="closeItemModal"
@finish="goToProductList"
@print="printItem"
@item-created="handleItemCreated"
/>
<div class="p-6">
@ -161,7 +158,6 @@ const fileInput = ref(null);
// TODO: Logika autentikasi user
const userId = ref(1);
// Modal item variables - Simplified karena logic sudah dipindah ke component
const openItemModal = ref(false);
const createdProduct = ref(null);
@ -196,7 +192,6 @@ const loadExistingPhotos = async () => {
}
};
// Simplified modal handlers
const openCreateItemModal = (product) => {
createdProduct.value = product;
openItemModal.value = true;
@ -209,23 +204,6 @@ const closeItemModal = () => {
router.replace('/produk');
};
const goToProductList = () => {
closeItemModal();
};
const printItem = () => {
alert('Wak waw');
};
// Handle item creation events from modal
const handleItemCreated = (data) => {
if (data.newItem) {
return;
}
console.log('Item created:', data);
};
const triggerFileInput = () => {
if (!uploadLoading.value && uploadedImages.value.length < 6) {
fileInput.value?.click();

33
resources/js/pages/Produk.vue
View File

@ -1,5 +1,12 @@
<template>
<mainLayout>
<!-- Modal Buat Item - Sekarang menggunakan komponen terpisah -->
<CreateItemModal
:isOpen="creatingItem"
:product="detail"
@close="closeItemModal"
/>
<div class="p-6">
<!-- Judul -->
<p class="font-serif italic text-[25px] text-D">PRODUK</p>
@ -41,7 +48,6 @@
</div>
<!-- Overlay Detail Produk -->
<!-- Overlay Detail Produk -->
<div
v-if="showOverlay"
class="fixed inset-0 bg-black/30 flex justify-center items-center z-50"
@ -63,7 +69,7 @@
<!-- Stok (pcs) pojok kiri atas -->
<div class="absolute top-1 left-1 bg-black/60 text-white text-xs px-2 py-1 rounded">
{{ detail.item_count }} pcs
{{ detail.items_count }} pcs
</div>
<!-- Nama Produk di bawah -->
@ -109,7 +115,7 @@
<button class="bg-yellow-400 text-black px-4 py-2 rounded font-bold">
Ubah
</button>
<button class="bg-green-400 text-black px-4 py-2 rounded font-bold">
<button @click="openItemModal" class="bg-green-400 text-black px-4 py-2 rounded font-bold">
Tambah
</button>
<button class="bg-red-500 text-white px-4 py-2 rounded font-bold">
@ -128,10 +134,21 @@ import axios from "axios";
import mainLayout from "../layouts/mainLayout.vue";
import ProductCard from "../components/ProductCard.vue";
import searchbar from "../components/searchbar.vue";
import CreateItemModal from "../components/CreateItemModal.vue";
const products = ref([]);
const searchQuery = ref("");
const selectedCategory = ref("semua");
const creatingItem = ref(false);
const openItemModal = () => {
console.log("open item modal", detail.value);
creatingItem.value = true;
};
const closeItemModal = () => {
creatingItem.value = false;
};
// overlay state
const showOverlay = ref(false);
@ -171,20 +188,14 @@ const filteredProducts = computed(() => {
// buka overlay
async function openOverlay(id) {
try {
const res = await axios.get(`/api/produk/${id}`);
detail.value = res.data;
currentFotoIndex.value = 0; // reset ke foto pertama
detail.value = products.value.find(p => p.id === id) ;
currentFotoIndex.value = 0;
showOverlay.value = true;
} catch (error) {
console.error("Gagal fetch detail produk:", error);
}
}
// tutup overlay
function closeOverlay() {
showOverlay.value = false;
detail.value = {};
currentFotoIndex.value = 0;
}