fix(console): refresh tables, auto refresh emitter, avatar colors (#487)

* refreshtable component * project grant refresh table * project role refresh, user grant, i18n * lint * auth user mfa table * auth mfa table * rm unused 404 page, add mgmt mfa table * change light accent color * add actions to mfa table * user detail mfa table * clear selection on refresh, bind data length * member table * fix padding mfa table * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * Update console/src/assets/i18n/en.json Co-authored-by: Florian Forster <[email protected]> * z-index, new colors * new senf color Co-authored-by: Florian Forster <[email protected]>
2026-11-07 22:55:12 +00:00 · 2020-07-20 15:23:29 +02:00
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
@@ -17,6 +17,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module';
 import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
 import { ProjectContributorsModule } from 'src/app/modules/project-contributors/project-contributors.module';
 import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module';
+import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
 import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
 import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module';
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
@@ -59,6 +60,7 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
        MatProgressSpinnerModule,
        ChangesModule,
        MetaLayoutModule,
+        RefreshTableModule,
    ],
 })
 export class OwnedProjectDetailModule { }
@@ -10,6 +10,7 @@ import { ProjectService } from 'src/app/services/project.service';
 * (including sorting, pagination, and filtering).
 */
 export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
+    public totalResult: number = 0;
    public grantsSubject: BehaviorSubject<ProjectGrant.AsObject[]> = new BehaviorSubject<ProjectGrant.AsObject[]>([]);
    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -24,6 +25,7 @@ export class ProjectGrantsDataSource extends DataSource<ProjectGrant.AsObject> {
        this.loadingSubject.next(true);
        from(this.projectService.SearchProjectGrants(projectId, pageSize, offset)).pipe(
            map(resp => {
+                this.totalResult = resp.toObject().totalResult;
                return resp.toObject().resultList;
            }),
            catchError(() => of([])),
@@ -1,91 +1,84 @@
-<div class="table-header-row" *ngIf="projectId">
-    <div class="col">
-        <ng-container *ngIf="!selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
-            <span class="count">{{dataSource.grantsSubject.value.length}}</span>
-        </ng-container>
-        <ng-container *ngIf="selection.hasValue()">
-            <span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
-            <span class="count">{{selection?.selected?.length}}</span>
-        </ng-container>
-    </div>
-    <span class="fill-space"></span>
-    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']">
-        <button (click)="deleteSelectedGrants()" [disabled]="disabled" class="icon-button" mat-icon-button
-            *ngIf="selection.hasValue()" color="warn">
+<app-refresh-table *ngIf="projectId" (refreshed)="loadGrantsPage()" [dataSize]="dataSource.totalResult"
+    [selection]="selection">
+    <ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
+        actions>
+        <button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"
+            color="warn">
            <i class="las la-trash"></i>
        </button>
    </ng-template>
-    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']">
-        <a [disabled]="disabled" color="primary" class="add-button" color="primary" mat-raised-button
+    <ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
+        actions>
+        <a [disabled]="disabled" color="primary" class="rounded-button" color="primary" mat-raised-button
            [routerLink]="[ '/projects', projectId, 'grants', 'create']">
            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
        </a>
    </ng-template>
-</div>

-<div class="table-wrapper">
-    <div class="spinner-container" *ngIf="dataSource.loading$ | async">
-        <mat-spinner diameter="50"></mat-spinner>
+    <div class="table-wrapper">
+        <div class="spinner-container" *ngIf="dataSource.loading$ | async">
+            <mat-spinner diameter="50"></mat-spinner>
+        </div>
+        <table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
+
+            <ng-container matColumnDef="select">
+                <th class="selection" mat-header-cell *matHeaderCellDef>
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    </mat-checkbox>
+                </th>
+                <td class="selection" mat-cell *matCellDef="let row">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="grantedOrgName">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.grantedOrgName}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="creationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="changeDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
+                <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
+                    *matCellDef="let grant">
+                    {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
+
+            </ng-container>
+
+            <ng-container matColumnDef="roleNamesList">
+                <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
+                <td class="pointer" mat-cell *matCellDef="let grant">
+                    <mat-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
+                        <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
+                        <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
+                            (selectionChange)="updateRoles(grant, $event)">
+                            <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
+                                {{role.key}}
+                            </mat-option>
+                        </mat-select>
+                    </mat-form-field>
+                </td>
+            </ng-container>
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
+            </tr>
+        </table>
+
+        <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]"
+            [length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
+        </mat-paginator>
    </div>
-    <table mat-table multiTemplateDataRows class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
-
-        <ng-container matColumnDef="select">
-            <th class="selection" mat-header-cell *matHeaderCellDef>
-                <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
-                    [checked]="selection.hasValue() && isAllSelected()"
-                    [indeterminate]="selection.hasValue() && !isAllSelected()">
-                </mat-checkbox>
-            </th>
-            <td class="selection" mat-cell *matCellDef="let row">
-                <mat-checkbox color="primary" (click)="$event.stopPropagation()"
-                    (change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
-                </mat-checkbox>
-            </td>
-        </ng-container>
-
-        <ng-container matColumnDef="grantedOrgName">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.grantedOrgName}} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="creationDate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CREATIONDATE' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.creationDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
-        </ng-container>
-
-        <ng-container matColumnDef="changeDate">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.CHANGEDATE' | translate }} </th>
-            <td [routerLink]="['/projects',grant.projectId,'grant', grant.id]" class="pointer" mat-cell
-                *matCellDef="let grant">
-                {{grant.changeDate | timestampToDate | date: 'dd. MMM, HH:mm' }} </td>
-
-        </ng-container>
-
-        <ng-container matColumnDef="roleNamesList">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
-            <td class="pointer" mat-cell *matCellDef="let grant">
-                <mat-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
-                    <mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
-                    <mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
-                        (selectionChange)="updateRoles(grant, $event)">
-                        <mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
-                            {{role.key}}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-            </td>
-        </ng-container>
-
-        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-        <tr class="data-row" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
-        </tr>
-    </table>
-
-    <mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
-    </mat-paginator>
-</div>
+</app-refresh-table>
@@ -1,30 +1,5 @@
-.table-header-row {
-  display: flex;
-  align-items: center;
-
-  .col {
-      display: flex;
-      flex-direction: column;
-      .desc {
-          font-size: .8rem;
-          color: #8795a1;
-      }
-      .count {
-          font-size: 2rem;
-      }
-  }
-
-  .fill-space {
-      flex: 1;
-  }
-
-  .icon-button {
-      margin-right: .5rem;
-  }
-
-  .add-button {
-      border-radius: .5rem;
-  }
+.rounded-button {
+    border-radius: .5rem;
 }

 .table-wrapper {
@@ -52,11 +52,11 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {

    }

-    private loadGrantsPage(): void {
+    public loadGrantsPage(pageIndex?: number, pageSize?: number): void {
        this.dataSource.loadGrants(
            this.projectId,
-            this.paginator.pageIndex,
-            this.paginator.pageSize,
+            pageIndex ?? this.paginator.pageIndex,
+            pageSize ?? this.paginator.pageSize,
        );
    }

@@ -29,7 +29,7 @@
        </div>
        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
            mat-icon-button>
-            <mat-icon>push_pin_outline</mat-icon>
+            <mat-icon>push_pin</mat-icon>
        </button>
    </div>

@@ -57,7 +57,7 @@
        </div>
        <button [ngClass]="{ selected: selection.isSelected(item)}" (click)="selection.toggle(item)" class="edit-button"
            mat-icon-button>
-            <mat-icon>push_pin_outline</mat-icon>
+            <mat-icon>push_pin</mat-icon>
        </button>
    </div>