feature: form upload reklame

resources/js/data/advertisements/data-advertisements.js

@@ -14,26 +14,22 @@ const dataAdvertisementsColumns = [
     "Lokasi Reklame",
     "Desa",
     "Kecamatan",
-    "Panjang",
-    "Lebar",
-    "Sudut Pandang",
-    "Muka",
-    "Luas",
-    "Sudut",
     "Kontak",
     {
         name: "Actions",
         widht: "120px",
         formatter: function(cell, row) {
-            const id = row.cells[16].data;
+            const id = row.cells[10].data;
             const model = "data/advertisements";
             return gridjs.html(`
                 <div class="d-flex justify-items-end gap-10">
-                    <button class="btn btn-yellow me-2 btn-edit" 
+                    <button class="btn btn-warning me-2 btn-edit" 
                         data-id="${id}" 
-                        data-model="${model}">Update</button>
+                        data-model="${model}">
+                        <i class='bx bx-edit' ></i></button>
                     <button class="btn btn-red btn-delete" 
-                            data-id="${id}">Delete</button>
+                            data-id="${id}">
+                            <i class='bx bxs-trash' ></i></button>
                 </div>
             `);
         }
@@ -60,12 +56,6 @@ document.addEventListener("DOMContentLoaded", () => {
                 item.advertisement_location,
                 item.village_name,
                 item.district_name,
-                item.length,
-                item.width,
-                item.viewing_angle,
-                item.face,
-                item.area,
-                item.angle,
                 item.contact,
                 item.id,
             ];

resources/js/data/advertisements/form-create-update.js

@@ -0,0 +1,185 @@
+import GlobalConfig from "../../global-config";
+
+document.addEventListener("DOMContentLoaded", function () {
+    const saveButton = document.querySelector(".modal-footer .btn-primary");
+    const modalButton = document.querySelector(".btn-modal");
+    const form = document.querySelector("form#create-update-form"); 
+    var authLogo = document.querySelector(".auth-logo");
+
+    if (!saveButton || !form) return;
+
+    saveButton.addEventListener("click", function () {
+        // Disable tombol dan tampilkan spinner
+        modalButton.disabled = true;
+        modalButton.innerHTML = `
+            <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>
+            Loading...
+        `;
+        const isEdit = saveButton.classList.contains("btn-edit");
+        const formData = new FormData(form)
+        const toast = document.getElementById('toastEditUpdate');
+        const toastBody = toast.querySelector('.toast-body');
+        const toastHeader = toast.querySelector('.toast-header small');
+
+        const data = {};
+
+        // Mengonversi FormData ke dalam JSON
+        formData.forEach((value, key) => {
+            data[key] = value;
+        });
+        
+        // Log semua data dalam FormData
+        for (let pair of formData.entries()) {
+            console.log(pair[0] + ": " + pair[1]);
+        }
+        const url = form.getAttribute("action");
+        console.log("Ini adalah url dari form action", url);
+        
+        const method = isEdit ? "PUT" : "POST";
+
+        fetch(url, {
+            method: method,
+            body: JSON.stringify(data),
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`,
+                "Content-Type": "application/json",
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            console.log("Response data:", data);
+            if (!data.errors) {
+                // Remove existing icon (if any) before adding the new one
+                if (authLogo) {
+                    // Hapus ikon yang sudah ada jika ada
+                    const existingIcon = authLogo.querySelector('.bx');
+                    if (existingIcon) {
+                        authLogo.removeChild(existingIcon);
+                    }
+                
+                    // Buat ikon baru
+                    const icon = document.createElement('i');
+                    icon.classList.add('bx', 'bxs-check-square');
+                    icon.style.fontSize = '25px';
+                    icon.style.color = 'green'; // Pastikan 'green' dalam bentuk string
+                
+                    // Tambahkan ikon ke dalam auth-logo
+                    authLogo.appendChild(icon);
+                }
+                
+                // Set success message for the toast
+                toastBody.textContent = isEdit ? "Data updated successfully!" : "Data created successfully!";
+                toast.classList.add('show');  // Show the toast
+                setTimeout(() => {
+                    toast.classList.remove('show');  // Hide the toast after 3 seconds
+                }, 3000);
+                
+                setTimeout(() => {
+                    window.location.href = '/data/advertisements';
+                }, 3000);
+            } else {
+                if (authLogo) {
+                    // Hapus ikon yang sudah ada jika ada
+                    const existingIcon = authLogo.querySelector('.bx');
+                    if (existingIcon) {
+                        authLogo.removeChild(existingIcon);
+                    }
+                
+                    // Buat ikon baru
+                    const icon = document.createElement('i');
+                    icon.classList.add('bx', 'bxs-error-alt');
+                    icon.style.fontSize = '25px';
+                    icon.style.color = 'red'; // Pastikan 'green' dalam bentuk string
+                
+                    // Tambahkan ikon ke dalam auth-logo
+                    authLogo.appendChild(icon);
+                }
+                // Set error message for the toast
+                toastBody.textContent = "Error: " + (responseData.message || "Something went wrong");
+                toast.classList.add('show');  // Show the toast
+
+                // Enable button and reset its text on error
+                modalButton.disabled = false;
+                modalButton.innerHTML = isEdit ? "Update" : "Create"; 
+
+                setTimeout(() => {
+                    toast.classList.remove('show');  // Hide the toast after 3 seconds
+                }, 3000);
+            }
+        })
+        .catch(error => {
+            console.error("Error:", error);
+            if (authLogo) {
+                // Hapus ikon yang sudah ada jika ada
+                const existingIcon = authLogo.querySelector('.bx');
+                if (existingIcon) {
+                    authLogo.removeChild(existingIcon);
+                }
+            
+                // Buat ikon baru
+                const icon = document.createElement('i');
+                icon.classList.add('bx', 'bxs-error-alt');
+                icon.style.fontSize = '25px';
+                icon.style.color = 'red'; // Pastikan 'green' dalam bentuk string
+            
+                // Tambahkan ikon ke dalam auth-logo
+                authLogo.appendChild(icon);
+            }
+            // Set error message for the toast
+            toastBody.textContent = "An error occurred while processing your request.";
+            toast.classList.add('show');  // Show the toast
+
+            // Enable button and reset its text on error
+            modalButton.disabled = false;
+            modalButton.innerHTML = isEdit ? "Update" : "Create"; 
+
+            setTimeout(() => {
+                toast.classList.remove('show');  // Hide the toast after 3 seconds
+            }, 3000);
+        });
+    });
+
+    // Fungsi fetchOptions untuk autocomplete server-side
+    window.fetchOptions = function (field) {
+        let inputValue = document.getElementById(field).value;
+        console.log("Query Value:", inputValue); // Debugging log
+        if (inputValue.length < 2) return;
+        let districtValue = document.getElementById("district_name").value; // Ambil kecamatan terpilih
+    
+        let url = `${GlobalConfig.apiHost}/api/combobox/search-options?query=${encodeURIComponent(inputValue)}&field=${field}`;
+        
+        // Jika field desa, tambahkan kecamatan sebagai filter
+        if (field === "village_name") {
+            url += `&district=${encodeURIComponent(districtValue)}`;
+        }
+    
+        fetch(url, {
+            method: 'GET',
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`,
+                "Content-Type": "application/json",
+            }
+        })
+        .then(response => response.json())
+        .then(data => {
+            let dataList = document.getElementById(field + "Options");
+            dataList.innerHTML = "";
+    
+            data.forEach(item => {
+                let option = document.createElement("option");
+                option.value = item.name;
+                option.dataset.code = item.code;
+                dataList.appendChild(option);
+            });
+        })
+        .catch(error => console.error("Error fetching options:", error));
+    };
+
+    document.querySelector('.btn-back').addEventListener('click', function() {
+        window.history.back();
+    });
+});

resources/js/data/advertisements/form-upload.js

@@ -0,0 +1,114 @@
+import { Dropzone } from "dropzone";
+
+Dropzone.autoDiscover = false;
+
+var previewTemplate,
+    dropzone,
+    dropzonePreviewNode = document.querySelector("#dropzone-preview-list");
+console.log(previewTemplate);
+console.log(dropzone);
+console.log(dropzonePreviewNode);
+
+(dropzonePreviewNode.id = ""),
+    dropzonePreviewNode &&
+        ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+        dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+        (dropzone = new Dropzone(".dropzone", {
+            url: "http://localhost:8000/api/advertisements/import",
+            // url: "https://httpbin.org/post",
+            method: "post",
+            acceptedFiles: ".xls,.xlsx",  // Use acceptedFiles for better validation
+            previewTemplate: previewTemplate,
+            previewsContainer: "#dropzone-preview",
+            autoProcessQueue: false,  // Disable auto post
+            headers: {
+                Authorization: `Bearer ${document
+                    .querySelector('meta[name="api-token"]')
+                    .getAttribute("content")}`
+            },
+            init: function() {
+                // Listen for the success event
+                this.on("success", function(file, response) {
+                    console.log("File successfully uploaded:", file);
+                    console.log("API Response:", response);
+                    
+                    // Show success toast
+                    showToast('bxs-check-square', 'green', response.message);
+                    document.getElementById("submit-upload").innerHTML = "Upload Files";
+                    // Tunggu sebentar lalu reload halaman
+                    setTimeout(() => {
+                        window.location.href = "/data/advertisements";
+                    }, 2000);
+                });
+                // Listen for the error event
+                this.on("error", function(file, errorMessage) {
+                    console.error("Error uploading file:", file);
+                    console.error("Error message:", errorMessage);
+                    // Handle the error response
+
+                    // Show error toast
+                    showToast('bxs-error-alt', 'red', errorMessage.message);
+                    document.getElementById("submit-upload").innerHTML = "Upload Files";
+                });
+            }
+        })));
+
+// Add event listener to control the submission manually
+document.querySelector("#submit-upload").addEventListener("click", function() {
+    console.log("Ini adalah value dropzone", dropzone.files[0]);
+    const formData = new FormData()
+    console.log("Dropzonefiles",dropzone.files);
+
+    this.innerHTML = '<span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true"></span>Loading...';
+
+    // Pastikan ada file dalam queue sebelum memprosesnya
+    if (dropzone.files.length > 0) {
+        formData.append('file', dropzone.files[0])
+        console.log("ini adalah form data on submit", ...formData);
+        dropzone.processQueue();  // Ini akan manual memicu upload
+    } else {
+        // Show error toast when no file is selected
+        showToast('bxs-error-alt', 'red', "Please add a file first.");
+        document.getElementById("submit-upload").innerHTML = "Upload Files";
+    }
+});
+
+// Optional: Listen for the 'addedfile' event to log or control file add behavior
+dropzone.on("addedfile", function (file) {
+    console.log("File ditambahkan:", file);
+    console.log("Nama File:", file.name);
+    console.log("Tipe File:", file.type);
+    console.log("Ukuran File:", (file.size / 1024).toFixed(2) + " KB");
+});
+
+dropzone.on("complete", function(file) {
+    dropzone.removeFile(file);
+});
+
+// Function to show toast
+function showToast(iconClass, iconColor, message) {
+    const toastElement = document.getElementById('toastUploadAdvertisement');
+    const toastBody = toastElement.querySelector('.toast-body');
+    const toastHeader = toastElement.querySelector('.toast-header');
+
+    // Remove existing icon (if any) before adding the new one
+    const existingIcon = toastHeader.querySelector('.bx');
+    if (existingIcon) {
+        toastHeader.querySelector('.auth-logo').removeChild(existingIcon); // Remove the existing icon
+    }
+
+    // Add the new icon to the toast header
+    const icon = document.createElement('i');
+    icon.classList.add('bx', iconClass);
+    icon.style.fontSize = '25px';
+    icon.style.color = iconColor;
+    toastHeader.querySelector('.auth-logo').appendChild(icon);
+
+    // Set the toast message
+    toastBody.textContent = message;
+
+    // Show the toast
+    const toast = new bootstrap.Toast(toastElement); // Inisialisasi Bootstrap Toast
+    toast.show();
+}
+