mirror of
https://github.com/andwati/zitadel.git
synced 2026-11-06 22:32:16 +00:00
feat(console): MDC components (#6482)
mdc components --------- Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
co-authored by
Elio Bischof
Elio Bischof
parent
cb7b50b513
commit
b099a26a16
@@ -10,15 +10,16 @@
|
||||
<button
|
||||
color="warn"
|
||||
matTooltip="{{ 'GRANTS.DELETE' | translate }}"
|
||||
class="cnsl-action-button"
|
||||
mat-raised-button
|
||||
actions
|
||||
(click)="deleteGrantSelection()"
|
||||
*ngIf="selection.hasValue() && disableDelete === false"
|
||||
>
|
||||
<i class="las la-trash"></i>
|
||||
<span>{{ 'ACTIONS.DELETE' | translate }}</span>
|
||||
<cnsl-action-keys (actionTriggered)="deleteGrantSelection()" [type]="ActionKeysType.DELETE"></cnsl-action-keys>
|
||||
<div class="cnsl-action-button">
|
||||
<i class="las la-trash"></i>
|
||||
<span>{{ 'ACTIONS.DELETE' | translate }}</span>
|
||||
<cnsl-action-keys (actionTriggered)="deleteGrantSelection()" [type]="ActionKeysType.DELETE"></cnsl-action-keys>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<cnsl-filter-user-grants
|
||||
@@ -33,62 +34,68 @@
|
||||
*ngIf="disableWrite === false && selection.hasValue() === false && routerLink"
|
||||
matTooltip="{{ 'GRANTS.ADD' | translate }}"
|
||||
color="primary"
|
||||
class="cnsl-action-button"
|
||||
mat-raised-button
|
||||
[routerLink]="routerLink"
|
||||
>
|
||||
<mat-icon class="icon">add</mat-icon>
|
||||
<span>{{ 'GRANTS.ADD_BTN' | translate }}</span>
|
||||
<cnsl-action-keys (actionTriggered)="gotoCreateLink(routerLink)" [type]="ActionKeysType.ADD"></cnsl-action-keys>
|
||||
<div class="cnsl-action-button">
|
||||
<mat-icon class="icon">add</mat-icon>
|
||||
<span>{{ 'GRANTS.ADD_BTN' | translate }}</span>
|
||||
<cnsl-action-keys (actionTriggered)="gotoCreateLink(routerLink)" [type]="ActionKeysType.ADD"></cnsl-action-keys>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
|
||||
<ng-container matColumnDef="select">
|
||||
<th class="selection" mat-header-cell *matHeaderCellDef>
|
||||
<mat-checkbox
|
||||
[disabled]="disableWrite"
|
||||
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
|
||||
[disabled]="
|
||||
disableWrite ||
|
||||
!(
|
||||
(['user.grant.write$'] | hasRole | async) ||
|
||||
((context === UserGrantContext.OWNED_PROJECT
|
||||
? ['user.grant.write:' + row?.projectId]
|
||||
: context === UserGrantContext.GRANTED_PROJECT
|
||||
? ['user.grant.write:' + row?.id]
|
||||
: []
|
||||
)
|
||||
| hasRole
|
||||
| async)
|
||||
)
|
||||
"
|
||||
color="primary"
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
<cnsl-avatar
|
||||
*ngIf="row && row.userType === Type.TYPE_HUMAN; else cog"
|
||||
class="avatar"
|
||||
[name]="row.displayName"
|
||||
[avatarUrl]="row.avatarUrl || ''"
|
||||
[forColor]="row?.preferredLoginName"
|
||||
[size]="32"
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
<div class="selection">
|
||||
<mat-checkbox
|
||||
[disabled]="disableWrite"
|
||||
color="primary"
|
||||
(change)="$event ? masterToggle() : null"
|
||||
[checked]="selection.hasValue() && isAllSelected()"
|
||||
[indeterminate]="selection.hasValue() && !isAllSelected()"
|
||||
>
|
||||
</cnsl-avatar>
|
||||
<ng-template #cog>
|
||||
<cnsl-avatar class="avatar" [isMachine]="true" [forColor]="row.preferredLoginName" [size]="32"> </cnsl-avatar>
|
||||
</ng-template>
|
||||
</mat-checkbox>
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</th>
|
||||
<td mat-cell *matCellDef="let row">
|
||||
<div class="selection">
|
||||
<mat-checkbox
|
||||
[disabled]="
|
||||
disableWrite ||
|
||||
!(
|
||||
(['user.grant.write$'] | hasRole | async) ||
|
||||
((context === UserGrantContext.OWNED_PROJECT
|
||||
? ['user.grant.write:' + row?.projectId]
|
||||
: context === UserGrantContext.GRANTED_PROJECT
|
||||
? ['user.grant.write:' + row?.id]
|
||||
: []
|
||||
)
|
||||
| hasRole
|
||||
| async)
|
||||
)
|
||||
"
|
||||
color="primary"
|
||||
(click)="$event.stopPropagation()"
|
||||
(change)="$event ? selection.toggle(row) : null"
|
||||
[checked]="selection.isSelected(row)"
|
||||
>
|
||||
<cnsl-avatar
|
||||
*ngIf="row && row.userType === Type.TYPE_HUMAN; else cog"
|
||||
class="avatar"
|
||||
[name]="row.displayName"
|
||||
[avatarUrl]="row.avatarUrl || ''"
|
||||
[forColor]="row?.preferredLoginName"
|
||||
[size]="32"
|
||||
>
|
||||
</cnsl-avatar>
|
||||
<ng-template #cog>
|
||||
<cnsl-avatar class="avatar" [isMachine]="true" [forColor]="row.preferredLoginName" [size]="32">
|
||||
</cnsl-avatar>
|
||||
</ng-template>
|
||||
</mat-checkbox>
|
||||
</div>
|
||||
</td>
|
||||
</ng-container>
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use '@angular/material' as mat;
|
||||
|
||||
@mixin user-grants-theme($theme) {
|
||||
$foreground: map-get($theme, foreground);
|
||||
$is-dark-theme: map-get($theme, is-dark);
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import { SelectionModel } from '@angular/cdk/collections';
|
||||
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
|
||||
import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
|
||||
import { MatLegacyInput as MatInput } from '@angular/material/legacy-input';
|
||||
import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
|
||||
import { MatDialog } from '@angular/material/dialog';
|
||||
import { MatInput } from '@angular/material/input';
|
||||
import { MatTable } from '@angular/material/table';
|
||||
import { Router } from '@angular/router';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import { enterAnimations } from 'src/app/animations';
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { FormsModule } from '@angular/forms';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { MatCheckboxModule } from '@angular/material/checkbox';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
|
||||
import { MatLegacyCheckboxModule as MatCheckboxModule } from '@angular/material/legacy-checkbox';
|
||||
import { MatLegacyProgressSpinnerModule as MatProgressSpinnerModule } from '@angular/material/legacy-progress-spinner';
|
||||
import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
|
||||
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
|
||||
import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatSelectModule } from '@angular/material/select';
|
||||
import { MatTableModule } from '@angular/material/table';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { RouterModule } from '@angular/router';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
|
||||
|
||||
Reference in New Issue
Block a user