From 41fab9ab910036c02bf9d968ac0d2b408973ba99 Mon Sep 17 00:00:00 2001
From: Pinga <121483313+getpinga@users.noreply.github.com>
Date: Wed, 15 Nov 2023 17:27:06 +0200
Subject: [PATCH] Users list UI improvements

---
 cp/resources/views/admin/users/index.twig | 14 +----
 cp/resources/views/partials/js-users.twig | 72 +++++++++++++----------
 2 files changed, 42 insertions(+), 44 deletions(-)

diff --git a/cp/resources/views/admin/users/index.twig b/cp/resources/views/admin/users/index.twig
index 79abb83..0e6bc23 100644
--- a/cp/resources/views/admin/users/index.twig
+++ b/cp/resources/views/admin/users/index.twig
@@ -14,21 +14,9 @@
                   {{ __('Overview') }}
                 </div>
                 <h2 class="page-title">
-                  {{ __('Users') }}
+                  {{ __('List Users') }}
                 </h2>
               </div>
-              <!-- Page title actions -->
-              <div class="col-auto ms-auto d-print-none">
-                <div class="btn-list">
-                  <a href="#" class="btn btn-primary d-none d-sm-inline-block">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                    Create User
-                  </a>
-                  <a href="#" class="btn btn-primary d-sm-none btn-icon" aria-label="Create User">
-                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><line x1="12" y1="5" x2="12" y2="19" /><line x1="5" y1="12" x2="19" y2="12" /></svg>
-                  </a>
-                </div>
-              </div>
             </div>
           </div>
         </div>
diff --git a/cp/resources/views/partials/js-users.twig b/cp/resources/views/partials/js-users.twig
index 26d982b..2b4fb38 100644
--- a/cp/resources/views/partials/js-users.twig
+++ b/cp/resources/views/partials/js-users.twig
@@ -5,29 +5,13 @@
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.6.0/jspdf.plugin.autotable.min.js"></script>
 <script>
     var table;
-    document.querySelector("#userTable").addEventListener('click', function(e) {
-        if (e.target.matches('.update-btn')) {
-            let id = e.target.getAttribute('data-id');
-            updateRecord(id);
-        } else if (e.target.matches('.delete-btn')) {
-            let id = e.target.getAttribute('data-id');
-            deleteRecord(id);
-        }
-    });
    
     document.addEventListener("DOMContentLoaded", function(){
     function userLinkFormatter(cell){
         var value = cell.getValue();
-        return `<a href="/user/${value}" style="font-weight:bold;">${value}</a>`;
+        return `<span style="font-weight:bold;">${value}</a>`;
     }
    
-    function actionsFormatter(cell, formatterParams, onRendered) {
-        return `
-            <button class="btn btn-primary btn-icon update-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"></path><path d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"></path><path d="M16 5l3 3"></path></svg></button>
-            <button class="btn btn-danger btn-icon delete-btn" data-id="${cell.getRow().getData().id}"><svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M4 7h16"></path><path d="M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12"></path><path d="M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3"></path><path d="M10 12l4 4m0 -4l-4 4"></path></svg></button>
-        `;
-    }
-
     function statusFormatter(cell) {
         var statusArray = cell.getValue();
         if (statusArray && Array.isArray(statusArray)) {
@@ -35,6 +19,37 @@
         }
         return "";
     }
+    
+    function roleLabelFormatter(cell) {
+        var value = cell.getValue();
+        if (value === 0) {
+            return '<span class="badge bg-purple text-purple-fg">Administrator</span>'; // Bootstrap label for Administrator
+        } else if (value === 4) {
+            return '<span class="badge bg-indigo text-indigo-fg">Registrar</span>'; // Bootstrap label for Registrar
+        }
+        return value; // If the value is neither 0 nor 4, return it as is
+    }
+    
+    function verifiedFormatter(cell) {
+        var value = cell.getValue();
+        if (value === false) {
+            return '<span class="badge bg-orange text-orange-fg">Pending</span>'; // Badge for Pending
+        } else if (value === true) {
+            return '<span class="badge bg-green text-green-fg">OK</span>'; // Green badge for OK
+        } else {
+            return '<span class="badge bg-dark text-dark-fg">?</span>';
+        }
+        return value; // Display the actual value for any other case
+    }
+
+    function statusBadgeFormatter(cell) {
+        var value = cell.getValue();
+        if (value === 0) {
+            return '<span class="badge bg-green text-green-fg">OK</span>'; // Green badge for OK
+        } else {
+            return '<span class="badge bg-red text-red-fg">Trouble</span>'; // Red badge for Trouble
+        }
+    }
 
     table = new Tabulator("#userTable", {
         ajaxURL:"/api/records/users", // Set the URL for your JSON data
@@ -52,8 +67,9 @@
             {formatter:"responsiveCollapse", width:30, minWidth:30, hozAlign:"center", resizable:false, headerSort:false, responsive:0},
             {title:"Name", field:"username", width:200, headerSort:true, formatter: userLinkFormatter, responsive:0},
             {title:"Email", field:"email", width:300, headerSort:true, responsive:2},
-            {title:"Roles", field:"roles_mask", width:300, headerSort:true, responsive:2},
-            {title: "Actions", formatter: actionsFormatter, responsive:0, headerSort: false, download:false, hozAlign: "center", cellClick:function(e, cell){ e.stopPropagation(); }},
+            {title:"Roles", field:"roles_mask", width:200, headerSort:true, formatter: roleLabelFormatter, responsive:2},
+            {title:"Verified", field:"verified", width:200, headerSort:true, formatter: verifiedFormatter, responsive:2},
+            {title:"Status", field:"status", width:200, headerSort:true, formatter: statusBadgeFormatter, responsive:2},
         ],
         placeholder:function(){
             return this.getHeaderFilters().length ? "No Matching Data" : "No Data"; //set placeholder based on if there are currently any header filters
@@ -68,7 +84,9 @@
                 return (
                     String(data.username).toLowerCase().includes(term) ||
                     String(data.email).toLowerCase().includes(term) ||
-                    String(data.roles_mask).toString().toLowerCase().includes(term)
+                    String(data.roles_mask).toString().toLowerCase().includes(term) ||
+                    String(data.verified).toLowerCase().includes(term) ||
+                    String(data.status).toLowerCase().includes(term)
                 );
             });
         } else {
@@ -76,15 +94,7 @@
         }
     });
     });
-   
-    function updateRecord(id) {
-        console.log("Updating record with ID: " + id);
-    }
-   
-    function deleteRecord(id) {
-        console.log("Deleting record with ID: " + id);
-    }
-   
+
     function downloadCSV() {
         table.download("csv", "data.csv");
     }
@@ -94,13 +104,13 @@
     }
 
     function downloadXLSX() {
-        table.download("xlsx", "data.xlsx", {sheetName:"My Registrars"});
+        table.download("xlsx", "data.xlsx", {sheetName:"My Users"});
     }
     
     function downloadPDF() {
         table.download("pdf", "data.pdf", {
             orientation:"portrait",
-            title:"My Registrars",
+            title:"My Users",
             jsPDF:{unit:"mm", format:"a4", orientation:"p"}
         });
     }