AdminUI: Filtering and ordering for overview tables (#350)

* feat: register odata and add identities odata controller * feat: remove GetIdentities from Identities(Rest)Controller * feat: use odata endpoint to retrieve identities * feat: enable camel lower case to keep consistency with standard api * feat: add filters for identities through OData * feat: remove pagination from tiers endpoint * feat: add filter and sorting to clients page. * fix: identity layout and filter behaviour * fix: change ClientOverview entity after merge with main * feat: use pagination with OData * feat: add ordering by client id and display name * test: adjust integration tests to account for new odata route * fix: eslint errors * fix: remove unused import * fix: run prettier on all files * feat: add filters for new client overview columns * fix: fix identity filters that were not behaving properly * feat: remove up and down arrows from numeric inputs * fix: eslint errors * fix: odata filter now correctly builds taking into consideration AND/OR combinations * refactor: use const instead of var * refactor: run prettier on codebase * fix: add missing default cases for switch statements * refactor: rename client service * fix: remove unused is ODataRequest property * refactor: rename viewChild parameters * refactor: simplify odata filter concatenation * refactor: remove unused error property from ODataResponseContent * refactor: make methods that aren't used by the html template private * ci: trigger pipelines --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
nmshd · Oct 23, 2023 · d64169c · d64169c
1 parent 868630f
commit d64169c
Show file tree

Hide file tree

Showing 36 changed files with 903 additions and 161 deletions.
diff --git a/AdminUi/src/AdminUi/AdminUi.csproj b/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">

diff --git a/AdminUi/src/AdminUi/ClientApp/package-lock.json b/AdminUi/src/AdminUi/ClientApp/package-lock.json
diff --git a/AdminUi/src/AdminUi/ClientApp/package.json b/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",

diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/app.component.css b/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 {

diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/app.module.ts b/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,

diff --git a/...lientApp/src/app/components/client/change-secret-dialog/change-secret-dialog.component.ts b/...lientApp/src/app/components/client/change-secret-dialog/change-secret-dialog.component.ts
@@ -1,7 +1,7 @@
 import { Component, Inject } from "@angular/core";
-import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
 import { MatSnackBar } from "@angular/material/snack-bar";
-import { ChangeClientSecretRequest, Client, ClientServiceService } from "src/app/services/client-service/client-service";
+import { ChangeClientSecretRequest, Client, ClientService } from "src/app/services/client-service/client-service";
 import { HttpResponseEnvelope } from "src/app/utils/http-response-envelope";
 
 @Component({
@@ -20,7 +20,7 @@ export class ChangeSecretDialogComponent {
 
     public constructor(
         private readonly snackBar: MatSnackBar,
-        private readonly clientService: ClientServiceService,
+        private readonly clientService: ClientService,
         public dialogRef: MatDialogRef<ChangeSecretDialogComponent>,
         @Inject(MAT_DIALOG_DATA) public data: any
     ) {

diff --git a/AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.ts b/AdminUi/src/AdminUi/ClientApp/src/app/components/client/client-edit/client-edit.component.ts
@@ -1,7 +1,7 @@
 import { Component } from "@angular/core";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { ActivatedRoute } from "@angular/router";
-import { Client, UpdateClientRequest, ClientServiceService } from "src/app/services/client-service/client-service";
+import { Client, ClientService, UpdateClientRequest } from "src/app/services/client-service/client-service";
 import { TierOverview, TierService } from "src/app/services/tier-service/tier.service";
 import { HttpResponseEnvelope } from "src/app/utils/http-response-envelope";
 import { PagedHttpResponseEnvelope } from "src/app/utils/paged-http-response-envelope";
@@ -28,7 +28,7 @@ export class ClientEditComponent {
     public constructor(
         private readonly route: ActivatedRoute,
         private readonly snackBar: MatSnackBar,
-        private readonly clientService: ClientServiceService,
+        private readonly clientService: ClientService,
         private readonly tierService: TierService
     ) {
         this.headerCreate = "Create Client";

diff --git a/...nUi/src/AdminUi/ClientApp/src/app/components/client/client-list/client-list.component.css b/...nUi/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;
 }

diff --git a/...Ui/src/AdminUi/ClientApp/src/app/components/client/client-list/client-list.component.html b/...Ui/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>