AdminUI: Filtering and ordering for overview tables

AdminUi/src/AdminUi/AdminUi.csproj

@@ -13,6 +13,7 @@
     </PropertyGroup>
 
     <ItemGroup>
+        <PackageReference Include="Microsoft.AspNetCore.OData" Version="8.2.3" />
         <PackageReference Include="Microsoft.AspNetCore.SpaProxy" Version="7.0.12" />
         <PackageReference Include="Autofac.Extensions.DependencyInjection" Version="8.0.0" />
         <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="7.0.12">

AdminUi/src/AdminUi/ClientApp/package.json

@@ -27,6 +27,7 @@
         "bootstrap": "^5.2.3",
         "jquery": "^3.6.3",
         "ngx-logger": "^5.0.12",
+        "odata-filter-builder": "^1.0.0",
         "oidc-client": "^1.11.5",
         "popper.js": "^1.16.0",
         "run-script-os": "^1.1.6",

AdminUi/src/AdminUi/ClientApp/src/app/app.component.css

@@ -8,8 +8,9 @@
 
 .layout-content {
     padding: 1rem;
-    max-width: 1350px;
+    min-width: 1350px;
     margin: auto;
+    width: fit-content;
 }
 
 .login-layout {

AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts

@@ -13,6 +13,8 @@ import { MatButtonModule } from "@angular/material/button";
 import { MatCardModule } from "@angular/material/card";
 import { MatCheckboxModule } from "@angular/material/checkbox";
 import { MatChipsModule } from "@angular/material/chips";
+import { MatNativeDateModule } from "@angular/material/core";
+import { MatDatepickerModule } from "@angular/material/datepicker";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatExpansionModule } from "@angular/material/expansion";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -29,6 +31,7 @@ import { MatTableModule } from "@angular/material/table";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { MatTooltipModule } from "@angular/material/tooltip";
 
+import { MatSortModule } from "@angular/material/sort";
 import { environment } from "src/environments/environment";
 import { AppRoutingModule } from "./app-routing.module";
 import { AppComponent } from "./app.component";
@@ -103,7 +106,10 @@ import { XSRFInterceptor } from "./shared/interceptors/xsrf.interceptor";
         MatButtonModule,
         MatIconModule,
         MatSidenavModule,
+        MatDatepickerModule,
+        MatNativeDateModule,
         MatCheckboxModule,
+        MatSortModule,
         MatListModule,
         MatGridListModule,
         MatTableModule,

AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-list/client-list.component.css

@@ -10,22 +10,23 @@
 }
 
 .mat-column-numberOfIdentities {
-    width: 10%;
+    max-width: 200px;
     word-break: normal;
 }
 
 .mat-column-createdAt {
-    width: 15%;
+    max-width: 370px;
     word-break: normal;
 }
 
 .mat-column-actions {
-    width: 20%;
+    max-width: 300px;
     word-break: normal;
 }
 
 .actions-button {
     min-height: 36px;
+    min-width: 200px;
     height: auto;
 }
 
@@ -39,6 +40,10 @@
     color: blue;
 }
 
+.inline-action-buttons ::ng-deep .mat-mdc-form-field-icon-suffix {
+    display: inherit;
+}
+
 .loading {
     display: flex;
     justify-content: center;
@@ -50,6 +55,18 @@
     height: 100%;
 }
 
+.complex-filter-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-top: 10px;
+}
+
+.header-container {
+    display: flex;
+    flex-direction: column;
+}
+
 .no-data {
     padding: 25px;
 }

AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-list/client-list.component.html

@@ -15,7 +15,7 @@ <h2 class="header-title">{{ header }}</h2>
                 <mat-icon>add</mat-icon>
             </button>
         </div>
-        <table mat-table class="responsive" [dataSource]="clients" *ngIf="!loading">
+        <table mat-table matSort (matSortChange)="onTableSort($event)" class="responsive" [dataSource]="clients" *ngIf="!loading">
             <ng-container matColumnDef="select">
                 <th mat-header-cell *matHeaderCellDef>
                     <mat-checkbox
@@ -37,37 +37,101 @@ <h2 class="header-title">{{ header }}</h2>
                 </td>
             </ng-container>
             <ng-container matColumnDef="clientId">
-                <th mat-header-cell *matHeaderCellDef>Client Id</th>
+                <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by client ID" style="text-align: center">
+                    <div class="header-container">
+                        <span>Client Id</span>
+                        <mat-form-field style="width: 100%; padding-top: 10px">
+                            <input matInput type="text" [(ngModel)]="filter.clientId" (input)="filterClients()" />
+                            <button *ngIf="filter.clientId" matSuffix mat-icon-button aria-label="Clear" (click)="clearFilter('clientId')">
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        </mat-form-field>
+                    </div>
+                </th>
                 <td mat-cell *matCellDef="let client" data-label="Client Id:" (click)="editClient(client.clientId)">
                     {{ client.clientId }}
                 </td>
             </ng-container>
             <ng-container matColumnDef="displayName">
