TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-08-11 21:47:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): cleanup user detail and member components, user/me redirect, permission guards, filter, org policy guard, user table, scss cleanup (#808)

Browse Source 
* fix: remove user.write guard for filtering

* border color

* fix user routing from member tables

* idp detail layout

* generic contact component

* fix redirect to auth user, user grant disable

* disable policy action without permission, i18n

* user-create flex fix, contact ng-content

* rm unused styles

* sidenav divider

* lint

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console (#806)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/cli from 10.1.3 to 10.1.4 in /console

Bumps [@angular/cli](https://github.com/angular/angular-cli) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/compare/v10.1.3...v10.1.4)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular/language-service from 10.1.3 to 10.1.4 in /console (#805)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular/language-service in /console

Bumps [@angular/language-service](https://github.com/angular/angular/tree/HEAD/packages/language-service) from 10.1.3 to 10.1.4.
- [Release notes](https://github.com/angular/angular/releases)
- [Changelog](https://github.com/angular/angular/blob/master/CHANGELOG.md)
- [Commits](https://github.com/angular/angular/commits/10.1.4/packages/language-service)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console (#804)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump codelyzer from 6.0.0 to 6.0.1 in /console

Bumps [codelyzer](https://github.com/mgechev/codelyzer) from 6.0.0 to 6.0.1.
- [Release notes](https://github.com/mgechev/codelyzer/releases)
- [Changelog](https://github.com/mgechev/codelyzer/blob/master/CHANGELOG.md)
- [Commits](https://github.com/mgechev/codelyzer/commits/6.0.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump @angular-devkit/build-angular from 0.1000.8 to 0.1001.4 in /console (#803)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps-dev): bump @angular-devkit/build-angular in /console

Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1000.8 to 0.1001.4.
- [Release notes](https://github.com/angular/angular-cli/releases)
- [Commits](https://github.com/angular/angular-cli/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Max Peintner <max@caos.ch>

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console (#802)

* fix: user session with external login (#797)

* fix: user session with external login

* fix: tests

* fix: tests

* fix: change idp config name

* fix(container): stop copying / and instead only copy zitadel (#691)

* chore: stop copying / and instead only copy zitadel

* Update Dockerfile

* Update release.yml

* enable anchors debug

* fix(container): don't copy alpine content into scratch execpt pwd

* chore: remove need step

* merge master

* chore(deps): bump uuid from 8.3.0 to 8.3.1 in /console

Bumps [uuid](https://github.com/uuidjs/uuid) from 8.3.0 to 8.3.1.
- [Release notes](https://github.com/uuidjs/uuid/releases)
- [Changelog](https://github.com/uuidjs/uuid/blob/master/CHANGELOG.md)
- [Commits](https://github.com/uuidjs/uuid/compare/v8.3.0...v8.3.1)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* create memberstable as common component

* iam member cleanup

* iam + org m table, user table service user avatar

* toast config

* fix selection emitter

* fix project grant table width

* project grant members refactor

* theme optimizations

* member table col delete

* lint

* fix table row color

* refactor grey color

* lint scss

* org list redirect on click, fix user table undef

* refresh table after grant add

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Fabi <38692350+fgerschwiler@users.noreply.github.com>
Co-authored-by: Florian Forster <florian@caos.ch>
This commit is contained in:
Max Peintner
2020-10-08 10:09:10 +02:00
committed by GitHub
parent 5f0cddac37
commit 0bbc9c7c49
129 changed files with 2002 additions and 2208 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1248
console/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

10
console/package.json
View File

@@ -41,18 +41,18 @@
"rxjs": "~6.6.3",
"ts-protoc-gen": "^0.13.0",
"tslib": "^2.0.1",
"uuid": "^8.3.0",
"uuid": "^8.3.1",
"zone.js": "~0.11.1"
},
"devDependencies": {
"@angular/cli": "~10.1.3",
"@angular-devkit/build-angular": "~0.1000.8",
"@angular-devkit/build-angular": "~0.1001.4",
"@angular/cli": "~10.1.4",
"@angular/compiler-cli": "~10.0.11",
"@types/jasmine": "~3.5.13",
"@angular/language-service": "~10.1.3",
"@angular/language-service": "~10.1.4",
"@types/jasminewd2": "~2.0.3",
"@types/node": "^14.11.2",
"codelyzer": "^6.0.0",
"codelyzer": "^6.0.1",
"jasmine-core": "~3.6.0",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~5.2.3",

8
console/src/app/app.component.scss
View File

@@ -208,16 +208,16 @@
margin: .5rem 0;
span {
border: 1px solid #ffffff10;
border: 1px solid #81868a40;
padding: 2px 1rem;
border-radius: 50vw;
color: #8795a1;
color: var(--grey);
font-size: 12px;
}
.line {
display: block;
background-color: #ffffff10;
background-color: #81868a40;
height: 1px;
margin: .5rem 0;
flex: 1;
@@ -236,7 +236,7 @@
.show-all {
$primary: map-get($theme, primary);
color: mat-color($primary, 300) !important;
border-bottom: 2px solid #8795a1;
border-bottom: 2px solid var(--grey);
margin-bottom: .5rem;
}
/* stylelint-enable */

28
console/src/app/guards/user.guard.ts Normal file
View File

@@ -0,0 +1,28 @@
import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map, tap } from 'rxjs/operators';
import { GrpcAuthService } from '../services/grpc-auth.service';
@Injectable({
providedIn: 'root',
})
export class UserGuard implements CanActivate {
constructor(private authService: GrpcAuthService, private router: Router) { }
public canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot,
): Observable<boolean> | Promise<boolean> | boolean {
return this.authService.user.pipe(
map(user => user.id !== route.params.id),
tap((isNotMe) => {
if (!isNotMe) {
this.router.navigate(['/users', 'me']);
}
}),
);
}
}

4
console/src/app/modules/accounts-card/accounts-card.component.html
View File

@@ -16,7 +16,7 @@
</app-avatar>
<div class="col">
<span class="title">{{user.displayName ? user.displayName : user.userName}} </span>
<span class="user-title">{{user.displayName ? user.displayName : user.userName}} </span>
<span class="loginname">{{user.loginName}}</span>
<span class="email">{{'USER.STATE.'+user.authState | translate}}</span>
</div>
@@ -28,7 +28,7 @@
<i class="las la-user-plus"></i>
</div>
<span class="col">
<span class="title">{{'USER.ADDACCOUNT' | translate}}</span>
<span class="user-title">{{'USER.ADDACCOUNT' | translate}}</span>
</span>
<span class="fill-space"></span>
<mat-icon>keyboard_arrow_right</mat-icon>

8
console/src/app/modules/accounts-card/accounts-card.component.scss
View File

@@ -41,9 +41,9 @@
display: flex;
flex-direction: column;
width: 100%;
border-top: 1px solid #ffffff30;
border-bottom: 1px solid #ffffff30;
padding: .5rem 0;
border-top: 1px solid rgba(#8795a1, .3);
border-bottom: 1px solid rgba(#8795a1, .3);
.row {
padding: .5rem;
@@ -84,7 +84,7 @@
display: flex;
flex-direction: column;
.title {
.user-title {
font-weight: 500;
font-size: .9rem;
line-height: 1rem;
@@ -92,7 +92,7 @@
.email,
.loginname {
color: #8795a1;
color: var(--grey);
font-size: .8rem;
line-height: 1rem;
}

2
console/src/app/modules/add-member-dialog/member-create-dialog.component.scss
View File

@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

1
console/src/app/modules/add-member-dialog/member-create-dialog.component.ts
View File

@@ -23,7 +23,6 @@ export class MemberCreateDialogComponent {
private grantId: string = '';
public preselectedUsers: Array<UserView.AsObject> = [];
public creationType!: CreationType;
public creationTypes: CreationType[] = [
CreationType.IAM,

3
console/src/app/modules/add-member-dialog/member-create-dialog.module.ts
View File

@@ -1,6 +1,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -25,6 +25,7 @@ import { MemberCreateDialogComponent } from './member-create-dialog.component';
MatFormFieldModule,
MatSelectModule,
FormsModule,
ReactiveFormsModule,
SearchUserAutocompleteModule,
SearchRolesAutocompleteModule,
SearchProjectAutocompleteModule,

2
console/src/app/modules/card/card.component.scss
View File

@@ -34,7 +34,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
}

2
console/src/app/modules/card/card.scss
View File

@@ -11,7 +11,7 @@
.card {
background-color: $primary-dark;
transition: background-color .4s ease-in-out;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
border: 1px solid rgba($border-color, .2);
box-sizing: border-box;
border-radius: .5rem;

8
console/src/app/modules/changes/changes.component.scss
View File

@@ -21,13 +21,13 @@
flex-direction: column;
.editor {
color: #8795a1;
color: var(--grey);
font-size: 12px;
align-self: flex-end;
}
.seq {
color: #8795a1;
color: var(--grey);
font-size: 12px;
align-self: flex-end;
}
@@ -43,7 +43,7 @@
&.change-item-back {
background-color: rgba($primary-dark, .93);
transition: background-color .4s ease-in-out;
transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
}
}
@@ -55,7 +55,7 @@
.end-container {
font-size: 12px;
color: #8795a1;
color: var(--grey);
}
}
}

10
console/src/app/modules/contributors/contributors.component.html
View File

@@ -8,13 +8,19 @@
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async; index as i">
<div @animate (click)="emitShowDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
matTooltip="{{ member.displayName }} | {{member.rolesList?.join(' ')}}"
[ngStyle]="{'z-index': 100 - i}">
<app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
<app-avatar
*ngIf="member && member.displayName && member.firstName && member.lastName; else cog"
class="avatar dontcloseonclick"
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
[size]="32">
</app-avatar>
<ng-template #cog>
<div class="sa-icon">
<i class="las la-user-cog"></i>
</div>
</ng-template>
</div>
</ng-container>
</ng-container>

13
console/src/app/modules/contributors/contributors.component.scss
View File

@@ -9,7 +9,7 @@
.sub-header {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.people {
@@ -65,6 +65,17 @@
.avatar {
pointer-events: none;
}
.sa-icon {
display: block;
width: 32px;
margin: 0 .5rem;
i {
margin: auto;
font-size: 1.2rem;
}
}
}
.margin-neg {

6
console/src/app/modules/detail-layout/detail-layout.component.scss
View File

@@ -37,20 +37,16 @@
}
.head {
display: flex;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
}
}

2
console/src/app/modules/idp-create/idp-create.component.scss
View File

@@ -37,7 +37,7 @@
flex-basis: 100%;
margin: 0 .5rem;
margin-bottom: 1rem;
color: #8795a1;
color: var(--grey);
}
.formfield {

2
console/src/app/modules/idp-table/idp-table.component.scss
View File

@@ -26,7 +26,7 @@ tr {
outline: none;
&.disabled * {
color: #8795a1;
color: var(--grey);
}
}

172
console/src/app/modules/idp/idp.component.html
View File

@@ -1,91 +1,95 @@
<app-detail-layout [backRouterLink]="backroutes" [title]="'IDP.DETAIL.TITLE' | translate"
[description]="'IDP.DETAIL.DESCRIPTION' | translate">
<div class="container">
<form (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ID' | translate }}</mat-label>
<input matInput formControlName="id" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<!--<mat-form-field appearance="outline" class="formfield">
[description]="'IDP.DETAIL.DESCRIPTION' | translate">
<div class="container">
<form (ngSubmit)="updateIdp()">
<ng-container [formGroup]="idpForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ID' | translate }}</mat-label>
<input matInput formControlName="id" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
</mat-form-field>
<!--<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.LOGOSRC' | translate }}</mat-label>
<input matInput formControlName="logoSrc" />
</mat-form-field>-->
</div>
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid"
type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
<ng-container *ngIf="oidcConfigForm">
<h2>{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
<p>{{'IDP.DETAIL.OIDC.DESCRIPTION' | translate}}</p>
<form (ngSubmit)="updateOidcConfig()">
<ng-container [formGroup]="oidcConfigForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
<input matInput formControlName="issuer" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
<input matInput formControlName="clientId" />
</mat-form-field>
<mat-checkbox class="desc" [(ngModel)]="showIdSecretSection"
[ngModelOptions]="{standalone: true}">
Update Client Secret
</mat-checkbox>
<mat-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
<mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
<input matInput formControlName="clientSecret" />
</mat-form-field>
<mat-form-field appearance="outline" class="formfield fullwidth">
<mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
<mat-chip-list #chipScopesList aria-label="scope selection">
<mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false"
removable (removed)="removeScope(scope)">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipScopesList"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes" [matChipInputAddOnBlur]="true"
(matChipInputTokenEnd)="addScope($event)">
</mat-chip-list>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<div class="btn-wrapper">
<button color="primary" mat-raised-button class="continue-button"
[disabled]="oidcConfigForm.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</div>
</form>
</ng-container>
</div>
<button color="primary" mat-raised-button class="continue-button" [disabled]="idpForm.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</form>
<h2 *ngIf="oidcConfigForm">{{'IDP.DETAIL.OIDC.TITLE' | translate}}</h2>
<form (ngSubmit)="updateOidcConfig()" *ngIf="oidcConfigForm">
<ng-container [formGroup]="oidcConfigForm">
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.ISSUER' | translate }}</mat-label>
<input matInput formControlName="issuer" />
</mat-form-field>
</div>
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.CLIENTID' | translate }}</mat-label>
<input matInput formControlName="clientId" />
</mat-form-field>
</div>
<div class="content">
<mat-checkbox class="desc" [(ngModel)]="showIdSecretSection" [ngModelOptions]="{standalone: true}">
Update Client Secret
</mat-checkbox>
<mat-form-field appearance="outline" class="formfield" *ngIf="showIdSecretSection">
<mat-label>{{ 'IDP.CLIENTSECRET' | translate }}</mat-label>
<input matInput formControlName="clientSecret" />
</mat-form-field>
</div>
<div class="content">
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'IDP.SCOPESLIST' | translate }}</mat-label>
<mat-chip-list #chipScopesList aria-label="scope selection" >
<mat-chip class="chip" *ngFor="let scope of scopesList?.value" selectable="false" removable
(removed)="removeScope(scope)">
{{scope}} <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input [matChipInputFor]="chipScopesList" [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputAddOnBlur]="true" (matChipInputTokenEnd)="addScope($event)">
</mat-chip-list>
</mat-form-field>
</div>
<div class="content">
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.IDPDISPLAYNAMMAPPING' | translate }}</mat-label>
<mat-select formControlName="idpDisplayNameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field class="formfield" appearance="outline">
<mat-label>{{ 'IDP.USERNAMEMAPPING' | translate }}</mat-label>
<mat-select formControlName="usernameMapping">
<mat-option *ngFor="let field of mappingFields" [value]="field">
{{ 'IDP.MAPPINTFIELD.'+field | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</ng-container>
<button color="primary" mat-raised-button class="continue-button" [disabled]="oidcConfigForm.invalid" type="submit">
{{ 'ACTIONS.SAVE' | translate }}
</button>
</form>
</div>
</app-detail-layout>
</app-detail-layout>

28
console/src/app/modules/idp/idp.component.scss
View File

@@ -9,6 +9,7 @@
.content {
display: flex;
flex-direction: row;
margin: 0 -.5rem;
flex-wrap: wrap;
@@ -16,26 +17,35 @@
flex-basis: 100%;
margin: 0 .5rem;
margin-bottom: 1rem;
color: #8795a1;
color: var(--grey);
}
.formfield {
flex: 1 0 auto;
flex: 1 1 auto;
margin: 0 .5rem;
&.fullwidth {
flex-basis: 100%;
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
}
.continue-button {
margin-bottom: 4rem;
display: block;
padding: .5rem 4rem;
.btn-wrapper {
display: flex;
justify-content: flex-end;
@media only screen and (max-width: 450px) {
margin-top: 1rem;
margin-bottom: 2rem;
.continue-button {
margin-bottom: 4rem;
display: block;
padding: .5rem 4rem;
@media only screen and (max-width: 450px) {
margin-top: 1rem;
margin-bottom: 2rem;
}
}
}

98
console/src/app/modules/members-table/members-table.component.html Normal file
View File

@@ -0,0 +1,98 @@
<app-refresh-table *ngIf="dataSource" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-container actions *ngIf="selection.hasValue()">
<ng-content select="[selectactions]"></ng-content>
</ng-container>
<div actions>
<ng-content select="[writeactions]"></ng-content>
</div>
<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 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 color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<app-avatar *ngIf="row?.displayName && row.firstName && row.lastName; else cog" class="avatar"
[name]="row.displayName" [size]="32">
</app-avatar>
<ng-template #cog>
<div class="sa-icon">
<i class="las la-user-cog"></i>
</div>
</ng-template>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="actions" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<td mat-cell *matCellDef="let view">
<button matTooltip="{{'ACTIONS.REMOVE' | translate}}" color="warn"
(click)="triggerDeleteMember(view)" mat-icon-button><i class="las la-trash"></i></button>
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple [disabled]="disableWrite"
(selectionChange)="updateRoles.emit({member: member, change: $event})">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
</div>
<mat-paginator *ngIf="dataSource" class="paginator" #paginator [pageSize]="INITIALPAGESIZE"
[length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
</mat-paginator>
</app-refresh-table>

30
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.scss → console/src/app/modules/members-table/members-table.component.scss
View File

@@ -1,9 +1,14 @@
.icon-button {
margin-right: .5rem;
}
.table-wrapper {
overflow: auto;
overflow-x: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
@@ -26,10 +31,27 @@
width: 50px;
max-width: 50px;
}
}
.role {
display: inline-block;
margin: .25rem;
tr {
button {
visibility: hidden;
}
&:hover {
button {
visibility: visible;
}
}
}
.sa-icon {
display: block;
width: 32px;
margin: 0 .5rem;
i {
margin: auto;
}
}
}

12
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.spec.ts → console/src/app/modules/members-table/members-table.component.spec.ts
View File

@@ -4,15 +4,15 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
import { MembersTableComponent } from './members-table.component';
describe('ProjectMembersComponent', () => {
let component: ProjectGrantMembersComponent;
let fixture: ComponentFixture<ProjectGrantMembersComponent>;
describe('MembersTableComponent', () => {
let component: MembersTableComponent;
let fixture: ComponentFixture<MembersTableComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGrantMembersComponent],
declarations: [MembersTableComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('ProjectMembersComponent', () => {
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGrantMembersComponent);
fixture = TestBed.createComponent(MembersTableComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

83
console/src/app/modules/members-table/members-table.component.ts Normal file
View File

@@ -0,0 +1,83 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { IamMembersDataSource } from 'src/app/pages/iam/iam-members/iam-members-datasource';
import { OrgMembersDataSource } from 'src/app/pages/orgs/org-members/org-members-datasource';
import { IamMemberView } from 'src/app/proto/generated/admin_pb';
import { OrgMemberView, ProjectMemberView } from 'src/app/proto/generated/management_pb';
import { ProjectMembersDataSource } from '../project-members/project-members-datasource';
type View = OrgMemberView.AsObject | ProjectMemberView.AsObject | IamMemberView.AsObject;
type MemberDatasource = OrgMembersDataSource | ProjectMembersDataSource | IamMembersDataSource;
@Component({
selector: 'app-members-table',
templateUrl: './members-table.component.html',
styleUrls: ['./members-table.component.scss'],
})
export class MembersTableComponent implements OnInit, OnDestroy {
public INITIALPAGESIZE: number = 25;
@Input() public disableWrite: boolean = false;
@Input() public canDelete: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<View>;
@Input() public dataSource!: MemberDatasource;
public selection: SelectionModel<any> = new SelectionModel<any>(true, []);
@Input() public memberRoleOptions: string[] = [];
@Input() public factoryLoadFunc!: Function;
@Input() public refreshTrigger!: Observable<void>;
@Output() public updateRoles: EventEmitter<{ member: View, change: MatSelectChange; }> = new EventEmitter();
@Output() public changedSelection: EventEmitter<any[]> = new EventEmitter();
@Output() public deleteMember: EventEmitter<View> = new EventEmitter();
private destroyed: Subject<void> = new Subject();
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
constructor() {
this.selection.changed.pipe(takeUntil(this.destroyed)).subscribe(_ => {
this.changedSelection.emit(this.selection.selected);
});
}
public ngOnInit(): void {
this.refreshTrigger.pipe(takeUntil(this.destroyed)).subscribe(() => {
this.changePage(this.paginator);
});
if (this.canDelete) {
this.displayedColumns.push('actions');
}
}
public ngOnDestroy(): void {
this.destroyed.next();
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public changePage(event?: PageEvent | MatPaginator): any {
this.selection.clear();
return this.factoryLoadFunc(event ?? this.paginator);
}
public triggerDeleteMember(member: any): void {
this.deleteMember.emit(member);
}
}

45
console/src/app/modules/members-table/members-table.module.ts Normal file
View File

@@ -0,0 +1,45 @@
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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
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 { AvatarModule } from '../avatar/avatar.module';
import { RefreshTableModule } from '../refresh-table/refresh-table.module';
import { MembersTableComponent } from './members-table.component';
@NgModule({
declarations: [
MembersTableComponent,
],
imports: [
CommonModule,
MatFormFieldModule,
MatSelectModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
FormsModule,
TranslateModule,
RefreshTableModule,
RouterModule,
AvatarModule,
MatButtonModule,
],
exports: [
MembersTableComponent,
],
})
export class MembersTableModule { }

2
console/src/app/modules/meta-layout/meta-layout.component.scss
View File

@@ -2,7 +2,7 @@
display: flex;
height: 100%;
overflow-x: hidden;
transition: all .2s ease-in-out;
transition: all .3s cubic-bezier(.645, .045, .355, 1);
.main-content {
display: relative;

5
console/src/app/modules/password-complexity-view/password-complexity-view.component.scss
View File

@@ -1,6 +1,7 @@
.validation-col {
display: flex wrap;
display: flex;
flex-wrap: wrap;
padding: 1rem 0;
width: 100%;
@@ -16,7 +17,7 @@
span {
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
.sp-wrapper {

2
console/src/app/modules/policies/login-policy/add-idp-dialog/add-idp-dialog.component.scss
View File

@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

4
console/src/app/modules/policies/login-policy/login-policy.component.scss
View File

@@ -10,7 +10,7 @@
padding: .5rem 0;
.left-desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}
@@ -52,7 +52,7 @@
justify-content: center;
margin: .5rem;
padding: 10px;
border: 1px solid #8795a1;
border: 1px solid var(--grey);
border-radius: .5rem;
cursor: pointer;
position: relative;

2
console/src/app/modules/policies/password-age-policy/password-age-policy.component.scss
View File

@@ -10,7 +10,7 @@
padding: .5rem 0;
.left-desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/modules/policies/password-complexity-policy/password-complexity-policy.component.scss
View File

@@ -10,7 +10,7 @@
padding: .5rem 0;
.left-desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/modules/policies/password-iam-policy/password-iam-policy.component.scss
View File

@@ -10,7 +10,7 @@
padding: .5rem 0;
.left-desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/modules/policies/password-lockout-policy/password-lockout-policy.component.scss
View File

@@ -11,7 +11,7 @@
padding: .5rem 0;
.left-desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

96
console/src/app/modules/project-members/project-members.component.html
View File

@@ -1,95 +1,25 @@
<app-detail-layout *ngIf="project" [backRouterLink]="[ '/projects', project?.projectId]"
title="{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}">
<app-refresh-table *ngIf="project" (refreshed)="changePage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions
<app-members-table *ngIf="project" [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(changedSelection)="selection = $event" [refreshTrigger]="changePage"
[canDelete]="['project.member.delete', 'project.member.delete:'+project.projectId] | hasRole | async"
(deleteMember)="removeProjectMember($event)">
<ng-template appHasRole selectactions
[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()">
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
</ng-template>
<ng-template appHasRole actions
<ng-template appHasRole writeactions
[appHasRole]="['project.member.write:'+project.projectId,'project.member.write']">
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<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 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 color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="([('project.member.write:' + project.projectId), 'project.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator *ngIf="dataSource" class="paginator" #paginator [pageSize]="INITIALPAGESIZE"
[length]="dataSource.totalResult" [pageSizeOptions]="[25, 50, 100, 250]" (page)="changePage($event)">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>
</app-members-table>
</app-detail-layout>
<!-- TODO: check for both project.member and project.grant.member permissions -->

39
console/src/app/modules/project-members/project-members.component.scss
View File

@@ -1,40 +1,7 @@
.icon-button {
.del-button {
margin-right: .5rem;
}
.table-wrapper {
overflow-x: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
:root {
width: 100%;
}

97
console/src/app/modules/project-members/project-members.component.ts
View File

@@ -1,12 +1,18 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator, PageEvent } from '@angular/material/paginator';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { take } from 'rxjs/operators';
import { ProjectGrantView, ProjectMember, ProjectType, ProjectView, UserView } from 'src/app/proto/generated/management_pb';
import {
ProjectGrantMemberView,
ProjectGrantView,
ProjectMember,
ProjectMemberView,
ProjectType,
ProjectView,
UserView,
} from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -23,18 +29,14 @@ export class ProjectMembersComponent {
public INITIALPAGESIZE: number = 25;
public project!: ProjectView.AsObject | ProjectGrantView.AsObject;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
public grantId: string = '';
public projectName: string = '';
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<ProjectMemberView.AsObject | ProjectGrantMemberView.AsObject> = [];
constructor(
private mgmtService: ManagementService,
private dialog: MatDialog,
@@ -53,6 +55,16 @@ export class ProjectMembersComponent {
this.projectName = this.project.name;
this.dataSource = new ProjectMembersDataSource(this.mgmtService);
this.dataSource.loadMembers(this.project.projectId, this.projectType, 0, this.INITIALPAGESIZE);
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
this.project.projectId,
this.projectType,
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
this.grantId,
);
};
});
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.mgmtService.GetGrantedProjectByID(params.projectid, params.grantid).then(project => {
@@ -65,6 +77,16 @@ export class ProjectMembersComponent {
this.INITIALPAGESIZE,
this.grantId,
);
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
this.project.projectId,
this.projectType,
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
this.grantId,
);
};
});
}
});
@@ -88,7 +110,7 @@ export class ProjectMembersComponent {
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
Promise.all(this.selection.map(member => {
if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
return this.mgmtService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
@@ -105,21 +127,32 @@ export class ProjectMembersComponent {
}
})).then(() => {
setTimeout(() => {
this.changePage();
this.changePage.emit();
}, 1000);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
public removeProjectMember(member: ProjectMemberView.AsObject | ProjectGrantMemberView.AsObject): void {
if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.mgmtService.RemoveProjectMember(this.project.projectId, member.userId).then(() => {
setTimeout(() => {
this.changePage.emit();
}, 1000);
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
}).catch(error => {
this.toast.showError(error);
});
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.mgmtService.RemoveProjectGrantMember(this.project.projectId, this.grantId,
member.userId).then(() => {
setTimeout(() => {
this.changePage.emit();
}, 1000);
this.toast.showInfo('PROJECT.TOAST.MEMBERREMOVED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
public openAddMember(): void {
@@ -146,7 +179,7 @@ export class ProjectMembersComponent {
}
})).then(() => {
setTimeout(() => {
this.changePage();
this.changePage.emit();
}, 1000);
this.toast.showInfo('PROJECT.TOAST.MEMBERSADDED', true);
}).catch(error => {
@@ -160,7 +193,7 @@ export class ProjectMembersComponent {
updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.mgmtService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
.then((_: ProjectMember) => {
this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
@@ -168,21 +201,11 @@ export class ProjectMembersComponent {
} else if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.mgmtService.ChangeProjectGrantMember(this.project.projectId,
this.grantId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
.then((_: ProjectMember) => {
this.toast.showInfo('PROJECT.TOAST.MEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
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,
);
}
}

27
console/src/app/modules/project-members/project-members.module.ts
View File

@@ -1,25 +1,15 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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';
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 { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/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';
@@ -28,26 +18,15 @@ import { ProjectMembersComponent } from './project-members.component';
imports: [
ProjectMembersRoutingModule,
CommonModule,
MatAutocompleteModule,
HasRoleModule,
MatChipsModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
HasRolePipeModule,
RefreshTableModule,
DetailLayoutModule,
MatDialogModule,
MembersTableModule,
HasRolePipeModule,
],
})
export class ProjectMembersModule { }

2
console/src/app/modules/project-roles/project-role-detail/project-role-detail.component.scss
View File

@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

11
console/src/app/modules/refresh-table/refresh-table.component.scss
View File

@@ -9,7 +9,7 @@
.desc {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.count {
@@ -20,6 +20,7 @@
.spinner {
margin-top: 2px;
margin-bottom: 1px;
margin-right: 1rem;
}
.fill-space {
@@ -31,7 +32,7 @@
}
}
.table-wrapper {
width: 100%;
overflow-x: auto;
}
// .table-wrapper {
// width: 100%;
// overflow-x: auto;
// }

15
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
View File

@@ -1,10 +1,10 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { forkJoin, from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import { forkJoin, from, Subject } from 'rxjs';
import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
import {
ProjectGrantSearchResponse,
ProjectGrantView,
@@ -27,7 +27,7 @@ export enum ProjectAutocompleteType {
templateUrl: './search-project-autocomplete.component.html',
styleUrls: ['./search-project-autocomplete.component.scss'],
})
export class SearchProjectAutocompleteComponent {
export class SearchProjectAutocompleteComponent implements OnDestroy {
public selectable: boolean = true;
public removable: boolean = true;
public addOnBlur: boolean = true;
@@ -47,9 +47,12 @@ export class SearchProjectAutocompleteComponent {
| ProjectView.AsObject
| ProjectView.AsObject[]
> = new EventEmitter();
private unsubscribed$: Subject<void> = new Subject();
constructor(private mgmtService: ManagementService) {
this.myControl.valueChanges
.pipe(
takeUntil(this.unsubscribed$),
debounceTime(200),
tap(() => this.isLoading = true),
switchMap(value => {
@@ -93,6 +96,10 @@ export class SearchProjectAutocompleteComponent {
});
}
public ngOnDestroy(): void {
this.unsubscribed$.next();
}
public displayFn(project?: any): string | undefined {
return (project && project.projectName) ? `${project.projectName}` :
(project && project.name) ? `${project.name}` : undefined;

6
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.module.ts
View File

@@ -8,12 +8,15 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { SearchProjectAutocompleteComponent } from './search-project-autocomplete.component';
@NgModule({
declarations: [SearchProjectAutocompleteComponent],
declarations: [
SearchProjectAutocompleteComponent,
],
imports: [
CommonModule,
MatAutocompleteModule,
@@ -26,6 +29,7 @@ import { SearchProjectAutocompleteComponent } from './search-project-autocomplet
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatSelectModule,
],
exports: [
SearchProjectAutocompleteComponent,

18
console/src/app/modules/search-roles-autocomplete/search-roles-autocomplete.component.ts
View File

@@ -1,10 +1,10 @@
import { COMMA, ENTER } from '@angular/cdk/keycodes';
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { Component, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import { from, Subject } from 'rxjs';
import { debounceTime, switchMap, takeUntil, tap } from 'rxjs/operators';
import {
ProjectRole,
ProjectRoleSearchKey,
@@ -12,7 +12,6 @@ import {
SearchMethod,
} from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
@@ -20,7 +19,7 @@ import { ToastService } from 'src/app/services/toast.service';
templateUrl: './search-roles-autocomplete.component.html',
styleUrls: ['./search-roles-autocomplete.component.scss'],
})
export class SearchRolesAutocompleteComponent {
export class SearchRolesAutocompleteComponent implements OnDestroy {
public selectable: boolean = true;
public removable: boolean = true;
public addOnBlur: boolean = true;
@@ -35,9 +34,12 @@ export class SearchRolesAutocompleteComponent {
@Input() public projectId: string = '';
@Input() public singleOutput: boolean = false;
@Output() public selectionChanged: EventEmitter<ProjectRole.AsObject[] | ProjectRole.AsObject> = new EventEmitter();
constructor(private mgmtService: ManagementService, private toast: ToastService) {
private unsubscribed$: Subject<void> = new Subject();
constructor(private mgmtService: ManagementService) {
this.myControl.valueChanges
.pipe(
takeUntil(this.unsubscribed$),
debounceTime(200),
tap(() => this.isLoading = true),
switchMap(value => {
@@ -55,6 +57,10 @@ export class SearchRolesAutocompleteComponent {
});
}
public ngOnDestroy(): void {
this.unsubscribed$.next();
}
public displayFn(project?: ProjectRole.AsObject): string | undefined {
return project ? `${project.displayName}` : undefined;
}

4
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.scss
View File

@@ -3,7 +3,7 @@
}
.target-desc {
color: #8795a1;
color: var(--grey);
font-size: .8rem;
margin: 0;
margin-bottom: 1rem;
@@ -44,5 +44,5 @@
.found-label {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}

2
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.module.ts
View File

@@ -8,6 +8,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { TranslateModule } from '@ngx-translate/core';
import { SearchUserAutocompleteComponent } from './search-user-autocomplete.component';
@@ -27,6 +28,7 @@ import { SearchUserAutocompleteComponent } from './search-user-autocomplete.comp
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatSelectModule,
],
exports: [SearchUserAutocompleteComponent],
})

12
console/src/app/modules/user-grants/user-grants.component.html
View File

@@ -5,7 +5,7 @@
(click)="deleteGrantSelection()" *ngIf="selection.hasValue() && allowDelete">
<i class="las la-trash"></i>
</button>
<a *ngIf="allowCreate && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
<a *ngIf="allowWrite && context !== UserGrantContext.USER" matTooltip="{{'GRANTS.ADD' | translate}}" actions
color="primary" color="primary" mat-raised-button [routerLink]="routerLink">
<mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
</a>
@@ -14,13 +14,13 @@
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
<mat-checkbox [disabled]="allowWrite == false" 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 color="primary" (click)="$event.stopPropagation()"
<mat-checkbox [disabled]="allowWrite == false" color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<app-avatar *ngIf="row && row?.displayName && row.firstName && row.lastName" class="avatar"
[name]="row.displayName" [size]="32">
@@ -82,7 +82,7 @@
<mat-form-field class="form-field" appearance="outline"
*ngIf="loadedProjectId === grant.projectId">
<mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
{{role.key}}
@@ -94,7 +94,7 @@
<ng-container *ngIf="context === UserGrantContext.GRANTED_PROJECT">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowWrite == false"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of grantRoleOptions" [value]="role">
{{role}}

2
console/src/app/modules/user-grants/user-grants.component.scss
View File

@@ -40,5 +40,5 @@
.no-roles {
font-size: 14px;
color: #8795a1;
color: var(--grey);
}

2
console/src/app/modules/user-grants/user-grants.component.ts
View File

@@ -32,7 +32,7 @@ export class UserGrantsComponent implements OnInit, AfterViewInit {
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<UserGrantView.AsObject>;
@Input() allowCreate: boolean = false;
@Input() allowWrite: boolean = false;
@Input() allowDelete: boolean = false;
@Input() userId: string = '';

2
console/src/app/modules/warn-dialog/warn-dialog.component.scss
View File

@@ -4,7 +4,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

8
console/src/app/pages/home/home.component.scss
View File

@@ -5,7 +5,7 @@
.header {
display: flex;
flex-direction: column;
margin: 4rem 0;
margin-bottom: 4rem;
align-items: center;
h3 {
@@ -15,7 +15,7 @@
}
.wlc_stnce {
color: #8795a1;
color: var(--grey);
font-size: 16px;
}
@@ -46,7 +46,7 @@
p {
display: block;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}
@@ -75,7 +75,7 @@
}
.disclaimer {
color: #8795a1;
color: var(--grey);
font-size: 14px;
margin-top: 3rem;
}

107
console/src/app/pages/iam/iam-members/iam-members.component.html
View File

@@ -1,86 +1,23 @@
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<div class="wrapp">
<app-detail-layout [backRouterLink]="[ '/iam']" title="{{ 'IAM.MEMBER.TITLE' | translate }}"
description="{{ 'IAM.MEMBER.DESCRIPTION' | translate }}">
<app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(changedSelection)="selection = $event" [refreshTrigger]="changePage"
[canDelete]="['iam.member.delete'] | hasRole | async" (deleteMember)="removeMember($event)">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<ng-template appHasRole actions [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeProjectMemberSelection()"
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]="['iam.member.write']">
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<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 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 color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['iam.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-detail-layout>
<ng-template appHasRole selectactions [appHasRole]="['iam.member.delete']">
<button color="warn" (click)="removeMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" mat-raised-button>
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
</ng-template>
<ng-template appHasRole writeactions [appHasRole]="['iam.member.write']">
<a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</app-members-table>
</app-detail-layout>
</div>

38
console/src/app/pages/iam/iam-members/iam-members.component.scss
View File

@@ -1,37 +1,7 @@
.table-wrapper {
overflow: auto;
width: 100%;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.selection {
width: 50px;
max-width: 50px;
}
}
.wrapp {
width: 100% !important;
}
.pointer {
outline: none;
cursor: pointer;
.del-button {
margin-right: .5rem;
}

67
console/src/app/pages/iam/iam-members/iam-members.component.ts
View File

@@ -1,10 +1,7 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { IamMember, IamMemberView } from 'src/app/proto/generated/admin_pb';
import { ProjectMember, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
@@ -18,17 +15,15 @@ import { IamMembersDataSource } from './iam-members-datasource';
templateUrl: './iam-members.component.html',
styleUrls: ['./iam-members.component.scss'],
})
export class IamMembersComponent implements AfterViewInit {
export class IamMembersComponent {
public INITIALPAGESIZE: number = 25;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<IamMemberView.AsObject>;
public dataSource!: IamMembersDataSource;
public selection: SelectionModel<IamMemberView.AsObject> = new SelectionModel<IamMemberView.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<IamMemberView.AsObject> = [];
constructor(private adminService: AdminService,
private dialog: MatDialog,
@@ -37,21 +32,13 @@ export class IamMembersComponent implements AfterViewInit {
this.dataSource = new IamMembersDataSource(this.adminService);
this.dataSource.loadMembers(0, 25);
this.getRoleOptions();
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.paginator.pageIndex,
this.paginator.pageSize,
);
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
}
public getRoleOptions(): void {
@@ -71,11 +58,12 @@ export class IamMembersComponent implements AfterViewInit {
});
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
public removeMemberSelection(): void {
console.log(this.selection);
Promise.all(this.selection.map(member => {
return this.adminService.RemoveIamMember(member.userId).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
this.changePage.emit();
}).catch(error => {
this.toast.showError(error);
});
@@ -86,25 +74,13 @@ export class IamMembersComponent implements AfterViewInit {
this.adminService.RemoveIamMember(member.userId).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERREMOVED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
@@ -124,7 +100,7 @@ export class IamMembersComponent implements AfterViewInit {
})).then(() => {
this.toast.showInfo('IAM.TOAST.MEMBERADDED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
@@ -133,9 +109,4 @@ export class IamMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

25
console/src/app/pages/iam/iam-members/iam-members.module.ts
View File

@@ -1,22 +1,12 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
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 { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { IamMembersRoutingModule } from './iam-members-routing.module';
@@ -29,24 +19,13 @@ import { IamMembersComponent } from './iam-members.component';
IamMembersRoutingModule,
DetailLayoutModule,
CommonModule,
MatAutocompleteModule,
MatChipsModule,
HasRoleModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
MatFormFieldModule,
MatSelectModule,
MembersTableModule,
HasRolePipeModule,
RefreshTableModule,
],
})
export class IamMembersModule { }

4
console/src/app/pages/iam/iam-policy-grid/iam-policy-grid.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.row-lyt {
@@ -57,7 +57,7 @@ h1 {
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.fill-space {

2
console/src/app/pages/iam/iam.component.scss
View File

@@ -3,7 +3,7 @@
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

6
console/src/app/pages/orgs/org-create/org-create.component.scss
View File

@@ -39,7 +39,7 @@ h1 {
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
margin: 1rem 0;
}
@@ -70,7 +70,7 @@ h1 {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
}
@@ -97,7 +97,7 @@ h1 {
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/orgs/org-detail/add-domain-dialog/add-domain-dialog.component.scss
View File

@@ -4,7 +4,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/orgs/org-detail/domain-verification/domain-verification.component.scss
View File

@@ -9,7 +9,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
&.warn {

7
console/src/app/pages/orgs/org-detail/org-detail.component.html
View File

@@ -13,12 +13,13 @@
<i matTooltip="verified" *ngIf="domain.verified" class="verified las la-check-circle"></i>
<i matTooltip="primary" *ngIf="domain.primary" class="primary las la-star"></i>
<a *ngIf="!domain.primary" class="primaryset"
<a *ngIf="!domain.primary && (canwrite$ | async)" class="primaryset"
(click)="setPrimary(domain)">{{'ORG.DOMAINS.SETPRIMARY' | translate}}</a>
<span class="fill-space"></span>
<button [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain" color="warn"
mat-icon-button (click)="removeDomain(domain.domain)"><i class="las la-trash"></i></button>
<button class="rem-button" [disabled]="(canwrite$ | async) == false" matTooltip="Remove domain"
color="warn" mat-icon-button (click)="removeDomain(domain.domain)"><i
class="las la-trash"></i></button>
</div>
<p class="new-desc">{{'ORG.PAGES.ORGDOMAIN_VERIFICATION' | translate}}</p>
<button [disabled]="(canwrite$ | async) == false" matTooltip="Add domain" mat-raised-button

12
console/src/app/pages/orgs/org-detail/org-detail.component.scss
View File

@@ -3,7 +3,7 @@
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}
@@ -47,6 +47,16 @@
.fill-space {
flex: 1;
}
.rem-button {
visibility: hidden;
}
&:hover {
.rem-button {
visibility: visible;
}
}
}
.new-desc {

5
console/src/app/pages/orgs/org-list/org-list.component.html
View File

@@ -40,7 +40,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr (click)="setAndNavigateToOrg(row)" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="paginator" [pageSize]="10" #paginator [pageSizeOptions]="[10, 20, 100, 250]">
</mat-paginator>
@@ -48,8 +48,7 @@
</div>
<ng-template #templateRef let-key="key">
<button class="search-button" mat-icon-button
(click)="this.orgSearchKey != key ? this.orgSearchKey = key : this.orgSearchKey = undefined">
<button class="search-button" mat-icon-button (click)="setFilter(key)">
<mat-icon *ngIf="this.orgSearchKey != key">search</mat-icon>
<mat-icon *ngIf="this.orgSearchKey == key">search_off</mat-icon>
</button>

2
console/src/app/pages/orgs/org-list/org-list.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.table,

24
console/src/app/pages/orgs/org-list/org-list.component.ts
View File

@@ -1,7 +1,9 @@
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material/input';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { enterAnimations } from 'src/app/animations';
@@ -21,6 +23,7 @@ export class OrgListComponent implements AfterViewInit {
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatSort) sort!: MatSort;
@ViewChild('input') public filter!: MatInput;
public dataSource!: MatTableDataSource<Org.AsObject>;
public displayedColumns: string[] = ['select', 'id', 'name'];
@@ -31,6 +34,7 @@ export class OrgListComponent implements AfterViewInit {
constructor(
private authService: GrpcAuthService,
private router: Router,
) {
this.loadOrgs(10, 0);
@@ -72,6 +76,21 @@ export class OrgListComponent implements AfterViewInit {
this.loadOrgs(this.paginator.length, this.paginator.pageSize * this.paginator.pageIndex);
}
public setFilter(key: MyProjectOrgSearchKey): void {
setTimeout(() => {
if (this.filter) {
(this.filter as any).nativeElement.focus();
}
}, 100);
if (this.orgSearchKey !== key) {
this.orgSearchKey = key;
} else {
this.orgSearchKey = undefined;
this.refresh();
}
}
public applyFilter(event: Event): void {
const filterValue = (event.target as HTMLInputElement).value;
this.loadOrgs(
@@ -80,4 +99,9 @@ export class OrgListComponent implements AfterViewInit {
filterValue.trim().toLowerCase(),
);
}
public setAndNavigateToOrg(org: Org.AsObject): void {
this.authService.setActiveOrg(org);
this.router.navigate(['/org']);
}
}

84
console/src/app/pages/orgs/org-members/org-members.component.html
View File

@@ -1,83 +1,21 @@
<app-detail-layout [backRouterLink]="[ '/org']" title="{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}"
description="{{ 'ORG.MEMBER.DESCRIPTION' | translate }}">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource?.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource?.loading$ | async">
<ng-template appHasRole actions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
<app-members-table [dataSource]="dataSource" [memberRoleOptions]="memberRoleOptions"
(updateRoles)="updateRoles($event.member, $event.change)" [factoryLoadFunc]="changePageFactory"
(changedSelection)="selection = $event" [refreshTrigger]="changePage"
[canDelete]="['org.member.delete:'+org?.id,'org.member.delete'] | hasRole | async"
(deleteMember)="removeOrgMember($event)">
<ng-template appHasRole selectactions [appHasRole]="['org.member.delete:'+org?.id,'org.member.delete']">
<button (click)="removeOrgMemberSelection()" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}"
class="icon-button" mat-icon-button *ngIf="selection.hasValue()" color="warn">
class="del-button" mat-raised-button color="warn">
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
</ng-template>
<ng-template appHasRole actions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
<a color="primary" [disabled]="disabled" (click)="openAddMember()" color="primary" mat-raised-button>
<ng-template appHasRole writeactions [appHasRole]="['org.member.write:'+org?.id,'org.member.write']">
<a color="primary" (click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<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 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 color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/users', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ROLESLABEL' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline">
<mat-label>{{ 'ROLESLABEL' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['org.member.write'] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>
</app-members-table>
</app-detail-layout>

38
console/src/app/pages/orgs/org-members/org-members.component.scss
View File

@@ -1,37 +1,3 @@
.table-wrapper {
width: 100%;
overflow: auto;
.table,
.paginator {
width: 100%;
td,
th {
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.action {
width: 40px;
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
.pointer {
outline: none;
cursor: pointer;
.del-button {
margin-right: .5rem;
}

73
console/src/app/pages/orgs/org-members/org-members.component.ts
View File

@@ -1,11 +1,9 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { tap } from 'rxjs/operators';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { Org, OrgMemberView, ProjectType, UserView } from 'src/app/proto/generated/management_pb';
import { Org, OrgMemberView, UserView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -16,18 +14,16 @@ import { OrgMembersDataSource } from './org-members-datasource';
templateUrl: './org-members.component.html',
styleUrls: ['./org-members.component.scss'],
})
export class OrgMembersComponent implements AfterViewInit {
export class OrgMembersComponent {
public INITIALPAGESIZE: number = 25;
public org!: Org.AsObject;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
public disableWrite: boolean = false;
public dataSource!: OrgMembersDataSource;
public selection: SelectionModel<OrgMemberView.AsObject> = new SelectionModel<OrgMemberView.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<OrgMemberView.AsObject> = [];
constructor(
private mgmtService: ManagementService,
@@ -37,18 +33,17 @@ export class OrgMembersComponent implements AfterViewInit {
this.mgmtService.GetMyOrg().then(org => {
this.org = org.toObject();
this.dataSource = new OrgMembersDataSource(this.mgmtService);
this.dataSource.loadMembers(0, 25);
this.dataSource.loadMembers(0, this.INITIALPAGESIZE);
});
this.getRoleOptions();
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
}
public getRoleOptions(): void {
@@ -68,15 +63,8 @@ export class OrgMembersComponent implements AfterViewInit {
});
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public removeOrgMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
Promise.all(this.selection.map(member => {
return this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
}).catch(error => {
@@ -84,21 +72,21 @@ export class OrgMembersComponent implements AfterViewInit {
});
})).then(() => {
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public removeOrgMember(member: OrgMemberView.AsObject): void {
this.mgmtService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERREMOVED', true);
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}
public openAddMember(): void {
@@ -120,7 +108,7 @@ export class OrgMembersComponent implements AfterViewInit {
})).then(() => {
this.toast.showInfo('ORG.TOAST.MEMBERADDED', true);
setTimeout(() => {
this.refreshPage();
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
@@ -129,9 +117,4 @@ export class OrgMembersComponent implements AfterViewInit {
}
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadMembers(this.paginator.pageIndex, this.paginator.pageSize);
}
}

23
console/src/app/pages/orgs/org-members/org-members.module.ts
View File

@@ -1,21 +1,13 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
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 { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
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 { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
@@ -28,25 +20,16 @@ import { OrgMembersComponent } from './org-members.component';
imports: [
OrgMembersRoutingModule,
CommonModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
HasRoleModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
DetailLayoutModule,
MatFormFieldModule,
MatSelectModule,
HasRolePipeModule,
RefreshTableModule,
MembersTableModule,
HasRolePipeModule,
],
})
export class OrgMembersModule { }

12
console/src/app/pages/orgs/policy-grid/policy-grid.component.html
View File

@@ -26,7 +26,8 @@
<button [disabled]="complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!complexityPolicy" [routerLink]="[ 'policy', PolicyComponentType.COMPLEXITY ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</div>
</div>
@@ -55,7 +56,8 @@
<button [disabled]="iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!iamPolicy" [routerLink]="[ 'policy', PolicyComponentType.IAM ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
</div>
</div>
@@ -73,7 +75,6 @@
</button>
</div>
<ng-template #showDescIAM>
<p class="desc">
{{'ORG.POLICY.LOGIN_POLICY.DESCRIPTION' | translate}}</p>
@@ -85,9 +86,10 @@
<button [disabled]="loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN,'create' ]"
color="primary" mat-raised-button>{{'ORG.POLICY.BTN_INSTALL' | translate}}</button>
<button [disabled]="!loginPolicy" [routerLink]="[ 'policy', PolicyComponentType.LOGIN ]"
mat-stroked-button>{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
mat-stroked-button
[matTooltip]="'ACTIONS.CONFIGURE' | translate">{{'ORG.POLICY.BTN_EDIT' | translate}}</button>
</ng-template>
</div>
</div>
</ng-template>
</div>
</div>

4
console/src/app/pages/orgs/policy-grid/policy-grid.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #8795a1;
color: var(--grey);
}
.row-lyt {
@@ -57,7 +57,7 @@ h1 {
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.fill-space {

8
console/src/app/pages/projects/apps/app-create/app-create.component.scss
View File

@@ -5,7 +5,7 @@ h1 {
p.desc {
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
.proswitch {
@@ -57,12 +57,12 @@ p.desc {
.step-title {
font-size: 1.2rem;
color: #8795a1;
color: var(--grey);
}
.step-description {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.error {
@@ -102,7 +102,7 @@ p.desc {
.right {
margin-bottom: .5rem;
font-size: 14px;
color: #8795a1;
color: var(--grey);
}
}

6
console/src/app/pages/projects/apps/app-detail/app-detail.component.scss
View File

@@ -19,7 +19,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {
@@ -67,7 +67,7 @@
.step-description {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
flex-basis: 100%;
margin: 0 .5rem 1rem .5rem;
}
@@ -81,7 +81,7 @@
.docs-line {
flex-basis: 100%;
font-size: 14px;
color: #8795a1;
color: var(--grey);
margin-top: 0;
}

2
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.scss
View File

@@ -3,7 +3,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

2
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
View File

@@ -18,7 +18,7 @@
<app-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
[projectId]="projectId" [grantId]="grantId"
[displayedColumns]="['select','user', 'projectId', 'creationDate', 'changeDate', 'roleNamesList']"
[allowCreate]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
[allowWrite]="['user.grant.write','user.grant.write:'+grantId] | hasRole | async"
[allowDelete]="['user.grant.delete','user.grant.delete:'+grantId] | hasRole | async"
refreshOnPreviousRoute="/grant-create/project/{{projectId}}/grant/{{grantId}}">
</app-user-grants>

4
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.scss
View File

@@ -23,7 +23,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {
@@ -37,7 +37,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.side {

68
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.scss
View File

@@ -48,9 +48,10 @@
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
transition: box-shadow .1s ease-in;
&.inactive {
color: #8795a1;
color: var(--grey);
}
img {
@@ -70,7 +71,7 @@
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
color: var(--grey);
}
.name {
@@ -85,7 +86,7 @@
.created {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.organization {
@@ -119,7 +120,7 @@
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
color: var(--grey);
&.selected {
opacity: 1;
@@ -127,70 +128,17 @@
}
&:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
.icon {
opacity: 1;
}
}
@media only screen and (max-width: 450px) {
flex-basis: 100%;
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
@media only screen and (max-width: 450px) {
@@ -203,5 +151,5 @@
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}

2
console/src/app/pages/projects/granted-projects/granted-projects.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

3
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.scss
View File

@@ -52,7 +52,7 @@
border: 1px solid $accent-color;
font-weight: 800;
background-color: $primary-dark;
transition: background-color .2s ease-in-out;
transition: background-color box-shadow .3s ease-in;
background-image:
linear-gradient(transparent 11px, rgba($accent-color, .5) 12px, transparent 12px),
linear-gradient(90deg, transparent 11px, rgba($accent-color, .5) 12px, transparent 12px);
@@ -60,6 +60,7 @@
&:hover {
background-color: rgba($accent-color, .2);
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
}
&.add {

2
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
View File

@@ -90,7 +90,7 @@
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
refreshOnPreviousRoute="/grant-create/project/{{projectId}}"
[allowCreate]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
[allowWrite]="(['user.grant.write', 'user.grant.write:'+projectId] | hasRole) | async"
[allowDelete]="(['user.grant.delete','user.grant.delete:'+projectId] | hasRole) | async">
</app-user-grants>
</app-card>

2
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.scss
View File

@@ -31,7 +31,7 @@
.desc {
font-size: .9rem;
color: #8795a1;
color: var(--grey);
}
.zitadel-warning {

2
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
View File

@@ -71,7 +71,7 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;" class="element-row">
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
</tr>
</table>

28
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.scss
View File

@@ -48,9 +48,10 @@
border-radius: .5rem;
box-sizing: border-box;
min-height: 166px;
transition: box-shadow .1s ease-in;
&.inactive {
color: #8795a1;
color: var(--grey);
}
img {
@@ -70,7 +71,7 @@
font-size: .8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #8795a1;
color: var(--grey);
}
.name {
@@ -85,7 +86,7 @@
.created {
font-size: .8rem;
color: #8795a1;
color: var(--grey);
}
.organization {
@@ -119,7 +120,7 @@
right: 0;
margin: 0;
margin-bottom: .25rem;
color: #8795a1;
color: var(--grey);
&.selected {
opacity: 1;
@@ -127,24 +128,14 @@
}
&:hover {
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.edit-button {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.edit-button {
opacity: 1;
}
@@ -171,6 +162,7 @@
border-radius: .5rem;
margin: 1rem;
box-sizing: border-box;
transition: box-shadow .1s ease-in;
.icon {
display: flex;
@@ -183,7 +175,7 @@
}
&:hover {
background-color: #ffffff25;
box-shadow: 0 5px 10px rgba(0, 0, 0, .12);
.icon,
span {
@@ -202,6 +194,6 @@
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #8795a1;
color: var(--grey);
flex-basis: 100%;
}

2
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

2
console/src/app/pages/projects/owned-projects/owned-projects.component.scss
View File

@@ -3,7 +3,7 @@ h1 {
}
.sub {
color: #8795a1;
color: var(--grey);
margin-bottom: 2rem;
}

59
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail-datasource.ts
View File

@@ -1,59 +0,0 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ProjectMemberView } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
/**
* Data source for the ProjectMembers view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class ProjectGrantDetailDataSource extends DataSource<ProjectMemberView.AsObject> {
public totalResult: number = 0;
public membersSubject: BehaviorSubject<ProjectMemberView.AsObject[]>
= new BehaviorSubject<ProjectMemberView.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private mgmtService: ManagementService) {
super();
}
public loadMembers(projectId: string, grantId: string,
pageIndex: number, pageSize: number, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.mgmtService.SearchProjectGrantMembers(projectId, grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<ProjectMemberView.AsObject[]> {
return this.membersSubject.asObservable();
};
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.membersSubject.complete();
this.loadingSubject.complete();
}
}

20
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
View File

@@ -28,7 +28,7 @@
<mat-form-field class="formfield" appearance="outline" *ngIf="grant && grant.roleKeysList">
<mat-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple (selectionChange)="updateRoles($event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
<mat-option *ngFor="let role of projectRoleOptions" [value]="role.key">
{{role.key}}
</mat-option>
</mat-select>
@@ -39,7 +39,19 @@
<h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
<app-project-grant-members *ngIf="this.projectid && this.grantid" [projectId]="projectid" [grantId]="grantid"
[type]="projectType">
</app-project-grant-members>
<app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
[memberRoleOptions]="memberRoleOptions" (updateRoles)="updateMemberRoles($event.member, $event.change)"
[factoryLoadFunc]="changePageFactory" (changedSelection)="selection = $event" [refreshTrigger]="changePage">
<button selectactions (click)="removeProjectMemberSelection()"
[disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grant.id] | hasRole | async) == false"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="del-button" color="warn" mat-raised-button>
<i class="las la-trash"></i>
{{'ACTIONS.SELECTIONDELETE' | translate}}
</button>
<a writeactions color="primary"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grant.id] | hasRole | async) == false"
(click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</app-members-table>
</app-detail-layout>

8
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss
View File

@@ -1,4 +1,8 @@
.del-button {
margin-right: .5rem;
}
.master-row {
display: flex;
flex-wrap: wrap;
@@ -21,7 +25,7 @@
}
.first {
color: #8795a1;
color: var(--grey);
}
}
}
@@ -37,5 +41,5 @@
.divider {
height: 1px;
background-color: #ffffff20;
background-color: #8795a140;
}

98
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.ts
View File

@@ -1,8 +1,12 @@
import { Component } from '@angular/core';
import { Component, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { PageEvent } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { ActivatedRoute } from '@angular/router';
import {
ProjectGrant,
ProjectGrantMember,
ProjectGrantMemberView,
ProjectGrantState,
ProjectGrantView,
ProjectRoleView,
@@ -11,12 +15,20 @@ import {
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
selector: 'app-project-grant-detail',
templateUrl: './project-grant-detail.component.html',
styleUrls: ['./project-grant-detail.component.scss'],
})
export class ProjectGrantDetailComponent {
public INITIALPAGESIZE: number = 25;
public grant!: ProjectGrantView.AsObject;
public projectid: string = '';
public grantid: string = '';
@@ -27,18 +39,37 @@ export class ProjectGrantDetailComponent {
public isZitadel: boolean = false;
ProjectGrantState: any = ProjectGrantState;
public memberRoleOptions: ProjectRoleView.AsObject[] = [];
public projectRoleOptions: ProjectRoleView.AsObject[] = [];
public memberRoleOptions: Array<string> = [];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<ProjectGrantMemberView.AsObject> = [];
public dataSource!: ProjectGrantMembersDataSource;
constructor(
private mgmtService: ManagementService,
private route: ActivatedRoute,
private toast: ToastService,
private dialog: MatDialog,
) {
this.route.params.subscribe(params => {
this.projectid = params.projectid;
this.grantid = params.grantid;
this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
this.dataSource.loadGrantMembers(params.projectid, params.grantid, 0, this.INITIALPAGESIZE);
this.getRoleOptions(params.projectid);
this.getMemberRoleOptions();
this.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadGrantMembers(
params.projectid,
params.grantid,
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
this.mgmtService.ProjectGrantByID(this.grantid, this.projectid).then((grant) => {
this.grant = grant.toObject();
@@ -66,7 +97,15 @@ export class ProjectGrantDetailComponent {
public getRoleOptions(projectId: string): void {
this.mgmtService.SearchProjectRoles(projectId, 100, 0).then(resp => {
this.memberRoleOptions = resp.toObject().resultList;
this.projectRoleOptions = resp.toObject().resultList;
});
}
public getMemberRoleOptions(): void {
this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
}
@@ -78,4 +117,57 @@ export class ProjectGrantDetailComponent {
this.toast.showError(error);
});
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.map(member => {
return this.mgmtService.RemoveProjectGrantMember(this.grant.projectId, this.grant.id, member.userId).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}));
}
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
if (dataToAdd) {
Promise.all(dataToAdd.userIds.map((userid: string) => {
return this.mgmtService.AddProjectGrantMember(
this.grant.projectId,
this.grant.id,
userid,
dataToAdd.rolesKeyList,
);
})).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
setTimeout(() => {
this.changePage.emit();
}, 3000);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
updateMemberRoles(member: ProjectGrantMember.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.ChangeProjectGrantMember(this.grant.projectId, this.grant.id, member.userId, selectionChange.value)
.then((_: ProjectGrantMember) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}

11
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.module.ts
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';
@@ -15,19 +16,21 @@ import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { DetailLayoutModule } from 'src/app/modules/detail-layout/detail-layout.module';
import { MembersTableModule } from 'src/app/modules/members-table/members-table.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
import { ProjectGrantDetailComponent } from './project-grant-detail.component';
import { ProjectGrantMembersModule } from './project-grant-members/project-grant-members.module';
import {
ProjectGrantMembersCreateDialogModule,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
@NgModule({
declarations: [ProjectGrantDetailComponent],
imports: [
CommonModule,
ProjectGrantDetailRoutingModule,
ProjectGrantMembersModule,
ProjectGrantMembersCreateDialogModule,
MatAutocompleteModule,
HasRoleModule,
MatChipsModule,
@@ -45,6 +48,8 @@ import { ProjectGrantMembersModule } from './project-grant-members/project-grant
MatSelectModule,
DetailLayoutModule,
HasRolePipeModule,
MembersTableModule,
MatDialogModule,
],
})
export class ProjectGrantDetailModule { }

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.spec.ts
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
View File

0
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.module.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.module.ts
View File

1
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members-datasource.ts → console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-datasource.ts
View File

@@ -32,6 +32,7 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
grantId, pageSize, offset)).pipe(
map(resp => {
const response = resp.toObject();
console.log(response.resultList);
this.totalResult = response.totalResult;
if (response.viewTimestamp) {
this.viewTimestamp = response.viewTimestamp;

84
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.html
View File

@@ -1,84 +0,0 @@
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="dataSource.totalResult"
[timestamp]="dataSource?.viewTimestamp" [selection]="selection" [loading]="dataSource.loading$ | async">
<button (click)="removeProjectMemberSelection()"
[disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grantId] | hasRole | async) == false"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" color="warn" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
<a color="primary"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
(click)="openAddMember()" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox 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 color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="projectId">
<mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grantId] | hasRole | async) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ role }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="paginator" [ngClass]="{'': type == ProjectType.PROJECTTYPE_OWNED}" #paginator
[pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</app-refresh-table>

149
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.component.ts
View File

@@ -1,149 +0,0 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
selector: 'app-project-grant-members',
templateUrl: './project-grant-members.component.html',
styleUrls: ['./project-grant-members.component.scss'],
})
export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
@Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectGrantMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public ProjectType: any = ProjectType;
public memberRoleOptions: string[] = [];
constructor(
private mgmtService: ManagementService,
private dialog: MatDialog,
private toast: ToastService,
) {
this.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
this.getRoleOptions();
}
public ngOnInit(): void {
this.dataSource.loadGrantMembers(this.projectId, this.grantId, 0, 25);
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadMembersPage()),
)
.subscribe();
}
public getRoleOptions(): void {
if (this.type === ProjectType.PROJECTTYPE_GRANTED) {
this.mgmtService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
} else if (this.type === ProjectType.PROJECTTYPE_OWNED) {
this.mgmtService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error);
});
}
}
private loadMembersPage(): void {
this.dataSource.loadGrantMembers(
this.projectId,
this.grantId,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
return this.mgmtService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
}).catch(error => {
this.toast.showError(error);
});
}));
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.GetProjectGrantMemberRoles()).toObject();
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
if (dataToAdd) {
Promise.all(dataToAdd.userIds.map((userid: string) => {
return this.mgmtService.AddProjectGrantMember(
this.projectId,
this.grantId,
userid,
dataToAdd.rolesKeyList,
);
})).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
}).catch(error => {
this.toast.showError(error);
});
}
});
}
updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.ChangeProjectGrantMember(this.projectId, this.grantId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public refreshPage(): void {
this.selection.clear();
this.dataSource.loadGrantMembers(this.projectId, this.grantId, this.paginator.pageIndex, this.paginator.pageSize);
}
}

58
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members/project-grant-members.module.ts
View File

@@ -1,58 +0,0 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatPaginatorModule } from '@angular/material/paginator';
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 { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module';
import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autocomplete/search-user-autocomplete.module';
import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
import {
ProjectGrantMembersCreateDialogModule,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.module';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
@NgModule({
declarations: [ProjectGrantMembersComponent],
imports: [
CommonModule,
HasRoleModule,
RouterModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTableModule,
SearchUserAutocompleteModule,
ProjectGrantMembersCreateDialogModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
MatDialogModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
RefreshTableModule,
HasRolePipeModule,
],
exports: [
ProjectGrantMembersComponent,
],
})
export class ProjectGrantMembersModule { }

2
console/src/app/pages/signedout/signedout.component.scss
View File

@@ -15,7 +15,7 @@
}
p {
color: #8795a1;
color: var(--grey);
text-align: center;
font-size: 1rem;
margin: 0;

2
console/src/app/pages/user-grant-create/user-grant-create.component.scss
View File

@@ -24,7 +24,7 @@
}
.desc {
color: #8795a1;
color: var(--grey);
}
}

5
console/src/app/pages/users/user-create-machine/user-create-machine.component.scss
View File

@@ -15,14 +15,15 @@
.content {
width: 100%;
display: flex wrap;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

5
console/src/app/pages/users/user-create/user-create.component.scss
View File

@@ -15,14 +15,15 @@
.content {
width: 100%;
display: flex wrap;
display: flex;
flex-wrap: wrap;
flex-direction: row;
margin: 0 -.5rem;
.section {
padding: .5rem;
flex-basis: 100%;
color: #8795a1;
color: var(--grey);
font-size: .9rem;
}

Some files were not shown because too many files have changed in this diff Show More