brankaslist,traylist update
This commit is contained in:
adityaalfarison
parent
876c5301b3
commit
a1a665bebf
@ -1,4 +1,8 @@
|
||||
<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>
|
||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Daftar Item -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<div v-if="loading" class="text-center py-6">Loading...</div>
|
||||
<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>
|
||||
<span class="ml-2 text-gray-600">Memuat data...</span>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
|
||||
|
||||
@ -8,21 +11,31 @@
|
||||
Nampan tidak ditemukan.
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 ">
|
||||
<!-- Grid Card -->
|
||||
<div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 items-stretch">
|
||||
<div
|
||||
v-for="tray in filteredTrays"
|
||||
:key="tray.id"
|
||||
class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition"
|
||||
class="border border-C rounded-xl p-4 shadow-sm hover:shadow-md transition flex flex-col h-full"
|
||||
>
|
||||
<!-- Header Card -->
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<h2 class="font-bold text-lg text-[#102C57]">{{ tray.nama }}</h2>
|
||||
<div class="flex gap-2">
|
||||
<button class="p-2 rounded bg-yellow-400 hover:bg-yellow-500" @click="emit('edit', tray)">✏️</button>
|
||||
<button class="bg-red-500 text-white p-1 rounded" @click="emit('delete', tray.id)">🗑️</button>
|
||||
<button class="p-1 rounded" @click="emit('edit', tray)">
|
||||
<i class="fa fa-pen fa-sm text-yellow-500 hover:text-yellow-600"></i>
|
||||
</button>
|
||||
<button class="p-1 rounded" @click="emit('delete', tray.id)">
|
||||
<i class="fa fa-trash fa-sm text-red-500 hover:text-red-600"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
|
||||
<!-- Isi Card (Max tinggi 3 item + scroll kalau lebih) -->
|
||||
<div
|
||||
v-if="tray.items && tray.items.length"
|
||||
class="space-y-2 flex-1 overflow-y-auto max-h-[160px] pr-1"
|
||||
>
|
||||
<div
|
||||
v-for="item in tray.items"
|
||||
:key="item.id"
|
||||
@ -48,11 +61,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="text-gray-400 text-center py-4">
|
||||
<!-- Kalau kosong -->
|
||||
<div v-else class="text-gray-400 text-center py-4 flex-1">
|
||||
Nampan kosong.<br />
|
||||
Masuk ke menu <b>Brankas</b> untuk memindahkan item ke nampan.
|
||||
</div>
|
||||
|
||||
<!-- Footer Card -->
|
||||
<div class="border-t border-C mt-3 pt-2 text-right font-semibold">
|
||||
Berat Total: {{ totalWeight(tray) }}g
|
||||
</div>
|
||||
@ -72,8 +87,12 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center text-gray-700 font-medium mb-1">{{ selectedItem.produk.nama }}</div>
|
||||
<div class="text-center text-gray-500 text-sm mb-4">{{ selectedItem.produk.kategori }}</div>
|
||||
<div class="text-center text-gray-700 font-medium mb-1">
|
||||
{{ selectedItem.produk.nama }}
|
||||
</div>
|
||||
<div class="text-center text-gray-500 text-sm mb-4">
|
||||
{{ selectedItem.produk.kategori }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mb-4">
|
||||
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
|
||||
@ -81,7 +100,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Dropdown: langsung pilih Nampan saat ini -->
|
||||
<!-- Dropdown -->
|
||||
<div class="mb-4">
|
||||
<label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
|
||||
<select
|
||||
@ -89,12 +108,8 @@
|
||||
v-model="selectedTrayId"
|
||||
class="w-full rounded-md border shadow-sm focus:outline-none focus:ring focus:ring-indigo-200"
|
||||
>
|
||||
<option
|
||||
v-for="tray in trays"
|
||||
:key="tray.id"
|
||||
:value="tray.id"
|
||||
>
|
||||
{{ tray.nama }}<span v-if="Number(tray.id) === Number(selectedItem?.id_nampan)"></span>
|
||||
<option v-for="tray in trays" :key="tray.id" :value="tray.id">
|
||||
{{ tray.nama }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
@ -131,7 +146,7 @@ const trays = ref([]);
|
||||
const loading = ref(true);
|
||||
const error = ref(null);
|
||||
|
||||
// --- State untuk Pop-up ---
|
||||
// --- State Pop-up ---
|
||||
const isPopupVisible = ref(false);
|
||||
const selectedItem = ref(null);
|
||||
const selectedTrayId = ref("");
|
||||
@ -148,7 +163,7 @@ const qrCodeUrl = computed(() => {
|
||||
// --- Fungsi Pop-up ---
|
||||
const openMovePopup = (item) => {
|
||||
selectedItem.value = item;
|
||||
selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
|
||||
selectedTrayId.value = item.id_nampan;
|
||||
isPopupVisible.value = true;
|
||||
};
|
||||
|
||||
@ -171,7 +186,6 @@ const saveMove = async () => {
|
||||
headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
|
||||
}
|
||||
);
|
||||
|
||||
await refreshData();
|
||||
closePopup();
|
||||
} catch (err) {
|
||||
@ -212,7 +226,7 @@ const totalWeight = (tray) => {
|
||||
return total.toFixed(2);
|
||||
};
|
||||
|
||||
// Filter nampan berdasarkan pencarian
|
||||
// Filter nampan
|
||||
const filteredTrays = computed(() => {
|
||||
if (!props.search) return trays.value;
|
||||
return trays.value.filter((tray) =>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<!-- Header -->
|
||||
<div class="p-6">
|
||||
<!-- Judul -->
|
||||
<p class="font-serif italic text-[25px] text-D">NAMPAN</p>
|
||||
<p class="font-serif italic text-[25px] text-D">NAMPAN</p>
|
||||
|
||||
<!-- Searchbar -->
|
||||
<div class="flex justify-end mt-2">
|
||||
@ -33,78 +33,82 @@
|
||||
</div>
|
||||
|
||||
<!-- Search + List -->
|
||||
|
||||
<TrayList :search="searchQuery" @edit="editTray" @delete="deleteTray" />
|
||||
|
||||
<!-- Modal Tambah/Edit Nampan -->
|
||||
<div
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-96">
|
||||
<h2 class="text-lg font-semibold mb-4" style="color: #102c57">
|
||||
Tambah Nampan
|
||||
</h2>
|
||||
v-if="showModal"
|
||||
class="fixed inset-0 bg-black/75 flex justify-center items-center z-50 backdrop-blur-sm"
|
||||
>
|
||||
<div
|
||||
class="bg-white rounded-lg shadow-lg p-6 w-96 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"
|
||||
>
|
||||
<h2 class="text-lg font-semibold mb-4 text-[#102c57]">
|
||||
{{ editingTrayId ? "Edit Nampan" : "Tambah Nampan" }}
|
||||
</h2>
|
||||
|
||||
<label
|
||||
class="block mb-2 text-sm font-medium"
|
||||
style="color: #102c57"
|
||||
>Nama Nampan</label
|
||||
>
|
||||
<input
|
||||
v-model="trayName"
|
||||
type="text"
|
||||
placeholder="Contoh: A4"
|
||||
class="w-full border rounded-md p-2 mb-4"
|
||||
/>
|
||||
<label class="block mb-2 text-sm font-medium text-[#102c57]">
|
||||
Nama Nampan
|
||||
</label>
|
||||
<input
|
||||
v-model="trayName"
|
||||
type="text"
|
||||
placeholder="Contoh: A4"
|
||||
class="w-full border rounded-md p-2 mb-4"
|
||||
/>
|
||||
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
@click="saveTray"
|
||||
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md"
|
||||
style="color: #102c57"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end gap-2">
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="px-4 py-2 bg-gray-400 hover:bg-gray-500 text-white rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
@click="saveTray"
|
||||
class="px-4 py-2 bg-[#DAC0A3] hover:bg-[#C9A77E] rounded-md text-[#102c57]"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Konfirmasi Kosongkan -->
|
||||
<div
|
||||
v-if="showConfirmModal"
|
||||
class="fixed inset-0 bg-black bg-opacity-40 flex justify-center items-center z-50"
|
||||
v-if="showConfirmModal"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
|
||||
>
|
||||
<div class="bg-white rounded-lg shadow-lg p-6 w-96 text-center">
|
||||
<h2 class="text-xl font-bold mb-3" style="color: #102c57">
|
||||
Kosongkan semua nampan?
|
||||
</h2>
|
||||
<p class="text-gray-600 mb-6">
|
||||
Semua item akan dimasukkan ke brankas. <br />
|
||||
Masuk ke menu ‘Brankas’ untuk mengembalikan item ke nampan.
|
||||
</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<button
|
||||
@click="closeConfirmModal"
|
||||
class="px-5 py-2 bg-gray-300 hover:bg-gray-400 rounded-md font-semibold"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 bg-red-500 hover:bg-red-600 text-white rounded-md font-semibold"
|
||||
>
|
||||
Ya
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all duration-300 scale-95 opacity-0 animate-fadeIn"
|
||||
>
|
||||
<!-- Judul -->
|
||||
<h2 class="text-xl font-bold text-[#102c57] mb-3 text-center">
|
||||
Kosongkan semua nampan?
|
||||
</h2>
|
||||
|
||||
<!-- Deskripsi -->
|
||||
<p class="text-gray-600 text-sm mb-6 text-center leading-relaxed">
|
||||
Semua item akan dimasukkan ke <span class="font-semibold">Brankas</span>.<br />
|
||||
Masuk ke menu <b>Brankas</b> untuk mengembalikan item ke nampan.
|
||||
</p>
|
||||
|
||||
<!-- Tombol -->
|
||||
<div class="flex justify-center gap-3">
|
||||
<button
|
||||
@click="closeConfirmModal"
|
||||
class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition"
|
||||
>
|
||||
Batal
|
||||
</button>
|
||||
<button
|
||||
@click="confirmEmptyTray"
|
||||
class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition"
|
||||
>
|
||||
Ya, Kosongkan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mainLayout>
|
||||
</template>
|
||||
@ -122,6 +126,7 @@ const showConfirmModal = ref(false);
|
||||
const trayName = ref("");
|
||||
const editingTrayId = ref(null);
|
||||
|
||||
|
||||
// buka modal tambah/edit
|
||||
const openModal = () => {
|
||||
showModal.value = true;
|
||||
@ -145,9 +150,7 @@ const saveTray = async () => {
|
||||
{ nama: trayName.value },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -158,9 +161,7 @@ const saveTray = async () => {
|
||||
{ nama: trayName.value },
|
||||
{
|
||||
headers: {
|
||||
Authorization: `Bearer ${localStorage.getItem(
|
||||
"token"
|
||||
)}`,
|
||||
Authorization: `Bearer ${localStorage.getItem("token")}`,
|
||||
},
|
||||
}
|
||||
);
|
||||
@ -220,3 +221,20 @@ const deleteTray = async (id) => {
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn 0.25s ease-out forwards;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user