Update EditProduk.vue

resources/js/pages/EditProduk.vue

@@ -54,9 +54,7 @@
 
                     <div class="mb-3 flex flex-row w-full gap-3">
                         <div class="flex-1">
-                            <label class="block text-D mb-1"
+                            <label class="block text-D mb-1">Harga per Gram</label>
-                                >Harga per Gram</label
-                            >
                             <InputField
                                 v-model="form.harga_per_gram"
                                 type="number"
@@ -81,7 +79,7 @@
                 <div class="flex-1">
                     <label class="block text-D mb-1">Foto</label>
 
-                    <div class="grid grid-cols-3 gap-3">
+                    <div class="grid grid-cols-3 gap-3 relative">
                         <!-- Existing Images -->
                         <div
                             v-for="(image, index) in uploadedImages"
@@ -110,12 +108,15 @@
                         <!-- Upload Button -->
                         <div
                             v-if="uploadedImages.length < 6"
+                            class="relative aspect-square"
+                        >
+                            <div
                                 @drop="handleDrop"
                                 @dragover.prevent
                                 @dragenter.prevent="isDragging = true"
                                 @dragleave.prevent="isDragging = false"
-                            @click="triggerFileInput"
+                                @click="toggleUploadMenu"
-                            class="aspect-square bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
+                                class="w-full h-full bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-D hover:bg-blue-50 transition-colors group"
                                 :class="{
                                     'border-blue-400 bg-blue-50': isDragging,
                                     'cursor-not-allowed opacity-50': uploadLoading,
@@ -174,6 +175,72 @@
                                     ></p>
                                 </div>
                             </div>
+
+                            <!-- Dropdown Menu -->
+                            <div
+                                v-if="showUploadMenu"
+                                class="absolute top-full left-0 mt-2 w-60 bg-white border border-gray-200 rounded-lg shadow-lg z-20"
+                            >
+                                <button
+                                    @click="triggerFileUpload"
+                                    class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3 border-b border-gray-100"
+                                >
+                                    <svg
+                                        class="w-5 h-5 text-gray-600"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                                        ></path>
+                                    </svg>
+                                    <div>
+                                        <div class="font-medium text-gray-900">
+                                            Upload dari File
+                                        </div>
+                                        <div class="text-sm text-gray-500">
+                                            Pilih foto dari galeri
+                                        </div>
+                                    </div>
+                                </button>
+                                <button
+                                    @click="openCameraModal"
+                                    class="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center space-x-3"
+                                >
+                                    <svg
+                                        class="w-5 h-5 text-gray-600"
+                                        fill="none"
+                                        stroke="currentColor"
+                                        viewBox="0 0 24 24"
+                                    >
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+                                        />
+                                        <path
+                                            stroke-linecap="round"
+                                            stroke-linejoin="round"
+                                            stroke-width="2"
+                                            d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"
+                                        />
+                                    </svg>
+                                    <div>
+                                        <div class="font-medium text-gray-900">
+                                            Ambil dari Kamera
+                                        </div>
+                                        <div class="text-sm text-gray-500">
+                                            Foto langsung dengan kamera
+                                        </div>
+                                    </div>
+                                </button>
+                            </div>
+                        </div>
                     </div>
 
                     <input
@@ -214,6 +281,43 @@
                 </button>
             </div>
         </div>
+
+        <!-- Overlay -->
+        <div
+            v-if="showUploadMenu"
+            @click="showUploadMenu = false"
+            class="fixed inset-0 z-10"
+        ></div>
+
+        <!-- Camera Modal -->
+        <div
+            v-if="showCamera"
+            class="fixed inset-0 bg-black/75 flex items-center justify-center z-[9999]"
+        >
+            <div class="bg-white w-[480px] rounded-lg shadow-lg p-4 relative">
+                <video
+                    ref="video"
+                    autoplay
+                    playsinline
+                    class="w-full h-64 bg-black rounded"
+                ></video>
+                <canvas ref="canvas" class="hidden"></canvas>
+                <div class="mt-3 flex justify-between">
+                    <button
+                        @click="closeCamera"
+                        class="px-4 py-2 bg-gray-400 text-white rounded"
+                    >
+                        Batal
+                    </button>
+                    <button
+                        @click="capturePhoto"
+                        class="px-4 py-2 bg-blue-500 text-white rounded"
+                    >
+                        Ambil Foto
+                    </button>
+                </div>
+            </div>
+        </div>
     </mainLayout>
 </template>
 
@@ -225,7 +329,6 @@ import mainLayout from "../layouts/mainLayout.vue";
 import InputField from "../components/InputField.vue";
 import InputSelect from "../components/InputSelect.vue";
 import CreateItemModal from "../components/CreateItemModal.vue";
-import { errorMessages } from "@vue/compiler-core";
 
 const route = useRoute();
 const router = useRouter();
@@ -248,6 +351,11 @@ const uploadLoading = ref(false);
 const uploadError = ref("");
 const isDragging = ref(false);
 const fileInput = ref(null);
+const showUploadMenu = ref(false);
+const showCamera = ref(false);
+const video = ref(null);
+const canvas = ref(null);
+let stream = null;
 
 const openItemModal = ref(false);
 const editedProduct = ref(null);
