fix datatable using token api and paginate when searching, fix skrd_amount column to decimal 20

resources/js/settings/syncronize/syncronize.js

@@ -1,52 +1,67 @@
 import { Grid } from "gridjs/dist/gridjs.umd.js";
-import gridjs from 'gridjs/dist/gridjs.umd.js'
-import '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 SyncronizeTask {
-  init(){
-    this.initTableImportDatasources();
-    this.onSyncSubmit();
-  }
-  initTableImportDatasources(){
-    new Grid({
-      columns: [
-          "ID", "Message", "Response", "Status", "Created",
-      ],
-      pagination: {
-          limit: 15,
-          server: {
-               url: (prev, page, limit) => `${prev}?page=${page}`
-          }
-      },
-      sort: true,
-      search: {
-          server: {
-               url: (prev, page, keyword) => `${prev}?page=${page}&search=${keyword}`
-          }
-      },
-      server: {
-          url: `${GlobalConfig.apiHost}/api/import-datasource`,
-          then: data => data.data.map((item) => [item.id, item.message, item.response_body, item.status, item.created_at])
-      }
-    }).render(document.getElementById("table-import-datasources"));
-  }
-  onSyncSubmit(){
-    const form = document.getElementById("sync-form");
-    if(form){
-      form.addEventListener("submit", function (event) {
-        event.preventDefault(); // Prevent the default form submission
-
-        const button = document.getElementById("btn-sync-submit");
-        if (button) {
-          button.disabled = true;
-          button.innerText = "Processing...";
-        }
-        form.submit();
-      });
+    init() {
+        this.initTableImportDatasources();
+        this.onSyncSubmit();
+    }
+    initTableImportDatasources() {
+        new Grid({
+            columns: ["ID", "Message", "Response", "Status", "Created"],
+            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/import-datasource`,
+                headers: {
+                    Authorization: `Bearer ${document
+                        .querySelector('meta[name="api-token"]')
+                        .getAttribute("content")}`,
+                    "Content-Type": "application/json",
+                },
+                then: (data) =>
+                    data.data.map((item) => [
+                        item.id,
+                        item.message,
+                        item.response_body,
+                        item.status,
+                        item.created_at,
+                    ]),
+                total: (data) => data.meta.total,
+            },
+        }).render(document.getElementById("table-import-datasources"));
+    }
+    onSyncSubmit() {
+        const form = document.getElementById("sync-form");
+        if (form) {
+            form.addEventListener("submit", function (event) {
+                event.preventDefault(); // Prevent the default form submission
+
+                const button = document.getElementById("btn-sync-submit");
+                if (button) {
+                    button.disabled = true;
+                    button.innerText = "Processing...";
+                }
+                form.submit();
+            });
+        }
     }
-  }
 }
-document.addEventListener('DOMContentLoaded', function (e) {
-  new SyncronizeTask().init();
-});
+document.addEventListener("DOMContentLoaded", function (e) {
+    new SyncronizeTask().init();
+});