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

feat(console): org managers, refactor, bugfixes (#226)

Browse Source 
* resourceowner header, i18n

* password policy validators, roles required field

* use angular pattern instead of custom validator

* user detail fixes, mfa qr code, add org

* use mgmt for mfa list

* fetch owned projects

* search project

* seperate owned from granted projects

* lint

* fix granted project grid

* refactor project detail

* disable zitadel apps

* refactor project contributors

* changed i18n

* hide meta nav

* mobile meta layout

* refactor contributor name

* refactor org contributors

* org i18n, org member detail view
This commit is contained in:
Max Peintner
2020-06-16 14:52:07 +02:00
committed by GitHub
parent 7a6ca24625
commit f2cdae9ea3
95 changed files with 5019 additions and 3413 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/pages/apps/app-detail/app-detail.component.html
+2 -2
View File
@@ -86,7 +86,7 @@
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.REDIRECT' | translate }}</mat-label>
<mat-chip-list #chipRedirectList>
<mat-chip-list #chipRedirectList [disabled]="isZitadel">
<mat-chip *ngFor="let redirect of redirectUrisList" [selectable]="selectable"
(removed)="remove(redirect, RedirectType.REDIRECT)">
{{redirect}}
@@ -100,7 +100,7 @@
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'APP.OIDC.POSTLOGOUTREDIRECT' | translate }}</mat-label>
<mat-chip-list #chipPostRedirectList>
<mat-chip-list #chipPostRedirectList [disabled]="isZitadel">
<mat-chip *ngFor="let redirect of postLogoutRedirectUrisList" [selectable]="selectable"
(removed)="remove(redirect, RedirectType.POSTREDIRECT)">
{{redirect}}
console/src/app/pages/apps/app-detail/app-detail.component.ts
+17 -2
View File
@@ -17,6 +17,7 @@ import {
OIDCGrantType,
OIDCResponseType,
} from 'src/app/proto/generated/management_pb';
import { GrpcService } from 'src/app/services/grpc.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@@ -72,6 +73,8 @@ export class AppDetailComponent implements OnInit, OnDestroy {
public RedirectType: any = RedirectType;
public isZitadel: boolean = false;
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@@ -80,6 +83,7 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private fb: FormBuilder,
private _location: Location,
private dialog: MatDialog,
private grpcService: GrpcService,
) {
this.appNameForm = this.fb.group({
state: ['', []],
@@ -104,16 +108,27 @@ export class AppDetailComponent implements OnInit, OnDestroy {
private async getData({ projectid, id }: Params): Promise<void> {
this.projectId = projectid;
this.projectService.GetProjectById(this.projectId).then(project => {
this.isZitadel = project.toObject().name === 'Zitadel';
if (this.isZitadel) {
this.appNameForm.disable();
this.appForm.disable();
}
});
this.projectService.GetApplicationById(projectid, id).then(app => {
this.app = app.toObject();
this.appNameForm.patchValue(this.app);
if (this.app.state !== AppState.APPSTATE_ACTIVE) {
console.log(this.grpcService.clientid, this.app.oidcConfig?.clientId);
console.log(this.isZitadel);
if (this.app.state !== AppState.APPSTATE_ACTIVE || this.isZitadel) {
this.appNameForm.controls['name'].disable();
this.appForm.disable();
} else {
this.appNameForm.controls['name'].enable();
this.appForm.enable();
this.clientId?.disable();
}
if (this.app.oidcConfig?.redirectUrisList) {
this.redirectUrisList = this.app.oidcConfig.redirectUrisList;
console/src/app/pages/orgs/org-contributors/org-contributors.component.html
+25
View File
@@ -0,0 +1,25 @@
<div class="groups">
<span class="header">{{ 'PROJECT.MEMBER.TITLE' | translate }}</span>
<span class="sub-header">{{ 'PROJECT.MEMBER.TITLEDESC' | translate }}</span>
<div class="people">
<div class="img-list">
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async">
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<i class="avatar las la-user-circle"></i>
</div>
</ng-container>
</ng-container>
<ng-template #compact>
<div (click)="showDetail()" class="avatar-circle" matTooltip="Click to show detail">
<span>{{totalResult}}</span>
</div>
</ng-template>
<button class="add-img" (click)="openAddMember()" [disabled]="org?.state !== OrgState.ORGSTATE_ACTIVE"
mat-icon-button aria-label="Edit contributors">
<mat-icon>add</mat-icon>
</button>
</div>
</div>
</div>
console/src/app/pages/projects/project-contributors/project-contributors.component.scss → console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
View File
console/src/app/pages/orgs/org-contributors/org-contributors.component.spec.ts
+34
View File
@@ -0,0 +1,34 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OrgContributorsComponent } from './org-contributors.component';
describe('OrgContributorsComponent', () => {
let component: OrgContributorsComponent;
let fixture: ComponentFixture<OrgContributorsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgContributorsComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
MatSortModule,
MatTableModule,
],
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrgContributorsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should compile', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/orgs/org-contributors/org-contributors.component.ts
+93
View File
@@ -0,0 +1,93 @@
import { Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { Router } from '@angular/router';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { Org, OrgMember, OrgMemberView, OrgState, User } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
@Component({
selector: 'app-org-contributors',
templateUrl: './org-contributors.component.html',
styleUrls: ['./org-contributors.component.scss'],
})
export class OrgContributorsComponent implements OnInit {
@Input() public org!: Org.AsObject;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public totalResult: number = 0;
public membersSubject: BehaviorSubject<OrgMemberView.AsObject[]>
= new BehaviorSubject<OrgMemberView.AsObject[]>([]);
public OrgState: any = OrgState;
constructor(private orgService: OrgService, private dialog: MatDialog,
private toast: ToastService,
private router: Router) { }
public ngOnInit(): void {
this.loadMembers(0, 25, 'asc');
}
public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
console.log(members);
this.membersSubject.next(members);
});
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.ORG,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const roles: string[] = resp.roles;
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.orgService.AddMyOrgMember(user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
});
}
public showDetail(): void {
if (this.org?.state === OrgState.ORGSTATE_ACTIVE) {
this.router.navigate(['orgs', this.org.id, 'members']);
}
}
}
console/src/app/pages/orgs/org-contributors/org-contributors.module.ts
+42
View File
@@ -0,0 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { MemberCreateDialogModule } from '../../../modules/add-member-dialog/member-create-dialog.module';
import { OrgContributorsComponent } from './org-contributors.component';
@NgModule({
declarations: [OrgContributorsComponent],
imports: [
CommonModule,
FormsModule,
MemberCreateDialogModule,
HasRoleModule,
MatButtonModule,
MatDialogModule,
MatTableModule,
MatPaginatorModule,
MatIconModule,
RouterModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatTooltipModule,
TranslateModule,
],
exports: [
OrgContributorsComponent,
],
})
export class OrgContributorsModule { }
console/src/app/pages/orgs/org-detail/org-detail.component.html
+12 -15
View File
@@ -1,23 +1,13 @@
<app-meta-layout>
<div class="max-width-container">
<!-- {{ 'ORG_DETAIL.TITLE' | translate }} -->
<div class="enlarged-container">
<h1>{{org?.name}}</h1>
<p class="sub">{{'ORG_DETAIL.DESCRIPTION' | translate}}
</p>
<ng-template appHasRole [appHasRole]="['org.member.read']">
<h3>{{ 'ORG_DETAIL.MEMBER.TITLE' | translate }}</h3>
<app-org-members [orgId]="orgId"></app-org-members>
<ng-template appHasRole [appHasRole]="['policy.read']">
<app-policy-grid></app-policy-grid>
</ng-template>
</div>
<ng-template appHasRole [appHasRole]="['policy.read']">
<div class="enlarged-container">
<app-policy-grid></app-policy-grid>
</div>
</ng-template>
<metainfo class="side">
<div class="details">
<div class="row">
@@ -31,7 +21,14 @@
</div>
</div>
<p class="side-section">{{ 'CHANGES.ORG.TITLE' | translate }}</p>
<app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<app-org-contributors *ngIf="org" [org]="org">
</app-org-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.ORG.TITLE' | translate }}" class="flex-col">
<app-changes *ngIf="org" [changeType]="ChangeType.ORG" [id]="org.id"></app-changes>
</mat-tab>
</mat-tab-group>
</metainfo>
</app-meta-layout>
console/src/app/pages/orgs/org-grid/org-grid.component.html
+7
View File
@@ -44,5 +44,12 @@
</ng-template>
</mat-menu>
</div>
<ng-template appHasRole [appHasRole]="['iam.write']">
<div class="card add-org-button" [routerLink]="[ '/orgs/create' ]">
<mat-icon class="icon">add</mat-icon>
<span>Add new organization</span>
</div>
</ng-template>
</div>
</div>
console/src/app/pages/orgs/org-grid/org-grid.component.scss
+37 -1
View File
@@ -53,7 +53,7 @@ h1 {
}
&.active {
border-color: #db4c69;
border: 2px solid #db4c69;
}
.selection-icon {
@@ -186,4 +186,40 @@ h1 {
}
}
}
.add-org-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: 0.5rem;
margin: 1rem;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
}
}
console/src/app/pages/orgs/org-members/org-members-datasource.ts
+23 -17
View File
@@ -1,17 +1,17 @@
import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { OrgMember } from 'src/app/proto/generated/management_pb';
import { ProjectMember, ProjectMemberSearchResponse } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
/**
* Data source for the OrgMembers view. This class should
* Data source for the ProjectMembers view. This class should
* encapsulate all logic for fetching and manipulating the displayed data
* (including sorting, pagination, and filtering).
*/
export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject> {
public totalResult: number = 0;
public membersSubject: BehaviorSubject<OrgMember.AsObject[]> = new BehaviorSubject<OrgMember.AsObject[]>([]);
public membersSubject: BehaviorSubject<ProjectMember.AsObject[]> = new BehaviorSubject<ProjectMember.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -19,21 +19,27 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
super();
}
public loadMembers(pageIndex: number, pageSize: number, sortDirection?: string): void {
public loadMembers(
pageIndex: number, pageSize: number, grantId?: string, sortDirection?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
from(this.orgService.SearchMyOrgMembers(pageSize, offset)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
console.log(members);
this.membersSubject.next(members);
});
// TODO
const promise: Promise<ProjectMemberSearchResponse> =
this.orgService.SearchMyOrgMembers(pageSize, offset);
if (promise) {
from(promise).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
console.log(this.totalResult);
return resp.toObject().resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
}
@@ -42,7 +48,7 @@ export class OrgMembersDataSource extends DataSource<OrgMember.AsObject> {
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<OrgMember.AsObject[]> {
public connect(): Observable<ProjectMember.AsObject[]> {
return this.membersSubject.asObservable();
}
console/src/app/pages/orgs/org-members/org-members-routing.module.ts
+18
View File
@@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrgMembersComponent } from './org-members.component';
const routes: Routes = [
{
path: '',
component: OrgMembersComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class OrgMembersRoutingModule { }
console/src/app/pages/orgs/org-members/org-members.component.html
+103 -85
View File
@@ -1,87 +1,105 @@
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="org" [routerLink]="[ '/orgs', org.id]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{org?.name}} {{ 'ORG.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'ORG.MEMBER.DESCRIPTION' | translate }}</p>
</div>
<div class="table-header-row" *ngIf="org">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.membersSubject.value.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete:'+org.id,'org.member.delete']">
<button (click)="removeProjectMemberSelection()"
matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<mat-icon>remove_circle</mat-icon>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write:'+org.id,'org.member.write']">
<a color="primary" [disabled]="disabled" class="add-button" (click)="openAddMember()"
color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements"
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.LASTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.EMAIL' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.ROLES' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;">
</tr>
</table>
<mat-paginator class="background-style" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
</div>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['org.member.delete']">
<button [disabled]="disabled" matTooltip="{{'ORG_DETAIL.TABLE.DELETE' | translate}}" class="icon-button"
(click)="removeSelectedOrgMembers()" mat-icon-button *ngIf="selection.hasValue()">
<mat-icon>delete_outline</mat-icon>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['org.member.write']">
<button [disabled]="disabled" color="primary" class="add-button" mat-raised-button (click)="openAddMember()">
<mat-icon>add</mat-icon>{{ 'ORG_DETAIL.MEMBER.ADD' | translate }}
</button>
</ng-template>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="dataSource.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="background-style full-width-table" aria-label="Elements" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.FIRSTNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.firstName}} </td>
</ng-container>
<ng-container matColumnDef="lastname">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.LASTNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.lastName}} </td>
</ng-container>
<ng-container matColumnDef="username">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.USERNAME' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.userName}} </td>
</ng-container>
<ng-container matColumnDef="email">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.EMAIL' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
{{member.email}}
</td>
</ng-container>
<ng-container matColumnDef="roles">
<th mat-header-cell *matHeaderCellDef> {{ 'ORG_DETAIL.MEMBER.ROLES' | translate }} </th>
<td [routerLink]="['/user', member.userId]" class="pointer" mat-cell *matCellDef="let member">
<span class="role app-label"
*ngFor="let role of member.rolesList; index as i">{{'ROLES.'+role | translate }}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator class="background-style" #paginator [length]="dataSource.totalResult" [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>
console/src/app/pages/orgs/org-members/org-members.component.scss
+70 -29
View File
@@ -1,36 +1,74 @@
.container {
display: flex;
padding-bottom: 3rem;
h1 {
font-family: ailerons;
.left {
width: 100px;
display: flex;
padding: 1rem;
justify-content: center;
a {
margin-top: .2rem;
}
}
.right {
flex: 1;
padding-top: 1rem;
.head {
display: flex;
align-items: center;
border-bottom: 1px solid #ffffff20;
margin-bottom: 2rem;
flex-wrap: wrap;
a {
display: block;
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
}
}
}
}
.table-header-row {
display: flex;
align-items: center;
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.fill-space {
flex: 1;
}
.icon-button {
margin-right: .5rem;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
@@ -41,12 +79,12 @@ h1 {
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
td, th {
padding: 0 1rem;
padding: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
@@ -57,8 +95,11 @@ h1 {
}
}
.action {
width: 40px;
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
@@ -79,4 +120,4 @@ h1 {
.pointer {
outline: none;
cursor: pointer;
}
}
console/src/app/pages/orgs/org-members/org-members.component.spec.ts
+6 -6
View File
@@ -4,15 +4,15 @@ import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { OrgMembersComponent } from './org-members.component';
import { ProjectMembersComponent } from './project-members.component';
describe('OrgMembersComponent', () => {
let component: OrgMembersComponent;
let fixture: ComponentFixture<OrgMembersComponent>;
describe('ProjectMembersComponent', () => {
let component: ProjectMembersComponent;
let fixture: ComponentFixture<ProjectMembersComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OrgMembersComponent],
declarations: [ProjectMembersComponent],
imports: [
NoopAnimationsModule,
MatPaginatorModule,
@@ -23,7 +23,7 @@ describe('OrgMembersComponent', () => {
}));
beforeEach(() => {
fixture = TestBed.createComponent(OrgMembersComponent);
fixture = TestBed.createComponent(ProjectMembersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
console/src/app/pages/orgs/org-members/org-members.component.ts
+46 -35
View File
@@ -1,44 +1,46 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { OrgMember, User } from 'src/app/proto/generated/management_pb';
import { CreationType, MemberCreateDialogComponent } from 'src/app/modules/add-member-dialog/member-create-dialog.component';
import { User } from 'src/app/proto/generated/auth_pb';
import { Org, ProjectMember, ProjectType } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
import { OrgMembersDataSource } from './org-members-datasource';
import { ProjectMembersDataSource } from './org-members-datasource';
@Component({
selector: 'app-org-members',
templateUrl: './org-members.component.html',
styleUrls: ['./org-members.component.scss'],
})
export class OrgMembersComponent implements AfterViewInit, OnInit {
@Input() public orgId: string = '';
@Input() public disabled: boolean = false;
export class OrgMembersComponent implements AfterViewInit {
public org!: Org.AsObject;
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<OrgMember.AsObject>;
@Output() public changedSelection: EventEmitter<Array<OrgMember.AsObject>> = new EventEmitter();
public dataSource!: OrgMembersDataSource;
public selection: SelectionModel<OrgMember.AsObject> = new SelectionModel<OrgMember.AsObject>(true, []);
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
constructor(private orgService: OrgService, private dialog: MatDialog, private toast: ToastService) { }
public ngOnInit(): void {
this.dataSource = new OrgMembersDataSource(this.orgService);
this.dataSource.loadMembers(0, 25, 'asc');
this.selection.changed.subscribe(change => {
console.log(change);
// this.changedSelection.emit(change)
constructor(private orgService: OrgService,
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.orgService.GetOrgById(params.orgid).then(org => {
this.org = org.toObject();
console.log(this.org);
this.dataSource = new ProjectMembersDataSource(this.orgService);
this.dataSource.loadMembers(0, 25, 'asc');
});
});
}
@@ -48,6 +50,7 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
tap(() => this.loadMembersPage()),
)
.subscribe();
}
private loadMembersPage(): void {
@@ -57,6 +60,24 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
);
}
public removeProjectMemberSelection(): void {
Promise.all(this.selection.selected.map(member => {
return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
public removeMember(member: ProjectMember.AsObject): void {
this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Member removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.membersSubject.value.length;
@@ -66,11 +87,11 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.membersSubject.value.forEach((row: OrgMember.AsObject) => this.selection.select(row));
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.ORG,
},
@@ -94,14 +115,4 @@ export class OrgMembersComponent implements AfterViewInit, OnInit {
}
});
}
public removeSelectedOrgMembers(): void {
Promise.all(this.selection.selected.map(member => {
return this.orgService.RemoveMyOrgMember(member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
}
console/src/app/pages/orgs/org-members/org-members.module.ts
+15 -15
View File
@@ -1,42 +1,42 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatDialogModule } from '@angular/material/dialog';
import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { ProjectMemberCreateDialogModule } from '../../../modules/add-member-dialog/project-member-create-dialog.module';
import { OrgMembersRoutingModule } from './org-members-routing.module';
import { OrgMembersComponent } from './org-members.component';
@NgModule({
declarations: [OrgMembersComponent],
imports: [
OrgMembersRoutingModule,
CommonModule,
FormsModule,
ProjectMemberCreateDialogModule,
HasRoleModule,
MatAutocompleteModule,
MatChipsModule,
MatButtonModule,
MatDialogModule,
HasRoleModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatIconModule,
RouterModule,
MatProgressSpinnerModule,
MatCheckboxModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
],
exports: [
OrgMembersComponent,
],
})
export class OrgMembersModule { }
console/src/app/pages/orgs/orgs-routing.module.ts
+4
View File
@@ -32,6 +32,10 @@ const routes: Routes = [
},
loadChildren: () => import('./password-policy/password-policy.module').then(m => m.PasswordPolicyModule),
},
{
path: ':orgid/members',
loadChildren: () => import('./org-members/org-members.module').then(m => m.OrgMembersModule),
},
{
path: ':id',
component: OrgDetailComponent,
console/src/app/pages/orgs/orgs.module.ts
+2 -2
View File
@@ -17,9 +17,9 @@ import { CardModule } from 'src/app/modules/card/card.module';
import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module';
import { ChangesModule } from '../../modules/changes/changes.module';
import { OrgContributorsModule } from './org-contributors/org-contributors.module';
import { OrgDetailComponent } from './org-detail/org-detail.component';
import { OrgGridComponent } from './org-grid/org-grid.component';
import { OrgMembersModule } from './org-members/org-members.module';
import { OrgsRoutingModule } from './orgs-routing.module';
import { PolicyGridComponent } from './policy-grid/policy-grid.component';
@@ -28,7 +28,7 @@ import { PolicyGridComponent } from './policy-grid/policy-grid.component';
imports: [
CommonModule,
OrgsRoutingModule,
OrgMembersModule,
OrgContributorsModule,
FormsModule,
HasRoleModule,
MatFormFieldModule,
console/src/app/pages/project-role-create/project-role-create.component.html
+2 -6
View File
@@ -18,12 +18,8 @@
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.KEY' | translate }}</mat-label>
<input matInput formControlName="key" />
<!-- <mat-error *ngIf="name?.errors?.required">{{'ERRORS.REQUIRED' | translate}}</mat-error> -->
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.NAME' | translate }}</mat-label>
<input matInput formControlName="name" />
<!-- <mat-error *ngIf="name?.errors?.required">{{'ERRORS.REQUIRED' | translate}}</mat-error> -->
<mat-error *ngIf="formGroup.get('key')?.errors?.required">{{'ERRORS.REQUIRED' | translate}}
</mat-error>
</mat-form-field>
<mat-form-field appearance="outline" class="formfield">
<mat-label>{{ 'PROJECT.ROLE.DISPLAY_NAME' | translate }}</mat-label>
console/src/app/pages/project-role-create/project-role-create.component.ts
+2 -3
View File
@@ -50,14 +50,13 @@ export class ProjectRoleCreateComponent implements OnInit, OnDestroy {
private fb: FormBuilder,
) {
this.formGroup = new FormGroup({
key: new FormControl(''),
name: new FormControl(''),
key: new FormControl('', [Validators.required]),
// name: new FormControl(''),
displayName: new FormControl(''),
group: new FormControl('', [Validators.required]),
});
this.formArray = new FormArray([this.formGroup]);
}
public addEntry(): void {
console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.html
+4 -17
View File
@@ -4,30 +4,17 @@
<a [routerLink]="[ '/projects' ]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.projectName}}</h1>
<div class="full-width">
<p class="desc">{{ 'PROJECT.PAGES.DESCRIPTION' | translate }}</p>
</div>
</div>
<!-- <ng-template appHasRole [appHasRole]="['project.app.read:' + project?.id, 'project.app.read']">
<app-project-application-grid *ngIf="grid" [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
(changeView)="grid = false" [projectId]="projectId"></app-project-application-grid>
<app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<card-actions class="card-actions">
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</card-actions>
<app-project-applications [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[projectId]="projectId"></app-project-applications>
</app-card>
</ng-template> -->
<app-card>
<app-project-grant-members *ngIf="project && project.id && project.grantId"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" [project]="project">
<app-project-grant-members *ngIf="project && project.projectId && project.id"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
[project]="project">
</app-project-grant-members>
</app-card>
</div>
console/src/app/pages/projects/granted-project-detail/granted-project-detail.component.ts
+3 -3
View File
@@ -9,7 +9,7 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Application,
ApplicationSearchResponse,
GrantedProject,
ProjectGrantView,
ProjectMember,
ProjectMemberSearchResponse,
ProjectRole,
@@ -29,7 +29,7 @@ import { ToastService } from 'src/app/services/toast.service';
export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
public projectId: string = '';
public grantId: string = '';
public project!: GrantedProject.AsObject;
public project!: ProjectGrantView.AsObject;
public pageSizeRoles: number = 10;
public roleDataSource: MatTableDataSource<ProjectRole.AsObject> = new MatTableDataSource<ProjectRole.AsObject>();
@@ -82,7 +82,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
this.grantId = grantId;
if (this.projectId && this.grantId) {
this.projectService.GetGrantedProjectGrantByID(this.projectId, this.grantId).then(proj => {
this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
this.project = proj.toObject();
console.log(this.project);
this.isZitadel$ = from(this.projectService.SearchApplications(this.project.id, 100, 0).then(appsResp => {
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.html
+58
View File
@@ -0,0 +1,58 @@
<div class="view-toggle">
<div class="anim-list" @list *ngIf="selection.selected.length > 0">
<!-- <ng-template appHasRole [appHasRole]="['project.write']">
<button (click)="deactivateProjects(selection.selected)" @animate
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="left-button" mat-icon-button>
<i class="las la-toggle-off"></i>
</button>
<button @animate (click)="reactivateProjects(selection.selected)" class="left-button"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" mat-icon-button>
<i class="las la-toggle-on"></i>
</button>
</ng-template> -->
</div>
<button [disabled]="selection.selected.length > 0" (click)="changedView.emit(true)" mat-icon-button>
<i class="show list view las la-th-list"></i>
</button>
</div>
<div class="container">
<mat-progress-bar *ngIf="loading" class="spinner" color="accent" mode="indeterminate"></mat-progress-bar>
<div class="item card" *ngFor="let item of items; index as i" (click)="selectItem(item, $event)"
[ngClass]="{ selected: selection.isSelected(item), inactive: item.state !== ProjectState.PROJECTSTATE_ACTIVE}">
<mat-icon matTooltip="select item" (click)="selection.toggle(item)" class="selection-icon">
check_circle</mat-icon>
<div class="text-part">
<span *ngIf="item.changeDate" class="top">last modified on
{{
dateFromTimestamp(item.changeDate) | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="name" *ngIf="item.projectName">{{ item.projectName }}</span>
<span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
<span class="description">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+ProjectType.PROJECTTYPE_GRANTED | translate}}</span>
<span *ngIf="item.changeDate" class="created">created on
{{
dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
}}</span>
<span class="fill-space"></span>
<div class="icons">
<mat-icon class="icon">apps</mat-icon>
</div>
</div>
<button [matMenuTriggerFor]="editMenu" class="edit-button" mat-icon-button>
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #editMenu="matMenu">
<ng-template matMenuContent>
<button (click)="selectItem(item)" mat-menu-item>
{{'ACTIONS.VIEW' | translate}}
</button>
<button (click)="selection.toggle(item)" mat-menu-item>
{{'ACTIONS.INFO' | translate}}
</button>
</ng-template>
</mat-menu>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
</div>
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.scss
+219
View File
@@ -0,0 +1,219 @@
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
padding-bottom: .5rem;
border-bottom: 1px solid #2d2e30;
.anim-list {
display: flex;
justify-content: flex-end;
align-items: center;
}
button {
&.left-button {
margin-right: 1rem;
}
}
}
.spinner {
margin: 1rem;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
margin: 1rem;
flex-basis: 250px;
display: flex;
text-decoration: none;
cursor: pointer;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 1rem;
border-radius: 0.5rem;
box-sizing: border-box;
min-height: 166px;
&.inactive {
color: #81868a;
}
.selection-icon {
opacity: 0;
position: absolute;
top: -12px;
left: -12px;
user-select: none;
&:hover {
color: white;
}
}
img {
height: 50px;
width: 50px;
margin: 1rem;
}
.text-part {
flex: 1;
display: flex;
flex-direction: column;
min-height: 70px;
padding: 0.5rem 0;
.top {
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #81868a;
}
.name {
margin-top: 1rem;
font-size: 1.2rem;
margin-bottom: 0.5rem;
font-family: 'Rubik', sans-serif;
}
.description {
font-size: 0.8rem;
}
.created {
font-size: 0.8rem;
color: #81868a;
}
.organization {
display: flex;
align-items: center;
margin-top: 1rem;
.org_avatar {
height: 25px;
width: 25px;
border-radius: 50%;
margin: 0;
margin-right: 1rem;
}
}
.fill-space {
flex: 1;
}
.icons {
margin-top: 1rem;
transition: all 0.3s;
opacity: 0;
.icon {
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #81868a;
}
}
span {
margin: 2px 0;
}
}
.edit-button {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
margin-bottom: 0.25rem;
}
&:hover {
.selection-icon {
opacity: 1;
}
.text-part {
.icons {
opacity: 1;
}
}
}
&.selected {
.text-part {
.icons {
opacity: 1;
}
}
.selection-icon {
opacity: 1;
}
.icon {
opacity: 1;
}
}
}
.add-project-button {
z-index: 100;
flex-basis: 250px;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 166px;
border-radius: 0.5rem;
margin: 1rem;
box-sizing: border-box;
font-family: 'Rubik', sans-serif;
.icon {
display: flex;
justify-content: center;
align-self: center;
margin-bottom: 1rem;
height: 2.5rem;
line-height: 2.5rem;
font-size: 2.5rem;
}
&:hover {
background-color: #ffffff25;
.icon,
span {
&.disabled {
color: gray;
}
}
}
}
}
.n-items {
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
}
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GrantedProjectGridComponent } from './granted-project-grid.component';
describe('GridComponent', () => {
let component: GrantedProjectGridComponent;
let fixture: ComponentFixture<GrantedProjectGridComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GrantedProjectGridComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GrantedProjectGridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/granted-project-grid/granted-project-grid.component.ts
+65
View File
@@ -0,0 +1,65 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { ProjectGrantView, ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-granted-project-grid',
templateUrl: './granted-project-grid.component.html',
styleUrls: ['./granted-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
query('@animate',
stagger(100, 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 GrantedProjectGridComponent {
@Input() items: Array<ProjectGrantView.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
public selectedIndex: number = -1;
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
public selectItem(item: ProjectGrantView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
} else if (!event) {
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
}
}
public addItem(): void {
this.newClicked.emit(true);
}
public dateFromTimestamp(date: Timestamp.AsObject): any {
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
return ts;
}
}
console/src/app/pages/projects/granted-project-list/granted-project-list.component.html
+112
View File
@@ -0,0 +1,112 @@
<app-granted-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
[items]="grantedProjectList" (newClicked)="addProject()">
</app-granted-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && grantedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </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>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | 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">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
</div>
</div>
console/src/app/pages/projects/granted-project-list/granted-project-list.component.scss
+98
View File
@@ -0,0 +1,98 @@
.content {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0 -.5rem;
mat-form-field {
flex: 1 1 33%;
margin: 0 .5rem;
}
}
.view-toggle {
width: 100%;
display: flex;
justify-content: flex-end;
button {
display: block;
border-radius: .5rem;
}
}
.table-header-row {
display: flex;
align-items: center;
.col {
display: flex;
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
}
.count {
font-size: 2rem;
}
}
.fill-space {
flex: 1;
}
.action-btns {
display: flex;
align-items: center;
}
.icon-button {
margin-right: .5rem;
}
.add-button {
border-radius: .5rem;
}
}
.table-wrapper {
overflow: auto;
.spinner-container {
display: flex;
align-items: center;
justify-content: center;
}
table, mat-paginator {
width: 100%;
background-color: #2d2e30;
td, th {
&:first-child {
padding-left: 0;
padding-right: 1rem;
}
&:last-child {
padding-right: 0;
}
}
.data-row {
cursor: pointer;
&:hover {
background-color: #ffffff05;
}
}
.selection {
width: 50px;
max-width: 50px;
}
}
}
tr {
outline: none;
}
console/src/app/pages/projects/granted-project-list/granted-project-list.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GrantedProjectListComponent } from './granted-project-list.component';
describe('ProjectListComponent', () => {
let component: GrantedProjectListComponent;
let fixture: ComponentFixture<GrantedProjectListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GrantedProjectListComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GrantedProjectListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/project-list/project-list.component.ts → console/src/app/pages/projects/granted-project-list/granted-project-list.component.ts
+16 -15
View File
@@ -3,18 +3,18 @@ import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { GrantedProject, Project } from 'src/app/proto/generated/management_pb';
import { ProjectGrantView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-list',
templateUrl: './project-list.component.html',
styleUrls: ['./project-list.component.scss'],
selector: 'app-granted-project-list',
templateUrl: './granted-project-list.component.html',
styleUrls: ['./granted-project-list.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
@@ -35,12 +35,15 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class ProjectListComponent implements OnInit, OnDestroy {
export class GrantedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public dataSource: MatTableDataSource<GrantedProject.AsObject> = new MatTableDataSource<GrantedProject.AsObject>();
public projectList: GrantedProject.AsObject[] = [];
public dataSource: MatTableDataSource<ProjectGrantView.AsObject> =
new MatTableDataSource<ProjectGrantView.AsObject>();
public grantedProjectList: ProjectGrantView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'type', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<Project.AsObject> = new SelectionModel<Project.AsObject>(true, []);
public selection: SelectionModel<ProjectGrantView.AsObject> = new SelectionModel<ProjectGrantView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
@@ -49,13 +52,12 @@ export class ProjectListComponent implements OnInit, OnDestroy {
constructor(private router: Router,
public translate: TranslateService,
private route: ActivatedRoute,
private projectService: ProjectService,
private toast: ToastService,
) { }
public ngOnInit(): void {
this.subscription = this.route.params.subscribe(() => this.getData(10, 0));
this.getData(10, 0);
}
public ngOnDestroy(): void {
@@ -83,14 +85,13 @@ export class ProjectListComponent implements OnInit, OnDestroy {
}
private async getData(limit: number, offset: number): Promise<void> {
console.log('getprojects');
this.loadingSubject.next(true);
this.projectService.SearchGrantedProjects(limit, offset).then(res => {
this.projectList = res.toObject().resultList;
this.grantedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
this.dataSource.data = this.projectList;
this.dataSource.data = this.grantedProjectList;
this.loadingSubject.next(false);
console.log(this.projectList);
console.log(this.grantedProjectList);
}).catch(error => {
console.error(error);
this.toast.showError(error.message);
console/src/app/pages/projects/project-contributors/project-contributors.component.html → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.html
+1 -6
View File
@@ -5,15 +5,10 @@
<div class="img-list">
<ng-container *ngIf="totalResult < 10; else compact">
<ng-container *ngFor="let member of membersSubject | async">
<!-- <img (click)="showDetail()" *ngIf="member.imageURL; else render" class="avatar-img"
[src]="member.imageURL" matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}"
alt="editor avatar" />
<ng-template #render> -->
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<mat-icon>face</mat-icon>
<i class="avatar las la-user-circle"></i>
</div>
<!-- </ng-template> -->
</ng-container>
</ng-container>
<ng-template #compact>
console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.scss
+72
View File
@@ -0,0 +1,72 @@
.groups {
padding-top: 1rem;
.header {
display: block;
margin-bottom: 1rem;
font-weight: 400;
}
.sub-header {
font-size: .8rem;
color: #81868a;
}
.people {
display: flex;
align-items: center;
flex-wrap: wrap;
margin-bottom: 1rem;
.owner {
margin-right: 1rem;
}
.img-list {
width: 100%;
margin-top: 0.5rem;
margin-left: 1rem;
display: flex;
align-items: center;
.avatar-img, .avatar-circle {
float: left;
margin: 0 8px 0 -15px;
height: 32px;
width: 32px;
border-radius: 50%;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.add-img {
float: left;
margin: 0 8px 0 -15px;
}
.avatar-img {
&:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
height: 32px;
width: 32px;
}
}
.avatar-circle {
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-color: indianred;
}
.margin-neg {
margin-left: -1rem;
}
}
}
}
console/src/app/pages/projects/project-contributors/project-contributors.component.spec.ts → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.spec.ts
+5 -5
View File
@@ -1,20 +1,20 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectContributorsComponent } from './project-contributors.component';
import { OwnedProjectContributorsComponent } from './owned-project-contributors.component';
describe('ProjectContributorsComponent', () => {
let component: ProjectContributorsComponent;
let fixture: ComponentFixture<ProjectContributorsComponent>;
let component: OwnedProjectContributorsComponent;
let fixture: ComponentFixture<OwnedProjectContributorsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectContributorsComponent],
declarations: [OwnedProjectContributorsComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectContributorsComponent);
fixture = TestBed.createComponent(OwnedProjectContributorsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
console/src/app/pages/projects/project-contributors/project-contributors.component.ts → console/src/app/pages/projects/owned-project-contributors/owned-project-contributors.component.ts
+16 -17
View File
@@ -5,27 +5,27 @@ import { BehaviorSubject, from, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { User } from 'src/app/proto/generated/auth_pb';
import {
GrantedProject,
ProjectMemberSearchResponse,
ProjectMemberView,
ProjectState,
ProjectType,
ProjectView,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
@Component({
selector: 'app-project-contributors',
templateUrl: './project-contributors.component.html',
styleUrls: ['./project-contributors.component.scss'],
selector: 'app-owned-project-contributors',
templateUrl: './owned-project-contributors.component.html',
styleUrls: ['./owned-project-contributors.component.scss'],
})
export class ProjectContributorsComponent implements OnInit {
@Input() public project!: GrantedProject.AsObject;
export class OwnedProjectContributorsComponent implements OnInit {
@Input() public project!: ProjectView.AsObject;
@Input() public projectType!: ProjectType;
@Input() public disabled: boolean = false;
@@ -45,9 +45,10 @@ export class ProjectContributorsComponent implements OnInit {
console.log('project grant members');
const promise: Promise<ProjectMemberSearchResponse> | undefined =
this.projectType === ProjectType.PROJECTTYPE_OWNED ?
this.projectService.SearchProjectMembers(this.project.id, 100, 0) :
this.projectService.SearchProjectMembers(this.project.projectId, 100, 0) :
this.projectType === ProjectType.PROJECTTYPE_GRANTED ?
this.projectService.SearchProjectGrantMembers(this.project.id, this.project.grantId, 100, 0) : undefined;
this.projectService.SearchProjectGrantMembers(this.project.projectId,
this.project.projectId, 100, 0) : undefined;
if (promise) {
from(promise).pipe(
map(resp => {
@@ -64,12 +65,10 @@ export class ProjectContributorsComponent implements OnInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: this.project.type ===
ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
projectId: this.project.id,
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.projectId,
},
width: '400px',
});
@@ -81,7 +80,7 @@ export class ProjectContributorsComponent implements OnInit {
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.projectService.AddProjectMember(this.project.id, user.id, roles);
return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
@@ -94,7 +93,7 @@ export class ProjectContributorsComponent implements OnInit {
public showDetail(): void {
if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
this.router.navigate(['projects', this.project.id, 'members']);
this.router.navigate(['projects', this.project.projectId, 'members']);
}
}
}
console/src/app/pages/projects/project-detail/project-detail.component.html → console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.html
+11 -10
View File
@@ -6,11 +6,11 @@
</a>
<h1>{{ 'PROJECT.PAGES.TITLE' | translate }} {{project?.name}}</h1>
<ng-template appHasRole [appHasRole]="['project.write:'+projectId, 'project.write']">
<!-- <button *ngIf="project?.type == ProjectType.PROJECTTYPE_OWNED" mat-icon-button
(click)="editstate = !editstate" aria-label="Edit project name">
<button mat-icon-button (click)="editstate = !editstate" aria-label="Edit project name"
*ngIf="(isZitadel$ | async) === false">
<mat-icon *ngIf="!editstate">edit</mat-icon>
<mat-icon *ngIf="editstate">close</mat-icon>
</button> -->
</button>
</ng-template>
<div class="full-width">
@@ -23,10 +23,10 @@
<button class="icon-button" *ngIf="editstate" mat-icon-button (click)="updateName()">
<mat-icon>check</mat-icon>
</button>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="accent" [disabled]="(isZitadel$ | async)"
*ngIf="project?.state === ProjectState.PROJECTSTATE_ACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_INACTIVE)">{{'PROJECT.TABLE.DEACTIVATE' | translate}}</button>
<button mat-stroked-button color="accent"
<button mat-stroked-button color="accent" [disabled]="(isZitadel$ | async)"
*ngIf="project?.state === ProjectState.PROJECTSTATE_INACTIVE" class="second"
(click)="changeState(ProjectState.PROJECTSTATE_ACTIVE)">{{'PROJECT.TABLE.ACTIVATE' | translate}}</button>
</ng-container>
@@ -38,15 +38,16 @@
<ng-container *ngIf="project">
<ng-template appHasRole [appHasRole]="['project.app.read:' + project.id, 'project.app.read']">
<app-project-application-grid *ngIf="grid"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE" (changeView)="grid = false"
[projectId]="projectId"></app-project-application-grid>
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
(changeView)="grid = false" [projectId]="projectId"></app-project-application-grid>
<app-card *ngIf="!grid" title="{{ 'PROJECT.APP.TITLE' | translate }}">
<card-actions class="card-actions">
<button mat-icon-button (click)="grid = true">
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</card-actions>
<app-project-applications [disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
<app-project-applications
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || (isZitadel$ | async)"
[projectId]="projectId"></app-project-applications>
</app-card>
</ng-template>
@@ -87,10 +88,10 @@
<mat-tab-group mat-stretch-tabs class="tab-group" disablePagination="true">
<mat-tab label="Details">
<app-project-contributors *ngIf="project"
<app-owned-project-contributors *ngIf="project"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE"
[projectType]="ProjectType.PROJECTTYPE_OWNED" [project]="project">
</app-project-contributors>
</app-owned-project-contributors>
</mat-tab>
<mat-tab label="{{ 'CHANGES.PROJECT.TITLE' | translate }}" class="flex-col">
<app-changes *ngIf="project" [changeType]="ChangeType.PROJECT" [id]="project.id"></app-changes>
console/src/app/pages/projects/project-detail/project-detail.component.scss → console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.scss
View File
console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.spec.ts
+26
View File
@@ -0,0 +1,26 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OwnedProjectDetailComponent } from './owned-project-detail.component';
describe('ProjectDetailComponent', () => {
let component: OwnedProjectDetailComponent;
let fixture: ComponentFixture<OwnedProjectDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OwnedProjectDetailComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OwnedProjectDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/project-detail/project-detail.component.ts → console/src/app/pages/projects/owned-project-detail/owned-project-detail.component.ts
+6 -6
View File
@@ -9,7 +9,6 @@ import { ChangeType } from 'src/app/modules/changes/changes.component';
import {
Application,
ApplicationSearchResponse,
GrantedProject,
Project,
ProjectMember,
ProjectMemberSearchResponse,
@@ -23,14 +22,14 @@ import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-detail',
templateUrl: './project-detail.component.html',
styleUrls: ['./project-detail.component.scss'],
selector: 'app-owned-project-detail',
templateUrl: './owned-project-detail.component.html',
styleUrls: ['./owned-project-detail.component.scss'],
})
export class ProjectDetailComponent implements OnInit, OnDestroy {
export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
public projectId: string = '';
public project!: Project.AsObject | GrantedProject.AsObject;
public project!: Project.AsObject;
public pageSizeRoles: number = 10;
public roleDataSource: MatTableDataSource<ProjectRole.AsObject> = new MatTableDataSource<ProjectRole.AsObject>();
@@ -84,6 +83,7 @@ export class ProjectDetailComponent implements OnInit, OnDestroy {
if (this.projectId) {
this.projectService.GetProjectById(id).then(proj => {
this.project = proj.toObject();
console.log(this.project);
this.isZitadel$ = from(this.projectService.SearchApplications(this.project.id, 100, 0).then(appsResp => {
const ret = appsResp.toObject().resultList
.filter(app => app.oidcConfig?.clientId === this.grpcService.clientid).length > 0;
console/src/app/pages/projects/project-grid/project-grid.component.html → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.html
+5 -2
View File
@@ -29,8 +29,8 @@
}}</span>
<span class="name" *ngIf="item.name">{{ item.name }}</span>
<span class="description" *ngIf="item.state">{{'PROJECT.STATE.'+item.state | translate}}</span>
<span class="description" *ngIf="item.type !== undefined">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+item.type | translate}}</span>
<span class="description">{{'PROJECT.TYPE.TITLE' | translate}}:
{{'PROJECT.TYPE.'+ProjectType.PROJECTTYPE_OWNED | translate}}</span>
<span *ngIf="item.changeDate" class="created">created on
{{
dateFromTimestamp(item.creationDate) | date: 'EEE dd. MMM, HH:mm'
@@ -55,6 +55,9 @@
</ng-template>
</mat-menu>
</div>
<p class="n-items" *ngIf="!loading && items.length === 0">{{'PROJECT.PAGES.NOITEMS' | translate}}</p>
<div class="add-project-button card" (click)="addItem()">
<mat-icon class="icon">add</mat-icon>
<span>Add new project</span>
console/src/app/pages/projects/project-grid/project-grid.component.scss → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.scss
+12
View File
@@ -27,6 +27,11 @@
margin: 0 -1rem;
box-sizing: border-box;
h2 {
padding: 0 1rem;
flex-basis: 100%;
}
.item {
position: relative;
z-index: 100;
@@ -204,4 +209,11 @@
}
}
}
}
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
flex-basis: 100%;
}
console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { OwnedProjectGridComponent } from './owned-project-grid.component';
describe('GridComponent', () => {
let component: OwnedProjectGridComponent;
let fixture: ComponentFixture<OwnedProjectGridComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [OwnedProjectGridComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(OwnedProjectGridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/project-grid/project-grid.component.ts → console/src/app/pages/projects/owned-project-grid/owned-project-grid.component.ts
+15 -22
View File
@@ -3,14 +3,14 @@ import { SelectionModel } from '@angular/cdk/collections';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { Router } from '@angular/router';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { GrantedProject, Project, ProjectState } from 'src/app/proto/generated/management_pb';
import { ProjectState, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-project-grid',
templateUrl: './project-grid.component.html',
styleUrls: ['./project-grid.component.scss'],
selector: 'app-owned-project-grid',
templateUrl: './owned-project-grid.component.html',
styleUrls: ['./owned-project-grid.component.scss'],
animations: [
trigger('list', [
transition(':enter', [
@@ -31,33 +31,26 @@ import { ToastService } from 'src/app/services/toast.service';
]),
],
})
export class ProjectGridComponent {
@Input() items: Array<GrantedProject.AsObject> = [];
export class OwnedProjectGridComponent {
@Input() items: Array<ProjectView.AsObject> = [];
@Output() newClicked: EventEmitter<boolean> = new EventEmitter();
@Output() changedView: EventEmitter<boolean> = new EventEmitter();
@Input() loading: boolean = false;
public selection: SelectionModel<GrantedProject.AsObject> = new SelectionModel<GrantedProject.AsObject>(true, []);
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
public selectedIndex: number = -1;
public showNewProject: boolean = false;
public ProjectState: any = ProjectState;
public ProjectType: any = ProjectType;
constructor(private router: Router, private projectService: ProjectService, private toast: ToastService) { }
public selectItem(item: GrantedProject.AsObject, event?: any): void {
public selectItem(item: ProjectView.AsObject, event?: any): void {
if (event && !event.target.classList.contains('mat-icon')) {
if (item.grantId) {
this.router.navigate(['projects', item.id, 'grant', `${item.grantId}`]);
} else {
this.router.navigate(['/projects', item.id]);
}
this.router.navigate(['/projects', item.projectId]);
} else if (!event) {
if (item.grantId) {
this.router.navigate(['projects', item.id, 'grant', `${item.grantId}`]);
} else {
this.router.navigate(['/projects', item.id]);
}
this.router.navigate(['/projects', item.projectId]);
}
}
@@ -70,9 +63,9 @@ export class ProjectGridComponent {
return ts;
}
public reactivateProjects(selected: Project.AsObject[]): void {
public reactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.ReactivateProject(proj.id);
return this.projectService.ReactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful reactivated all projects');
}).catch(error => {
@@ -80,9 +73,9 @@ export class ProjectGridComponent {
});
}
public deactivateProjects(selected: Project.AsObject[]): void {
public deactivateProjects(selected: ProjectView.AsObject[]): void {
Promise.all([selected.map(proj => {
return this.projectService.DeactivateProject(proj.id);
return this.projectService.DeactivateProject(proj.projectId);
})]).then(() => {
this.toast.showInfo('Successful deactivated all projects');
}).catch(error => {
console/src/app/pages/projects/owned-project-list/owned-project-list.component.html
+111
View File
@@ -0,0 +1,111 @@
<app-owned-project-grid *ngIf="grid" [loading]="loading$ | async" (changedView)="grid = false"
[items]="ownedProjectList" (newClicked)="addProject()">
</app-owned-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && ownedProjectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="(loading$ | async) || (loading$ | async)">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </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>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | 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">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"
(page)="changePage($event)"></mat-paginator>
</div>
</div>
console/src/app/pages/projects/project-list/project-list.component.scss → console/src/app/pages/projects/owned-project-list/owned-project-list.component.scss
View File
console/src/app/pages/projects/owned-project-list/owned-project-list.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { GrantedProjectListComponent } from './granted-project-list.component';
describe('ProjectListComponent', () => {
let component: GrantedProjectListComponent;
let fixture: ComponentFixture<GrantedProjectListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [GrantedProjectListComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(GrantedProjectListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/owned-project-list/owned-project-list.component.ts
+135
View File
@@ -0,0 +1,135 @@
import { animate, animateChild, query, stagger, style, transition, trigger } from '@angular/animations';
import { SelectionModel } from '@angular/cdk/collections';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { PageEvent } from '@angular/material/paginator';
import { MatTableDataSource } from '@angular/material/table';
import { Router } from '@angular/router';
import { TranslateService } from '@ngx-translate/core';
import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
import { BehaviorSubject, Observable, Subscription } from 'rxjs';
import { ProjectView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-owned-project-list',
templateUrl: './owned-project-list.component.html',
styleUrls: ['./owned-project-list.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 OwnedProjectListComponent implements OnInit, OnDestroy {
public totalResult: number = 0;
public dataSource: MatTableDataSource<ProjectView.AsObject> =
new MatTableDataSource<ProjectView.AsObject>();
public ownedProjectList: ProjectView.AsObject[] = [];
public displayedColumns: string[] = ['select', 'name', 'orgName', 'orgDomain', 'type', 'state', 'creationDate', 'changeDate'];
public selection: SelectionModel<ProjectView.AsObject> = new SelectionModel<ProjectView.AsObject>(true, []);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public grid: boolean = true;
private subscription?: Subscription;
constructor(private router: Router,
public translate: TranslateService,
private projectService: ProjectService,
private toast: ToastService,
) { }
public ngOnInit(): void {
console.log('asdf');
this.getData(10, 0);
}
public ngOnDestroy(): void {
this.subscription?.unsubscribe();
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.data.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.data.forEach(row => this.selection.select(row));
}
public changePage(event: PageEvent): void {
this.getData(event.pageSize, event.pageIndex);
}
public addProject(): void {
this.router.navigate(['/projects', 'create']);
}
private async getData(limit: number, offset: number): Promise<void> {
console.log('getprojects');
this.loadingSubject.next(true);
this.projectService.SearchProjects(limit, offset).then(res => {
this.ownedProjectList = res.toObject().resultList;
this.totalResult = res.toObject().totalResult;
this.dataSource.data = this.ownedProjectList;
this.loadingSubject.next(false);
console.log(this.ownedProjectList);
}).catch(error => {
console.error(error);
this.toast.showError(error.message);
this.loadingSubject.next(false);
});
this.ownedProjectList = [];
}
public dateFromTimestamp(date: Timestamp.AsObject): any {
const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
return ts;
}
public reactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.ReactivateProject(project.projectId);
});
Promise.all(promises).then(() => {
this.toast.showInfo('Reactivated selected projects successfully');
}).catch(error => {
this.toast.showInfo(error.message);
});
}
public deactivateSelectedProjects(): void {
const promises = this.selection.selected.map(project => {
this.projectService.DeactivateProject(project.projectId);
});
Promise.all(promises).then(() => {
this.toast.showInfo('Deactivated selected projects Successfully');
}).catch(error => {
this.toast.showInfo(error.message);
});
}
}
console/src/app/pages/projects/project-detail/project-detail.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectDetailComponent } from './project-detail.component';
describe('ProjectDetailComponent', () => {
let component: ProjectDetailComponent;
let fixture: ComponentFixture<ProjectDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectDetailComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/project-grant-members/project-grant-members.component.ts
+4 -4
View File
@@ -10,8 +10,8 @@ import { ToastService } from 'src/app/services/toast.service';
import {
CreationType,
ProjectMemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/project-member-create-dialog.component';
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
@@ -23,7 +23,7 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
public disabled: boolean = false;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectGrantMembersDataSource;
@@ -91,7 +91,7 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_GRANTED,
projectId: this.projectId,
console/src/app/pages/projects/project-grid/project-grid.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectGridComponent } from './project-grid.component';
describe('GridComponent', () => {
let component: ProjectGridComponent;
let fixture: ComponentFixture<ProjectGridComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGridComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGridComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/project-list/project-list.component.html
-116
View File
@@ -1,116 +0,0 @@
<div class="max-width-container">
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<app-project-grid *ngIf="grid && projectList" [loading]="loading$ | async" (changedView)="grid = false"
[items]="projectList" (newClicked)="addProject()">
</app-project-grid>
<div *ngIf="!grid" class="view-toggle">
<button (click)="grid = true" mat-icon-button>
<i matTooltip="show grid view" class="las la-th-large"></i>
</button>
</div>
<div *ngIf="!grid && projectList">
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.TOTAL' | translate}}</span>
<span class="count">{{dataSource?.data?.length}}</span>
</ng-container>
<ng-container *ngIf="selection.hasValue()">
<span class="desc">{{'ORG_DETAIL.TABLE.SELECTION' | translate}}</span>
<span class="count">{{selection?.selected?.length}}</span>
</ng-container>
</div>
<span class="fill-space"></span>
<div @list class="action-btns" *ngIf="selection.hasValue()">
<button @animate (click)="deactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.DEACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_off"></mat-icon>
</button>
<button @animate (click)="reactivateSelectedProjects()"
matTooltip="{{'PROJECT.TABLE.ACTIVATE' | translate}}" class="icon-button" mat-icon-button>
<mat-icon svgIcon="mdi_light_on"></mat-icon>
</button>
</div>
<a class="add-button" [routerLink]="[ '/projects', 'create']" color="primary" mat-raised-button>
<mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
</a>
</div>
<div class="table-wrapper">
<div class="spinner-container" *ngIf="loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table class="background-style" mat-table [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (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 (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.NAME' | translate }} </th>
<td mat-cell *matCellDef="let project"> {{project.name}} </td>
</ng-container>
<ng-container matColumnDef="orgName">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGNAME' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project.orgName}} </td>
</ng-container>
<ng-container matColumnDef="orgDomain">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.ORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let project">
{{project?.orgDomain}} </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>
</ng-container>
<ng-container matColumnDef="type">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.TYPE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span *ngIf="project.type !== undefined">{{'PROJECT.TYPE.'+project.type | 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">
<span
*ngIf="project.creationDate">{{dateFromTimestamp(project.creationDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<ng-container matColumnDef="changeDate">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.TABLE.CHANGEDATE' | translate }} </th>
<td mat-cell *matCellDef="let project">
<span
*ngIf="project.changeDate">{{dateFromTimestamp(project.changeDate) | date: 'EEE dd. MMM, HH:mm'}}</span>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10"
[pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
</div>
</div>
</div>
console/src/app/pages/projects/project-list/project-list.component.spec.ts
-25
View File
@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectListComponent } from './project-list.component';
describe('ProjectListComponent', () => {
let component: ProjectListComponent;
let fixture: ComponentFixture<ProjectListComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectListComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectListComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/projects-routing.module.ts
+4 -4
View File
@@ -2,13 +2,13 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
import { ProjectsComponent } from './projects.component';
const routes: Routes = [
{
path: '',
component: ProjectListComponent,
component: ProjectsComponent,
data: { animation: 'HomePage' },
},
{
@@ -22,7 +22,7 @@ const routes: Routes = [
},
{
path: ':id',
component: ProjectDetailComponent,
component: OwnedProjectDetailComponent,
data: { animation: 'HomePage' },
},
{
console/src/app/pages/projects/projects.component.html
+11
View File
@@ -0,0 +1,11 @@
<div class="max-width-container">
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>Owned Projects</h2>
<app-owned-project-list></app-owned-project-list>
<h2>Granted Projects</h2>
<app-granted-project-list>
</app-granted-project-list>
</div>
console/src/app/pages/projects/projects.component.scss
+13
View File
@@ -0,0 +1,13 @@
h1 {
font-family: ailerons;
margin-top: 0;
}
.sub {
color: #81868a;
margin-bottom: 2rem;
}
.max-width-container {
padding-bottom: 3rem;
}
console/src/app/pages/projects/projects.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectsComponent } from './projects.component';
describe('ProjectsComponent', () => {
let component: ProjectsComponent;
let fixture: ComponentFixture<ProjectsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectsComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
console/src/app/pages/projects/projects.component.ts
+29
View File
@@ -0,0 +1,29 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-projects',
templateUrl: './projects.component.html',
styleUrls: ['./projects.component.scss'],
})
export class ProjectsComponent implements OnInit, OnDestroy {
// public projectId: string = '';
// public grantId: string = '';
private sub: Subscription = new Subscription();
constructor(private route: ActivatedRoute,
) {
// this.route.params.subscribe((params) => {
// this.projectId = params.projectId;
// this.grantId = params.grantId;
// });
}
ngOnInit(): void {
}
public ngOnDestroy(): void {
// this.sub.unsubscribe();
}
}
console/src/app/pages/projects/projects.module.ts
+21 -13
View File
@@ -28,34 +28,42 @@ import { SearchUserAutocompleteModule } from 'src/app/modules/search-user-autoco
import { ChangesModule } from '../../modules/changes/changes.module';
import { ProjectRolesModule } from '../../modules/project-roles/project-roles.module';
import { OrgMembersModule } from '../orgs/org-members/org-members.module';
import { OrgContributorsModule } from '../orgs/org-contributors/org-contributors.module';
import { UserListModule } from '../user-list/user-list.module';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { GrantedProjectGridComponent } from './granted-project-grid/granted-project-grid.component';
import { GrantedProjectListComponent } from './granted-project-list/granted-project-list.component';
import { OwnedProjectContributorsComponent } from './owned-project-contributors/owned-project-contributors.component';
import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
import { OwnedProjectGridComponent } from './owned-project-grid/owned-project-grid.component';
import { OwnedProjectListComponent } from './owned-project-list/owned-project-list.component';
import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
import { ProjectContributorsComponent } from './project-contributors/project-contributors.component';
import { ProjectDetailComponent } from './project-detail/project-detail.component';
import {
ProjectGrantMembersCreateDialogComponent,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersComponent } from './project-grant-members/project-grant-members.component';
import { ProjectGrantsComponent } from './project-grants/project-grants.component';
import { ProjectGridComponent } from './project-grid/project-grid.component';
import { ProjectListComponent } from './project-list/project-list.component';
import { ProjectsRoutingModule } from './projects-routing.module';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { ProjectsComponent } from './projects.component';
@NgModule({
declarations: [
ProjectListComponent,
ProjectDetailComponent,
GrantedProjectListComponent,
GrantedProjectGridComponent,
GrantedProjectDetailComponent,
OwnedProjectListComponent,
OwnedProjectGridComponent,
OwnedProjectDetailComponent,
ProjectApplicationsComponent,
ProjectGridComponent,
ProjectApplicationGridComponent,
ProjectGrantsComponent,
ProjectGrantMembersComponent,
ProjectGrantMembersCreateDialogComponent,
ProjectContributorsComponent,
GrantedProjectDetailComponent,
OwnedProjectContributorsComponent,
ProjectsComponent,
],
imports: [
ProjectsRoutingModule,
@@ -87,7 +95,7 @@ import { GrantedProjectDetailComponent } from './granted-project-detail/granted-
CardModule,
MatTooltipModule,
MatSortModule,
OrgMembersModule,
OrgContributorsModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
@@ -99,7 +107,7 @@ import { GrantedProjectDetailComponent } from './granted-project-detail/granted-
entryComponents: [
ProjectGrantMembersCreateDialogComponent,
],
exports: [ProjectListComponent],
exports: [],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
})
export class ProjectsModule { }
console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.html
+1 -1
View File
@@ -148,7 +148,7 @@
</div>
</app-card>
<app-auth-user-mfa *ngIf="profile"></app-auth-user-mfa>
<app-auth-user-mfa *ngIf="profile" [profile]="profile"></app-auth-user-mfa>
<app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="address && profile">
<form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.scss
+1
View File
@@ -68,6 +68,7 @@ h1 {
justify-content: space-evenly;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label, .name {
margin-right: 1rem;
console/src/app/pages/user-detail/auth-user-detail/auth-user-detail.component.ts
+14 -2
View File
@@ -11,7 +11,6 @@ import { ToastService } from 'src/app/services/toast.service';
import { CodeDialogComponent } from '../code-dialog/code-dialog.component';
function passwordConfirmValidator(c: AbstractControl): any {
if (!c.parent || !c) {
return;
@@ -68,13 +67,25 @@ export class AuthUserDetailComponent implements OnDestroy {
if (policy.minLength) {
validators.push(Validators.minLength(policy.minLength));
}
if (policy.hasLowercase) {
validators.push(Validators.pattern(/[a-z]/g));
}
if (policy.hasUppercase) {
validators.push(Validators.pattern(/[A-Z]/g));
}
if (policy.hasNumber) {
validators.push(Validators.pattern(/[0-9]/g));
}
if (policy.hasSymbol) {
// All characters that are not a digit or an English letter \W or a whitespace \S
validators.push(Validators.pattern(/[\W\S]/));
}
this.passwordForm = this.fb.group({
currentPassword: ['', []],
newPassword: ['', validators],
confirmPassword: ['', [...validators, passwordConfirmValidator]],
});
// TODO custom validator for pattern
}).catch(error => {
console.log('no password complexity policy defined!');
this.passwordForm = this.fb.group({
@@ -160,6 +171,7 @@ export class AuthUserDetailComponent implements OnDestroy {
data: {
number: this.phone.phone,
},
width: '400px',
});
dialogRef.afterClosed().subscribe(code => {
console/src/app/pages/user-detail/auth-user-mfa/auth-user-mfa.component.ts
+12 -3
View File
@@ -1,8 +1,10 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, Input, OnDestroy, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { BehaviorSubject, Observable } from 'rxjs';
import { MfaOtpResponse, MFAState, MfaType, MultiFactor } from 'src/app/proto/generated/auth_pb';
import { UserProfile } from 'src/app/proto/generated/management_pb';
import { AuthUserService } from 'src/app/services/auth-user.service';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ToastService } from 'src/app/services/toast.service';
import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
@@ -13,15 +15,18 @@ import { DialogOtpComponent } from '../dialog-otp/dialog-otp.component';
styleUrls: ['./auth-user-mfa.component.scss'],
})
export class AuthUserMfaComponent implements OnInit, OnDestroy {
@Input() private profile!: UserProfile.AsObject;
public mfaSubject: BehaviorSubject<MultiFactor.AsObject[]> = new BehaviorSubject<MultiFactor.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public MfaType: any = MfaType;
public MFAState: any = MFAState;
constructor(private userService: AuthUserService, private toast: ToastService, private dialog: MatDialog) { }
constructor(private userService: AuthUserService, private mgmtUserService: MgmtUserService,
private toast: ToastService, private dialog: MatDialog) { }
public ngOnInit(): void {
console.log(this.profile);
this.getOTP();
}
@@ -33,6 +38,7 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
public addOTP(): void {
this.userService.AddMfaOTP().then((otpresp) => {
const otp: MfaOtpResponse.AsObject = otpresp.toObject();
console.log(otp);
const dialogRef = this.dialog.open(DialogOtpComponent, {
data: otp.url,
width: '400px',
@@ -52,9 +58,12 @@ export class AuthUserMfaComponent implements OnInit, OnDestroy {
}
public getOTP(): void {
this.userService.GetMyMfas().then(mfas => {
console.log('otp');
this.mgmtUserService.getUserMfas(this.profile.id).then(mfas => {
this.mfaSubject.next(mfas.toObject().mfasList);
console.log(mfas.toObject());
}).catch(error => {
console.error(error);
this.toast.showError(error.message);
});
}
console/src/app/pages/user-detail/code-dialog/code-dialog.component.scss
+1 -1
View File
@@ -1,5 +1,5 @@
.formfield {
width: 200px;
width: 100%;
}
.action {
console/src/app/pages/user-detail/dialog-otp/dialog-otp.component.html
+1 -1
View File
@@ -2,7 +2,7 @@
<div mat-dialog-content>
<p translate>{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>
<div class="qrcode-wrapper">
<qrcode *ngIf="data" class="qrcode" [qrdata]="data" [size]="150" [level]="'M'"></qrcode>
<qrcode *ngIf="data" class="qrcode" [qrdata]="data" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
</div>
<mat-form-field label="Access Code" required="true">
console/src/app/pages/user-detail/user-detail.module.ts
+2
View File
@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { QRCodeModule } from 'angularx-qrcode';
import { HttpLoaderFactory } from 'src/app/app.module';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { CardModule } from 'src/app/modules/card/card.module';
@@ -44,6 +45,7 @@ import { UserMfaComponent } from './user-mfa/user-mfa.component';
ReactiveFormsModule,
DetailFormModule,
MatDialogModule,
QRCodeModule,
MetaLayoutModule,
MatFormFieldModule,
UserGrantsModule,
console/src/app/pages/user-detail/user-detail/user-detail.component.html
+2
View File
@@ -146,6 +146,8 @@
</div>
</app-card>
<app-auth-user-mfa *ngIf="profile" [profile]="profile"></app-auth-user-mfa>
<app-card title="{{ 'USER.ADDRESS.TITLE' | translate }}" *ngIf="address">
<form [formGroup]="addressForm" (ngSubmit)="saveAddress()">
<div class="content">
console/src/app/pages/user-detail/user-detail/user-detail.component.scss
+1
View File
@@ -71,6 +71,7 @@
justify-content: space-evenly;
padding: .5rem;
border-bottom: 1px solid #ffffff20;
flex-wrap: wrap;
.label, .name {
margin-right: 1rem;
console/src/app/pages/user-detail/user-detail/user-detail.component.ts
+15 -4
View File
@@ -83,6 +83,19 @@ export class UserDetailComponent implements OnInit, OnDestroy {
if (policy.minLength) {
validators.push(Validators.minLength(policy.minLength));
}
if (policy.hasLowercase) {
validators.push(Validators.pattern(/[a-z]/g));
}
if (policy.hasUppercase) {
validators.push(Validators.pattern(/[A-Z]/g));
}
if (policy.hasNumber) {
validators.push(Validators.pattern(/[0-9]/g));
}
if (policy.hasSymbol) {
// All characters that are not a digit or an English letter \W or a whitespace \S
validators.push(Validators.pattern(/[\W\S]/));
}
this.passwordForm = this.fb.group({
password: ['', validators],
@@ -160,18 +173,16 @@ export class UserDetailComponent implements OnInit, OnDestroy {
public resendVerification(): void {
console.log('resendverification');
this.mgmtUserService.ResendEmailVerification(this.profile.id).then((data: any) => {
this.mgmtUserService.ResendEmailVerification(this.profile.id).then(() => {
this.toast.showInfo('Email was successfully sent!');
this.email = data.toObject();
}).catch(data => {
this.toast.showError(data.message);
});
}
public resendPhoneVerification(): void {
this.mgmtUserService.ResendPhoneVerification(this.profile.id).then((data: any) => {
this.mgmtUserService.ResendPhoneVerification(this.profile.id).then(() => {
this.toast.showInfo('Phoneverification was successfully sent!');
this.email = data.toObject();
}).catch(data => {
this.toast.showError(data.message);
});