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-10-25 08:42:16 +00:00 · 2020-07-20 15:23:29 +02:00
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
@@ -0,0 +1,18 @@
+<div class="table-header-row">
+    <div class="col">
+        <ng-container *ngIf="!selection.hasValue()">
+            <span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
+            <span class="count">{{dataSize}}</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>
+    <button mat-icon-button (click)="emitRefresh()" class="icon-button" matTooltip="{{'ACTIONS.REFRESH' | translate}}">
+        <mat-icon>refresh</mat-icon>
+    </button>
+    <ng-content select="[actions]"></ng-content>
+</div>
+<ng-content></ng-content>
@@ -0,0 +1,26 @@
+
+.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;
+    }
+}
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { RefreshTableComponent } from './refresh-table.component';
+
+describe('RefreshTableComponent', () => {
+    let component: RefreshTableComponent;
+    let fixture: ComponentFixture<RefreshTableComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [RefreshTableComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(RefreshTableComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,46 @@
+import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations';
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+
+const rotate = animation([
+    animate(
+        '{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)',
+        keyframes([
+            style({
+                transform: 'rotate(0deg)',
+            }),
+            style({
+                transform: 'rotate(360deg)',
+            }),
+        ]),
+    ),
+]);
+@Component({
+    selector: 'app-refresh-table',
+    templateUrl: './refresh-table.component.html',
+    styleUrls: ['./refresh-table.component.scss'],
+    animations: [
+        trigger('rotate', [
+            transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]),
+        ]),
+    ],
+})
+export class RefreshTableComponent implements OnInit {
+    @Input() public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
+    @Input() public dataSize: number = 0;
+    @Input() public emitRefreshAfterTimeoutInMs: number = 0;
+    @Output() public refreshed: EventEmitter<void> = new EventEmitter();
+
+    ngOnInit(): void {
+        if (this.emitRefreshAfterTimeoutInMs) {
+            setTimeout(() => {
+                this.emitRefresh();
+            }, this.emitRefreshAfterTimeoutInMs);
+        }
+    }
+
+    emitRefresh(): void {
+        this.selection.clear();
+        return this.refreshed.emit();
+    }
+}
@@ -0,0 +1,27 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslateModule } from '@ngx-translate/core';
+
+import { RefreshTableComponent } from './refresh-table.component';
+
+
+
+@NgModule({
+    declarations: [RefreshTableComponent],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatIconModule,
+        TranslateModule,
+        FormsModule,
+        MatTooltipModule,
+    ],
+    exports: [
+        RefreshTableComponent,
+    ],
+})
+export class RefreshTableModule { }