partial update crud customer data

2025-02-21 00:46:33 +07:00
parent 7a56735099
commit 5c4be7635b
20 changed files with 898 additions and 3 deletions
--- a/resources/js/customers/upload.js
+++ b/resources/js/customers/upload.js
@@ -0,0 +1,78 @@
+import { Dropzone } from "dropzone";
+Dropzone.autoDiscover = false;
+
+class UploadCustomers {
+    constructor() {
+        this.spatialDropzone = null;
+        this.formElement = document.getElementById("formUploadCustomers");
+        this.uploadButton = document.getElementById("submit-upload");
+        this.spinner = document.getElementById("spinner");
+        if (!this.formElement) {
+            console.error("Element formUploadCustomers tidak ditemukan!");
+        }
+    }
+
+    init() {
+        this.initDropzone();
+        this.setupUploadButton();
+    }
+
+    initDropzone() {
+        const toastNotification = document.getElementById("toastNotification");
+        const toast = new bootstrap.Toast(toastNotification);
+        var previewTemplate,
+            dropzonePreviewNode = document.querySelector(
+                "#dropzone-preview-list"
+            );
+        (dropzonePreviewNode.id = ""),
+            dropzonePreviewNode &&
+                ((previewTemplate = dropzonePreviewNode.parentNode.innerHTML),
+                dropzonePreviewNode.parentNode.removeChild(dropzonePreviewNode),
+                (this.spatialDropzone = new Dropzone(".dropzone", {
+                    url: this.formElement.action,
+                    method: "post",
+                    acceptedFiles: ".xls,.xlsx",
+                    previewTemplate: previewTemplate,
+                    previewsContainer: "#dropzone-preview",
+                    autoProcessQueue: false,
+                    headers: {
+                        Authorization: `Bearer ${document
+                            .querySelector('meta[name="api-token"]')
+                            .getAttribute("content")}`,
+                    },
+                    init: function () {
+                        this.on("success", function (file, response) {
+                            document.getElementById("toast-message").innerText =
+                                response.message;
+                            toast.show();
+                            setTimeout(() => {
+                                window.location.href = "/data/customers";
+                            }, 2000);
+                        });
+                        this.on("error", function (file, errorMessage) {
+                            document.getElementById("toast-message").innerText =
+                                errorMessage.message;
+                            toast.show();
+                            this.uploadButton.disabled = false;
+                            this.spinner.classList.add("d-none");
+                        });
+                    },
+                })));
+    }
+
+    setupUploadButton() {
+        this.uploadButton.addEventListener("click", (e) => {
+            if (this.spatialDropzone.files.length > 0) {
+                this.spatialDropzone.processQueue();
+                this.uploadButton.disabled = true;
+                this.spinner.classList.remove("d-none");
+            } else {
+                return;
+            }
+        });
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new UploadCustomers().init();
+});