[Enhancement] Make transaction list sortable by cleared status (actua…

…lbudget#1994)

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

@@ -1199,6 +1199,7 @@ 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 +1209,78 @@ 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,
+    };
+
+    const sortRootQuery = function (that, sortField, sortAscDesc) {
+      if (sortField === 'cleared') {
+        that.currentQuery = that.rootQuery.orderBy({
+          reconciled: sortAscDesc,
+        });
+        that.currentQuery = that.currentQuery.orderBy({
+          cleared: sortAscDesc,
         });
       } else {
-        //no filters exist make new rootquery
-        this.currentQuery = this.rootQuery.orderBy({
+        that.currentQuery = that.rootQuery.orderBy({
           [sortField]: sortAscDesc,
         });
       }
-    }
-    if (sortPrevField) {
-      //apply previos sort if it exists
-      this.currentQuery = this.currentQuery.orderBy({
+    };
+
+    // 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,
+        });
+      }
+
+      that.currentQuery = that.currentQuery.orderBy({
         [sortPrevField]: sortPrevAscDesc,
       });
+    };
+
+    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;
+
+      default:
     }
 
-    this.updateQuery(this.currentQuery, this.state.filters.length > 0);
+    maybeSortByPreviousField(this, sortPrevField, sortPrevAscDesc);
+    this.updateQuery(this.currentQuery, isFiltered);
   };
 
   onSort = (headerClicked, ascDesc) => {

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

@@ -368,7 +368,23 @@ const TransactionHeader = memo(
           }
         />
         {showBalance && <Cell value="Balance" width={88} textAlign="right" />}
-        {showCleared && <Field width={23} truncate={false} />}
+
+        {showCleared && (
+          <HeaderCell
+            value="✓"
+            width={23}
+            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