partial update create crud pbg

resources/js/pbg-task/create.js

@@ -0,0 +1,132 @@
+import GlobalConfig from "../global-config.js";
+
+class MultiFormCreatePBG {
+    constructor() {
+        this.currentStep = 1;
+        this.totalSteps = 4;
+        this.formData = {}; // Menyimpan data dari semua langkah
+    }
+
+    init() {
+        document
+            .getElementById("nextStep")
+            .addEventListener("click", () => this.nextStep());
+
+        document
+            .getElementById("prevStep")
+            .addEventListener("click", () => this.prevStep());
+    }
+
+    nextStep() {
+        if (!this.validateStep()) return;
+
+        this.saveStepData();
+
+        if (this.currentStep < this.totalSteps) {
+            document
+                .getElementById(`step${this.currentStep}`)
+                .classList.add("d-none");
+
+            this.currentStep++;
+            document
+                .getElementById(`step${this.currentStep}`)
+                .classList.remove("d-none");
+
+            document.getElementById(
+                "stepTitle"
+            ).innerText = `Step ${this.currentStep}`;
+            document.getElementById("prevStep").disabled = false;
+            document.getElementById("nextStep").innerText =
+                this.currentStep === this.totalSteps ? "Submit" : "Next →";
+        } else {
+            this.submitForm(); // Submit ke API jika sudah step terakhir
+        }
+    }
+
+    prevStep() {
+        if (this.currentStep > 1) {
+            document
+                .getElementById(`step${this.currentStep}`)
+                .classList.add("d-none");
+
+            this.currentStep--;
+            document
+                .getElementById(`step${this.currentStep}`)
+                .classList.remove("d-none");
+
+            document.getElementById(
+                "stepTitle"
+            ).innerText = `Step ${this.currentStep}`;
+            document.getElementById("prevStep").disabled =
+                this.currentStep === 1;
+            document.getElementById("nextStep").innerText = "Next →";
+        }
+    }
+
+    saveStepData() {
+        const stepForm = document.querySelector(`#step${this.currentStep}Form`);
+        const formDataObj = new FormData(stepForm);
+
+        if (!this.formData) {
+            this.formData = {};
+        }
+
+        const stepKey = `step${this.currentStep}Form`;
+        this.formData[stepKey] = {};
+
+        for (const [key, value] of formDataObj.entries()) {
+            this.formData[stepKey][key] = value;
+        }
+
+        console.log("form data", this.formData);
+    }
+
+    validateStep() {
+        const stepForm = document.querySelector(`#step${this.currentStep}Form`);
+        const inputs = stepForm.querySelectorAll(
+            "input[required], select[required]"
+        );
+        let isValid = true;
+
+        inputs.forEach((input) => {
+            if (!input.value) {
+                input.classList.add("is-invalid");
+                isValid = false;
+            } else {
+                input.classList.remove("is-invalid");
+            }
+        });
+
+        return isValid;
+    }
+
+    async submitForm() {
+        try {
+            const response = await fetch(
+                `${GlobalConfig.apiHost}/api/api-pbg-task`,
+                {
+                    method: "POST",
+                    headers: {
+                        Authorization: `Bearer ${
+                            document.querySelector("meta[name='api-token']")
+                                .content
+                        }`,
+                        "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(this.formData),
+                }
+            );
+
+            const result = await response.json();
+            alert(result.message);
+            window.location.href = "/pbg-task";
+        } catch (error) {
+            console.error("Error submitting form:", error);
+            alert("Terjadi kesalahan saat mengirim data.");
+        }
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function () {
+    new MultiFormCreatePBG().init();
+});

resources/js/pbg-task/index.js

@@ -0,0 +1,69 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config";
+
+class PbgTasks {
+    init() {
+        this.initTableRequestAssignment();
+    }
+
+    initTableRequestAssignment() {
+        new Grid({
+            columns: [
+                "ID",
+                { name: "Name", width: "15%" },
+                { name: "Condition", width: "7%" },
+                "Registration Number",
+                "Document Number",
+                { name: "Address", width: "30%" },
+                "Status",
+                "Function Type",
+                "Consultation Type",
+                { name: "Due Date", width: "7%" },
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${GlobalConfig.apiHost}/api/request-assignments`,
+                credentials: "include",
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.name,
+                        item.condition,
+                        item.registration_number,
+                        item.document_number,
+                        item.address,
+                        item.status_name,
+                        item.function_type,
+                        item.consultation_type,
+                        item.due_date,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).render(document.getElementById("table-pbg-tasks"));
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new PbgTasks().init();
+});