andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-10 08:05:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(console): MDC components (#6482)

Browse Source 
mdc components

---------

Co-authored-by: Elio Bischof <[email protected]>
This commit is contained in:
Max Peintner
2023-10-26 08:29:06 +00:00
committed by GitHub
co-authored by Elio Bischof
parent cb7b50b513
commit b099a26a16
412 changed files with 2711 additions and 2698 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/memberships-table/memberships-table.component.html
+35 -29
View File
@@ -18,25 +18,29 @@
<div class="table-wrapper">
<table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox
[disabled]="false"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
<th mat-header-cell *matHeaderCellDef>
<div class="selection">
<mat-checkbox
[disabled]="false"
color="primary"
(change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()"
>
</mat-checkbox>
</div>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox
[disabled]="false"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
<td mat-cell *matCellDef="let row">
<div class="selection">
<mat-checkbox
[disabled]="false"
color="primary"
(click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)"
>
</mat-checkbox>
</div>
</td>
</ng-container>
@@ -65,28 +69,30 @@
<th mat-header-cell *matHeaderCellDef class="role-row">{{ 'ROLESLABEL' | translate }}</th>
<td mat-cell *matCellDef="let membership">
<div class="membership-line">
<mat-chip-list class="cnsl-chip-list" aria-label="role selection">
<mat-chip
<mat-chip-listbox class="cnsl-chip-list" aria-label="role selection">
<mat-chip-option
[selectable]="false"
class="cnsl-chip"
*ngFor="let role of membership.rolesList"
[removable]="!!userId"
[selectable]="false"
(removed)="removeRole(membership, role)"
>
<div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
<span>{{ role | roletransform }}</span>
<button *ngIf="!!userId" matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</mat-chip>
</mat-chip-list>
<div class="cnsl-chip-content">
<div class="cnsl-chip-dot" [style.background]="getColor(role)"></div>
<span>{{ role | roletransform }}</span>
<button *ngIf="!!userId" matChipRemove>
<mat-icon>cancel</mat-icon>
</button>
</div>
</mat-chip-option>
</mat-chip-listbox>
<button
matTooltip="{{ 'ACTIONS.EDIT' | translate }}"
(click)="goto(membership)"
mat-icon-button
class="goto-btn"
>
<i class="las la-angle-right"></i>
<mat-icon>navigate_next</mat-icon>
</button>
</div>
</td>
console/src/app/modules/memberships-table/memberships-table.component.spec.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { MembershipsTableComponent } from './memberships-table.component';
console/src/app/modules/memberships-table/memberships-table.component.ts
+1 -1
View File
@@ -1,6 +1,6 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatLegacyTable as MatTable } from '@angular/material/legacy-table';
import { MatTable } from '@angular/material/table';
import { Router } from '@angular/router';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
console/src/app/modules/memberships-table/memberships-table.module.ts
+7 -7
View File
@@ -1,15 +1,15 @@
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 { MatChipsModule } from '@angular/material/chips';
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 { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy-chips';
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 { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { InputModule } from 'src/app/modules/input/input.module';