improve filter, add url parameter, overview improvements

buntspecht-frontend/src/app/pages/management/management.page.html

@@ -16,6 +16,12 @@
     }
 
     <div class="flex wrap filter-container">
+        <a mat-icon-button (click)="filterOpen=!filterOpen" title="{{'turnovers.filter' | i18n}}"
+            [color]="filterOpen ? 'primary': 'accent'">
+            <mat-icon>filter_alt</mat-icon>
+        </a>
+
+        @if (filterOpen) {
         <form class="flex wrap filter">
             <mat-form-field class="margin">
                 <mat-label>{{'management.filter.created' | i18n}}</mat-label>
@@ -43,19 +49,30 @@
                 </mat-autocomplete>
             </mat-form-field>
         </form>
+        }
     </div>
 
-    @if (entries) {
-    <div class="scroll-container">
-        <table class="default-table" mat-table [dataSource]="entries.results || []" matSort
+    @if (entries && entries.total == 0) {
+    <mat-list>
+        <mat-list-item>
+            <p>{{'paginator.empty' | i18n}}</p>
+        </mat-list-item>
+    </mat-list>
+    }
+
+    @if (entries && entries.total) {
+    <div class="flex scroll-container grow">
+        <table class="default-table grow" mat-table [dataSource]="entries.results || []" multiTemplateDataRows matSort
             (matSortChange)="applySort($event)" [matSortDisableClear]="true">
             <ng-container matColumnDef="username">
-                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">{{'user.username' |
-                    i18n}}
+                <th mat-header-cell *matHeaderCellDef mat-sort-header [disableClear]="false">
+                    {{'user.username' | i18n}}
                 </th>
                 <td mat-cell *matCellDef="let entry">
                     <div class="flex middle">
-                        {{entry[0]}}
+                        <a class="select-user"
+                            [ngClass]="{'selected': entries.filter && entries.filter.username == entry[0]}"
+                            (click)="selectUser(entry[0])">{{entry[0]}}</a>
                     </div>
                 </td>
             </ng-container>
@@ -88,21 +105,40 @@
                 </td>
             </ng-container>
 
+            <ng-container matColumnDef="menu">
+                <th mat-header-cell *matHeaderCellDef></th>
+                <td mat-cell *matCellDef="let entry">
+                    @if (entries.filter && entries.filter.username == entry[0]) {
+                    <button mat-icon-button (click)="expanded = !expanded">
+                        @if (expanded) {
+                        <mat-icon>keyboard_arrow_up</mat-icon>
+                        } @else {
+                        <mat-icon>keyboard_arrow_down</mat-icon>
+                        }
+                    </button>
+                    }
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expanded">
+                <td mat-cell *matCellDef="let entry" [attr.colspan]="columns.length">
+                    @if (expanded && entries.total && entries.filter && entries.filter.username == entry[0]) {
+                    <ui-turnovers class="flex column fill" [turnovers]="turnovers" (page)="applyTurnoverPage($event)"
+                        [enableSort]="false"></ui-turnovers>
+                    }
+                </td>
+            </ng-container>
 
             <tr mat-header-row *matHeaderRowDef="columns; sticky: true"></tr>
             <tr class="entry" mat-row *matRowDef="let row; columns: columns;"></tr>
+
+            <tr class="expanded-row" [ngClass]="{'visible' : expanded}" mat-row
+                *matRowDef="let row; columns: ['expanded']"></tr>
         </table>
     </div>
-    @if (entries.total == 0) {
-    <mat-list>
-        <mat-list-item>
-            <p>{{'paginator.empty' | i18n}}</p>
-        </mat-list-item>
-    </mat-list>
-    }
 
+    @if (!entries.filter || !entries.filter.username) {
     <span class="spacer"></span>
-
     <div class="mat-mdc-paginator flex">
         <span class="spacer"></span>
         <mat-paginator [pageSizeOptions]="pageSizeOptions" [pageIndex]="entries.offset / entries.limit"
@@ -110,6 +146,7 @@
         </mat-paginator>
     </div>
     }
+    }
 
     @if (!entries || !entries.results && !entries.error) {
     <mat-progress-bar *ngIf="" mode="indeterminate"></mat-progress-bar>