From 7b1fdc30f62099e1aa109c1a6682ffcd4e75d9a9 Mon Sep 17 00:00:00 2001
From: adityaalfarison <adityaalfarison33@gmail.com>
Date: Tue, 9 Sep 2025 11:16:56 +0700
Subject: [PATCH] modal, brankas, nampan

---
 resources/js/components/BrankasList.vue | 178 +++++++++++++++++++-----
 resources/js/components/TrayList.vue    | 155 +++++++++++----------
 2 files changed, 227 insertions(+), 106 deletions(-)

diff --git a/resources/js/components/BrankasList.vue b/resources/js/components/BrankasList.vue
index 958635f..552c4c1 100644
--- a/resources/js/components/BrankasList.vue
+++ b/resources/js/components/BrankasList.vue
@@ -1,33 +1,94 @@
 <template>
-  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+  <div>
+    <!-- Daftar Item -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+      <div
+        v-for="item in filteredItems"
+        :key="item.id"
+        class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition cursor-pointer"
+        @click="openMovePopup(item)"
+      >
+        <!-- Gambar & Info Produk -->
+        <div class="flex items-center gap-3">
+          <img
+            v-if="item.produk.foto?.length"
+            :src="item.produk.foto[0].url"
+            class="size-12 object-contain"
+          />
+          <div>
+            <p class="font-semibold">{{ item.produk.nama }}</p>
+            <p class="text-sm text-gray-500">ID: {{ item.produk.id }}</p>
+          </div>
+        </div>
+
+        <!-- Berat -->
+        <span class="font-medium">{{ item.produk.berat }}g</span>
+      </div>
+    </div>
+
+    <!-- Modal Pindah Nampan -->
     <div
-      v-for="item in filteredItems"
-      :key="item.id"
-      class="flex justify-between items-center border rounded-lg p-3 shadow-sm hover:shadow-md transition"
+      v-if="isPopupVisible"
+      class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
     >