@@ -272,23 +380,26 @@ const calculateHargaJual = () => {
 };
 
 const loadKategori = async () => {
+    try {
         const response = await axios.get("/api/kategori", {
             headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
         });
         category.value = response.data.map((c) => ({ value: c.id, label: c.nama }));
+    } catch (error) {
+        console.error("Error loading categories:", error);
+    }
 };
 
 const loadProduk = async () => {
+    try {
         const response = await axios.get(`/api/produk/edit/${productId}`, {
             headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
         });
         const produk = response.data;
-    // console.log(produk);
-
         form.value = {
             nama: produk.nama,
             id_kategori: produk.id_kategori,
@@ -297,6 +408,9 @@ const loadProduk = async () => {
             harga_per_gram: produk.harga_per_gram,
             harga_jual: produk.harga_jual,
         };
+    } catch (error) {
+        console.error("Error loading product:", error);
+    }
 };
 
 const loadFoto = async () => {
@@ -307,20 +421,23 @@ const loadFoto = async () => {
             },
         });
         uploadedImages.value = response.data;
-        // console.log(uploadedImages.value);
+    } catch (error) {
-    } catch (e) {
+        console.error("Error loading photos:", error);
-        console.error(e);
-
         uploadError.value = "Gagal memuat foto";
     }
 };
 
-const triggerFileInput = () => {
+const toggleUploadMenu = () => {
     if (!uploadLoading.value && uploadedImages.value.length < 6) {
-        fileInput.value?.click();
+        showUploadMenu.value = !showUploadMenu.value;
     }
 };
 
+const triggerFileUpload = () => {
+    showUploadMenu.value = false;
+    fileInput.value?.click();
+};
+
 const handleFileSelect = (e) => {
     const files = Array.from(e.target.files);
     uploadFiles(files);
@@ -336,53 +453,40 @@ const handleDrop = (e) => {
 
 const uploadFiles = async (files) => {
     uploadError.value = '';
-
     if (uploadedImages.value.length + files.length > 6) {
         uploadError.value = 'Maksimal 6 foto yang dapat diupload';
         return;
     }
-
     const validFiles = files.filter(file => {
         const isValidType = ['image/jpeg', 'image/jpg', 'image/png'].includes(file.type);
         const isValidSize = file.size <= 2 * 1024 * 1024;
-
         if (!isValidType) {
             uploadError.value = 'Format file harus JPG, JPEG, atau PNG';
             return false;
         }
-
         if (!isValidSize) {
             uploadError.value = 'Ukuran file maksimal 2MB';
             return false;
         }
-
         return true;
     });
-
     if (validFiles.length === 0) return;
-
     uploadLoading.value = true;
-
     try {
         for (const file of validFiles) {
             const formData = new FormData();
             formData.append('foto', file);
-
             const response = await axios.post('/api/foto', formData, {
                 headers: {
                     Authorization: `Bearer ${localStorage.getItem("token")}`,
                     'Content-Type': 'multipart/form-data',
-
                 },
             });
-
             uploadedImages.value.push(response.data);
         }
-
         if (fileInput.value) {
             fileInput.value.value = '';
         }
-
     } catch (error) {
         console.error('Upload error:', error);
         uploadError.value = error.response?.data?.message || 'Gagal mengupload foto';
@@ -404,21 +508,51 @@ const removeImage = async (id) => {
     }
 };
 
+const openCameraModal = async () => {
+    showUploadMenu.value = false;
+    showCamera.value = true;
+    try {
+        stream = await navigator.mediaDevices.getUserMedia({ video: true });
+        video.value.srcObject = stream;
+    } catch (err) {
+        console.error("Gagal akses kamera:", err);
+        alert("Tidak bisa mengakses kamera, cek izin browser!");
+        closeCamera();
+    }
+};
+
+const closeCamera = () => {
+    showCamera.value = false;
+    if (stream) {
+        stream.getTracks().forEach(track => track.stop());
+        stream = null;
+    }
+};
+
+const capturePhoto = () => {
+    const ctx = canvas.value.getContext("2d");
+    canvas.value.width = video.value.videoWidth;
+    canvas.value.height = video.value.videoHeight;
+    ctx.drawImage(video.value, 0, 0);
+    canvas.value.toBlob(async (blob) => {
+        if (!blob) return;
+        await uploadFiles([new File([blob], "camera_photo.png", { type: "image/png" })]);
+        closeCamera();
+    }, "image/png");
+};
+
 const submitForm = async () => {
     loading.value = true;
     try {
-        await axios.put(
+        await axios.put(`/api/produk/${productId}`, form.value, {
-            `/api/produk/${productId}`,form.value,
-            {
             headers: {
                 Authorization: `Bearer ${localStorage.getItem("token")}`,
             },
-            }
+        });
-        );
         router.push("/produk?message=Produk berhasil diperbarui");
     } catch (err) {
-        errorMessages.value = err.response?.data?.message || "Gagal menyimpan produk";
+        console.error("Submit error:", err);
-        console.error(err);
+        uploadError.value = err.response?.data?.message || "Gagal menyimpan produk";
     } finally {
         loading.value = false;
     }
@@ -426,6 +560,7 @@ const submitForm = async () => {
 
 const closeItemModal = () => {
     openItemModal.value = false;
+    editedProduct.value = null;
 };
 
 const back = () => {
@@ -435,7 +570,6 @@ const back = () => {
 onMounted(async () => {
     await loadKategori();
     await loadProduk();
-    loadFoto();
+    await loadFoto();
 });
-
 </script>