[PM-11201][CL-507] Add the ability to sort by Name, Group, and Permission within the collection and item tables (#11453)

* Added sorting to vault, name, permission and group

Added default sorting

* Fixed import

* reverted test on template

* Only add sorting functionality to admin console

* changed code order

* Fixed leftover test for sortingn

* Fixed reference

* sort permissions by ascending order

* Fixed bug where a collection had multiple groups and sorting alphbatically didn't happen correctly all the time

* Fixed bug whne creating a new cipher item

* Introduced fnFactory to create a sort function with direction provided

* Used new sort function to make collections always remain at the top and ciphers below

* extracted logic to always sort collections at the top

Added similar sorting to sortBygroup

* removed org vault check

* remove unused service

* Sort only collections

* Got rid of sortFn factory in favour of passing the direction as an optional parameter

* Removed tenary

* get cipher permissions

* Use all collections to filter collection ids

* Fixed ascending and descending issues

* Added functionality to default sort in descending order

* default sort permissions in descending order

* Refactored setActive to not pass direction as a paramater

libs/components/src/table/sortable.component.ts

@@ -1,7 +1,7 @@
 import { coerceBooleanProperty } from "@angular/cdk/coercion";
 import { Component, HostBinding, Input, OnInit } from "@angular/core";
 
-import type { SortFn } from "./table-data-source";
+import type { SortDirection, SortFn } from "./table-data-source";
 import { TableComponent } from "./table.component";
 
 @Component({
@@ -19,12 +19,16 @@ export class SortableComponent implements OnInit {
    */
   @Input() bitSortable: string;
 
-  private _default: boolean;
+  private _default: SortDirection | boolean = false;
   /**
    * Mark the column as the default sort column
    */
-  @Input() set default(value: boolean | "") {
-    this._default = coerceBooleanProperty(value);
+  @Input() set default(value: SortDirection | boolean | "") {
+    if (value === "desc" || value === "asc") {
+      this._default = value;
+    } else {
+      this._default = coerceBooleanProperty(value) ? "asc" : false;
+    }
   }
 
   /**
@@ -32,6 +36,11 @@ export class SortableComponent implements OnInit {
    *
    * @example
    * fn = (a, b) => a.name.localeCompare(b.name)
+   *
+   * fn = (a, b, direction) => {
+   *  const result = a.name.localeCompare(b.name)
+   *  return direction === 'asc' ? result : -result;
+   * }
    */
   @Input() fn: SortFn;
 
@@ -52,8 +61,18 @@ export class SortableComponent implements OnInit {
 
   protected setActive() {
     if (this.table.dataSource) {
-      const direction = this.isActive && this.direction === "asc" ? "desc" : "asc";
-      this.table.dataSource.sort = { column: this.bitSortable, direction: direction, fn: this.fn };
+      const defaultDirection = this._default === "desc" ? "desc" : "asc";
+      const direction = this.isActive
+        ? this.direction === "asc"
+          ? "desc"
+          : "asc"
+        : defaultDirection;
+
+      this.table.dataSource.sort = {
+        column: this.bitSortable,
+        direction: direction,
+        fn: this.fn,
+      };
     }
   }
 

libs/components/src/table/table-data-source.ts

@@ -3,7 +3,7 @@ import { DataSource } from "@angular/cdk/collections";
 import { BehaviorSubject, combineLatest, map, Observable, Subscription } from "rxjs";
 
 export type SortDirection = "asc" | "desc";
-export type SortFn = (a: any, b: any) => number;
+export type SortFn = (a: any, b: any, direction?: SortDirection) => number;
 export type Sort = {
   column?: string;
   direction: SortDirection;
@@ -166,7 +166,7 @@ export class TableDataSource<T> extends DataSource<T> {
     return data.sort((a, b) => {
       // If a custom sort function is provided, use it instead of the default.
       if (sort.fn) {
-        return sort.fn(a, b) * directionModifier;
+        return sort.fn(a, b, sort.direction) * directionModifier;
       }
 
       let valueA = this.sortingDataAccessor(a, column);

libs/components/src/table/table.mdx

@@ -105,7 +105,7 @@ within the `ng-template`which provides access to the rows using `let-rows$`.
 
 We provide a simple component for displaying sortable column headers. The `bitSortable` component
 wires up to the `TableDataSource` and will automatically sort the data when clicked and display an
-indicator for which column is currently sorted. The dafault sorting can be specified by setting the
+indicator for which column is currently sorted. The default sorting can be specified by setting the
 `default`.
 
 ```html
@@ -113,10 +113,23 @@ indicator for which column is currently sorted. The dafault sorting can be speci
 <th bitCell bitSortable="name" default>Name</th>
 ```
 
+For default sorting in descending order, set default="desc"
+
+```html
+<th bitCell bitSortable="name" default="desc">Name</th>
+```
+
 It's also possible to define a custom sorting function by setting the `fn` input.
 
 ```ts
+// Basic sort function
 const sortFn = (a: T, b: T) => (a.id > b.id ? 1 : -1);
+
+// Direction aware sort function
+const sortByName = (a: T, b: T, direction?: SortDirection) => {
+  const result = a.name.localeCompare(b.name);
+  return direction === "asc" ? result : -result;
+};
 ```
 
 ### Filtering