Refactor filtering in activities table

libs/common/src/lib/interfaces/filter.interface.ts

@@ -1,5 +1,5 @@
 export interface Filter {
   id: string;
   label?: string;
-  type: 'ACCOUNT' | 'TAG';
+  type: 'ACCOUNT' | 'SYMBOL' | 'TAG';
 }

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -141,12 +141,14 @@ export class ActivitiesFilterComponent implements OnChanges, OnDestroy {
       });
     }
 
-    return filterGroups.map((filterGroup) => {
+    return filterGroups
-      return {
+      .sort((a, b) => a.name.localeCompare(b.name))
-        ...filterGroup,
+      .map((filterGroup) => {
-        filters: filterGroup.filters
+        return {
-      };
+          ...filterGroup,
-    });
+          filters: filterGroup.filters
+        };
+      });
   }
 
   private updateFilters() {

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -105,17 +105,17 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
     this.defaultDateFormat = getDateFormatString(this.locale);
 
     if (this.activities) {
-      this.allFilters = this.getSearchableFieldValues(this.activities).map(
+      this.allFilters = this.getSearchableFieldValues(this.activities);
-        (label) => {
-          return { label, id: label, type: 'TAG' };
-        }
-      );
 
       this.dataSource = new MatTableDataSource(this.activities);
       this.dataSource.filterPredicate = (data, filter) => {
         const dataString = this.getFilterableValues(data)
+          .map((currentFilter) => {
+            return currentFilter.label;
+          })
           .join(' ')
           .toLowerCase();
+
         let contains = true;
         for (const singleFilter of filter.split(SEARCH_STRING_SEPARATOR)) {
           contains =
@@ -190,50 +190,51 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
 
   private getFilterableValues(
     activity: OrderWithAccount,
-    fieldValues: Set<string> = new Set<string>()
+    fieldValueMap: { [id: string]: Filter } = {}
-  ): string[] {
+  ): Filter[] {
-    fieldValues.add(activity.Account?.name);
+    fieldValueMap[activity.Account?.id] = {
-    fieldValues.add(activity.Account?.Platform?.name);
+      id: activity.Account?.id,
-    fieldValues.add(activity.SymbolProfile.currency);
+      label: activity.Account?.name,
+      type: 'ACCOUNT'
+    };
+
+    fieldValueMap[activity.SymbolProfile.currency] = {
+      id: activity.SymbolProfile.currency,
+      label: activity.SymbolProfile.currency,
+      type: 'TAG'
+    };
 
     if (!isUUID(activity.SymbolProfile.symbol)) {
-      fieldValues.add(activity.SymbolProfile.symbol);
+      fieldValueMap[activity.SymbolProfile.symbol] = {
+        id: activity.SymbolProfile.symbol,
+        label: activity.SymbolProfile.symbol,
+        type: 'SYMBOL'
+      };
     }
 
-    fieldValues.add(activity.type);
+    fieldValueMap[activity.type] = {
-    fieldValues.add(format(activity.date, 'yyyy'));
+      id: activity.type,
+      label: activity.type,
+      type: 'TAG'
+    };
 
-    return [...fieldValues].filter((item) => {
+    fieldValueMap[format(activity.date, 'yyyy')] = {
-      return item !== undefined;
+      id: format(activity.date, 'yyyy'),
-    });
+      label: format(activity.date, 'yyyy'),
+      type: 'TAG'
+    };
+
+    return Object.values(fieldValueMap);
   }
 
-  private getSearchableFieldValues(activities: OrderWithAccount[]): string[] {
+  private getSearchableFieldValues(activities: OrderWithAccount[]): Filter[] {
-    const fieldValues = new Set<string>();
+    const fieldValueMap: { [id: string]: Filter } = {};
 
     for (const activity of activities) {
-      this.getFilterableValues(activity, fieldValues);
+      this.getFilterableValues(activity, fieldValueMap);
     }
 
-    return [...fieldValues]
+    return Object.values(fieldValueMap);
-      .filter((item) => {
-        return item !== undefined;
-      })
-      .sort((a, b) => {
-        const aFirstChar = a.charAt(0);
-        const bFirstChar = b.charAt(0);
-        const isANumber = aFirstChar >= '0' && aFirstChar <= '9';
-        const isBNumber = bFirstChar >= '0' && bFirstChar <= '9';
-
-        // Sort priority: text, followed by numbers
-        if (isANumber && !isBNumber) {
-          return 1;
-        } else if (!isANumber && isBNumber) {
-          return -1;
-        } else {
-          return a.toLowerCase() < b.toLowerCase() ? -1 : 1;
-        }
-      });
   }
 
   private getTotalFees() {
@@ -276,6 +277,7 @@ export class ActivitiesTableComponent implements OnChanges, OnDestroy {
         return filter.label;
       })
       .join(SEARCH_STRING_SEPARATOR);
+
     const lowercaseSearchKeywords = filters.map((filter) => {
       return filter.label.trim().toLowerCase();
     });