-                <th mat-header-cell *matHeaderCellDef>Display Name</th>
+                <th mat-header-cell mat-sort-header *matHeaderCellDef style="text-align: center">
+                    <div class="header-container">
+                        <span>Display Name</span>
+                        <mat-form-field style="width: 100%; padding-top: 10px">
+                            <input matInput type="text" [(ngModel)]="filter.displayName" (input)="filterClients()" />
+                            <button *ngIf="filter.displayName" matSuffix mat-icon-button aria-label="Clear" (click)="clearFilter('displayName')">
+                                <mat-icon>close</mat-icon>
+                            </button>
+                        </mat-form-field>
+                    </div>
+                </th>
                 <td mat-cell *matCellDef="let client" data-label="Display Name:" (click)="editClient(client.clientId)">
                     {{ client.displayName }}
                 </td>
             </ng-container>
             <ng-container matColumnDef="defaultTier">
-                <th mat-header-cell *matHeaderCellDef>Default Tier</th>
+                <th mat-header-cell *matHeaderCellDef style="text-align: center">
+                    <div class="header-container">
+                        <span>Default Tier</span>
+                        <mat-form-field style="width: 100%; padding-top: 10px">
+                            <mat-label>Tiers</mat-label>
+                            <mat-select multiple [(ngModel)]="filter.tiers" (selectionChange)="filterClients()">
+                                <mat-option *ngFor="let tier of tiers" [value]="tier.id">{{ tier.id }}</mat-option>
+                            </mat-select>
+                        </mat-form-field>
+                    </div>
+                </th>
                 <td mat-cell *matCellDef="let client" data-label="Default Tier:" (click)="goToTier(client.defaultTier)" class="tier-navigation">
                     {{ client.defaultTier }}
                 </td>
             </ng-container>
             <ng-container matColumnDef="numberOfIdentities">
-                <th mat-header-cell *matHeaderCellDef>Number of Identities</th>
-                <td mat-cell *matCellDef="let client" data-label="Number of Identities:" (click)="editClient(client.clientId)">
+                <th mat-header-cell *matHeaderCellDef style="text-align: center">
+                    <div class="header-container">
+                        <span>Number of Identities</span>
+                        <div class="complex-filter-container">
+                            <mat-form-field style="width: 45%">
+                                <mat-select [(ngModel)]="filter.numberOfIdentities.operator" (selectionChange)="filterClients()">
+                                    <mat-option *ngFor="let operator of operators" [value]="operator">{{ operator }}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                            <mat-form-field style="width: 45%">
+                                <input matInput type="number" [(ngModel)]="filter.numberOfIdentities.value" (input)="filterClients()" />
+                            </mat-form-field>
+                        </div>
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let client" data-label="Number of Identities:" (click)="editClient(client.clientId)" style="text-align: center">
                     {{ client.numberOfIdentities }}
                 </td>
             </ng-container>
             <ng-container matColumnDef="createdAt">
-                <th mat-header-cell *matHeaderCellDef>Created At</th>
-                <td mat-cell *matCellDef="let client" data-label="Created At:" (click)="editClient(client.clientId)">
+                <th mat-header-cell *matHeaderCellDef style="text-align: center">
+                    <div class="header-container">
+                        <span>Created At</span>
+                        <div class="complex-filter-container">
+                            <mat-form-field style="width: 25%">
+                                <mat-select [(ngModel)]="filter.createdAt.operator" (selectionChange)="filterClients()">
+                                    <mat-option *ngFor="let operator of operators" [value]="operator">{{ operator }}</mat-option>
+                                </mat-select>
+                            </mat-form-field>
+                            <mat-form-field style="width: 70%" class="inline-action-buttons">
+                                <mat-label>Choose a date</mat-label>
+                                <input matInput [matDatepicker]="picker" [(ngModel)]="filter.createdAt.value" (dateChange)="filterClients()" />
+                                <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+                                <button *ngIf="filter.createdAt.value" matSuffix mat-icon-button aria-label="Clear" (click)="clearFilter('createdAt')">
+                                    <mat-icon>close</mat-icon>
+                                </button>
+                                <mat-datepicker #picker></mat-datepicker>
+                            </mat-form-field>
+                        </div>
+                    </div>
+                </th>
+                <td mat-cell *matCellDef="let client" data-label="Created At:" (click)="editClient(client.clientId)" style="text-align: center">
                     {{ client.createdAt | date }}
                 </td>
             </ng-container>
             <ng-container matColumnDef="actions">
-                <th mat-header-cell *matHeaderCellDef>Actions</th>
+                <th mat-header-cell *matHeaderCellDef></th>
                 <td mat-cell *matCellDef="let client" data-label="">
                     <button mat-raised-button class="actions-button" color="primary" (click)="openChangeSecretDialog(client.clientId)">Change Client Secret</button>
                 </td>