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

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

Browse Source 
* 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]>
This commit is contained in:
Max Peintner
2020-07-20 15:23:29 +02:00
committed by GitHub
co-authored by Florian Forster
parent 933193855a
commit 117a0d7b19
57 changed files with 789 additions and 711 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/project-members/project-members.component.html
+28 -40
View File
@@ -1,44 +1,32 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<div class="container">
<div class="left">
<a *ngIf="project" [routerLink]="[ '/projects', project.projectId]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="right">
<div class="head">
<h1>{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="table-header-row" *ngIf="project">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.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.member.delete:' + project.projectId, 'project.member.delete']">
<button (click)="removeProjectMemberSelection()" color="warn"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[selection]="selection">
<ng-template appHasRole actions
[appHasRole]="['project.member.delete:' + project.projectId, 'project.member.delete']">
<button (click)="removeProjectMemberSelection()" color="warn"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole actions
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
@@ -118,6 +106,6 @@
(page)="changePage($event)">
</mat-paginator>
</div>
</div>
</app-refresh-table>
</div>
</div>
console/src/app/modules/project-members/project-members.component.scss
+6 -26
View File
@@ -16,6 +16,7 @@
.right {
flex: 1;
padding-top: 1rem;
padding-right: 1rem;
.head {
display: flex;
@@ -42,33 +43,12 @@
}
}
.table-header-row {
display: flex;
align-items: center;
.icon-button {
margin-right: .5rem;
}
.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;
}
.add-button {
border-radius: .5rem;
}
.table-wrapper {
console/src/app/modules/project-members/project-members.component.ts
+8 -2
View File
@@ -170,7 +170,13 @@ export class ProjectMembersComponent {
}
}
public changePage(event: PageEvent): void {
this.dataSource.loadMembers(this.project.projectId, this.projectType, event.pageIndex, event.pageSize, this.grantId);
public changePage(event?: PageEvent): void {
this.dataSource.loadMembers(
this.project.projectId,
this.projectType,
event?.pageIndex ?? this.paginator.pageIndex,
event?.pageSize ?? this.paginator.pageSize,
this.grantId,
);
}
}
console/src/app/modules/project-members/project-members.module.ts
+4
View File
@@ -5,6 +5,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
@@ -17,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module';
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
import { ProjectMembersRoutingModule } from './project-members-routing.module';
import { ProjectMembersComponent } from './project-members.component';
@@ -43,6 +45,8 @@ import { ProjectMembersComponent } from './project-members.component';
FormsModule,
TranslateModule,
HasRolePipeModule,
RefreshTableModule,
MatDialogModule,
],
})
export class ProjectMembersModule { }