Add keys sorting

Author: RobiNN1

assets/css/styles.css

@@ -1,3 +1,13 @@
+.rotate-180 {
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+}
+
 .shadow, .shadow-lg {
   --tw-ring-offset-shadow: 0 0 #0000;
   --tw-ring-shadow: 0 0 #0000;
@@ -632,6 +642,15 @@ video {
   table-layout: auto;
 }
 
+.rotate-180 {
+  --tw-rotate: 180deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -985,6 +1004,10 @@ video {
   color: #fff;
 }
 
+.opacity-30 {
+  opacity: 0.3;
+}
+
 .shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);

assets/icons/down.svg

@@ -15,13 +15,23 @@ const ajax = (endpoint, callback, data = null) => {
     request.send(data);
 }
 
-const replace_query_param = (param, value) => {
+const query_params = (...args) => {
     const url = new URL(location.href);
-    const params = new URLSearchParams(url.search);
-
-    params.set(param, value);
+    const search_params = new URLSearchParams(url.search);
+
+    if (args.length === 2 && typeof args[0] === 'string') {
+        search_params.set(args[0], String(args[1]));
+    } else if (args.length === 1 && typeof args[0] === 'object') {
+        Object.entries(args[0]).forEach(([key, value]) => {
+            if (value === null) {
+                search_params.delete(key);
+            } else {
+                search_params.set(key, String(value));
+            }
+        });
+    }
 
-    url.search = params.toString();
+    url.search = search_params.toString();
     location.href = url.toString();
 }
 
@@ -30,7 +40,7 @@ const select_and_redirect = (id, param) => {
 
     if (select) {
         select.addEventListener('change', e => {
-            replace_query_param(param, e.target.value);
+            query_params(param, e.target.value);
         });
     }
 }
@@ -180,7 +190,7 @@ const search_form = document.getElementById('search_form');
 if (search_form) {
     const submit_search = document.getElementById('submit_search');
     submit_search.addEventListener('click', () => {
-        replace_query_param('s', document.getElementById('search_key').value)
+        query_params('s', document.getElementById('search_key').value)
     });
 
     const search_key = document.getElementById('search_key');
@@ -198,6 +208,28 @@ if (search_form) {
     });
 }
 
+/**
+ * Table sorting
+ */
+document.querySelectorAll('[data-sortcol]').forEach(element => {
+    element.addEventListener('click', () => {
+        const sort_col = element.getAttribute('data-sortcol');
+        const search_params = new URLSearchParams(window.location.search);
+        const current_sort_dir = search_params.get('sortcol') === sort_col ? search_params.get('sortdir') || 'none' : 'none';
+
+        const sort_dir_cycle = ['none', 'asc', 'desc'];
+        const current_index = sort_dir_cycle.indexOf(current_sort_dir);
+        const new_sort_dir = sort_dir_cycle[(current_index + 1) % sort_dir_cycle.length];
+        element.setAttribute('data-sortdir', new_sort_dir);
+
+        if (new_sort_dir === 'none') {
+            query_params({sortdir: null, sortcol: null});
+        } else {
+            query_params({p: null, sortdir: new_sort_dir, sortcol: sort_col});
+        }
+    });
+});
+
 /**
  * Light / Dark mode
  */

assets/js/scripts.js

@@ -207,6 +207,8 @@ private function getAllKeys(): array {
             }
         }
 
+        $keys = Helpers::sortKeys($this->template, $keys);
+
         return $keys;
     }
 

src/Dashboards/APCu/APCuTrait.php

@@ -227,6 +227,8 @@ private function getAllKeys(): array {
             }
         }
 
+        $keys = Helpers::sortKeys($this->template, $keys);
+
         return $keys;
     }
 

src/Dashboards/Memcached/MemcachedTrait.php

@@ -148,6 +148,8 @@ private function getCachedScripts(): array {
             }
         }
 
+        $cached_scripts = Helpers::sortKeys($this->template, $cached_scripts);
+
         return $cached_scripts;
     }
 

src/Dashboards/OPCache/OPCacheTrait.php

@@ -9,6 +9,7 @@
 namespace RobiNN\Pca\Dashboards\Realpath;
 
 use RobiNN\Pca\Format;
+use RobiNN\Pca\Helpers;
 use RobiNN\Pca\Http;
 
 trait RealpathTrait {
@@ -60,6 +61,8 @@ private function getAllKeys(): array {
             }
         }
 
+        $keys = Helpers::sortKeys($this->template, $keys);
+
         return $keys;
     }
 }

src/Dashboards/Realpath/RealpathTrait.php

@@ -358,6 +358,8 @@ private function getAllKeys(): array {
             ];
         }
 
+        $keys = Helpers::sortKeys($this->template, $keys);
+
         return $keys;
     }
 

src/Dashboards/Redis/RedisTrait.php

@@ -209,4 +209,31 @@ public static function serverSelector(Template $template, array $servers, int $s
             'class'    => 'mb-4',
         ]);
     }
+
+    /**
+     * @param array<int, array<string, mixed>> $keys
+     *
+     * @return array<int, array<string, mixed>>
+     */
+    public static function sortKeys(Template $template, array $keys): array {
+        $dir = Http::get('sortdir', 'none');
+        $column = Http::get('sortcol', 'none');
+
+        $template->addGlobal('sortdir', $dir);
+        $template->addGlobal('sortcol', $column);
+
+        if (strtolower($dir) === 'none' || strtolower($column) === 'none') {
+            return $keys;
+        }
+
+        usort($keys, static function ($a, $b) use ($dir, $column) {
+            $a_val = (string) $a['items'][$column];
+            $b_val = (string) $b['items'][$column];
+            $comparison = strnatcmp($a_val, $b_val);
+
+            return strtolower($dir) === 'desc' ? -$comparison : $comparison;
+        });
+
+        return $keys;
+    }
 }

src/Helpers.php

@@ -22,7 +22,7 @@ public static function stopRedirect(): void {
      * @param array<int|string, int|string> $additional Additional parameters with their new value.
      */
     public static function queryString(array $preserve = [], array $additional = []): string {
-        $keep = ['dashboard', 'server'];
+        $keep = ['dashboard', 'server', 's', 'sortdir', 'sortcol'];
         $preserve = array_flip(array_merge($keep, $preserve));
         $query = [];