create crud data settings

2025-02-04 21:49:10 +07:00
parent 9e506ebbaa
commit 7d06e12de8
16 changed files with 606 additions and 28 deletions
--- a/resources/js/data-settings/index.js
+++ b/resources/js/data-settings/index.js
@@ -0,0 +1,107 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import gridjs from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+import GlobalConfig from "../global-config.js";
+
+class DataSettings {
+    init() {
+        this.getFetchApiData();
+    }
+
+    getFetchApiData() {
+        const table = new Grid({
+            columns: [
+                "ID",
+                "Key",
+                "Value",
+                "Created",
+                {
+                    name: "Actions",
+                    width: "120px",
+                    formatter: function (cell) {
+                        console.log("cell data", cell);
+                        return gridjs.html(`
+												<div class="d-flex justify-items-end gap-10">
+												<a href="/data-settings/${cell}/edit" class="btn btn-yellow me-2">Update</a>
+												<button class="btn btn-red btn-delete btn-delete-data-settings" data-id="${cell}">Delete</button>
+												</div>
+											`);
+                    },
+                },
+            ],
+            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/api-data-settings`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.key,
+                        item.value,
+                        item.created_at,
+                        item.id,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        });
+        table.render(document.getElementById("table-data-settings"));
+
+        document.addEventListener("click", this.handleDelete);
+    }
+    handleDelete(event) {
+        if (event.target.classList.contains("btn-delete-data-settings")) {
+            event.preventDefault();
+            const id = event.target.getAttribute("data-id");
+
+            if (confirm("Are you sure you want to delete this item?")) {
+                fetch(`/data-settings/${id}`, {
+                    method: "DELETE",
+                    headers: {
+                        "X-CSRF-TOKEN": document
+                            .querySelector('meta[name="csrf-token"]')
+                            .getAttribute("content"),
+                        "Content-Type": "application/json",
+                    },
+                })
+                    .then((response) => {
+                        if (response.ok) {
+                            alert("Item deleted successfully!");
+                            window.location.reload();
+                        } else {
+                            return response.json().then((error) => {
+                                throw new Error(
+                                    error.message || "Failed to delete item."
+                                );
+                            });
+                        }
+                    })
+                    .catch((error) => {
+                        console.error("Error deleting item:", error);
+                        alert("Something went wrong. Please try again.");
+                    });
+            }
+        }
+    }
+}
+document.addEventListener("DOMContentLoaded", function (e) {
+    new DataSettings().init();
+});