From a73a5ede4d1a89db0a7e09c35b476e99eded1a32 Mon Sep 17 00:00:00 2001
From: Dita Aji Pratama <ditaajipratama@protonmail.com>
Date: Thu, 26 Sep 2024 12:35:19 +0700
Subject: [PATCH] JS static for dashboard

---
 app/static/js/dashboard/roles.js | 119 +++++++++++++++++++++++++++++++
 app/static/js/dashboard/users.js |  75 +++++++++++++++++++
 2 files changed, 194 insertions(+)
 create mode 100644 app/static/js/dashboard/roles.js
 create mode 100644 app/static/js/dashboard/users.js

diff --git a/app/static/js/dashboard/roles.js b/app/static/js/dashboard/roles.js
new file mode 100644
index 0000000..d48013b
--- /dev/null
+++ b/app/static/js/dashboard/roles.js
@@ -0,0 +1,119 @@
+var token   = document.getElementById("form-token"      ).value;
+
+var table = $('#table-roles').DataTable({
+    "orderCellsTop": true,   // move sorting to top header
+    "columnDefs": [
+        { "orderable": false, "targets": [3] }  // Disable sorting on the first and fourth columns
+    ],
+    "ajax": {
+        "url": "/api/dashboard/roles/list",
+        "type": "POST", // Use POST method
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function(d) {
+            // Customize the data payload sent in the POST request
+            return JSON.stringify({
+                "token": token
+            });
+        },
+        "error": function (xhr, error, thrown) {
+            console.error('Error fetching data:', thrown);
+            console.error('Response:', xhr.responseText);
+        }
+    },
+    "columns": [
+        {
+            "data": "id",
+            "render": function(data, type, row) {
+                return `<span class="d-none">${data}</span><input ${data==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="ID" id="form-edit-id-${data}" value="${data}">`;
+            }
+        },
+        {
+            "data": "name",
+            "render": function(data, type, row) {
+                return `<span class="d-none">${data}</span><input ${row.id==1 ? 'disabled' : ''} class="form-control form-control-sm" placeholder="Name" id="form-edit-name-${row.id}" value="${data}">`;
+            }
+        },
+        {
+            "data": "count",
+            "render": function(data, type, row) {
+                return `<span class="badge bg-${data==0 ? 'secondary' : 'success'}">${data} User(s)</span>`;
+            }
+        },
+        {
+            "data": null,
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                if (row.id==1) return "";
+                else return `<button ${row.id==1 ? 'disabled' : ''} class="btn btn-success btn-sm" type="button" onclick="submitEdit(${row.id})">
+                            <span class="fa fa-save"></span> Save
+                        </button>
+                        <button ${row.id==1 ? 'disabled' : ''} class="btn btn-danger btn-sm" type="button" onclick="if(confirm('Are you sure you want to delete this?')) { submitRemove(${row.id}); }">
+                            <span class="fa fa-trash-alt"></span> Delete
+                        </button>`;
+            }
+        }
+    ],
+    "initComplete": function () {
+        // Custom init logic if needed
+    }
+});
+
+function submitAdd() {
+
+    var id      = document.getElementById("form-add-id"     ).value;
+    var name    = document.getElementById("form-add-name"   ).value;
+    var url     = "/api/dashboard/roles/add";
+    var payload = {
+        "token" : token,
+        "id"    : id,
+        "name"  : name
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
+
+function submitEdit(key) {
+    var id      = document.getElementById(`form-edit-id-${key}`     ).value;
+    var name    = document.getElementById(`form-edit-name-${key}`   ).value;
+    var url     = "/api/dashboard/roles/edit";
+    var payload = {
+        "token" : token,
+        "key"   : key,
+        "id"    : id,
+        "name"  : name
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
+
+function submitRemove(key) {
+    var url     = "/api/dashboard/roles/remove";
+    var payload = {
+        "token" : token,
+        "key"   : key
+    };
+
+    sendHttpRequest(url, "POST", payload, function (error, response) {
+        if (error) console.error("Error:", error);
+        else {
+            table.ajax.reload(null, false); // false means keep the current page
+            console.log("JSON Response:", response);
+        }
+    }, "application/json");
+
+}
diff --git a/app/static/js/dashboard/users.js b/app/static/js/dashboard/users.js
new file mode 100644
index 0000000..6f30b07
--- /dev/null
+++ b/app/static/js/dashboard/users.js
@@ -0,0 +1,75 @@
+var token   = document.getElementById("form-token"      ).value;
+
+var table = $('#table-users').DataTable({
+    "columnDefs": [
+        { "orderable": false, "targets": [4, 5, 6] }  // Disable sorting on the first and fourth columns
+    ],
+    "ajax": {
+        "url": "/api/dashboard/users/list",
+        "type": "POST", // Use POST method
+        "dataSrc": "data",
+        "contentType": "application/json",
+        "data": function(d) {
+            // Customize the data payload sent in the POST request
+            return JSON.stringify({
+                "token": token
+            });
+        },
+        "error": function (xhr, error, thrown) {
+            console.error('Error fetching data:', thrown);
+            console.error('Response:', xhr.responseText);
+        }
+    },
+    "columns": [
+        {
+            "data": "id",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "username",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "email",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "phone",
+            "render": function(data, type, row) {
+                return `${data}`;
+            }
+        },
+        {
+            "data": "roles",
+            "render": function(data, type, row) {
+                var roles = ""
+                for (let i = 0; i < data.length; i++) roles += `<span class="badge bg-primary m-1">${data[i].name}</span>`;
+                return roles;
+            }
+        },
+        {
+            "data": "verification",
+            "render": function(data, type, row) {
+                var verification = ""
+                for (let i = 0; i < data.length; i++) verification += `<span class="badge bg-${data[i].verified==0 ? 'danger' : 'success'} m-1"> <i class="fa fa-${data[i].verified==0 ? 'xmark' : 'check'}"></i> ${data[i].type}</span>`;
+                return verification;
+            }
+        },
+        {
+            "data": null,
+            "defaultContent": "",
+            "render": function(data, type, row) {
+                return "";
+            }
+        }
+    ],
+    "initComplete": function () {
+        // Custom init logic if needed
+    }
+});