Feature: crud reklame

2025-02-07 18:11:33 +07:00
parent a7b6f13d8c
commit 9c41fad232
20 changed files with 1053 additions and 5 deletions
--- a/resources/js/table-generator.js
+++ b/resources/js/table-generator.js
@@ -0,0 +1,124 @@
+import { Grid } from "gridjs/dist/gridjs.umd.js";
+import "gridjs/dist/gridjs.umd.js";
+
+class GeneralTable {
+    constructor(tableId, apiUrl, baseUrl, columns, options = {}) {
+        this.tableId = tableId;
+        this.apiUrl = apiUrl;
+        this.baseUrl = baseUrl; // Tambahkan base URL
+        this.columns = columns;
+        this.options = options;
+    }
+
+    init() {
+        const table = new Grid({
+            columns: this.columns,
+            search: this.options.search || {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+            },
+            pagination: this.options.pagination || {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${page + 1}`,
+                },
+            },
+            sort: this.options.sort || true,
+            server: {
+                url: this.apiUrl,
+                headers: this.options.headers || {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) => this.processData(data),
+                total: (data) => data.meta.total,
+            },
+        });
+
+        table.render(document.getElementById(this.tableId));
+        this.handleActions();
+    }
+
+    // Memproses data dari API
+    processData(data) {
+        return data.data.map((item) => {
+            return this.columns.map((column) => {
+                return item[column] || '';
+            });
+        });
+    }
+
+    handleActions() {
+        document.addEventListener("click", (event) => {
+            if (event.target && event.target.classList.contains('btn-edit')) {
+                this.handleEdit(event);
+            }
+            if (event.target && event.target.classList.contains('btn-delete')) {
+                this.handleDelete(event);
+            }
+            if (event.target && event.target.classList.contains('btn-create')) {
+                this.handleCreate(event);
+            }
+        });
+    }
+
+    // Fungsi untuk menangani create
+    handleCreate(event) {
+        // Menggunakan model dan ID untuk membangun URL dinamis
+        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
+        window.location.href = `${this.baseUrl}/${model}/create`;
+    }
+
+    // Fungsi untuk menangani edit
+    handleEdit(event) {
+        const id = event.target.getAttribute('data-id');
+        const model = event.target.getAttribute('data-model'); // Mengambil model dari data-model
+        console.log('Editing record with ID:', id);
+        // Menggunakan model dan ID untuk membangun URL dinamis
+        window.location.href = `${this.baseUrl}/${model}/${id}/edit`;
+    }
+
+    // Fungsi untuk menangani delete
+    handleDelete(event) {
+        const id = event.target.getAttribute('data-id');
+        console.log(id);
+        if (confirm("Are you sure you want to delete this item?")) {
+            this.deleteRecord(id);
+        }
+    }
+
+    async deleteRecord(id) {
+        try {
+            console.log(id);
+            const response = await fetch(`${this.apiUrl}/${id}`, { // Menambahkan model dalam URL
+                method: 'DELETE',
+                headers: this.options.headers || {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                // headers: {
+                //     'Authorization': `Bearer ${document.querySelector('meta[name="api-token"]').getAttribute("content")}`,
+                //     'Content-Type': 'application/json',
+                // },
+            });
+            if (response.status === 204) {  // Jika status code 204, berarti berhasil
+                alert('Data deleted successfully!');
+                location.reload();
+            } else {
+                const data = await response.json();  // Jika ada data di response body
+                alert('Failed to delete data: ' + (data.message || 'Unknown error.'));
+            }
+        } catch (error) {
+            console.error('Error deleting data:', error);
+            alert('Error deleting data.');
+        }
+    }
+}
+
+export default GeneralTable;