andwati/zitadel
1
0
Fork 0
mirror of https://github.com/andwati/zitadel.git synced 2026-11-15 02:15:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): migrate from tslint to eslint, project delete from table (#2490)

Browse Source 
* es lint

* modify tsconfig, auto lint some stuff

* lint

* lint

* lint

* lint

* html ts lint

* lint

* lint, tsconfig

* fix project delete, state table

* eslint config, remove cnslHint directive

* mfa selector, info row fixes

* lint

* fix login policy, granted orgs table state, lint

Co-authored-by: Florian Forster <[email protected]>
This commit is contained in:
Max Peintner
2021-10-22 10:47:06 +02:00
committed by GitHub
co-authored by Florian Forster
parent bdf63800f7
commit b1caef81da
233 changed files with 7098 additions and 4878 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/projects/apps/app-create/app-create.component.html
+23 -23
View File
@@ -25,14 +25,14 @@
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.NAME' | translate }}</cnsl-label>
<input cnslInput cdkFocusInitial formControlName="name" />
<span cnsl-error *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</span>
<span cnslError *ngIf="name?.errors?.required">{{'PROJECT.APP.NAMEREQUIRED' | translate}}</span>
</cnsl-form-field>
<p class="step-title">{{'APP.OIDC.TYPETITLE' | translate}}</p>
<app-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)"
<cnsl-type-radio [types]="appTypes" (selectedType)="appType?.setValue($event)"
[selected]="appType?.value">
</app-type-radio>
</cnsl-type-radio>
<div class="actions">
<button mat-raised-button [disabled]="firstFormGroup.invalid" color="primary"
matStepperNext>{{'ACTIONS.CONTINUE' | translate}}</button>
@@ -46,10 +46,10 @@
<form [formGroup]="secondFormGroup">
<ng-template matStepLabel>{{'APP.AUTHMETHODSECTION' | translate}}</ng-template>
<app-auth-method-radio [authMethods]="authMethods" [selected]="authMethod?.value"
[isOIDC]="appType?.value?.createType == AppCreateType.OIDC"
<cnsl-auth-method-radio [authMethods]="authMethods" [selected]="authMethod?.value"
[isOIDC]="appType?.value?.createType === AppCreateType.OIDC"
(selectedMethod)="authMethod?.setValue($event)">
</app-auth-method-radio>
</cnsl-auth-method-radio>
<div class="actions">
<button mat-stroked-button color="primary" matStepperPrevious>{{'ACTIONS.BACK' |
@@ -61,7 +61,7 @@
</mat-step>
<!-- show redirect step only for OIDC apps -->
<mat-step *ngIf="appType?.value?.createType == AppCreateType.OIDC" [editable]="true">
<mat-step *ngIf="appType?.value?.createType === AppCreateType.OIDC" [editable]="true">
<ng-template matStepLabel>{{'APP.OIDC.REDIRECTSECTION' | translate}}</ng-template>
<p class="step-title">{{'APP.OIDC.REDIRECTTITLE' | translate}}</p>
@@ -71,8 +71,8 @@
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
[isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE"
(changedUris)="oidcAppRequest.redirectUrisList = $event" [urisList]="oidcAppRequest.redirectUrisList"
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE"
(changedUris)="oidcAppRequest.redirectUrisList = $any($event)" [urisList]="oidcAppRequest.redirectUrisList"
[getValues]="requestRedirectValuesSubject$" title="{{ 'APP.OIDC.REDIRECT' | translate }}">
</cnsl-redirect-uris>
@@ -84,10 +84,10 @@
{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</p>
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $event"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
[urisList]="oidcAppRequest.postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}" [getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<div class="actions">
@@ -109,7 +109,7 @@
</span>
</div>
<ng-container *ngIf="appType?.value?.createType == AppCreateType.OIDC">
<ng-container *ngIf="appType?.value?.createType === AppCreateType.OIDC">
<div class="row">
<span class="left">
{{ 'APP.TYPE' | translate }}
@@ -122,7 +122,7 @@
<span class="left">
{{ 'APP.GRANT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.grantTypesList?.length > 0">
<span class="right" *ngIf="oidcAppRequest.grantTypesList && oidcAppRequest.grantTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.grantTypesList; index as i">
{{'APP.OIDC.GRANT.'+element | translate}}
{{i < oidcAppRequest.grantTypesList.length - 1 ? ', ' : '' }} </span>]
@@ -132,7 +132,7 @@
<span class="left">
{{ 'APP.OIDC.RESPONSETYPE' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.responseTypesList?.length > 0">
<span class="right" *ngIf="oidcAppRequest.responseTypesList && oidcAppRequest.responseTypesList.length > 0">
[<span *ngFor="let element of oidcAppRequest.responseTypesList; index as i">
{{('APP.OIDC.RESPONSE.'+element | translate)}}
{{i < oidcAppRequest.responseTypesList.length - 1 ? ', ' : '' }} </span>]
@@ -154,7 +154,7 @@
<span class="left">
{{ 'APP.OIDC.REDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.redirectUrisList?.length > 0">
<span class="right" *ngIf="oidcAppRequest.redirectUrisList && oidcAppRequest.redirectUrisList.length > 0">
[<span *ngFor="let redirect of oidcAppRequest.redirectUrisList; index as i">
{{redirect}}
{{i < oidcAppRequest.redirectUrisList.length - 1 ? ', ' : '' }} </span>]
@@ -165,7 +165,7 @@
<span class="left">
{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}
</span>
<span class="right" *ngIf="oidcAppRequest.postLogoutRedirectUrisList?.length > 0">
<span class="right" *ngIf="oidcAppRequest.postLogoutRedirectUrisList && oidcAppRequest.postLogoutRedirectUrisList.length > 0">
[<span *ngFor="let redirect of oidcAppRequest.postLogoutRedirectUrisList; index as i">
{{redirect}}
{{i < oidcAppRequest.postLogoutRedirectUrisList.length - 1 ? ', ' : '' }} </span>]
@@ -173,7 +173,7 @@
</div>
</ng-container>
<ng-container *ngIf="appType?.value?.createType == AppCreateType.API">
<ng-container *ngIf="appType?.value?.createType === AppCreateType.API">
<div class="row">
<span class="left">
{{ 'APP.AUTHMETHOD' | translate }}
@@ -211,7 +211,7 @@
</mat-select>
</cnsl-form-field>
<ng-container *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
<ng-container *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'APP.OIDC.GRANTTYPE' | translate }}</cnsl-label>
<mat-select formControlName="grantTypesList" multiple>
@@ -242,21 +242,21 @@
</cnsl-form-field>
</div>
<div class="content" *ngIf="formappType?.value?.createType == AppCreateType.OIDC">
<div class="content" *ngIf="formappType?.value?.createType === AppCreateType.OIDC">
<div class="formfield full-width">
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcAppRequest.redirectUrisList = $event"
(changedUris)="oidcAppRequest.redirectUrisList = $any($event)"
[urisList]="oidcAppRequest.redirectUrisList" title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris class="redirect-section" [canWrite]="true"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $event"
(changedUris)="oidcAppRequest.postLogoutRedirectUrisList = $any($event)"
[urisList]="oidcAppRequest.postLogoutRedirectUrisList"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[getValues]="requestRedirectValuesSubject$"
[isNative]="oidcAppRequest.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE">
[isNative]="oidcAppRequest.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
</div>
</div>
console/src/app/pages/projects/apps/app-create/app-create.component.ts
+1 -1
View File
@@ -38,7 +38,7 @@ import { API_TYPE, AppCreateType, NATIVE_TYPE, RadioItemAppType, USER_AGENT_TYPE
@Component({
selector: 'app-app-create',
selector: 'cnsl-app-create',
templateUrl: './app-create.component.html',
styleUrls: ['./app-create.component.scss'],
})
console/src/app/pages/projects/apps/app-detail/app-detail.component.html
+25 -25
View File
@@ -1,4 +1,4 @@
<app-meta-layout>
<cnsl-meta-layout>
<div class="enlarged-container">
<div class="head">
<a [routerLink]="['/projects', projectId]" mat-icon-button>
@@ -12,7 +12,7 @@
</div>
<ng-container *ngIf="isZitadel === false">
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['project.app.write:'+projectId, 'project.app.write']">
<ng-template cnslHasRole [hasRole]="['project.app.write:'+projectId, 'project.app.write']">
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
@@ -27,11 +27,11 @@
(click)="changeState(AppState.APP_STATE_INACTIVE)">
{{'ACTIONS.DEACTIVATE' | translate}}
</button>
<button mat-menu-item *ngIf="app?.state == AppState.APP_STATE_INACTIVE"
<button mat-menu-item *ngIf="app?.state === AppState.APP_STATE_INACTIVE"
(click)="changeState(AppState.APP_STATE_ACTIVE)">
{{'ACTIONS.REACTIVATE' | translate}}
</button>
<ng-template appHasRole [appHasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
<ng-template cnslHasRole [hasRole]="['project.app.delete:'+projectId, 'project.app.delete']">
<button mat-menu-item matTooltip="{{'APP.PAGES.DELETE' | translate}}"
(click)="deleteApp()">
<span [style.color]="'var(--warn)'">{{'APP.PAGES.DELETE' | translate}}</span>
@@ -49,7 +49,7 @@
<div class="compliance"
*ngIf="app?.oidcConfig?.complianceProblemsList && app.oidcConfig?.complianceProblemsList?.length">
<cnsl-info-section class="problem" type="WARN">
<cnsl-info-section class="problem" [type]="InfoSectionType.WARN">
<ul style="margin: 0;">
<li style="margin: 0 0 .5rem 0;"
*ngFor="let problem of app.oidcConfig?.complianceProblemsList || []">
@@ -70,20 +70,20 @@
</button>
</p>
<ng-container *ngIf="showRedirects">
<cnsl-info-section *ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
<cnsl-info-section *ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONNATIVE' | translate}}</span>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
<mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
</div>
</cnsl-info-section>
<cnsl-info-section
*ngIf="appType?.value == OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value == OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
*ngIf="appType?.value === OIDCAppType.OIDC_APP_TYPE_WEB || appType?.value === OIDCAppType.OIDC_APP_TYPE_USER_AGENT">
<div class="dev-col">
<span>{{'APP.OIDC.REDIRECTDESCRIPTIONWEB' | translate}}</span>
<mat-slide-toggle color="primary" class="devmode" [formControl]="devMode" name="devMode"
<mat-slide-toggle *ngIf="devMode" color="primary" class="devmode" [formControl]="devMode" name="devMode"
matTooltip="{{'APP.OIDC.DEVMODEDESC' | translate}}">
{{ 'APP.OIDC.DEVMODE' | translate }}
</mat-slide-toggle>
@@ -93,16 +93,16 @@
<div class="content">
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" [getValues]="requestRedirectValuesSubject$"
(changedUris)="redirectUrisList = $event" [urisList]="redirectUrisList"
(changedUris)="redirectUrisList = $any($event)" [urisList]="redirectUrisList"
title="{{ 'APP.OIDC.REDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
<cnsl-redirect-uris *ngIf="appType?.value !== undefined" class="redirect-section" [canWrite]="canWrite"
[devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $event"
[devMode]="devMode?.value" (changedUris)="postLogoutRedirectUrisList = $any($event)"
[urisList]="postLogoutRedirectUrisList" [getValues]="requestRedirectValuesSubject$"
title="{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}"
[isNative]="appType?.value == OIDCAppType.OIDC_APP_TYPE_NATIVE">
[isNative]="appType?.value === OIDCAppType.OIDC_APP_TYPE_NATIVE">
</cnsl-redirect-uris>
</div>
</ng-container>
@@ -119,7 +119,7 @@
<ng-container *ngIf="showAdditionalOrigins">
<p class="desc">{{'APP.ADDITIONALORIGINSDESC' | translate}}</p>
<cnsl-additional-origins *ngIf="appType?.value !== undefined" class="input" [canWrite]="canWrite"
[getValues]="requestRedirectValuesSubject$" (changedUris)="additionalOriginsList = $event"
[getValues]="requestRedirectValuesSubject$" (changedUris)="additionalOriginsList = $any($event)"
[urisList]="additionalOriginsList" title="{{ 'APP.ORIGINS' | translate }}">
</cnsl-additional-origins>
</ng-container>
@@ -128,15 +128,15 @@
<div style="margin: .5rem" class="divider"></div>
</div>
<app-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
<cnsl-auth-method-radio *ngIf="authMethods && initialAuthMethod && (app?.oidcConfig || app?.apiConfig)"
[authMethods]="authMethods" [selected]="initialAuthMethod" [current]="currentAuthMethod"
[isOIDC]="app?.oidcConfig !== undefined" (selectedMethod)="setPartialConfigFromAuthMethod($event)">
</app-auth-method-radio>
</cnsl-auth-method-radio>
<app-card *ngIf="currentAuthMethod == 'PK_JWT' && projectId && app?.id" [expanded]="false"
<cnsl-card *ngIf="currentAuthMethod === 'PK_JWT' && projectId && app?.id" [expanded]="false"
title="{{ 'USER.MACHINE.KEYSTITLE' | translate }}" description="{{ 'USER.MACHINE.KEYSDESC' | translate }}">
<app-client-keys [projectId]="projectId" [appId]="app.id"></app-client-keys>
</app-card>
<cnsl-client-keys [projectId]="projectId" [appId]="app.id"></cnsl-client-keys>
</cnsl-card>
<div *ngIf="apiForm && app?.apiConfig" class="btn-container">
<button class="submit-button" (click)="saveAPIApp()" color="primary"
@@ -145,15 +145,15 @@
</button>
</div>
<div *ngIf="currentAuthMethod == 'BASIC'">
<div *ngIf="currentAuthMethod === 'BASIC'">
<button [disabled]="!canWrite" mat-stroked-button
(click)="regenerateAPIClientSecret()">{{'APP.API.REGENERATESECRET' | translate}}</button>
</div>
<form *ngIf="oidcForm && app?.oidcConfig" [formGroup]="oidcForm" (ngSubmit)="saveOIDCApp()">
<app-card title=" {{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig" [expanded]="false">
<div card-actions *ngIf="currentAuthMethod == 'CODE' || currentAuthMethod == 'POST'">
<cnsl-card title=" {{ 'APP.OIDC.TITLE' | translate }}" *ngIf="app && app.oidcConfig" [expanded]="false">
<div card-actions *ngIf="currentAuthMethod === 'CODE' || currentAuthMethod === 'POST'">
<button type="button" [disabled]="!canWrite" mat-stroked-button
(click)="regenerateOIDCClientSecret()">{{'APP.OIDC.REGENERATESECRET' | translate}}</button>
</div>
@@ -249,7 +249,7 @@
<span>{{'APP.OIDC.CLOCKSKEW' | translate}}</span>
</cnsl-info-section>
</div>
</app-card>
</cnsl-card>
<div class="btn-container">
<button class="submit-button" type="submit" color="primary" [disabled]="oidcForm.invalid || !canWrite"
@@ -277,6 +277,6 @@
</div>
</div>
<app-changes *ngIf="app" [changeType]="ChangeType.APP" [id]="app.id" [secId]="projectId"></app-changes>
<cnsl-changes *ngIf="app" [changeType]="ChangeType.APP" [id]="app.id" [secId]="projectId"></cnsl-changes>
</div>
</app-meta-layout>
</cnsl-meta-layout>
console/src/app/pages/projects/apps/app-detail/app-detail.component.ts
+6 -4
View File
@@ -1,7 +1,7 @@
import { COMMA, ENTER, SPACE } from '@angular/cdk/keycodes';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormGroup } from '@angular/forms';
import { AbstractControl, FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { MatCheckboxChange } from '@angular/material/checkbox';
import { MatDialog } from '@angular/material/dialog';
import { MatSnackBar } from '@angular/material/snack-bar';
@@ -12,6 +12,7 @@ import { Subject, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { RadioItemAuthType } from 'src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component';
import { ChangeType } from 'src/app/modules/changes/changes.component';
import { InfoSectionType } from 'src/app/modules/info-section/info-section.component';
import { CnslLinks } from 'src/app/modules/links/links.component';
import { NameDialogComponent } from 'src/app/modules/name-dialog/name-dialog.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
@@ -50,7 +51,7 @@ import {
} from '../authmethods';
@Component({
selector: 'app-app-detail',
selector: 'cnsl-app-detail',
templateUrl: './app-detail.component.html',
styleUrls: ['./app-detail.component.scss'],
})
@@ -122,6 +123,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public requestRedirectValuesSubject$: Subject<void> = new Subject();
public copiedKey: any = '';
public nextLinks: Array<CnslLinks> = [];
public InfoSectionType: any = InfoSectionType;
constructor(
public translate: TranslateService,
@@ -596,8 +598,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
return this.apiForm.get('authMethodType');
}
public get devMode(): AbstractControl | null {
return this.oidcForm.get('devMode');
public get devMode(): FormControl | null {
return this.oidcForm.get('devMode') as FormControl;
}
public get accessTokenType(): AbstractControl | null {
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.html
+7 -7
View File
@@ -5,19 +5,19 @@
<div mat-dialog-content>
<div class="flex" *ngIf="data.clientId">
<span class="overflow-auto"><span class="desc">ClientId:</span> {{data.clientId}}</span>
<button color="primary" [disabled]="copied == data.clientId" matTooltip="copy to clipboard" appCopyToClipboard
<button color="primary" [disabled]="copied === data.clientId" matTooltip="copy to clipboard" cnslCopyToClipboard
[valueToCopy]="data.clientId" (copiedValue)="this.copied = $event" mat-icon-button>
<i *ngIf="copied != data.clientId" class="las la-clipboard"></i>
<i *ngIf="copied == data.clientId" class="las la-clipboard-check"></i>
<i *ngIf="copied !== data.clientId" class="las la-clipboard"></i>
<i *ngIf="copied === data.clientId" class="las la-clipboard-check"></i>
</button>
</div>
<div *ngIf="data.clientSecret; else showNoSecretInfo" class="flex">
<span class="overflow-auto"><span class="desc">ClientSecret:</span> {{data.clientSecret}}</span>
<button color="primary" [disabled]="copied == data.clientSecret" matTooltip="copy to clipboard"
appCopyToClipboard [valueToCopy]="data.clientSecret" (copiedValue)="this.copied = $event" mat-icon-button>
<i *ngIf="copied != data.clientSecret" class="las la-clipboard"></i>
<i *ngIf="copied == data.clientSecret" class="las la-clipboard-check"></i>
<button color="primary" [disabled]="copied === data.clientSecret" matTooltip="copy to clipboard"
cnslCopyToClipboard [valueToCopy]="data.clientSecret" (copiedValue)="this.copied = $event" mat-icon-button>
<i *ngIf="copied !== data.clientSecret" class="las la-clipboard"></i>
<i *ngIf="copied === data.clientSecret" class="las la-clipboard-check"></i>
</button>
</div>
console/src/app/pages/projects/apps/app-secret-dialog/app-secret-dialog.component.ts
+9 -9
View File
@@ -2,16 +2,16 @@ import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
selector: 'app-app-secret-dialog',
templateUrl: './app-secret-dialog.component.html',
styleUrls: ['./app-secret-dialog.component.scss'],
selector: 'cnsl-app-secret-dialog',
templateUrl: './app-secret-dialog.component.html',
styleUrls: ['./app-secret-dialog.component.scss'],
})
export class AppSecretDialogComponent {
public copied: string = '';
constructor(public dialogRef: MatDialogRef<AppSecretDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
public copied: string = '';
constructor(public dialogRef: MatDialogRef<AppSecretDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialog(): void {
this.dialogRef.close(false);
}
}
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.html
+15 -15
View File
@@ -1,4 +1,4 @@
<app-meta-layout>
<cnsl-meta-layout>
<div class="max-width-container">
<div class="head" *ngIf="project?.projectId">
<a [routerLink]="[ '/granted-projects' ]" mat-icon-button>
@@ -12,17 +12,17 @@
</div>
</div>
<ng-template appHasRole [appHasRole]="['user.grant.read', 'user.grant.read:'+grantId]">
<app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
<ng-template cnslHasRole [hasRole]="['user.grant.read', 'user.grant.read:'+grantId]">
<cnsl-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
<cnsl-user-grants *ngIf="projectId && grantId" [context]="UserGrantContext.GRANTED_PROJECT"
[projectId]="projectId" [grantId]="grantId"
[displayedColumns]="['select','user', 'projectId', 'dates', 'roleNamesList']"
[disableWrite]="(['user.grant.write$','user.grant.write:'+grantId] | hasRole | async) == false"
[disableDelete]="(['user.grant.delete$','user.grant.delete:'+grantId] | hasRole | async) == false"
refreshOnPreviousRoutes="['/grant-create/project/{{projectId}}/grant/{{grantId}}']">
</app-user-grants>
</app-card>
[disableWrite]="(['user.grant.write$','user.grant.write:'+grantId] | hasRole | async) === false"
[disableDelete]="(['user.grant.delete$','user.grant.delete:'+grantId] | hasRole | async) === false"
[refreshOnPreviousRoutes]="['/grant-create/project/{{projectId}}/grant/{{grantId}}']">
</cnsl-user-grants>
</cnsl-card>
</ng-template>
</div>
<div class="side" metainfo>
@@ -38,18 +38,18 @@
</div>
</div>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab-group mat-stretch-tabs class="tab-group" [disablePagination]="true">
<mat-tab label="Details">
<app-contributors *ngIf="project" [loading]="loading$ | async" [totalResult]="totalMemberResult"
<cnsl-contributors *ngIf="project" [loading]="loading$ | async" [totalResult]="totalMemberResult"
[membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
(showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
[disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) == false">
</app-contributors>
[disabled]="(['project.member.write$', 'project.member.write:'+ project.projectId]| hasRole | async) === false">
</cnsl-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></app-changes>
<cnsl-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.projectId"></cnsl-changes>
</mat-tab>
</mat-tab-group>
</div>
</app-meta-layout>
</cnsl-meta-layout>
console/src/app/pages/projects/granted-projects/granted-project-detail/granted-project-detail.component.ts
+1 -1
View File
@@ -15,7 +15,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-granted-project-detail',
selector: 'cnsl-granted-project-detail',
templateUrl: './granted-project-detail.component.html',
styleUrls: ['./granted-project-detail.component.scss'],
})
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.html
+4 -4
View File
@@ -11,7 +11,7 @@
<div class="item card" *ngFor="let item of selection.selected; index as i"
(click)="navigateToProject(item.projectId,item.grantId, $event)">
<div class="text-part">
<span *ngIf="item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
<span *ngIf="item.details && item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
@@ -22,7 +22,7 @@
</div>
<span class="description" *ngIf="item.projectOwnerName">{{item.projectOwnerName}}</span>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
<span *ngIf="item.details && item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
@@ -38,7 +38,7 @@
<div class="item card" *ngFor="let item of notPinned; index as i"
(click)="navigateToProject(item.projectId,item.grantId, $event)">
<div class="text-part">
<span *ngIf="item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
<span *ngIf="item.details && item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
@@ -47,7 +47,7 @@
<div class="state-dot" [ngClass]="{'active': item.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': item.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}"></div>
</div>
<span class="description" *ngIf="item.projectOwnerName">{{item.projectOwnerName}}</span>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
<span *ngIf="item.details && item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
</div>
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-grid/granted-project-grid.component.ts
+5 -3
View File
@@ -7,7 +7,7 @@ import { GrantedProject, ProjectGrantState } from 'src/app/proto/generated/zitad
import { StorageKey, StorageLocation, StorageService } from 'src/app/services/storage.service';
@Component({
selector: 'app-granted-project-grid',
selector: 'cnsl-granted-project-grid',
templateUrl: './granted-project-grid.component.html',
styleUrls: ['./granted-project-grid.component.scss'],
animations: [
@@ -35,7 +35,7 @@ export class GrantedProjectGridComponent implements OnChanges {
public notPinned: Array<GrantedProject.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
@Input() loading: boolean | null = false;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public showNewProject: boolean = false;
@@ -70,9 +70,11 @@ export class GrantedProjectGridComponent implements OnChanges {
this.getPrefixedItem('pinned-granted-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: GrantedProject.AsObject[] = this.items.filter((item, index) => {
const toSelect: GrantedProject.AsObject[] = this.items.filter((item) => {
if (array.includes(item.projectId)) {
return true;
} else {
return false;
}
});
this.selection.select(...toSelect);
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.html
+5 -5
View File
@@ -1,6 +1,6 @@
<app-granted-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
<cnsl-granted-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
[items]="grantedProjectList">
</app-granted-project-grid>
</cnsl-granted-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button class="icon-button" (click)="grid = true" mat-icon-button
@@ -10,7 +10,7 @@
</div>
<div *ngIf="!grid && grantedProjectList">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
<cnsl-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
[selection]="selection" [loading]="loading$ | async">
<div class="table-wrapper">
@@ -70,12 +70,12 @@
[routerLink]="['/granted-projects', row.projectId, 'grant', row.grantId]"></tr>
</table>
<div *ngIf="(loading$ | async) == false && !dataSource?.data?.length" class="no-content-row">
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'PROJECT.TABLE.EMPTY' | translate}}</span>
</div>
<cnsl-paginator class="paginator" #paginator [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></cnsl-paginator>
</div>
</app-refresh-table>
</cnsl-refresh-table>
</div>
console/src/app/pages/projects/granted-projects/granted-project-list/granted-project-list.component.ts
+1 -1
View File
@@ -12,7 +12,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-granted-project-list',
selector: 'cnsl-granted-project-list',
templateUrl: './granted-project-list.component.html',
styleUrls: ['./granted-project-list.component.scss'],
animations: [
console/src/app/pages/projects/granted-projects/granted-projects.component.html
+2 -2
View File
@@ -3,6 +3,6 @@
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>{{'PROJECT.PAGES.TYPE.GRANTED' | translate}}</h2>
<app-granted-project-list>
</app-granted-project-list>
<cnsl-granted-project-list>
</cnsl-granted-project-list>
</div>
console/src/app/pages/projects/granted-projects/granted-projects.component.ts
+4 -4
View File
@@ -1,10 +1,10 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-granted-projects',
templateUrl: './granted-projects.component.html',
styleUrls: ['./granted-projects.component.scss'],
selector: 'cnsl-granted-projects',
templateUrl: './granted-projects.component.html',
styleUrls: ['./granted-projects.component.scss'],
})
export class GrantedProjectsComponent {
constructor() { }
constructor() { }
}
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.html
+4 -4
View File
@@ -16,9 +16,9 @@
[isApiApp]="app.apiConfig !== undefined">
{{ app.name.charAt(0)}}
<ng-container *ngIf="app.oidcConfig?.appType !== undefined">
<i *ngIf="app.oidcConfig?.appType == OIDCAppType.OIDC_APP_TYPE_NATIVE" class="las la-mobile"></i>
<i *ngIf="app.oidcConfig?.appType == OIDCAppType.OIDC_APP_TYPE_WEB" class="las la-code"></i>
<i *ngIf="app.oidcConfig?.appType == OIDCAppType.OIDC_APP_TYPE_USER_AGENT" class="las la-code"></i>
<i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_NATIVE" class="las la-mobile"></i>
<i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_WEB" class="las la-code"></i>
<i *ngIf="app.oidcConfig?.appType === OIDCAppType.OIDC_APP_TYPE_USER_AGENT" class="las la-code"></i>
<i *ngIf="app.apiConfig" class="las la-code"></i>
</ng-container>
</cnsl-app-card>
@@ -29,7 +29,7 @@
</div>
<ng-template appHasRole [appHasRole]="['project.app.write']">
<ng-template cnslHasRole [hasRole]="['project.app.write']">
<div class="app-wrap" *ngIf="!disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']">
<cnsl-app-card class="grid-card add" matRipple>
<mat-icon>add</mat-icon>
console/src/app/pages/projects/owned-projects/owned-project-detail/application-grid/application-grid.component.ts
+28 -28
View File
@@ -5,38 +5,38 @@ import { App, OIDCAppType } from 'src/app/proto/generated/zitadel/app_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
@Component({
selector: 'app-application-grid',
templateUrl: './application-grid.component.html',
styleUrls: ['./application-grid.component.scss'],
selector: 'cnsl-application-grid',
templateUrl: './application-grid.component.html',
styleUrls: ['./application-grid.component.scss'],
})
export class ApplicationGridComponent implements OnInit {
@Input() public projectId: string = '';
@Input() public disabled: boolean = false;
@Output() public changeView: EventEmitter<void> = new EventEmitter();
public appsSubject: BehaviorSubject<App.AsObject[]> = new BehaviorSubject<App.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public OIDCAppType: any = OIDCAppType;
@Input() public projectId: string = '';
@Input() public disabled: boolean = false;
@Output() public changeView: EventEmitter<void> = new EventEmitter();
public appsSubject: BehaviorSubject<App.AsObject[]> = new BehaviorSubject<App.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public OIDCAppType: any = OIDCAppType;
constructor(private mgmtService: ManagementService) { }
constructor(private mgmtService: ManagementService) { }
public ngOnInit(): void {
this.loadApps();
}
public ngOnInit(): void {
this.loadApps();
}
public loadApps(): void {
from(this.mgmtService.listApps(this.projectId, 100, 0)).pipe(
map(resp => {
return resp.resultList;
}),
// catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe((apps) => {
this.appsSubject.next(apps as App.AsObject[]);
});
}
public loadApps(): void {
from(this.mgmtService.listApps(this.projectId, 100, 0)).pipe(
map(resp => {
return resp.resultList;
}),
// catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe((apps) => {
this.appsSubject.next(apps as App.AsObject[]);
});
}
public closeView(): void {
this.changeView.emit();
}
public closeView(): void {
this.changeView.emit();
}
}
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.html
+3 -3
View File
@@ -1,6 +1,6 @@
<app-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
<cnsl-refresh-table [loading]="dataSource.loading$ | async" [selection]="selection" (refreshed)="refreshPage()"
[dataSize]="dataSource.totalResult" [timestamp]="dataSource?.viewTimestamp">
<ng-template appHasRole [appHasRole]="['project.app.write']" actions>
<ng-template cnslHasRole [hasRole]="['project.app.write']" actions>
<a [disabled]="disabled" [routerLink]="[ '/projects', projectId, 'apps', 'create']" color="primary"
mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
@@ -49,4 +49,4 @@
[pageSizeOptions]="[25, 50, 100, 250]">
</cnsl-paginator>
</div>
</app-refresh-table>
</cnsl-refresh-table>
console/src/app/pages/projects/owned-projects/owned-project-detail/applications/applications.component.ts
+1 -1
View File
@@ -10,7 +10,7 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ProjectApplicationsDataSource } from './applications-datasource';
@Component({
selector: 'app-applications',
selector: 'cnsl-applications',
templateUrl: './applications.component.html',
styleUrls: ['./applications.component.scss'],
})
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.html
+41 -41
View File
@@ -1,4 +1,4 @@
<app-meta-layout>
<cnsl-meta-layout>
<div class="max-width-container">
<div class="head" *ngIf="project?.id">
<a [routerLink]="[ '/projects' ]" mat-icon-button>
@@ -8,7 +8,7 @@
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
<ng-template cnslHasRole [hasRole]="['project.write:'+projectId, 'project.write']">
<button class="actions-trigger" mat-raised-button color="primary" [matMenuTriggerFor]="actions">
<span>{{'ACTIONS.ACTIONS' | translate}}</span>
<mat-icon class="icon">keyboard_arrow_down</mat-icon>
@@ -19,20 +19,20 @@
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_ACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_INACTIVE)">
{{'PROJECT.TABLE.DEACTIVATE' | translate}}
</button>
<button mat-menu-item
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) == false"
[disabled]="isZitadel || (['project.write$', 'project.write:'+ project.id]| hasRole | async) === false"
*ngIf="project?.state === ProjectState.PROJECT_STATE_INACTIVE"
(click)="changeState(ProjectState.PROJECT_STATE_ACTIVE)">
{{'PROJECT.TABLE.ACTIVATE' | translate}}
</button>
<ng-template appHasRole [appHasRole]="['project.delete$', 'project.delete:'+projectId]">
<ng-template cnslHasRole [hasRole]="['project.delete$', 'project.delete:'+projectId]">
<button mat-menu-item matTooltip="{{'ACTIONS.DELETE' | translate}}" (click)="deleteProject()"
aria-label="Edit project name" *ngIf="isZitadel === false">
<span [style.color]="'var(--warn)'">{{'PROJECT.PAGES.DELETE' | translate}}</span>
@@ -52,72 +52,72 @@
<h2 class="setting-title">{{'PROJECT.PAGES.PRIVATELABEL.TITLE' | translate}}</h2>
<p class="setting-desc">
<span>{{'PROJECT.PAGES.PRIVATELABEL.'+project.privateLabelingSetting+'.TITLE' | translate}}</span>
<button [disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async))== false"
<button [disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
(click)="openPrivateLabelingDialog()" mat-icon-button><i class="las la-edit"></i></button>
</p>
</div>
<ng-template appHasRole [appHasRole]="['project.app.read:' + project.id, 'project.app.read']">
<app-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false" [projectId]="projectId">
</app-application-grid>
<app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<ng-template cnslHasRole [hasRole]="['project.app.read:' + project.id, 'project.app.read']">
<cnsl-application-grid *ngIf="grid" [disabled]="isZitadel" (changeView)="grid = false" [projectId]="projectId">
</cnsl-application-grid>
<cnsl-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<div class="card-actions" card-actions>
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<app-applications [disabled]="isZitadel" [projectId]="projectId"></app-applications>
</app-card>
<cnsl-applications [disabled]="isZitadel" [projectId]="projectId"></cnsl-applications>
</cnsl-card>
</ng-template>
<ng-container *ngIf="isZitadel == false">
<ng-template appHasRole [appHasRole]="['project.grant.read:' + project.id, 'project.grant.read']">
<app-card title="{{ 'PROJECT.GRANT.TITLE' | translate }}"
<ng-container *ngIf="isZitadel === false">
<ng-template cnslHasRole [hasRole]="['project.grant.read:' + project.id, 'project.grant.read']">
<cnsl-card title="{{ 'PROJECT.GRANT.TITLE' | translate }}"
description="{{ 'PROJECT.GRANT.DESCRIPTION' | translate }}">
<app-project-grants
<cnsl-project-grants
[refreshOnPreviousRoutes]="['/projects/'+projectId+'/grants/create','/projects/'+projectId+'/roles/create']"
[disabled]="((['project.grant.write$', 'project.grant.write:'+ project.id]| hasRole | async))== false"
[disabled]="((['project.grant.write$', 'project.grant.write:'+ project.id]| hasRole | async)) === false"
[projectId]="projectId">
</app-project-grants>
</app-card>
</cnsl-project-grants>
</cnsl-card>
</ng-template>
<ng-template appHasRole [appHasRole]="['project.role.read:' + project.id, 'project.role.read']">
<app-card id="roles" title="{{ 'PROJECT.ROLE.TITLE' | translate }}"
<ng-template cnslHasRole [hasRole]="['project.role.read:' + project.id, 'project.role.read']">
<cnsl-card id="roles" title="{{ 'PROJECT.ROLE.TITLE' | translate }}"
description="{{ 'PROJECT.ROLE.DESCRIPTION' | translate }}">
<p>{{'PROJECT.ROLE.OPTIONS' | translate}}</p>
<mat-checkbox [(ngModel)]="project.projectRoleAssertion"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async))== false"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
(change)="saveProject()" color="primary">
{{'PROJECT.ROLE.ASSERTION' | translate}}</mat-checkbox>
<p class="desc">{{'PROJECT.ROLE.ASSERTION_DESCRIPTION' | translate}}</p>
<mat-checkbox [(ngModel)]="project.projectRoleCheck"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async))== false"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
(change)="saveProject()" color="primary">
{{'PROJECT.ROLE.CHECK' | translate}}</mat-checkbox>
<p class="desc">{{'PROJECT.ROLE.CHECK_DESCRIPTION' | translate}}</p>
<mat-checkbox [(ngModel)]="project.hasProjectCheck"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async))== false"
[disabled]="((['project.write$', 'project.write:'+ project.id]| hasRole | async)) === false"
(change)="saveProject()" color="primary">
{{'PROJECT.HAS_PROJECT' | translate}}</mat-checkbox>
<p class="desc">{{'PROJECT.HAS_PROJECT_DESCRIPTION' | translate}}</p>
<div class="divider"></div>
<app-project-roles
[disabled]="(['project.role.write$', 'project.role.write:'+ project.id]| hasRole | async) == false"
<cnsl-project-roles
[disabled]="(['project.role.write$', 'project.role.write:'+ project.id]| hasRole | async) === false"
[actionsVisible]="true" [projectId]="projectId">
</app-project-roles>
</app-card>
</cnsl-project-roles>
</cnsl-card>
</ng-template>
<ng-template appHasRole [appHasRole]="['user.grant.read']">
<app-card *ngIf="project?.id" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
<ng-template cnslHasRole [hasRole]="['user.grant.read']">
<cnsl-card *ngIf="project?.id" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
<cnsl-user-grants [context]="UserGrantContext.OWNED_PROJECT" [projectId]="projectId"
[refreshOnPreviousRoutes]="['/grant-create/project/'+projectId]"
[disableWrite]="((['user.grant.write$', 'user.grant.write:'+projectId] | hasRole) | async) == false"
[disableDelete]="((['user.grant.delete$','user.grant.delete:'+projectId] | hasRole) | async) == false">
</app-user-grants>
</app-card>
[disableWrite]="((['user.grant.write$', 'user.grant.write:'+projectId] | hasRole) | async) === false"
[disableDelete]="((['user.grant.delete$','user.grant.delete:'+projectId] | hasRole) | async) === false">
</cnsl-user-grants>
</cnsl-card>
</ng-template>
</ng-container>
</ng-container>
@@ -136,18 +136,18 @@
</div>
</div>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab-group mat-stretch-tabs class="tab-group" [disablePagination]="true">
<mat-tab label="Details">
<app-contributors *ngIf="project" [loading]="loading$ | async" [totalResult]="totalMemberResult"
<cnsl-contributors *ngIf="project" [loading]="loading$ | async" [totalResult]="totalMemberResult"
[membersSubject]="membersSubject" title="{{ 'PROJECT.MEMBER.TITLE' | translate }}"
description="{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}" (addClicked)="openAddMember()"
(showDetailClicked)="showDetail()" (refreshClicked)="loadMembers()"
[disabled]="(['project.member.write$', 'project.member.write:'+ project.id]| hasRole | async) == false">
</app-contributors>
[disabled]="(['project.member.write$', 'project.member.write:'+ project.id]| hasRole | async) === false">
</cnsl-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="meta-flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></app-changes>
<cnsl-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></cnsl-changes>
</mat-tab>
</mat-tab-group>
</div>
</app-meta-layout>
</cnsl-meta-layout>
console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.component.ts
+1 -1
View File
@@ -24,7 +24,7 @@ import { ToastService } from 'src/app/services/toast.service';
import { NameDialogComponent } from '../../../../modules/name-dialog/name-dialog.component';
@Component({
selector: 'app-owned-project-detail',
selector: 'cnsl-owned-project-detail',
templateUrl: './owned-project-detail.component.html',
styleUrls: ['./owned-project-detail.component.scss'],
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html
+88 -78
View File
@@ -1,87 +1,97 @@
<app-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp"
[emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes" (refreshed)="getRoleOptions(projectId)">
<ng-template appHasRole [appHasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
actions>
<button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"
color="warn">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']"
actions>
<a [disabled]="disabled" color="primary" color="primary" mat-raised-button
[routerLink]="[ '/projects', projectId, 'grants', 'create']">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<cnsl-refresh-table [loading]="dataSource?.loading$ | async" *ngIf="projectId" (refreshed)="loadGrantsPage()"
[dataSize]="dataSource.totalResult" [selection]="selection" [timestamp]="dataSource?.viewTimestamp"
[emitRefreshOnPreviousRoutes]="refreshOnPreviousRoutes" (refreshed)="getRoleOptions(projectId)">
<ng-template cnslHasRole [hasRole]="['project.grant.member.delete:'+projectId, 'project.grant.member.delete']"
actions>
<button (click)="deleteSelectedGrants()" [disabled]="disabled" mat-icon-button *ngIf="selection.hasValue()"
color="warn">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template cnslHasRole [hasRole]="['project.grant.member.write:'+projectId,'project.grant.member.write']" actions>
<a [disabled]="disabled" color="primary" color="primary" mat-raised-button
[routerLink]="[ '/projects', projectId, 'grants', 'create']">
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
<div class="table-wrapper">
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<div class="table-wrapper">
<table mat-table multiTemplateDataRows class="table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox [disabled]="disabled" color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox [disabled]="disabled" color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox [disabled]="disabled" color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="grantedOrgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
<td [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
*matCellDef="let grant">
{{grant.grantedOrgName}} </td>
</ng-container>
<ng-container matColumnDef="grantedOrgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORG' | translate }} </th>
<td [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
*matCellDef="let grant">
{{grant.grantedOrgName}} </td>
</ng-container>
<ng-container matColumnDef="dates">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.DATES' | translate }} </th>
<td [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
*matCellDef="let grant">
<div class="date-block">
<span class="date-sub">{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}:</span>
<span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
<div class="date-block">
<span class="date-sub">{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</span>
<span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
</ng-container>
<ng-container matColumnDef="dates">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.DATES' | translate }} </th>
<td [routerLink]="['/projects',grant.projectId,'grant', grant.grantId]" class="pointer" mat-cell
*matCellDef="let grant">
<div class="date-block">
<span class="date-sub">{{ 'PROJECT.GRANT.CREATIONDATE' | translate }}:</span>
<span>{{grant.details.creationDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
<div class="date-block">
<span class="date-sub">{{ 'PROJECT.GRANT.CHANGEDATE' | translate }}</span>
<span>{{grant.details.changeDate | timestampToDate | localizedDate: 'dd. MMM, HH:mm' }}</span>
</div>
</ng-container>
<ng-container matColumnDef="roleNamesList">
<th mat-header-cell *matHeaderCellDef class="role-row"> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}
</th>
<td class="pointer role-row" mat-cell *matCellDef="let grant">
<cnsl-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
<cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
{{role.key}}
</mat-option>
</mat-select>
</cnsl-form-field>
</td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.STATE' | translate }} </th>
<td mat-cell *matCellDef="let grant" [routerLink]="grant.id ? ['/users', grant.id ]: null">
<span class="state"
[ngClass]="{'active': grant.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE, 'inactive': grant.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE}">
{{ 'PROJECT.GRANT.STATES.'+grant.state | translate }}
</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
</tr>
</table>
<ng-container matColumnDef="roleNamesList">
<th mat-header-cell *matHeaderCellDef class="role-row"> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}
</th>
<td class="pointer role-row" mat-cell *matCellDef="let grant">
<cnsl-form-field class="form-field" appearance="outline" *ngIf="grant.roleKeysList">
<cnsl-label>{{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }}</cnsl-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="disabled"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role.key">
{{role.key}}
</mat-option>
</mat-select>
</cnsl-form-field>
</td>
</ng-container>
<div *ngIf="(dataSource.loading$ | async) == false && !dataSource?.totalResult" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'PROJECT.GRANT.EMPTY' | translate}}</span>
</div>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let grant; columns: displayedColumns;">
</tr>
</table>
<cnsl-paginator class="paginator" #paginator [pageSize]="50" [timestamp]="dataSource?.viewTimestamp" [pageSizeOptions]="[25, 50, 100, 250]"
[length]="dataSource.totalResult" (page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
</cnsl-paginator>
<div *ngIf="(dataSource.loading$ | async) === false && !dataSource?.totalResult" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'PROJECT.GRANT.EMPTY' | translate}}</span>
</div>
</app-refresh-table>
<cnsl-paginator class="paginator" #paginator [pageSize]="50" [timestamp]="dataSource?.viewTimestamp"
[pageSizeOptions]="[25, 50, 100, 250]" [length]="dataSource.totalResult"
(page)="loadGrantsPage($event.pageIndex, $event.pageSize)">
</cnsl-paginator>
</div>
</cnsl-refresh-table>
console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts
+85 -83
View File
@@ -5,106 +5,108 @@ import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { GrantedProject, Role } from 'src/app/proto/generated/zitadel/project_pb';
import { GrantedProject, ProjectGrantState, Role } from 'src/app/proto/generated/zitadel/project_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import { ProjectGrantsDataSource } from './project-grants-datasource';
@Component({
selector: 'app-project-grants',
templateUrl: './project-grants.component.html',
styleUrls: ['./project-grants.component.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
selector: 'cnsl-project-grants',
templateUrl: './project-grants.component.html',
styleUrls: ['./project-grants.component.scss'],
animations: [
trigger('detailExpand', [
state('collapsed', style({ height: '0px', minHeight: '0' })),
state('expanded', style({ height: '*' })),
transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
]),
],
})
export class ProjectGrantsComponent implements OnInit, AfterViewInit {
@Input() refreshOnPreviousRoutes: string[] = [];
@Input() public projectId: string = '';
@Input() public disabled: boolean = false;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild(MatTable) public table!: MatTable<GrantedProject.AsObject>;
public dataSource!: ProjectGrantsDataSource;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public memberRoleOptions: Role.AsObject[] = [];
@Input() refreshOnPreviousRoutes: string[] = [];
@Input() public projectId: string = '';
@Input() public disabled: boolean = false;
@ViewChild(PaginatorComponent) public paginator!: PaginatorComponent;
@ViewChild(MatTable) public table!: MatTable<GrantedProject.AsObject>;
public dataSource!: ProjectGrantsDataSource;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public memberRoleOptions: Role.AsObject[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'grantedOrgName', 'dates'];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'grantedOrgName','state', 'dates'];
constructor(private mgmtService: ManagementService, private toast: ToastService) { }
ProjectGrantState: any = ProjectGrantState;
public ngOnInit(): void {
this.dataSource = new ProjectGrantsDataSource(this.mgmtService);
this.dataSource.loadGrants(this.projectId, 0, 25, 'asc');
this.getRoleOptions(this.projectId);
}
constructor(private mgmtService: ManagementService, private toast: ToastService) { }
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadGrantsPage()),
)
.subscribe();
}
public ngOnInit(): void {
this.dataSource = new ProjectGrantsDataSource(this.mgmtService);
this.dataSource.loadGrants(this.projectId, 0, 25, 'asc');
this.getRoleOptions(this.projectId);
}
public loadGrantsPage(pageIndex?: number, pageSize?: number): void {
this.dataSource.loadGrants(
this.projectId,
pageIndex ?? this.paginator.pageIndex,
pageSize ?? this.paginator.pageSize,
);
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadGrantsPage()),
)
.subscribe();
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.grantsSubject.value.length;
return numSelected === numRows;
}
public loadGrantsPage(pageIndex?: number, pageSize?: number): void {
this.dataSource.loadGrants(
this.projectId,
pageIndex ?? this.paginator.pageIndex,
pageSize ?? this.paginator.pageSize,
);
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.grantsSubject.value.length;
return numSelected === numRows;
}
public getRoleOptions(projectId: string): void {
this.mgmtService.listProjectRoles(projectId, 100, 0).then(resp => {
this.memberRoleOptions = resp.resultList;
});
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
}
updateRoles(grant: GrantedProject.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrant(grant.grantId, grant.projectId, selectionChange.value)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public getRoleOptions(projectId: string): void {
this.mgmtService.listProjectRoles(projectId, 100, 0).then(resp => {
this.memberRoleOptions = resp.resultList;
});
}
deleteSelectedGrants(): void {
const promises = this.selection.selected.map(grant => {
return this.mgmtService.removeProjectGrant(grant.grantId, grant.projectId);
});
updateRoles(grant: GrantedProject.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrant(grant.grantId, grant.projectId, selectionChange.value)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
Promise.all(promises).then(() => {
this.toast.showInfo('GRANTS.TOAST.BULKREMOVED', true);
const data = this.dataSource.grantsSubject.getValue();
this.selection.selected.forEach((item) => {
const index = data.findIndex(i => i.grantId === item.grantId);
if (index > -1) {
data.splice(index, 1);
this.dataSource.grantsSubject.next(data);
}
});
this.selection.clear();
}).catch(error => {
this.toast.showError(error);
});
}
deleteSelectedGrants(): void {
const promises = this.selection.selected.map(grant => {
return this.mgmtService.removeProjectGrant(grant.grantId, grant.projectId);
});
Promise.all(promises).then(() => {
this.toast.showInfo('GRANTS.TOAST.BULKREMOVED', true);
const data = this.dataSource.grantsSubject.getValue();
this.selection.selected.forEach((item) => {
const index = data.findIndex(i => i.grantId === item.grantId);
if (index > -1) {
data.splice(index, 1);
this.dataSource.grantsSubject.next(data);
}
});
this.selection.clear();
}).catch(error => {
this.toast.showError(error);
});
}
}
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html
+8 -14
View File
@@ -13,19 +13,15 @@
(click)="navigateToProject(item.id, $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}">
<div class="text-part">
<span *ngIf="item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span *ngIf="item.details && item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<div class="name-row">
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}"></div>
</div>
<span *ngIf="item.details.changeDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{
item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span *ngIf="item.details && item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{ item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<span class="fill-space"></span>
</div>
@@ -40,16 +36,14 @@
<div class="item card" *ngFor="let item of notPinned; index as i" (click)="navigateToProject(item.id, $event)"
[ngClass]="{ inactive: item.state !== ProjectState.PROJECT_STATE_ACTIVE}">
<div class="text-part">
<span *ngIf="item.details?.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{
item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
<span *ngIf="item.details && item.details.changeDate" class="top">{{'PROJECT.PAGES.LASTMODIFIED' | translate}}
{{ item.details.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm' }}</span>
<div class="name-row">
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<div class="state-dot" [ngClass]="{'active': item.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': item.state === ProjectState.PROJECT_STATE_INACTIVE}"></div>
</div>
<span *ngIf="item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
<span *ngIf="item.details && item.details.creationDate" class="created">{{'PROJECT.PAGES.CREATEDON' | translate}}
{{
item.details.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'
}}</span>
@@ -62,7 +56,7 @@
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
<ng-template appHasRole [appHasRole]="['project.create']">
<ng-template cnslHasRole [hasRole]="['project.create']">
<div class="add-project-button card" (click)="addItem()">
<mat-icon class="icon">add</mat-icon>
<span>{{'PROJECT.PAGES.ADDNEW' | translate}}</span>
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.ts
+5 -3
View File
@@ -11,7 +11,7 @@ import { StorageKey, StorageLocation, StorageService } from 'src/app/services/st
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-owned-project-grid',
selector: 'cnsl-owned-project-grid',
templateUrl: './owned-project-grid.component.html',
styleUrls: ['./owned-project-grid.component.scss'],
animations: [
@@ -44,7 +44,7 @@ export class OwnedProjectGridComponent implements OnChanges {
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
@Input() loading: boolean | null = false;
public selection: SelectionModel<Project.AsObject> = new SelectionModel<Project.AsObject>(true, []);
@@ -94,9 +94,11 @@ export class OwnedProjectGridComponent implements OnChanges {
this.getPrefixedItem('pinned-projects').then(storageEntry => {
if (storageEntry) {
const array: string[] = JSON.parse(storageEntry);
const toSelect: Project.AsObject[] = this.items.filter((item, index) => {
const toSelect: Project.AsObject[] = this.items.filter((item) => {
if (array.includes(item.id)) {
return true;
} else {
return false;
}
});
this.selection.select(...toSelect);
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.html
+13 -13
View File
@@ -1,7 +1,7 @@
<app-owned-project-grid [zitadelProjectId]="zitadelProjectId" *ngIf="grid && zitadelProjectId"
<cnsl-owned-project-grid [zitadelProjectId]="zitadelProjectId" *ngIf="grid && zitadelProjectId"
[loading]="loading$ | async" (changedView)="grid = false" [items]="ownedProjectList || []"
(newClicked)="addProject()">
</app-owned-project-grid>
</cnsl-owned-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button class="icon-button"
@@ -10,10 +10,10 @@
</button>
</div>
<div *ngIf="!grid && ownedProjectList">
<app-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
<cnsl-refresh-table (refreshed)="refreshPage()" [dataSize]="totalResult" [timestamp]="viewTimestamp"
[selection]="selection" [loading]="loading$ | async">
<ng-template actions appHasRole [appHasRole]="['project.create']">
<ng-template actions cnslHasRole [hasRole]="['project.create']">
<a [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
@@ -36,19 +36,20 @@
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
<td [routerLink]="['/projects', project.id]" mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="state">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.STATE' | translate }} </th>
<td mat-cell *matCellDef="let project"><span *ngIf="project.state">{{'PROJECT.STATE.'+project.state
| translate}}</span></td>
<td [routerLink]="['/projects', project.id]" mat-cell *matCellDef="let project">
<span class="state" [ngClass]="{'active': project.state === ProjectState.PROJECT_STATE_ACTIVE, 'inactive': project.state === ProjectState.PROJECT_STATE_INACTIVE}" *ngIf="project.state">{{'PROJECT.STATE.'+project.state | translate}}</span>
</td>
</ng-container>
<ng-container matColumnDef="creationDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CREATIONDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<td [routerLink]="['/projects', project.id]" mat-cell *matCellDef="let project">
<span *ngIf="project.details.creationDate">{{project.details.creationDate | timestampToDate |
localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
@@ -57,7 +58,7 @@
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<td [routerLink]="['/projects', project.id]" mat-cell *matCellDef="let project">
<span *ngIf="project.details.changeDate">{{project.details.changeDate | timestampToDate |
localizedDate: 'EEE dd. MMM, HH:mm'}}</span>
</td>
@@ -75,16 +76,15 @@
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
<tr class="highlight" mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<div *ngIf="(loading$ | async) == false && !dataSource?.data?.length" class="no-content-row">
<div *ngIf="(loading$ | async) === false && !dataSource?.data?.length" class="no-content-row">
<i class="las la-exclamation"></i>
<span>{{'PROJECT.TABLE.EMPTY' | translate}}</span>
</div>
<cnsl-paginator class="paginator" [timestamp]="viewTimestamp" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></cnsl-paginator>
</div>
</app-refresh-table>
</cnsl-refresh-table>
</div>
console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-list.component.ts
+6 -5
View File
@@ -10,12 +10,12 @@ import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { take } from 'rxjs/operators';
import { PageEvent, PaginatorComponent } from 'src/app/modules/paginator/paginator.component';
import { WarnDialogComponent } from 'src/app/modules/warn-dialog/warn-dialog.component';
import { Project } from 'src/app/proto/generated/zitadel/project_pb';
import { Project, ProjectState } from 'src/app/proto/generated/zitadel/project_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-owned-project-list',
selector: 'cnsl-owned-project-list',
templateUrl: './owned-project-list.component.html',
styleUrls: ['./owned-project-list.component.scss'],
animations: [
@@ -58,6 +58,7 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
private subscription?: Subscription;
public zitadelProjectId: string = '';
public ProjectState: any = ProjectState;
constructor(private router: Router,
private route: ActivatedRoute,
@@ -162,7 +163,7 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
}
public deleteProject(item: Project.AsObject): void {
public deleteProject(id: string): void {
const dialogRef = this.dialog.open(WarnDialogComponent, {
data: {
confirmKey: 'ACTIONS.DELETE',
@@ -174,8 +175,8 @@ export class OwnedProjectListComponent implements OnInit, OnDestroy {
});
dialogRef.afterClosed().subscribe(resp => {
if (this.zitadelProjectId && resp && item.id !== this.zitadelProjectId) {
this.mgmtService.removeProject(item.id).then(() => {
if (this.zitadelProjectId && resp && id !== this.zitadelProjectId) {
this.mgmtService.removeProject(id).then(() => {
this.toast.showInfo('PROJECT.TOAST.DELETED', true);
setTimeout(() => {
this.refreshPage();
console/src/app/pages/projects/owned-projects/owned-projects.component.html
+1 -1
View File
@@ -3,5 +3,5 @@
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>{{'PROJECT.PAGES.TYPE.OWNED' | translate}}</h2>
<app-owned-project-list></app-owned-project-list>
<cnsl-owned-project-list></cnsl-owned-project-list>
</div>
console/src/app/pages/projects/owned-projects/owned-projects.component.ts
+3 -3
View File
@@ -1,8 +1,8 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-owned-projects',
templateUrl: './owned-projects.component.html',
styleUrls: ['./owned-projects.component.scss'],
selector: 'cnsl-owned-projects',
templateUrl: './owned-projects.component.html',
styleUrls: ['./owned-projects.component.scss'],
})
export class OwnedProjectsComponent { }
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.html
+10 -10
View File
@@ -1,4 +1,4 @@
<app-detail-layout [backRouterLink]="[ '/projects', projectid]" title="{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}"
<cnsl-detail-layout [backRouterLink]="[ '/projects', projectid]" title="{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}"
description="{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}">
<div class="master-row">
<div class="left-col">
@@ -22,11 +22,11 @@
<span class="fill-space"></span>
<div>
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_ACTIVE"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE"
(click)="changeState(ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE)">{{'USER.PAGES.DEACTIVATE' |
translate}}</button>
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECTGRANTSTATE_INACTIVE"
(click)="changeState(ProjectGrantState.PROJECTGRANTSTATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' |
<button mat-stroked-button color="warn" *ngIf="grant?.state === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE"
(click)="changeState(ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE)">{{'USER.PAGES.REACTIVATE' |
translate}}</button>
</div>
</div>
@@ -45,20 +45,20 @@
<h1 class="h1">{{ 'PROJECT.GRANT.DETAIL.MEMBERTITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.MEMBERDESC' | translate }}</p>
<app-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
<cnsl-members-table *ngIf="grant" style="width: 100%;" [dataSource]="dataSource"
[canWrite]="['project.grant.member.write','project.grant.member.write:' + grant.grantId] | hasRole | async"
[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.grantId] | hasRole | async) == false"
[disabled]="(['project.grant.member.delete','project.grant.member.delete:' + grant.grantId] | 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.grantId] | hasRole | async) == false"
[disabled]="(['project.grant.member.write','project.grant.member.write:' + grant.grantId] | 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>
</cnsl-members-table>
</cnsl-detail-layout>
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.scss
+4
View File
@@ -1,3 +1,7 @@
.desc {
font-size: 14px;
color: var(--grey);
}
.del-button {
margin-right: .5rem;
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-detail.component.ts
+132 -132
View File
@@ -9,164 +9,164 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
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'],
selector: 'cnsl-project-grant-detail',
templateUrl: './project-grant-detail.component.html',
styleUrls: ['./project-grant-detail.component.scss'],
})
export class ProjectGrantDetailComponent {
public INITIALPAGESIZE: number = 25;
public INITIALPAGESIZE: number = 25;
public grant!: GrantedProject.AsObject;
public projectid: string = '';
public grantid: string = '';
public grant!: GrantedProject.AsObject;
public projectid: string = '';
public grantid: string = '';
public disabled: boolean = false;
public disabled: boolean = false;
public isZitadel: boolean = false;
ProjectGrantState: any = ProjectGrantState;
public isZitadel: boolean = false;
ProjectGrantState: any = ProjectGrantState;
public projectRoleOptions: Role.AsObject[] = [];
public memberRoleOptions: Array<string> = [];
public projectRoleOptions: Role.AsObject[] = [];
public memberRoleOptions: Array<string> = [];
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<Member.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;
public changePageFactory!: Function;
public changePage: EventEmitter<void> = new EventEmitter();
public selection: Array<Member.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.dataSource = new ProjectGrantMembersDataSource(this.mgmtService);
this.dataSource.loadMembers(params.projectid, params.grantid, 0, this.INITIALPAGESIZE);
this.getRoleOptions(params.projectid);
this.getMemberRoleOptions();
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.changePageFactory = (event?: PageEvent) => {
return this.dataSource.loadMembers(
params.projectid,
params.grantid,
event?.pageIndex ?? 0,
event?.pageSize ?? this.INITIALPAGESIZE,
);
};
this.mgmtService.getProjectGrantByID(this.grantid, this.projectid).then((resp) => {
if (resp.projectGrant) {
this.grant = resp.projectGrant;
}
});
});
}
public changeState(newState: ProjectGrantState): void {
if (newState === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE) {
this.mgmtService.reactivateProjectGrant(this.grantid, this.projectid).then(() => {
this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
this.grant.state = newState;
}).catch(error => {
this.toast.showError(error);
});
} else if (newState === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE) {
this.mgmtService.deactivateProjectGrant(this.grantid, this.projectid).then(() => {
this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
this.grant.state = newState;
}).catch(error => {
this.toast.showError(error);
});
this.mgmtService.getProjectGrantByID(this.grantid, this.projectid).then((resp) => {
if (resp.projectGrant) {
this.grant = resp.projectGrant;
}
}
});
});
}
public getRoleOptions(projectId: string): void {
this.mgmtService.listProjectRoles(projectId, 100, 0).then(resp => {
this.projectRoleOptions = resp.resultList;
});
public changeState(newState: ProjectGrantState): void {
if (newState === ProjectGrantState.PROJECT_GRANT_STATE_ACTIVE) {
this.mgmtService.reactivateProjectGrant(this.grantid, this.projectid).then(() => {
this.toast.showInfo('PROJECT.TOAST.REACTIVATED', true);
this.grant.state = newState;
}).catch(error => {
this.toast.showError(error);
});
} else if (newState === ProjectGrantState.PROJECT_GRANT_STATE_INACTIVE) {
this.mgmtService.deactivateProjectGrant(this.grantid, this.projectid).then(() => {
this.toast.showInfo('PROJECT.TOAST.DEACTIVATED', true);
this.grant.state = newState;
}).catch(error => {
this.toast.showError(error);
});
}
}
public getMemberRoleOptions(): void {
this.mgmtService.listProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.resultList;
public getRoleOptions(projectId: string): void {
this.mgmtService.listProjectRoles(projectId, 100, 0).then(resp => {
this.projectRoleOptions = resp.resultList;
});
}
public getMemberRoleOptions(): void {
this.mgmtService.listProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.resultList;
}).catch(error => {
this.toast.showError(error);
});
}
updateRoles(selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrant(this.grant.grantId, this.grant.projectId, selectionChange.value)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUPDATED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.map(member => {
return this.mgmtService.removeProjectGrantMember(this.grant.projectId, this.grant.grantId, member.userId)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
this.toast.showError(error);
});
}
}));
}
updateRoles(selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrant(this.grant.grantId, this.grant.projectId, selectionChange.value)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTUPDATED', true);
}).catch(error => {
this.toast.showError(error);
});
}
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.listProjectGrantMemberRoles());
public removeProjectMemberSelection(): void {
Promise.all(this.selection.map(member => {
return this.mgmtService.removeProjectGrantMember(this.grant.projectId, this.grant.grantId, member.userId)
.then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERREMOVED', true);
setTimeout(() => {
this.changePage.emit();
}, 1000);
}).catch(error => {
this.toast.showError(error);
});
}));
}
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.resultList,
},
width: '400px',
});
public async openAddMember(): Promise<any> {
const keysList = (await this.mgmtService.listProjectGrantMemberRoles());
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
roleKeysList: keysList.resultList,
},
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.grantId,
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: Member.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrantMember(
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
if (dataToAdd) {
Promise.all(dataToAdd.userIds.map((userid: string) => {
return this.mgmtService.addProjectGrantMember(
this.grant.projectId,
this.grant.grantId,
member.userId,
selectionChange.value,
).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
userid,
dataToAdd.rolesKeyList,
);
})).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERADDED', true);
setTimeout(() => {
this.changePage.emit();
}, 3000);
}).catch(error => {
this.toast.showError(error);
this.toast.showError(error);
});
}
}
});
}
updateMemberRoles(member: Member.AsObject, selectionChange: MatSelectChange): void {
this.mgmtService.updateProjectGrantMember(
this.grant.projectId,
this.grant.grantId,
member.userId,
selectionChange.value,
).then(() => {
this.toast.showInfo('PROJECT.GRANT.TOAST.PROJECTGRANTMEMBERCHANGED', true);
}).catch(error => {
this.toast.showError(error);
});
}
}
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.html
+3 -3
View File
@@ -3,8 +3,8 @@
</h1>
<p class="desc"> {{'ORG_DETAIL.MEMBER.ADDDESCRIPTION' | translate}}</p>
<div mat-dialog-content>
<app-search-user-autocomplete (selectionChanged)="selectUsers($event)">
</app-search-user-autocomplete>
<cnsl-search-user-autocomplete (selectionChanged)="selectUsers($event)">
</cnsl-search-user-autocomplete>
<cnsl-form-field class="full-width" appearance="outline">
<cnsl-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</cnsl-label>
@@ -20,7 +20,7 @@
cancel
</button>
<button [disabled]="userIds.length == 0 || roleKeyList.length == 0" color="primary" mat-raised-button
<button [disabled]="userIds.length === 0 || roleKeyList.length === 0" color="primary" mat-raised-button
class="ok-button" (click)="closeDialogWithSuccess()">
Add
</button>
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-create-dialog/project-grant-members-create-dialog.component.ts
+26 -24
View File
@@ -4,37 +4,39 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { User } from 'src/app/proto/generated/zitadel/user_pb';
export interface ProjectGrantMembersCreateDialogExportType {
userIds: string[];
rolesKeyList: string[];
userIds: string[];
rolesKeyList: string[];
}
@Component({
selector: 'app-project-grant-members-create-dialog',
templateUrl: './project-grant-members-create-dialog.component.html',
styleUrls: ['./project-grant-members-create-dialog.component.scss'],
selector: 'cnsl-project-grant-members-create-dialog',
templateUrl: './project-grant-members-create-dialog.component.html',
styleUrls: ['./project-grant-members-create-dialog.component.scss'],
})
export class ProjectGrantMembersCreateDialogComponent {
public form!: FormGroup;
public userIds: string[] = [];
public roleKeyList: string[] = [];
public form!: FormGroup;
public userIds: string[] = [];
public roleKeyList: string[] = [];
constructor(
public dialogRef: MatDialogRef<ProjectGrantMembersCreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
constructor(
public dialogRef: MatDialogRef<ProjectGrantMembersCreateDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any,
) { }
public selectUsers(users: User.AsObject[]): void {
this.userIds = users.map(user => user.id);
public selectUsers(users: User.AsObject | User.AsObject[]): void {
if (Array.isArray(users)) {
this.userIds = users.map(user => user.id);
}
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialog(): void {
this.dialogRef.close(false);
}
public closeDialogWithSuccess(): void {
const exportData: ProjectGrantMembersCreateDialogExportType = {
userIds: this.userIds,
rolesKeyList: this.roleKeyList,
};
this.dialogRef.close(exportData);
}
public closeDialogWithSuccess(): void {
const exportData: ProjectGrantMembersCreateDialogExportType = {
userIds: this.userIds,
rolesKeyList: this.roleKeyList,
};
this.dialogRef.close(exportData);
}
}
console/src/app/pages/projects/owned-projects/project-grant-detail/project-grant-members-datasource.ts
+42 -44
View File
@@ -11,55 +11,53 @@ import { ManagementService } from 'src/app/services/mgmt.service';
* (including sorting, pagination, and filtering).
*/
export class ProjectGrantMembersDataSource extends DataSource<Member.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private mgmtService: ManagementService) {
super();
}
constructor(private service: ManagementService) {
super();
}
public loadGrantMembers(projectId: string, grantId: string, pageIndex: number,
pageSize: number): void {
const offset = pageIndex * pageSize;
public loadMembers(projectId: string, grantId: string, pageIndex: number, pageSize: number): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
this.loadingSubject.next(true);
from(this.mgmtService.listProjectGrantMembers(projectId,
grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.details?.totalResult || 0;
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
from(this.service.listProjectGrantMembers(projectId,
grantId, pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.details?.totalResult || 0;
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details?.viewTimestamp;
}
return resp.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<Member.AsObject[]> {
return this.membersSubject.asObservable();
}
/**
* 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<Member.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();
}
/**
* 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();
}
}
console/src/app/pages/projects/project-create/project-create.component.ts
+27 -28
View File
@@ -1,41 +1,40 @@
import { Location } from '@angular/common';
import { Component, OnInit } from '@angular/core';
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AddProjectRequest, AddProjectResponse } from 'src/app/proto/generated/zitadel/management_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-create',
templateUrl: './project-create.component.html',
styleUrls: ['./project-create.component.scss'],
selector: 'cnsl-project-create',
templateUrl: './project-create.component.html',
styleUrls: ['./project-create.component.scss'],
})
export class ProjectCreateComponent implements OnInit {
public project: AddProjectRequest.AsObject = new AddProjectRequest().toObject();
export class ProjectCreateComponent {
public project: AddProjectRequest.AsObject = new AddProjectRequest().toObject();
constructor(
private router: Router,
private toast: ToastService,
private mgmtService: ManagementService,
private _location: Location,
) { }
constructor(
private router: Router,
private toast: ToastService,
private mgmtService: ManagementService,
private _location: Location,
) { }
public createSteps: number = 1;
public currentCreateStep: number = 1;
public ngOnInit(): void { }
public createSteps: number = 1;
public currentCreateStep: number = 1;
public saveProject(): void {
this.mgmtService
.addProject(this.project)
.then((resp: AddProjectResponse.AsObject) => {
this.router.navigate(['projects', resp.id]);
})
.catch(error => {
this.toast.showError(error);
});
}
public saveProject(): void {
this.mgmtService
.addProject(this.project)
.then((resp: AddProjectResponse.AsObject) => {
this.router.navigate(['projects', resp.id]);
})
.catch(error => {
this.toast.showError(error);
});
}
public close(): void {
this._location.back();
}
public close(): void {
this._location.back();
}
}
console/src/app/pages/projects/project-grant-create/project-grant-create.component.html
+4 -4
View File
@@ -18,7 +18,7 @@
<input cnslInput #domain />
</cnsl-form-field>
<button [disabled]="domain.value.length == 0" color="primary" type="submit" class="domain-button"
<button [disabled]="domain.value.length === 0" color="primary" type="submit" class="domain-button"
mat-raised-button>
{{'PROJECT.GRANT.CREATE.SEL_ORG_BUTTON' | translate}}
</button>
@@ -32,9 +32,9 @@
<ng-container *ngIf="currentCreateStep === 2">
<h1>{{'PROJECT.GRANT.CREATE.SEL_ROLES' | translate}}</h1>
<app-card *ngIf="projectId">
<app-project-roles (changedSelection)="selectRoles($event)" [projectId]="projectId"></app-project-roles>
</app-card>
<cnsl-card *ngIf="projectId">
<cnsl-project-roles (changedSelection)="selectRoles($event)" [projectId]="projectId"></cnsl-project-roles>
</cnsl-card>
</ng-container>
<div class="btn-container">
console/src/app/pages/projects/project-grant-create/project-grant-create.component.ts
+63 -63
View File
@@ -9,79 +9,79 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-grant-create',
templateUrl: './project-grant-create.component.html',
styleUrls: ['./project-grant-create.component.scss'],
selector: 'cnsl-project-grant-create',
templateUrl: './project-grant-create.component.html',
styleUrls: ['./project-grant-create.component.scss'],
})
export class ProjectGrantCreateComponent implements OnInit, OnDestroy {
public org!: Org.AsObject;
public projectId: string = '';
public grantId: string = '';
public rolesKeyList: string[] = [];
public org!: Org.AsObject;
public projectId: string = '';
public grantId: string = '';
public rolesKeyList: string[] = [];
public STEPS: number = 2;
public currentCreateStep: number = 1;
public STEPS: number = 2;
public currentCreateStep: number = 1;
private routeSubscription: Subscription = new Subscription();
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private _location: Location,
) { }
private routeSubscription: Subscription = new Subscription();
constructor(
private route: ActivatedRoute,
private toast: ToastService,
private mgmtService: ManagementService,
private authService: GrpcAuthService,
private _location: Location,
) { }
public ngOnInit(): void {
this.routeSubscription = this.route.params.subscribe(params => {
this.projectId = params.projectid;
public ngOnInit(): void {
this.routeSubscription = this.route.params.subscribe(params => {
this.projectId = params.projectid;
});
}
public ngOnDestroy(): void {
this.routeSubscription.unsubscribe();
}
public searchOrg(domain: string): void {
this.mgmtService.getOrgByDomainGlobal(domain).then((ret) => {
if (ret.org) {
const tmp = ret.org;
this.authService.getActiveOrg().then((org) => {
if (tmp !== org) {
this.org = tmp;
}
});
}
this.org = ret.org;
}
}).catch(error => {
this.toast.showError(error);
});
}
public ngOnDestroy(): void {
this.routeSubscription.unsubscribe();
}
public close(): void {
this._location.back();
}
public searchOrg(domain: string): void {
this.mgmtService.getOrgByDomainGlobal(domain).then((ret) => {
if (ret.org) {
const tmp = ret.org;
this.authService.getActiveOrg().then((org) => {
if (tmp !== org) {
this.org = tmp;
}
});
this.org = ret.org;
}
}).catch(error => {
this.toast.showError(error);
});
}
public addGrant(): void {
this.mgmtService
.addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
.then(() => {
this.close();
})
.catch(error => {
this.toast.showError(error);
});
}
public close(): void {
this._location.back();
}
public selectRoles(roles: Role.AsObject[]): void {
this.rolesKeyList = roles.map(role => role.key);
}
public addGrant(): void {
this.mgmtService
.addProjectGrant(this.org.id, this.projectId, this.rolesKeyList)
.then(() => {
this.close();
})
.catch(error => {
this.toast.showError(error);
});
}
public next(): void {
this.currentCreateStep++;
}
public selectRoles(roles: Role.AsObject[]): void {
this.rolesKeyList = roles.map(role => role.key);
}
public next(): void {
this.currentCreateStep++;
}
public previous(): void {
this.currentCreateStep--;
}
public previous(): void {
this.currentCreateStep--;
}
}
console/src/app/pages/projects/project-role-create/project-role-create.component.html
+1 -1
View File
@@ -14,7 +14,7 @@
</button>
<form @list (ngSubmit)="addRole()">
<div @animate *ngFor="let formGroup of formArray.controls; index as i" class="content">
<ng-container [formGroup]="formGroup">
<ng-container [formGroup]="$any(formGroup)">
<cnsl-form-field appearance="outline" class="formfield">
<cnsl-label>{{ 'PROJECT.ROLE.KEY' | translate }}</cnsl-label>
<input cnslInput formControlName="key" />
console/src/app/pages/projects/project-role-create/project-role-create.component.ts
+80 -81
View File
@@ -1,7 +1,7 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { Location } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormArray, FormControl, FormGroup, Validators } from '@angular/forms';
import { FormArray, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { BulkAddProjectRolesRequest } from 'src/app/proto/generated/zitadel/management_pb';
@@ -9,98 +9,97 @@ import { ManagementService } from 'src/app/services/mgmt.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-role-create',
templateUrl: './project-role-create.component.html',
styleUrls: ['./project-role-create.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(80, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
selector: 'cnsl-project-role-create',
templateUrl: './project-role-create.component.html',
styleUrls: ['./project-role-create.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(80, animateChild()),
),
]),
]),
trigger('animate', [
transition(':enter', [
style({ opacity: 0, transform: 'translateY(-100%)' }),
animate('100ms', style({ opacity: 1, transform: 'translateY(0)' })),
]),
transition(':leave', [
style({ opacity: 1, transform: 'translateY(0)' }),
animate('100ms', style({ opacity: 0, transform: 'translateY(100%)' })),
]),
]),
],
})
export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
private subscription?: Subscription;
public projectId: string = '';
private subscription: Subscription = new Subscription();
public projectId: string = '';
public formArray!: FormArray;
public formGroup!: FormGroup;
public createSteps: number = 1;
public currentCreateStep: number = 1;
public formArray!: FormArray;
public formGroup: FormGroup = this.fb.group({
key: new FormControl('', [Validators.required]),
displayName: new FormControl(''),
group: new FormControl(''),
});
public createSteps: number = 1;
public currentCreateStep: number = 1;
constructor(
private router: Router,
private route: ActivatedRoute,
private toast: ToastService,
private mgmtService: ManagementService,
private _location: Location,
) {
this.formGroup = new FormGroup({
key: new FormControl('', [Validators.required]),
displayName: new FormControl(''),
group: new FormControl(''),
});
constructor(
private router: Router,
private route: ActivatedRoute,
private toast: ToastService,
private mgmtService: ManagementService,
private fb: FormBuilder,
private _location: Location,
) {
this.formArray = new FormArray([this.formGroup]);
}
this.formArray = new FormArray([this.formGroup]);
}
public addEntry(): void {
const newGroup = this.fb.group({
key: new FormControl('', [Validators.required]),
displayName: new FormControl(''),
group: new FormControl(''),
});
public addEntry(): void {
const newGroup = new FormGroup({
key: new FormControl('', [Validators.required]),
displayName: new FormControl(''),
group: new FormControl(''),
});
this.formArray.push(newGroup);
}
this.formArray.push(newGroup);
}
public removeEntry(index: number): void {
this.formArray.removeAt(index);
}
public removeEntry(index: number): void {
this.formArray.removeAt(index);
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(params => this.getData(params));
}
public ngOnDestroy(): void {
this.subscription.unsubscribe();
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
private getData({ projectid }: Params): void {
this.projectId = projectid;
}
private getData({ projectid }: Params): void {
this.projectId = projectid;
}
public addRole(): void {
const rolesToAdd: BulkAddProjectRolesRequest.Role[] = this.formArray.value.map((element: any) => {
const role = new BulkAddProjectRolesRequest.Role;
role.setKey(element.key);
role.setDisplayName(element.displayName);
role.setGroup(element.group);
return role;
});
public addRole(): void {
const rolesToAdd: BulkAddProjectRolesRequest.Role[] = this.formArray.value.map((element: any) => {
const role = new BulkAddProjectRolesRequest.Role;
role.setKey(element.key);
role.setDisplayName(element.displayName);
role.setGroup(element.group);
return role;
});
this.mgmtService.bulkAddProjectRoles(this.projectId, rolesToAdd).then(() => {
this.router.navigate(['projects', this.projectId]);
}).catch(error => {
this.toast.showError(error);
});
}
this.mgmtService.bulkAddProjectRoles(this.projectId, rolesToAdd).then(() => {
this.router.navigate(['projects', this.projectId]);
}).catch(error => {
this.toast.showError(error);
});
}
public close(): void {
this._location.back();
}
public close(): void {
this._location.back();
}
}