Feature/enable column sorting in data provider table (#6476)

* Enable column sorting

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support for column sorting to the data providers management of the admin control panel
+
 ### Changed
 
 - Included asset profile data in the endpoint `GET api/v1/portfolio/holdings`

apps/client/src/app/components/admin-settings/admin-settings.component.html

@@ -40,9 +40,21 @@
           </mat-card-actions>
         </mat-card>
       }
-      <table class="gf-table w-100" mat-table [dataSource]="dataSource">
+      <table
+        class="gf-table w-100"
+        mat-table
+        matSort
+        matSortActive="name"
+        matSortDirection="asc"
+        [dataSource]="dataSource"
+      >
         <ng-container matColumnDef="name">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1"
+            mat-header-cell
+            mat-sort-header="name"
+          >
             <ng-container i18n>Name</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1" mat-cell>
@@ -102,7 +114,12 @@
         </ng-container>
 
         <ng-container matColumnDef="assetProfileCount">
-          <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="justify-content-end px-1"
+            mat-header-cell
+            mat-sort-header="assetProfileCount"
+          >
             <ng-container i18n>Asset Profiles</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 text-right" mat-cell>

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -23,17 +23,20 @@ import {
   ChangeDetectorRef,
   Component,
   OnDestroy,
-  OnInit
+  OnInit,
+  ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
+import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
 
@@ -52,6 +55,7 @@ import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
     MatCardModule,
     MatMenuModule,
     MatProgressBarModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule
@@ -61,6 +65,8 @@ import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
   templateUrl: './admin-settings.component.html'
 })
 export class GfAdminSettingsComponent implements OnDestroy, OnInit {
+  @ViewChild(MatSort) sort: MatSort;
+
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
   public displayedColumns = [
@@ -166,6 +172,8 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
         });
 
         this.dataSource = new MatTableDataSource(filteredProviders);
+        this.dataSource.sort = this.sort;
+        this.dataSource.sortingDataAccessor = get;
 
         const ghostfolioApiKey = settings[
           PROPERTY_API_KEY_GHOSTFOLIO