fix(console): Auth method dialog title, layout issues (#4216)

* fix(console): app auth method dialog title

* lint
This commit is contained in:
Max Peintner
2022-08-26 08:13:38 +02:00
committed by GitHub
parent 47930c6a85
commit 3c67c9756d
6 changed files with 85 additions and 57 deletions
@@ -1,8 +1,17 @@
<cnsl-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
[timestamp]="keyResult?.details?.viewTimestamp" [selection]="selection">
<cnsl-refresh-table
[loading]="loading$ | async"
(refreshed)="refreshPage()"
[dataSize]="dataSource.data.length"
[timestamp]="keyResult?.details?.viewTimestamp"
[selection]="selection"
>
<div actions>
<a [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) === false"
color="primary" mat-raised-button (click)="openAddKey()">
<a
[disabled]="(['project.app.write:' + projectId, 'project.app.write'] | hasRole | async) === false"
color="primary"
mat-raised-button
(click)="openAddKey()"
>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
@@ -11,39 +20,46 @@
<table class="table" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
<mat-checkbox
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</th>
<td mat-cell *matCellDef="let key">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
<mat-checkbox
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(key) : null"
[checked]="selection.isSelected(key)"
>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
<td mat-cell *matCellDef="let key"> {{key?.id}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.ID' | translate }}</th>
<td mat-cell *matCellDef="let key">{{ key?.id }}</td>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.TYPE' | translate }}</th>
<td mat-cell *matCellDef="let key">{{ 'USER.MACHINE.KEYTYPES.' + key?.type | translate }}</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.CREATIONDATE' | translate }}</th>
<td mat-cell *matCellDef="let key">
{{key.details.creationDate | timestampToDate | localizedDate: 'fromNow'}}
{{ key.details.creationDate | timestampToDate | localizedDate: 'fromNow' }}
</td>
</ng-container>
<ng-container matColumnDef="expirationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
<th mat-header-cell *matHeaderCellDef>{{ 'USER.MACHINE.EXPIRATIONDATE' | translate }}</th>
<td mat-cell *matCellDef="let key">
{{key.expirationDate | timestampToDate | localizedDate: 'fromNow'}}
{{ key.expirationDate | timestampToDate | localizedDate: 'fromNow' }}
</td>
</ng-container>
@@ -51,9 +67,14 @@
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let key">
<cnsl-table-actions>
<button actions
[disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) === false"
mat-icon-button color="warn" matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteKey(key)">
<button
actions
[disabled]="(['project.app.write:' + projectId, 'project.app.write'] | hasRole | async) === false"
mat-icon-button
color="warn"
matTooltip="{{ 'ACTIONS.DELETE' | translate }}"
(click)="$event.stopPropagation(); deleteKey(key)"
>
<i class="las la-trash"></i>
</button>
</cnsl-table-actions>
@@ -61,12 +82,17 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns;" (click)="selection.toggle(key);">
</tr>
<tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns" (click)="selection.toggle(key)"></tr>
</table>
</div>
<cnsl-paginator #paginator class="paginator" [timestamp]="keyResult?.details?.viewTimestamp"
[length]="keyResult?.details?.totalResult || 0" [pageSize]="20" [pageSizeOptions]="[10, 20, 50, 100]"
(page)="changePage($event)"></cnsl-paginator>
</cnsl-refresh-table>
<cnsl-paginator
#paginator
class="paginator"
[timestamp]="keyResult?.details?.viewTimestamp"
[length]="keyResult?.details?.totalResult || 0"
[pageSize]="20"
[pageSizeOptions]="[10, 20, 50, 100]"
(page)="changePage($event)"
></cnsl-paginator>
</cnsl-refresh-table>