Make transaction list sortable by cleared status

packages/desktop-client/src/components/accounts/Account.jsx

@@ -1197,8 +1197,10 @@ class AccountInternal extends PureComponent {
     }
   };
 
+
   applySort = (field, ascDesc, prevField, prevAscDesc) => {
     const filters = this.state.filters;
+    const isFiltered = (filters.length > 0)
     const sortField = getField(!field ? this.state.sort.field : field);
     const sortAscDesc = !ascDesc ? this.state.sort.ascDesc : ascDesc;
     const sortPrevField = getField(
@@ -1208,34 +1210,73 @@ class AccountInternal extends PureComponent {
       ? this.state.sort.prevAscDesc
       : prevAscDesc;
 
-    if (!field) {
-      //no sort was made (called by applyFilters)
-      this.currentQuery = this.currentQuery.orderBy({
+    const sortCurrentQuery = function(that, sortField, sortAscDesc) {
+      if (sortField === 'cleared') {
+        that.currentQuery = that.currentQuery.orderBy({
+          ['reconciled']: sortAscDesc,
+        });
+      }
+
+      that.currentQuery = that.currentQuery.orderBy({
         [sortField]: sortAscDesc,
       });
-    } else {
-      //sort called directly
-      if (filters.length > 0) {
-        //if filters already exist then apply them
-        this.applyFilters([...filters]);
-        this.currentQuery = this.currentQuery.orderBy({
-          [sortField]: sortAscDesc,
-        });
-      } else {
-        //no filters exist make new rootquery
-        this.currentQuery = this.rootQuery.orderBy({
-          [sortField]: sortAscDesc,
+    }
+
+    const sortRootQuery = function(that, sortField, sortAscDesc) {
+        // sort cleared field by reconciliation status first
+        if (sortField === 'cleared') {
+          that.currentQuery = that.rootQuery.orderBy({
+            ['reconciled']: sortAscDesc,
+          });
+          that.currentQuery = that.currentQuery.orderBy({
+            ['cleared']: sortAscDesc,
+          });
+        } else {
+          that.currentQuery = that.rootQuery.orderBy({
+            [sortField]: sortAscDesc,
+          });
+        }
+    }
+
+    // sort by previously used sort field, if any
+    const maybeSortByPreviousField = function(that, sortPrevField, sortPrevAscDesc) {
+      if (!sortPrevField) {
+        return;
+      }
+
+      if (sortPrevField === 'cleared') {
+        that.currentQuery = that.currentQuery.orderBy({
+          ['reconciled']: sortPrevAscDesc,
         });
       }
-    }
-    if (sortPrevField) {
-      //apply previos sort if it exists
-      this.currentQuery = this.currentQuery.orderBy({
+
+      that.currentQuery = that.currentQuery.orderBy({
         [sortPrevField]: sortPrevAscDesc,
       });
     }
 
-    this.updateQuery(this.currentQuery, this.state.filters.length > 0);
+    switch (true) {
+      // called by applyFilters to sort an already filtered result
+      case !field:
+        sortCurrentQuery(this, sortField, sortAscDesc);
+        break;
+
+      // called directly from UI by sorting a column.
+      // active filters need to be applied before sorting
+      case isFiltered:
+        this.applyFilters([...filters]);
+        sortCurrentQuery(this, sortField, sortAscDesc);
+        break;
+
+      // called directly from UI by sorting a column.
+      // no active filters, start a new root query.
+      case !isFiltered:
+        sortRootQuery(this, sortField, sortAscDesc);
+        break;
+    }
+
+    maybeSortByPreviousField(this, sortPrevField, sortPrevAscDesc);
+    this.updateQuery(this.currentQuery, isFiltered);
   };
 
   onSort = (headerClicked, ascDesc) => {

packages/desktop-client/src/components/transactions/TransactionsTable.jsx

@@ -368,7 +368,21 @@ const TransactionHeader = memo(
           }
         />
         {showBalance && <Cell value="Balance" width={88} textAlign="right" />}
-        {showCleared && <Field width={23} truncate={false} />}
+
+        {showCleared && (
+          <HeaderCell
+            value="✓"
+            width={28}
+            alignItems="center"
+            id="cleared"
+            icon={field === 'cleared' ? ascDesc : 'clickable'}
+            onClick={() => {
+              onSort('cleared', selectAscDesc(field, ascDesc, 'cleared', 'asc'))
+            }
+            }
+          />
+        )}
+
         <Cell value="" width={5 + (scrollWidth ?? 0)} />
       </Row>
     );

upcoming-release-notes/1994.md

@@ -0,0 +1,6 @@
+---
+category: Enhancements
+authors: [jaarasys-henria]
+---
+
+Make transaction list sortable by cleared status