-      <!-- Gambar -->
-      <div class="flex items-center gap-3">
-        <img
-           v-if="item.produk.foto && item.produk.foto.length > 0"
-      :src="item.produk.foto[0].url"
-          class="w-12 h-12 object-contain"
-        />
-        <!-- Info produk -->
-        <div>
-          <p class="font-semibold">{{ item.produk.nama }}</p>
-          <p class="text-sm text-gray-500">{{ item.produk.id }}</p>
+      <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
+        <!-- QR Code -->
+        <div class="flex justify-center mb-4">
+          <div class="p-2 border rounded-lg">
+            <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
+          </div>
+        </div>
+
+        <!-- Info Produk -->
+        <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>
+
+        <!-- Dropdown pilih nampan -->
+        <div class="mb-4">
+          <label for="tray-select" class="block text-sm font-medium mb-1">
+            Nama Nampan
+          </label>
+          <select
+            id="tray-select"
+            v-model="selectedTrayId"
+            class="w-full rounded-md border shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
+          >
+            
+            <option v-for="tray in trays" :key="tray.id" :value="tray.id">
+              {{ tray.nama }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Tombol -->
+        <div class="flex justify-end gap-2">
+          <button
+            @click="closePopup"
+            class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
+          >
+            Batal
+          </button>
+          <button
+            @click="saveMove"
+            :disabled="!selectedTrayId"
+            class="px-4 py-2 rounded text-white transition"
+            :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
+          >
+            Simpan
+          </button>
         </div>
       </div>
-
-      <!-- Berat -->
-      <span class="font-medium">{{ item.produk.berat }}g</span>
     </div>
   </div>
 </template>
 
+
+
 <script setup>
-
-
 import { ref, computed, onMounted } from "vue";
 import axios from "axios";
 
@@ -39,26 +100,81 @@ const props = defineProps({
 });
 
 const items = ref([]);
-const produk = ref([])
+const trays = ref([]);
 const loading = ref(true);
 const error = ref(null);
 
-onMounted(async () => {
-  try {
-    const res = await axios.get("/api/item",{
-        headers:{
-        Authorization: `Bearer ${localStorage.getItem("token")}`,
-        }
-    }); // ganti sesuai URL backend
-    items.value = res.data; // pastikan backend return array of items
-    console.log(res.data);
+// --- state modal
+const isPopupVisible = ref(false);
+const selectedItem = ref(null);
+const selectedTrayId = ref("");
 
+// QR Code generator
+const qrCodeUrl = computed(() => {
+  if (selectedItem.value) {
+    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
+    return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
+      data
+    )}`;
+  }
+  return "";
+});
+
+// --- fungsi modal
+const openMovePopup = (item) => {
+  selectedItem.value = item;
+  selectedTrayId.value = item.id_nampan;
+  isPopupVisible.value = true;
+};
+const closePopup = () => {
+  isPopupVisible.value = false;
+  selectedItem.value = null;
+  selectedTrayId.value = "";
+};
+
+const saveMove = async () => {
+  if (!selectedTrayId.value || !selectedItem.value) return;
+  try {
+    await axios.put(
+      `/api/item/${selectedItem.value.id}`,
+      {
+        id_nampan: selectedTrayId.value,
+        id_produk: selectedItem.value.id_produk,
+      },
+      {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }
+    );
+
+    await refreshData();
+    closePopup();
+  } catch (err) {
+    console.error("Gagal memindahkan item:", err.response?.data || err);
+    alert("Gagal memindahkan item. Silakan coba lagi.");
+  }
+};
+
+// --- ambil data
+const refreshData = async () => {
+  try {
+    const [itemRes, trayRes] = await Promise.all([
+      axios.get("/api/item", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+      axios.get("/api/nampan", {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }),
+    ]);
+    items.value = itemRes.data;
+    trays.value = trayRes.data;
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
     loading.value = false;
   }
-});
+};
+
+onMounted(refreshData);
 
 const filteredItems = computed(() => {
   if (!props.search) return items.value;
diff --git a/resources/js/components/TrayList.vue b/resources/js/components/TrayList.vue
index addc53e..bfb499f 100644
--- a/resources/js/components/TrayList.vue
+++ b/resources/js/components/TrayList.vue
@@ -4,36 +4,42 @@
 
     <div v-else-if="error" class="text-center text-red-500 py-6">{{ error }}</div>
 
-    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-30">
+    <div v-else-if="filteredTrays.length === 0" class="text-center text-gray-500 py-[120px]">
       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">
-      <div v-for="tray in filteredTrays" :key="tray.id"
-        class="border border-C rounded-lg p-4 shadow-sm hover:shadow-md transition">
+      <div
+        v-for="tray in filteredTrays"
+        :key="tray.id"
+        class="border rounded-xl p-4 shadow-sm hover:shadow-md transition"
+      >
         <div class="flex justify-between items-center mb-3">
-          <h2 class="font-bold text-lg" style="color: #102C57;">{{ tray.nama }}</h2>
+          <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-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>
           </div>
         </div>
 
-        <div v-if="tray.items && tray.items.length > 0" class="space-y-2 max-h-64 overflow-y-auto pr-2">
-          <div v-for="item in tray.items" :key="item.id" class="flex justify-between items-center border border-C rounded-lg p-2"
-            @click="openMovePopup(item)">
-
+        <div v-if="tray.items && tray.items.length" class="space-y-2 max-h-64 overflow-y-auto pr-2">
+          <div
+            v-for="item in tray.items"
+            :key="item.id"
+            class="flex justify-between items-center border rounded-lg p-2 cursor-pointer hover:bg-gray-50"
+            @click="openMovePopup(item)"
+          >
             <div class="flex items-center gap-3">
-              <img v-if="item.produk.foto && item.produk.foto.length > 0" :src="item.produk.foto[0].url"
-                alt="foto produk" class="w-12 h-12 object-cover rounded" />
-              <div>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.nama }}</p>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.kategori }}</p>
-                <p class="text-sm" style="color: #102C57;">{{ item.produk.harga_jual.toLocaleString() }}</p>
+              <img
+                v-if="item.produk.foto && item.produk.foto.length > 0"
+                :src="item.produk.foto[0].url"
+                alt="foto produk"
+                class="size-12 object-cover rounded"
+              />
+              <div class="text-[#102C57]">
+                <p class="text-sm">{{ item.produk.nama }}</p>
+                <p class="text-sm">{{ item.produk.kategori }}</p>
+                <p class="text-sm">{{ item.produk.harga_jual.toLocaleString() }}</p>
               </div>
             </div>
             <div class="flex items-center gap-2">
@@ -55,37 +61,57 @@
   </div>
 
   <!-- Pop-up pindah item -->
-  <div v-if="isPopupVisible" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
-    <div class="bg-white rounded-lg shadow-lg max-w-sm w-full p-6 relative">
+  <div
+    v-if="isPopupVisible"
+    class="fixed inset-0 bg-black/50 flex items-center justify-center p-4 z-50"
+  >
+    <div class="bg-white rounded-xl shadow-lg max-w-sm w-full p-6 relative">
       <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 class="p-2 border rounded-lg">
+          <img :src="qrCodeUrl" alt="QR Code" class="size-36" />
         </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="flex justify-center mb-4">
         <button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition">
           Cetak
         </button>
       </div>
+
+      <!-- Dropdown: langsung pilih Nampan saat ini -->
       <div class="mb-4">
-        <label for="tray-select" class="block text-sm font-medium text-gray-700 mb-1">Nama Nampan</label>
-        <select id="tray-select" v-model="selectedTrayId"
-          class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50">
-          <option value="" disabled>Pilih Nampan</option>
-          <option v-for="tray in availableTrays" :key="tray.id" :value="tray.id">
-            {{ tray.nama }}
+        <label for="tray-select" class="block text-sm font-medium mb-1">Nama Nampan</label>
+        <select
+          id="tray-select"
+          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>
         </select>
       </div>
+
       <div class="flex justify-end gap-2">
-        <button @click="closePopup"
-          class="px-4 py-2 rounded border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
+        <button
+          @click="closePopup"
+          class="px-4 py-2 rounded border text-gray-700 hover:bg-gray-100 transition"
+        >
           Batal
         </button>
-        <button @click="saveMove" :disabled="!selectedTrayId" class="px-4 py-2 rounded text-white transition"
-          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'">
+        <button
+          @click="saveMove"
+          :disabled="!selectedTrayId"
+          class="px-4 py-2 rounded text-white transition"
+          :class="selectedTrayId ? 'bg-orange-500 hover:bg-orange-600' : 'bg-gray-400 cursor-not-allowed'"
+        >
           Simpan
         </button>
       </div>
@@ -98,10 +124,7 @@ import { ref, onMounted, computed } from "vue";
 import axios from "axios";
 
 const props = defineProps({
-  search: {
-    type: String,
-    default: "",
-  },
+  search: { type: String, default: "" },
 });
 const emit = defineEmits(["edit", "delete"]);
 const trays = ref([]);
@@ -116,16 +139,16 @@ const selectedTrayId = ref("");
 // QR Code generator
 const qrCodeUrl = computed(() => {
   if (selectedItem.value) {
-    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, '')}`;
+    const data = `ITM-${selectedItem.value.id}-${selectedItem.value.produk.nama.replace(/\s/g, "")}`;
     return `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(data)}`;
   }
-  return '';
+  return "";
 });
 
 // --- Fungsi Pop-up ---
 const openMovePopup = (item) => {
   selectedItem.value = item;
-  selectedTrayId.value = "";
+  selectedTrayId.value = item.id_nampan; // ✅ tampilkan nampan saat ini (mis. A4)
   isPopupVisible.value = true;
 };
 
@@ -138,18 +161,16 @@ const closePopup = () => {
 const saveMove = async () => {
   if (!selectedTrayId.value || !selectedItem.value) return;
   try {
-    await axios.put(`/api/item/${selectedItem.value.id}`,
-  {
-    id_nampan: selectedTrayId.value,
-    id_produk: selectedItem.value.id_produk,
-  },
-  {
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem("token")}`,
-    },
-  }
-);
-
+    await axios.put(
+      `/api/item/${selectedItem.value.id}`,
+      {
+        id_nampan: selectedTrayId.value,
+        id_produk: selectedItem.value.id_produk,
+      },
+      {
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
+      }
+    );
 
     await refreshData();
     closePopup();
@@ -159,32 +180,24 @@ const saveMove = async () => {
   }
 };
 
-
 // --- Ambil data nampan + item ---
 const refreshData = async () => {
   try {
     const [nampanRes, itemRes] = await Promise.all([
       axios.get("/api/nampan", {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }),
       axios.get("/api/item", {
-        headers: {
-          Authorization: `Bearer ${localStorage.getItem("token")}`,
-        },
+        headers: { Authorization: `Bearer ${localStorage.getItem("token")}` },
       }),
     ]);
     const nampans = nampanRes.data;
     const items = itemRes.data;
 
-    trays.value = nampans.map((tray) => {
-      return {
-        ...tray,
-        // pastikan tipe sama (string/number)
-        items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
-      };
-    });
+    trays.value = nampans.map((tray) => ({
+      ...tray,
+      items: items.filter((item) => Number(item.id_nampan) === Number(tray.id)),
+    }));
   } catch (err) {
     error.value = err.message || "Gagal mengambil data";
   } finally {
@@ -207,14 +220,6 @@ const filteredTrays = computed(() => {
   );
 });
 
-// Daftar nampan lain (selain tempat item saat ini)
-const availableTrays = computed(() => {
-  if (!selectedItem.value || !trays.value) return [];
-  return trays.value.filter(
-    (tray) => Number(tray.id) !== Number(selectedItem.value.id_nampan)
-  );
-});
-
 onMounted(() => {
   refreshData();
 });