From dd722ba6e0c0cd07ddd6f7ad1d955fa7c827b769 Mon Sep 17 00:00:00 2001
From: Zaid Abdulla <zaid@genieacs.com>
Date: Mon, 25 Oct 2021 13:36:23 -0700
Subject: [PATCH] Improve sorting toggle behavior

Last sorted column now takes precedence over any previously sorted
columns. This makes for a more intuitive user experience.
---
 ui/devices-page.ts            | 7 ++++---
 ui/faults-page.ts             | 8 +++++---
 ui/files-page.ts              | 8 +++++---
 ui/index-table-component.ts   | 4 +---
 ui/permissions-page.ts        | 8 +++++---
 ui/presets-page.ts            | 8 +++++---
 ui/provisions-page.ts         | 8 +++++---
 ui/users-page.ts              | 8 +++++---
 ui/virtual-parameters-page.ts | 8 +++++---
 9 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/ui/devices-page.ts b/ui/devices-page.ts
index bb1d2fa..d245a5c 100644
--- a/ui/devices-page.ts
+++ b/ui/devices-page.ts
@@ -268,17 +268,18 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortedAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortedAttrs)) {
           const param = memoizedGetSortable(attributes[index].parameter);
           if (param) {
             // Changing the priority of columns
             delete _sort[param];
-            _sort[param] = direction;
+            if (direction) _sort = Object.assign({ [param]: direction }, _sort);
           }
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/devices", ops);
       }
diff --git a/ui/faults-page.ts b/ui/faults-page.ts
index 63cd97c..5bc58cb 100644
--- a/ui/faults-page.ts
+++ b/ui/faults-page.ts
@@ -107,14 +107,16 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/faults", ops);
       }
diff --git a/ui/files-page.ts b/ui/files-page.ts
index f650970..3c85528 100644
--- a/ui/files-page.ts
+++ b/ui/files-page.ts
@@ -151,14 +151,16 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/files", ops);
       }
diff --git a/ui/index-table-component.ts b/ui/index-table-component.ts
index 197010f..dcf9eac 100644
--- a/ui/index-table-component.ts
+++ b/ui/index-table-component.ts
@@ -79,8 +79,6 @@ function renderTable(
       continue;
     }
 
-    let direction = 1;
-
     let symbol = getIcon("unsorted");
     if (sortAttributes[i] > 0) symbol = getIcon("sorted-asc");
     else if (sortAttributes[i] < 0) symbol = getIcon("sorted-dsc");
@@ -89,7 +87,7 @@ function renderTable(
       "button",
       {
         onclick: () => {
-          if (sortAttributes[i] > 0) direction *= -1;
+          const direction = ((sortAttributes[i] + 2) % 3) - 1;
           return onSortChange({ [i]: direction });
         },
       },
diff --git a/ui/permissions-page.ts b/ui/permissions-page.ts
index 25e2f50..988a3b3 100644
--- a/ui/permissions-page.ts
+++ b/ui/permissions-page.ts
@@ -205,14 +205,16 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/permissions", ops);
       }
diff --git a/ui/presets-page.ts b/ui/presets-page.ts
index ce69521..2b9cc7a 100644
--- a/ui/presets-page.ts
+++ b/ui/presets-page.ts
@@ -190,14 +190,16 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/presets", ops);
       }
diff --git a/ui/provisions-page.ts b/ui/provisions-page.ts
index 176a3bc..f4ff23e 100644
--- a/ui/provisions-page.ts
+++ b/ui/provisions-page.ts
@@ -173,14 +173,16 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/provisions", ops);
       }
diff --git a/ui/users-page.ts b/ui/users-page.ts
index b74de30..076e64c 100644
--- a/ui/users-page.ts
+++ b/ui/users-page.ts
@@ -186,14 +186,16 @@ export const component: ClosureComponent = (): Component => {
       }
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/users", ops);
       }
diff --git a/ui/virtual-parameters-page.ts b/ui/virtual-parameters-page.ts
index 7192a41..e6d45dd 100644
--- a/ui/virtual-parameters-page.ts
+++ b/ui/virtual-parameters-page.ts
@@ -173,14 +173,16 @@ export const component: ClosureComponent = (): Component => {
         sortAttributes[i] = sort[attributes[i].id] || 0;
 
       function onSortChange(sortAttrs): void {
-        const _sort = Object.assign({}, sort);
+        let _sort = Object.assign({}, sort);
         for (const [index, direction] of Object.entries(sortAttrs)) {
           // Changing the priority of columns
           delete _sort[attributes[index].id];
-          _sort[attributes[index].id] = direction;
+          if (direction)
+            _sort = Object.assign({ [attributes[index].id]: direction }, _sort);
         }
 
-        const ops = { sort: JSON.stringify(_sort) };
+        const ops = {};
+        if (Object.keys(_sort).length) ops["sort"] = JSON.stringify(_sort);
         if (vnode.attrs["filter"]) ops["filter"] = vnode.attrs["filter"];
         m.route.set("/admin/virtualParameters", ops);
       }