TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-01-06 12:47:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(console): project member grants, user grants (#329)

Browse Source 
* checkbox color

* project grant preview

* project grante expandable row

* add grant detail component

* proto regen

* project grant members shared module

* fix project grant members dialog

* fix create dialog

* lint

* add avatar colors, meta component styling

* light theme

* dl report

* styles

* move grants out of user context, grant detail

* i18n grant pipe

* lint

* user grants

* clear expandable view project grants

* fix project member routing

* fix granted members routing

* fix group label

* rename project grant

* disable zitadel grant members

* fix routing user grant creation

* rest member writes

* ignore case searches

* forkjoin observables for project search

* fix grant creation with users

* fix projectid reference

* formfield table style, user grant dynamic load

* show key if no displayvalue is set

* Delete report.20200630.163913.44081.0.001.json

Co-authored-by: Silvan <silvan.reusser@gmail.com>
This commit is contained in:
Max Peintner 2020-07-01 17:48:34 +02:00 committed by GitHub
parent c5a4eb3555
commit 9c07711aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
135 changed files with 1470 additions and 678 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
console/src/app/app-routing.module.ts
View File

@ -55,6 +55,11 @@ const routes: Routes = [
roles: ['org.read'],
},
},
{
path: 'grant-create',
loadChildren: () => import('src/app/pages/user-grant-create/user-grant-create.module')
.then(m => m.UserGrantCreateModule),
},
{
path: 'signedout',
loadChildren: () => import('./pages/signedout/signedout.module').then(m => m.SignedoutModule),

1
console/src/app/app.component.html
View File

@ -23,7 +23,6 @@
<button [ngClass]="{'active': temporg.id === org?.id}" [disabled]="!temporg.id" *ngFor="let temporg of orgs"
mat-menu-item (click)="setActiveOrg(temporg)">
<mat-icon class="avatar">business</mat-icon>
{{temporg?.name ? temporg.name : 'NO NAME'}}
</button>

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

@ -68,6 +68,7 @@
font-size: 12px;
padding: 4px 2rem;
position: relative;
overflow: hidden;
}
.main-container {
@ -107,7 +108,6 @@
text-decoration: none;
cursor: pointer;
padding: 0.2rem 1rem;
// color: inherit;
margin-right: 0.5rem;
padding-right: 2rem;
@ -195,23 +195,6 @@
}
}
.footer {
padding: 1rem;
a {
cursor: pointer;
text-decoration: none;
color: #81868a;
font-size: .8rem;
display: block;
margin-bottom: 1px;
font-weight: 300;
&:hover {
text-decoration: underline;
}
}
}
.divider {
display: block;
background-color: #ffffff10;

10
console/src/app/app.module.ts
View File

@ -57,11 +57,10 @@ const stateHandlerFn = (stateHandler: StatehandlerService) => {
};
};
export const authConfig: AuthConfig = {
export let authConfig = {
redirectUri: window.location.origin + '/auth/callback',
scope: 'openid profile email', // offline_access
responseType: 'code',
// showDebugInformation: true,
oidc: true,
postLogoutRedirectUri: window.location.origin + '/signedout',
};
@ -152,4 +151,9 @@ export const authConfig: AuthConfig = {
],
bootstrap: [AppComponent],
})
export class AppModule { }
export class AppModule {
constructor() {
console.log(window.location.href);
}
}

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

@ -7,11 +7,13 @@
<span class="u-email">{{profile?.userName}}</span>
<span class="iamuser" *ngIf="iamuser">IAM USER</span>
<button color="primary" (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
<button (click)="editUserProfile()" mat-stroked-button>{{'USER.EDITACCOUNT' | translate}}</button>
<div class="l-accounts">
<mat-progress-bar *ngIf="loadingUsers" color="primary" mode="indeterminate"></mat-progress-bar>
<a class="row" *ngFor="let user of users" (click)="selectAccount(user.userName)">
<i class="small-avatar las la-user-circle"></i>
<app-avatar *ngIf="user && (user.displayName || (user.firstName && user.lastName))" class="small-avatar"
[name]="user.displayName ? user.displayName : (user.firstName + ' '+ user.lastName)" [size]="32">
</app-avatar>
<div class="col">
<span class="title">{{user.userName}}</span>
@ -22,7 +24,7 @@
</a>
<a class="row" (click)="selectAccount()">
<div class="icon-wrapper">
<mat-icon>add</mat-icon>
<i class="las la-user-plus"></i>
</div>
<span class="col">
<span class="title">{{'USER.ADDACCOUNT' | translate}}</span>
@ -32,5 +34,5 @@
</a>
</div>
<button color="primary" (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
<button (click)="logout()" mat-stroked-button>{{'MENU.LOGOUT' | translate}}</button>
</div>

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

@ -73,7 +73,7 @@
margin: 0 1rem;
text-align: center;
mat-icon {
i {
margin: auto;
vertical-align: middle;
}
@ -91,7 +91,7 @@
}
.email {
color: #81868a;
color: #8795a1;
font-size: .8rem;
line-height: 1rem;
}

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

@ -3,7 +3,7 @@
}
.desc {
color: #81868a;
color: #8795a1;
font-size: .9rem;
}

3
console/src/app/modules/avatar/avatar.component.html
View File

@ -1,4 +1,5 @@
<div class="avatar-circle dontcloseonclick"
[ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px'}" [ngClass]="{'active': active}">
[ngStyle]="{'height': size+'px', 'width': size+'px', 'fontSize': fontSize+'px', 'background-color': color}"
[ngClass]="{'active': active}">
{{credentials}}
</div>

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

@ -10,6 +10,6 @@
text-transform: uppercase;
&.active:hover {
border: 2px solid #81868a;
border: 2px solid #8795a1;
}
}

38
console/src/app/modules/avatar/avatar.component.ts
View File

@ -11,16 +11,54 @@ export class AvatarComponent implements OnInit {
@Input() size: number = 24;
@Input() fontSize: number = 16;
@Input() active: boolean = false;
@Input() color: string = '';
constructor() { }
ngOnInit(): void {
if (!this.credentials) {
const split: string[] = this.name.split(' ');
this.credentials = split[0].charAt(0) + (split[1] ? split[1].charAt(0) : '');
if (!this.color) {
this.color = this.getColor(this.name);
}
}
if (this.size > 50) {
this.fontSize = 32;
}
}
getColor(userName: string): string {
const colors = [
'#e51c23',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#5677fc',
'#03a9f4',
'#00bcd4',
'#009688',
'#259b24',
'#8bc34a',
'#afb42b',
'#ff9800',
'#ff5722',
'#795548',
'#607d8b',
];
let hash = 0;
if (userName.length === 0) {
return colors[hash];
}
for (let i = 0; i < userName.length; i++) {
// tslint:disable-next-line: no-bitwise
hash = userName.charCodeAt(i) + ((hash << 5) - hash);
// tslint:disable-next-line: no-bitwise
hash = hash & hash;
}
hash = ((hash % colors.length) + colors.length) % colors.length;
return colors[hash];
}
}

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

@ -34,7 +34,7 @@
.desc {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}

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

@ -17,12 +17,12 @@
display: flex;
flex-direction: column;
.editor {
color: #81868a;
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
.seq {
color: #81868a;
color: #8795a1;
font-size: 12px;
align-self: flex-end;
}
@ -41,6 +41,6 @@
.end-container {
font-size: 12px;
color: #81868a;
color: #8795a1;
}
}

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

@ -17,7 +17,6 @@
.meta {
position: relative;
flex: 1 0 300px;
background: linear-gradient(to bottom right, #4072b410 20%,transparent 50%);
@media only screen and (min-width: 1500px) {
flex-basis: 400px;
@ -33,7 +32,6 @@
&.hidden {
flex: 0 0 0 !important;
width: 0;
background: linear-gradient(to bottom right, #4072b450,transparent 50%);
.hide {
transform: rotate(180deg);
@ -48,9 +46,6 @@
top: 0;
left: 0;
height: 50%;
border-left: 2px solid #4072b4;
-webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
border-image: -webkit-gradient(linear, left top, left bottom, from(#4072b4), to(#212224), color-stop(01, #212224)) 50 21;
}
.hide {
@ -75,12 +70,4 @@
}
}
}
// @media only screen and (max-width: 700px) {
// flex-direction: column;
// .main-content, .meta {
// overflow-y: visible;
// }
// }
}

17
console/src/app/modules/project-contributors/project-contributors.component.scss
View File

@ -9,7 +9,7 @@
.sub-header {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.people {
@ -29,13 +29,12 @@
display: flex;
align-items: center;
.avatar-img, .avatar-circle {
.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 {
@ -43,18 +42,6 @@
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;

8
console/src/app/modules/project-contributors/project-contributors.component.ts
View File

@ -34,6 +34,8 @@ export class ProjectContributorsComponent implements OnInit {
public ProjectState: any = ProjectState;
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public ProjectType: any = ProjectType;
constructor(private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
@ -90,7 +92,11 @@ export class ProjectContributorsComponent implements OnInit {
public showDetail(): void {
if (this.project?.state === ProjectState.PROJECTSTATE_ACTIVE) {
this.router.navigate(['projects', this.project.projectId, 'members']);
if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.router.navigate(['granted-projects', this.project.projectId, 'members']);
} else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.router.navigate(['projects', this.project.projectId, 'members']);
}
}
}
}

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

@ -6,7 +6,7 @@
<app-search-user-autocomplete (selectionChanged)="selectUsers($event)">
</app-search-user-autocomplete>
<mat-form-field class="full-width">
<mat-form-field class="full-width" appearance="outline">
<mat-label>{{ 'PROJECT.MEMBER.ROLES' | translate }}</mat-label>
<mat-select [(ngModel)]="roleKeyList" multiple>
<mat-option *ngFor="let key of data.roleKeysList" [value]="key">

16
console/src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component.scss Normal file
View File

@ -0,0 +1,16 @@
.full-width {
width: 100%;
}
.action {
display: flex;
justify-content: flex-end;
.ok-button {
margin-left: 0.5rem;
}
button {
border-radius: 0.5rem;
}
}

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

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

2
console/src/app/pages/granted-projects/project-grant-members/project-grant-members-datasource.ts → console/src/app/modules/project-grant-members/project-grant-members-datasource.ts
View File

@ -25,6 +25,8 @@ export class ProjectGrantMembersDataSource extends DataSource<ProjectMember.AsOb
this.loadingSubject.next(true);
console.log(projectId, grantId);
from(this.projectService.SearchProjectGrantMembers(projectId,
grantId, pageSize, offset)).pipe(
map(resp => {

17
console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.html → console/src/app/modules/project-grant-members/project-grant-members.component.html
View File

@ -1,6 +1,3 @@
<h1>{{ 'PROJECT.MEMBER.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}</p>
<div class="table-header-row">
<div class="col">
<ng-container *ngIf="!selection.hasValue()">
@ -27,17 +24,18 @@
<div class="spinner-container" *ngIf="dataSource?.loading$ | async">
<mat-spinner diameter="50"></mat-spinner>
</div>
<table mat-table class="full-width-table" aria-label="Elements" [dataSource]="dataSource">
<table mat-table class="full-width-table" aria-label="Elements"
[ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" [dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
@ -70,7 +68,7 @@
<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" *ngFor="let role of member.rolesList; index as i">
<span class="role app-label" *ngFor="let role of member.rolesList; index as i">
{{ 'ROLES.'+role | translate }}</span>
</td>
</ng-container>
@ -95,6 +93,7 @@
</tr>
</table>
<mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">
<mat-paginator [ngClass]="{'background-style': type == ProjectType.PROJECTTYPE_OWNED}" #paginator [pageSize]="50"
[pageSizeOptions]="[25, 50, 100, 250]">
</mat-paginator>
</div>

25
console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.scss → console/src/app/modules/project-grant-members/project-grant-members.component.scss
View File

@ -1,15 +1,4 @@
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
}
.table-header-row {
display: flex;
align-items: center;
@ -19,7 +8,7 @@ h1 {
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -80,14 +69,8 @@ h1 {
.role {
display: inline-block;
border-radius: .5rem;
border: 1px solid #ffffff30;
padding: .5rem 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
margin-left: 0;
margin-right: .5rem;
}
margin: .25rem;
}
}
}

0
console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.spec.ts → console/src/app/modules/project-grant-members/project-grant-members.component.spec.ts
View File

79
console/src/app/pages/granted-projects/project-grant-members/project-grant-members.component.ts → console/src/app/modules/project-grant-members/project-grant-members.component.ts
View File

@ -4,14 +4,14 @@ import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectMember, User } from 'src/app/proto/generated/management_pb';
import { ProjectMember, ProjectType } 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,
MemberCreateDialogComponent,
} from '../../../modules/add-member-dialog/member-create-dialog.component';
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersDataSource } from './project-grant-members-datasource';
@Component({
@ -23,6 +23,8 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
@Input() public projectId!: string;
@Input() public grantId!: string;
@Input() public type: ProjectType = ProjectType.PROJECTTYPE_GRANTED;
@Input() public disabled: boolean = false;
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
@ -32,14 +34,17 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
constructor(private projectService: ProjectService,
public ProjectType: any = ProjectType;
constructor(
private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
) {
}
) { }
public ngOnInit(): void {
this.dataSource = new ProjectGrantMembersDataSource(this.projectService);
console.log(this.projectId);
this.dataSource.loadMembers(this.projectId, this.grantId, 0, 25, 'asc');
}
@ -59,23 +64,22 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
this.paginator.pageSize,
);
}
public removeProjectMemberSelection(): void {
// Promise.all(this.selection.selected.map(member => {
// return this.projectService.RemoveProjectMember(this.projectId, this.grantId, member.userId).then(() => {
// this.toast.showInfo('Removed successfully');
// }).catch(error => {
// this.toast.showError(error.message);
// });
// }));
Promise.all(this.selection.selected.map(member => {
return this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('Removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}));
}
public removeMember(member: ProjectMember.AsObject): void {
// this.projectService.RemoveProjectMember(this.grantedProject.id, member.userId).then(() => {
// this.toast.showInfo('Member removed successfully');
// }).catch(error => {
// this.toast.showError(error.message);
// });
this.projectService.RemoveProjectGrantMember(this.projectId, this.grantId, member.userId).then(() => {
this.toast.showInfo('Member removed successfully');
}).catch(error => {
this.toast.showError(error.message);
});
}
public isAllSelected(): boolean {
@ -90,30 +94,33 @@ export class ProjectGrantMembersComponent implements AfterViewInit, OnInit {
this.dataSource.membersSubject.value.forEach(row => this.selection.select(row));
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
public async openAddMember(): Promise<any> {
const keysList = (await this.projectService.GetProjectGrantMemberRoles()).toObject();
console.log(keysList);
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_GRANTED,
projectId: this.projectId,
roleKeysList: keysList.rolesList,
},
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.projectService.AddProjectGrantMember(this.projectId,
this.grantId, user.id, roles);
})).then(() => {
this.toast.showError('members added');
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
console.log(dataToAdd);
if (dataToAdd) {
dataToAdd.userIds.forEach((userid: string) => {
this.projectService.AddProjectGrantMember(
this.projectId,
this.grantId,
userid,
dataToAdd.rolesKeyList,
).then(() => {
this.toast.showInfo('Project Grant Member successfully added!');
}).catch(error => {
this.toast.showError(error.message);
});
}
});
}
});
}

59
console/src/app/modules/project-grant-members/project-grant-members.module.ts Normal file
View File

@ -0,0 +1,59 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatDialogModule } from '@angular/material/dialog';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { SearchUserAutocompleteModule } from '../search-user-autocomplete/search-user-autocomplete.module';
import {
ProjectGrantMembersCreateDialogComponent,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantMembersComponent } from './project-grant-members.component';
@NgModule({
declarations: [ProjectGrantMembersComponent, ProjectGrantMembersCreateDialogComponent],
imports: [
CommonModule,
MatAutocompleteModule,
HasRoleModule,
RouterModule,
MatChipsModule,
MatMenuModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatInputModule,
MatFormFieldModule,
MatSelectModule,
MatTableModule,
SearchUserAutocompleteModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
MatDialogModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
],
exports: [
ProjectGrantMembersComponent,
],
})
export class ProjectGrantMembersModule { }

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

@ -48,13 +48,13 @@
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
@ -94,9 +94,17 @@
<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 mat-cell *matCellDef="let member">
<mat-form-field class="form-field" appearance="outline" *ngIf="project">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="member.rolesList" multiple
[disabled]="(['project.member.write:'+project.projectId] | hasRole) == false"
(selectionChange)="updateRoles(member, $event)">
<mat-option *ngFor="let role of memberRoleOptions" [value]="role">
{{ 'ROLES.'+role | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</td>
</ng-container>

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

@ -36,7 +36,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
}
@ -51,7 +51,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -109,15 +109,10 @@
width: 50px;
max-width: 50px;
}
.role {
display: inline-block;
margin: .25rem;
}
}
}
.pointer {
outline: none;
cursor: pointer;
}
}

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

@ -2,9 +2,10 @@ import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, ViewChild } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { take, tap } from 'rxjs/operators';
import { ProjectMember, ProjectType, ProjectView, User } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
@ -25,6 +26,7 @@ export class ProjectMembersComponent implements AfterViewInit {
@ViewChild(MatTable) public table!: MatTable<ProjectMember.AsObject>;
public dataSource!: ProjectMembersDataSource;
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
public memberRoleOptions: string[] = [];
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
@ -34,13 +36,24 @@ export class ProjectMembersComponent implements AfterViewInit {
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.projectService.GetProjectById(params.projectid).then(project => {
this.project = project.toObject();
this.dataSource = new ProjectMembersDataSource(this.projectService);
this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
this.route.data.pipe(take(1)).subscribe(data => {
this.projectType = data.type;
console.log(data);
this.getRoleOptions();
this.route.params.subscribe(params => {
console.log(params);
console.log(this.projectType);
this.projectService.GetProjectById(params.projectid).then(project => {
this.project = project.toObject();
this.dataSource = new ProjectMembersDataSource(this.projectService);
this.dataSource.loadMembers(this.project, this.projectType, 0, 25, 'asc');
});
});
});
}
public ngAfterViewInit(): void {
@ -52,6 +65,22 @@ export class ProjectMembersComponent implements AfterViewInit {
}
public getRoleOptions(): void {
if (this.projectType === ProjectType.PROJECTTYPE_GRANTED) {
this.projectService.GetProjectGrantMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error.message);
});
} else if (this.projectType === ProjectType.PROJECTTYPE_OWNED) {
this.projectService.GetProjectMemberRoles().then(resp => {
this.memberRoleOptions = resp.toObject().rolesList;
}).catch(error => {
this.toast.showError(error.message);
});
}
}
private loadMembersPage(): void {
this.dataSource.loadMembers(
this.project,
@ -117,4 +146,16 @@ export class ProjectMembersComponent implements AfterViewInit {
}
});
}
updateRoles(member: ProjectMember.AsObject, selectionChange: MatSelectChange): void {
console.log(member, selectionChange.value);
this.projectService.ChangeProjectMember(this.project.projectId, member.userId, selectionChange.value)
.then((newmember: ProjectMember) => {
console.log(newmember.toObject());
this.toast.showInfo('Member updated!');
}).catch(error => {
this.toast.showError(error.message);
});
}
}

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

@ -5,14 +5,17 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { PipesModule } from 'src/app/pipes/pipes.module';
import { ProjectMembersRoutingModule } from './project-members-routing.module';
import { ProjectMembersComponent } from './project-members.component';
@ -27,6 +30,8 @@ import { ProjectMembersComponent } from './project-members.component';
HasRoleModule,
MatChipsModule,
MatButtonModule,
MatFormFieldModule,
MatSelectModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
@ -37,6 +42,7 @@ import { ProjectMembersComponent } from './project-members.component';
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
PipesModule,
],
})
export class ProjectMembersModule { }

6
console/src/app/modules/project-roles/project-roles.component.html
View File

@ -33,14 +33,14 @@
<table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>

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

@ -8,7 +8,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

1
console/src/app/modules/project-roles/project-roles.component.ts
View File

@ -31,6 +31,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
constructor(private projectService: ProjectService, private toast: ToastService) { }
public ngOnInit(): void {
console.log(this.projectId);
this.dataSource = new ProjectRolesDataSource(this.projectService);
this.dataSource.loadRoles(this.projectId, 0, 25, 'asc');

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

@ -3,7 +3,7 @@ import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@
import { FormControl } from '@angular/forms';
import { MatAutocomplete, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatChipInputEvent } from '@angular/material/chips';
import { from, merge } from 'rxjs';
import { forkJoin, from } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
ProjectGrantView,
@ -47,16 +47,15 @@ export class SearchProjectAutocompleteComponent {
const query = new ProjectSearchQuery();
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
return merge(
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
return forkJoin([
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
);
]);
}),
// finalize(() => this.isLoading = false),
).subscribe((projects) => {
).subscribe(([granted, owned]) => {
this.isLoading = false;
this.filteredProjects = projects.toObject().resultList;
this.filteredProjects = [...owned.toObject().resultList, ...granted.toObject().resultList];
console.log(this.filteredProjects);
});
}

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

@ -43,7 +43,7 @@ export class SearchRolesAutocompleteComponent {
switchMap(value => {
const query = new ProjectRoleSearchQuery();
query.setKey(ProjectRoleSearchKey.PROJECTROLESEARCHKEY_DISPLAY_NAME);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
query.setValue(value);
return from(this.projectService.SearchProjectRoles(this.projectId, 10, 0, [query]));
}),

5
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.html
View File

@ -17,11 +17,6 @@
(matChipInputTokenEnd)="add($event)" />
</mat-chip-list>
<!-- <mat-hint *ngIf="hint">
{{hint}}
<a (click)=" changeTarget()">{{'USER.TARGET.CLICKHERE' | translate}}</a>
</mat-hint> -->
<mat-autocomplete #auto="matAutocomplete" (optionSelected)="selected($event)" [displayWith]="displayFn">
<mat-option *ngIf="isLoading" class="is-loading">
<mat-spinner diameter="30"></mat-spinner>

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

@ -3,7 +3,7 @@
}
.target-desc {
color: #81868a;
color: #8795a1;
font-size: .8rem;
margin: 0;
margin-bottom: 1rem;
@ -42,5 +42,5 @@
.found-label {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}

8
console/src/app/modules/search-user-autocomplete/search-user-autocomplete.component.ts
View File

@ -52,7 +52,7 @@ export class SearchUserAutocompleteComponent {
const query = new UserSearchQuery();
query.setKey(UserSearchKey.USERSEARCHKEY_EMAIL);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS_IGNORE_CASE);
if (this.target === UserTarget.SELF) {
return from(this.userService.SearchUsers(10, 0, [query]));
} else {
@ -117,11 +117,11 @@ export class SearchUserAutocompleteComponent {
this.users = [this.filteredUsers[index]];
}
this.selectionChanged.emit(this.users);
this.usernameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
}
this.usernameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
public changeTarget(): void {

18
console/src/app/modules/user-grant/user-grant-routing.module.ts Normal file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { UserGrantComponent } from './user-grant.component';
const routes: Routes = [
{
path: '',
component: UserGrantComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class UserGrantRoutingModule { }

15
console/src/app/modules/user-grant/user-grant.component.html Normal file
View File

@ -0,0 +1,15 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="userid" [routerLink]="[ '/users', userid]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{ 'GRANTS.DETAIL.TITLE' | translate }}</h1>
<p class="desc">{{ 'GRANTS.DETAIL.DESCRIPTION' | translate }}</p>
</div>
</div>
</div>
</div>

43
console/src/app/modules/user-grant/user-grant.component.scss Normal file
View File

@ -0,0 +1,43 @@
.container {
display: flex;
padding-bottom: 3rem;
.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: #8795a1;
}
}
}
}

25
console/src/app/modules/user-grant/user-grant.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { UserGrantComponent } from './user-grant.component';
describe('UserGrantComponent', () => {
let component: UserGrantComponent;
let fixture: ComponentFixture<UserGrantComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [UserGrantComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(UserGrantComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

44
console/src/app/modules/user-grant/user-grant.component.ts Normal file
View File

@ -0,0 +1,44 @@
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { UserGrantView } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ToastService } from 'src/app/services/toast.service';
@Component({
selector: 'app-user-grant',
templateUrl: './user-grant.component.html',
styleUrls: ['./user-grant.component.scss'],
})
export class UserGrantComponent implements OnInit {
public userid: string = '';
public grantid: string = '';
public grantView!: UserGrantView.AsObject;
constructor(
private mgmtUserService: MgmtUserService,
private route: ActivatedRoute,
private toast: ToastService,
) {
this.route.params.subscribe(params => {
this.userid = params.projectid;
this.grantid = params.grantid;
this.mgmtUserService.UserGrantByID(this.grantid, this.userid).then(resp => {
this.grantView = resp.toObject();
console.log(this.grantView);
});
});
}
ngOnInit(): void {
}
updateGrant(): void {
this.mgmtUserService.UpdateUserGrant(this.grantid, this.userid, this.grantView.roleKeysList).then(() => {
this.toast.showInfo('Roles updated');
}).catch(error => {
this.toast.showError(error.message);
});
}
}

29
console/src/app/modules/user-grant/user-grant.module.ts Normal file
View File

@ -0,0 +1,29 @@
import { CommonModule } from '@angular/common';
import { HttpClient } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { HttpLoaderFactory } from 'src/app/app.module';
import { UserGrantRoutingModule } from './user-grant-routing.module';
import { UserGrantComponent } from './user-grant.component';
@NgModule({
declarations: [UserGrantComponent],
imports: [
CommonModule,
UserGrantRoutingModule,
MatIconModule,
MatButtonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
],
schemas: [],
})
export class UserGrantModule { }

7
console/src/app/pages/user-detail/user-grants/user-grants-datasource.ts → console/src/app/modules/user-grants/user-grants-datasource.ts
View File

@ -14,17 +14,20 @@ export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
super();
}
public loadGrants(userId: string, pageIndex: number, pageSize: number): void {
public loadGrants(filter: UserGrantSearchKey, userId: string, pageIndex: number, pageSize: number): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
const query = new UserGrantSearchQuery();
query.setKey(UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID);
query.setKey(filter);
query.setValue(userId);
const queries: UserGrantSearchQuery[] = [query];
from(this.userService.SearchUserGrants(10, 0, queries)).pipe(
map(resp => {
this.totalResult = resp.toObject().totalResult;
console.log(resp.toObject().resultList);
return resp.toObject().resultList;
}),
catchError(() => of([])),

64
console/src/app/pages/user-detail/user-grants/user-grants.component.html → console/src/app/modules/user-grants/user-grants.component.html
View File

@ -10,18 +10,14 @@
</ng-container>
</div>
<span class="fill-space"></span>
<ng-template appHasRole [appHasRole]="['user.grant.delete:'+userId,'user.grant.delete']">
<button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue()">
<i class="las la-trash"></i>
</button>
</ng-template>
<ng-template appHasRole [appHasRole]="['user.grant.write:'+userId,'user.grant.write']">
<a matTooltip="{{'GRANTS.ADD' | translate}}" color="primary" class="add-button" color="primary"
mat-raised-button [routerLink]="['grant-create']">
<mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
</a>
</ng-template>
<button color="warn" matTooltip="{{'GRANTS.DELETE' | translate}}" class="icon-button" mat-icon-button
*ngIf="selection.hasValue() && allowDelete">
<i class="las la-trash"></i>
</button>
<a *ngIf="allowCreate" matTooltip="{{'GRANTS.ADD' | translate}}" color="primary" class="add-button" color="primary"
mat-raised-button [routerLink]="['/grant-create', {filter: filter, filterValue: filterValue}]">
<mat-icon class="icon">add</mat-icon>{{ 'GRANTS.ADD_BTN' | translate }}
</a>
</div>
<div class="table-wrapper">
@ -32,22 +28,32 @@
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
<app-avatar *ngIf="row && (row?.displayName || (row.firstName && row.lastName))" class="avatar"
[name]="row.displayName ? row.displayName : (row.firstName + ' '+ row.lastName)" [size]="32">
</app-avatar>
</mat-checkbox>
</td>
</ng-container>
<ng-container matColumnDef="orgId">
<ng-container matColumnDef="user">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.USER' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant">
{{grant?.firstName}} {{grant?.lastName}}</td>
</ng-container>
<ng-container matColumnDef="org">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.GRANTEDORGDOMAIN' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant">
{{grant.orgDomain}} </td>
{{grant.orgDomain}} {{grant.orgName}} </td>
</ng-container>
<ng-container matColumnDef="projectId">
@ -71,12 +77,30 @@
<ng-container matColumnDef="roleNamesList">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.GRANT.ROLENAMESLIST' | translate }} </th>
<td class="pointer" mat-cell *matCellDef="let grant">
<span class="role" *ngFor="let role of grant.roleNamesList">{{role}}</span> </td>
<td mat-cell *matCellDef="let grant">
<!-- TODO check behaviour for empty role projects -->
<ng-container *ngIf="roleOptions.length === 0; else showOptions">
<span class="role app-label" *ngFor="let role of grant.roleKeysList">{{role}}</span>
<button mat-icon-button (click)="loadRoleOptions(grant.projectId)">
<mat-icon>edit</mat-icon>
</button>
</ng-container>
<ng-template #showOptions>
<mat-form-field class="form-field" appearance="outline" *ngIf="filterValue">
<mat-label>{{ 'PROJECT.GRANT.TITLE' | translate }}</mat-label>
<mat-select [(ngModel)]="grant.roleKeysList" multiple [disabled]="allowCreate == false"
(selectionChange)="updateRoles(grant, $event)">
<mat-option *ngFor="let role of roleOptions" [value]="role.key">
{{ role.displayName }} {{role.key}}
</mat-option>
</mat-select>
</mat-form-field>
</ng-template>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="element-row">
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="element-row">
</tr>
</table>

17
console/src/app/pages/user-detail/user-grants/user-grants.component.scss → console/src/app/modules/user-grants/user-grants.component.scss
View File

@ -8,7 +8,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -42,9 +42,12 @@
background-color: #2d2e30;
td, th {
padding-left: .5rem;
padding-right: .5rem;
&:first-child {
padding-left: 0;
padding-right: 1rem;
padding-right: .5rem;
}
&:last-child {
@ -59,14 +62,8 @@
.role {
display: inline-block;
border-radius: .5rem;
border: 1px solid #ffffff30;
padding: .5rem 1rem;
margin-top: .25rem;
margin-bottom: .25rem;
margin-left: 0;
margin-right: .5rem;
}
margin: .25rem;
}
}
}

0
console/src/app/pages/user-detail/user-grants/user-grants.component.spec.ts → console/src/app/modules/user-grants/user-grants.component.spec.ts
View File

106
console/src/app/modules/user-grants/user-grants.component.ts Normal file
View File

@ -0,0 +1,106 @@
import { SelectionModel } from '@angular/cdk/collections';
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSelectChange } from '@angular/material/select';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import { ProjectGrant, ProjectRoleView, UserGrant, UserGrantSearchKey } from 'src/app/proto/generated/management_pb';
import { MgmtUserService } from 'src/app/services/mgmt-user.service';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import { UserGrantsDataSource } from './user-grants-datasource';
@Component({
selector: 'app-user-grants',
templateUrl: './user-grants.component.html',
styleUrls: ['./user-grants.component.scss'],
})
export class UserGrantsComponent implements OnInit, AfterViewInit {
@Input() filterValue: string = '';
@Input() filter: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID;
public grants: UserGrant.AsObject[] = [];
public dataSource!: UserGrantsDataSource;
public selection: SelectionModel<UserGrant.AsObject> = new SelectionModel<UserGrant.AsObject>(true, []);
@ViewChild(MatPaginator) public paginator!: MatPaginator;
@ViewChild(MatTable) public table!: MatTable<ProjectGrant.AsObject>;
@Input() allowCreate: boolean = false;
@Input() allowDelete: boolean = false;
public roleOptions: ProjectRoleView.AsObject[] = [];
constructor(
private userService: MgmtUserService,
private projectService: ProjectService,
private toast: ToastService,
) { }
public displayedColumns: string[] = ['select',
'user',
'org',
'projectId', 'creationDate', 'changeDate', 'roleNamesList'];
public ngOnInit(): void {
this.dataSource = new UserGrantsDataSource(this.userService);
this.dataSource.loadGrants(this.filter, this.filterValue, 0, 25);
if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID) {
this.getRoleOptions(this.filterValue);
}
}
public ngAfterViewInit(): void {
this.paginator.page
.pipe(
tap(() => this.loadGrantsPage()),
)
.subscribe();
}
private loadGrantsPage(): void {
this.dataSource.loadGrants(
this.filter,
this.filterValue,
this.paginator.pageIndex,
this.paginator.pageSize,
);
}
public isAllSelected(): boolean {
const numSelected = this.selection.selected.length;
const numRows = this.dataSource.grantsSubject.value.length;
return numSelected === numRows;
}
public masterToggle(): void {
this.isAllSelected() ?
this.selection.clear() :
this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
}
public loadRoleOptions(projectId: string): void {
if (this.filter === UserGrantSearchKey.USERGRANTSEARCHKEY_USER_ID) {
this.getRoleOptions(projectId);
}
}
public getRoleOptions(projectId: string): void {
this.projectService.SearchProjectRoles(projectId, 100, 0).then(resp => {
this.roleOptions = resp.toObject().resultList;
console.log(this.roleOptions);
});
}
updateRoles(grant: UserGrant.AsObject, selectionChange: MatSelectChange): void {
console.log(grant, selectionChange.value);
this.userService.UpdateUserGrant(grant.id, grant.userId, selectionChange.value)
.then((newmember: UserGrant) => {
console.log(newmember.toObject());
this.toast.showInfo('Grant updated!');
}).catch(error => {
this.toast.showError(error.message);
});
}
}

6
console/src/app/pages/user-detail/user-grants/user-grants.module.ts → console/src/app/modules/user-grants/user-grants.module.ts
View File

@ -3,9 +3,11 @@ import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { RouterModule } from '@angular/router';
@ -13,6 +15,7 @@ import { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { PipesModule } from 'src/app/pipes/pipes.module';
import { AvatarModule } from '../avatar/avatar.module';
import { UserGrantsComponent } from './user-grants.component';
@ -22,6 +25,7 @@ import { UserGrantsComponent } from './user-grants.component';
imports: [
CommonModule,
FormsModule,
AvatarModule,
MatButtonModule,
HasRoleModule,
MatTableModule,
@ -31,6 +35,8 @@ import { UserGrantsComponent } from './user-grants.component';
MatProgressSpinnerModule,
MatCheckboxModule,
MatTooltipModule,
MatSelectModule,
MatFormFieldModule,
TranslateModule,
PipesModule,
],

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

@ -19,7 +19,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
.zitadel-warning {

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

@ -3,7 +3,7 @@
}
.desc {
color: #81868a;
color: #8795a1;
font-size: .9rem;
}

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

@ -12,11 +12,15 @@
</div>
</div>
<app-card>
<app-project-grant-members *ngIf="project && project.projectId && project.id"
[disabled]="project?.state !== ProjectState.PROJECTSTATE_ACTIVE || isZitadel" [project]="project">
</app-project-grant-members>
<!-- <ng-template appHasRole [appHasRole]="['project.grant.user.grant.read']"> -->
<app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [filter]="userGrantSearchKey" [filterValue]="project.projectId"
[allowCreate]="['project.grant.user.grant.write'] | hasRole"
[allowDelete]="['project.grant.user.grant.delete'] | hasRole">
</app-user-grants>
</app-card>
<!-- </ng-template> -->
</div>
<metainfo class="side">
<div class="details">

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

@ -31,7 +31,7 @@
.desc {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
.zitadel-warning {
@ -53,7 +53,16 @@
}
}
h1 {
font-size: 1.2rem;
}
.desc {
width: 100%;
display: block;
font-size: .9rem;
color: #8795a1;
}
.side {
.details {
@ -107,7 +116,7 @@
}
.side-section {
color: #81868a;
color: #8795a1;
}
}

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

@ -16,6 +16,7 @@ import {
ProjectRoleSearchResponse,
ProjectState,
ProjectType,
UserGrantSearchKey,
} from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
@ -57,6 +58,8 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
public isZitadel: boolean = false;
public userGrantSearchKey: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID;
constructor(
public translate: TranslateService,
private route: ActivatedRoute,
@ -86,6 +89,7 @@ export class GrantedProjectDetailComponent implements OnInit, OnDestroy {
if (this.projectId && this.grantId) {
this.projectService.GetGrantedProjectByID(this.projectId, this.grantId).then(proj => {
this.project = proj.toObject();
console.log(this.project);
}).catch(error => {
this.toast.showError(error.message);
});

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

@ -49,7 +49,7 @@
min-height: 166px;
&.inactive {
color: #81868a;
color: #8795a1;
}
.selection-icon {
@ -81,7 +81,7 @@
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #81868a;
color: #8795a1;
}
.name {
@ -97,7 +97,7 @@
.created {
font-size: 0.8rem;
color: #81868a;
color: #8795a1;
}
.organization {
@ -127,7 +127,7 @@
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #81868a;
color: #8795a1;
}
}
@ -215,5 +215,5 @@
flex-basis: 100%;
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
color: #8795a1;
}

4
console/src/app/pages/granted-projects/granted-project-grid/granted-project-grid.component.ts
View File

@ -47,9 +47,9 @@ export class GrantedProjectGridComponent {
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}`]);
this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
} else if (!event) {
this.router.navigate(['projects', item.projectId, 'grant', `${item.id}`]);
this.router.navigate(['granted-projects', item.projectId, 'grant', `${item.id}`]);
}
}

8
console/src/app/pages/granted-projects/granted-project-list/granted-project-list.component.html
View File

@ -39,14 +39,14 @@
<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"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
@ -93,7 +93,7 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let row; columns: displayedColumns;"
[routerLink]="['/projects', row.id]"></tr>
[routerLink]="['/granted-projects', row.id]"></tr>
</table>
<mat-paginator class="background-style" [length]="totalResult" [pageSize]="10" [pageSizeOptions]="[5, 10, 20]"

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

@ -31,7 +31,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

12
console/src/app/pages/granted-projects/granted-projects-routing.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { ProjectType } from 'src/app/proto/generated/management_pb';
import { GrantedProjectDetailComponent } from './granted-project-detail/granted-project-detail.component';
import { GrantedProjectsComponent } from './granted-projects.component';
@ -20,15 +21,18 @@ const routes: Routes = [
roles: ['project.write'],
},
},
{
path: ':projectid/members',
data: {
type: ProjectType.PROJECTTYPE_GRANTED,
},
loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
},
{
path: ':id/grant/:grantId',
component: GrantedProjectDetailComponent,
data: { animation: 'HomePage' },
},
{
path: ':projectid/members',
loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
},
{
path: ':projectid/roles/create',
loadChildren: () => import('../project-role-create/project-role-create.module').then(m => m.ProjectRoleCreateModule),

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

@ -2,7 +2,7 @@
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>Granted Projects</h2>
<h2>{{'PROJECT.PAGES.TYPE.GRANTED' | translate}}</h2>
<app-granted-project-list>
</app-granted-project-list>
</div>

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

@ -4,7 +4,7 @@ h1 {
}
.sub {
color: #81868a;
color: #8795a1;
margin-bottom: 2rem;
}

2
console/src/app/pages/granted-projects/granted-projects.module.ts
View File

@ -20,6 +20,7 @@ import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { HttpLoaderFactory } from '../../app.module';
import { HasRoleModule } from '../../directives/has-role/has-role.module';
@ -47,6 +48,7 @@ import { GrantedProjectsComponent } from './granted-projects.component';
],
imports: [
CommonModule,
UserGrantsModule,
GrantedProjectsRoutingModule,
ProjectContributorsModule,
FormsModule,

10
console/src/app/pages/home/home.component.html
View File

@ -8,7 +8,7 @@
<div class="container">
<ng-template appHasRole [appHasRole]="['iam.write']">
<div class="item">
<div class="item card">
<div class="top">
<h2>
<i class="icon las la-gem"></i>
@ -22,7 +22,7 @@
</div>
</ng-template>
<div class="item">
<div class="item card">
<div class="top">
<h2> <i class="icon las la-user-circle"></i>
{{'HOME.SECURITYANDPRIVACY'| translate}}</h2>
@ -36,7 +36,7 @@
</div>
<ng-template appHasRole [appHasRole]="['project.read']">
<div class="item">
<div class="item card">
<div class="top">
<h2>
<i class="icon las la-layer-group"></i>
@ -51,7 +51,7 @@
</ng-template>
<ng-template appHasRole [appHasRole]="['org.read']">
<div class="item">
<div class="item card">
<div class="top">
<h2> <i class="icon las la-archway"></i>
{{'HOME.PROTECTION'| translate}}</h2>
@ -66,7 +66,7 @@
</ng-template>
<ng-template appHasRole [appHasRole]="['user.read']">
<div class="item">
<div class="item card">
<div class="top">
<h2>
<i class="las la-crosshairs"></i>

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

@ -46,7 +46,7 @@
font-family: ailerons;
}
p {
color: #81868a;
color: #8795a1;
text-align: center;
font-size: 1rem;
margin: 0;
@ -85,7 +85,7 @@
p {
display: block;
color: #81868a;
color: #8795a1;
font-size: .9rem;
}
@ -105,7 +105,11 @@
display: flex;
align-items: center;
padding: 0 1rem;
border-top: 1px solid #ffffff20;
border-top: 1px solid #ffffff20;
a {
border-radius: .5rem;
}
}
}
}

3
console/src/app/pages/iam/iam-contributors/iam-contributors.component.scss
View File

@ -9,7 +9,7 @@
.sub-header {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.people {
@ -35,7 +35,6 @@
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 {

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

@ -38,13 +38,13 @@
<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"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>

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

@ -20,7 +20,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
}
@ -34,7 +34,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

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

@ -4,13 +4,13 @@ h1 {
}
.sub {
color: #81868a;
color: #8795a1;
margin-bottom: 2rem;
}
.state-label {
font-size: .9rem;
color: #81868a;
color: #8795a1;
margin-bottom: .5rem;
}
@ -35,7 +35,7 @@ h1 {
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -145,7 +145,7 @@ h1 {
}
.side-section {
color: #81868a;
color: #8795a1;
}
}
}

3
console/src/app/pages/orgs/org-contributors/org-contributors.component.scss
View File

@ -9,7 +9,7 @@
.sub-header {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.people {
@ -35,7 +35,6 @@
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 {

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

@ -35,7 +35,7 @@ h1 {
}
.desc {
color: #81868a;
color: #8795a1;
font-size: .9rem;
margin: 1rem 0;
}
@ -65,7 +65,7 @@ h1 {
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
.form {
@ -91,7 +91,7 @@ h1 {
.section {
padding: .5rem;
flex-basis: 100%;
color: #81868a;
color: #8795a1;
font-size: .9rem;
}

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

@ -4,13 +4,13 @@ h1 {
}
.sub {
color: #81868a;
color: #8795a1;
margin-bottom: 2rem;
}
.state-label {
font-size: .9rem;
color: #81868a;
color: #8795a1;
margin-bottom: .5rem;
}
@ -35,7 +35,7 @@ h1 {
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -145,7 +145,7 @@ h1 {
}
.side-section {
color: #81868a;
color: #8795a1;
}
}
}

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

@ -4,7 +4,7 @@ h1 {
}
.top-desc {
color: #81868a;
color: #8795a1;
}
.view-toggle {
@ -147,7 +147,7 @@ h1 {
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #81868a;
color: #8795a1;
}
}
}

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

@ -46,13 +46,13 @@
[dataSource]="dataSource">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()"
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>

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

@ -36,7 +36,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
}
@ -51,7 +51,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

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

@ -34,7 +34,7 @@
width: 100%;
display: block;
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
}
@ -50,7 +50,7 @@
.left-desc {
text-transform: uppercase;
color: #81868a;
color: #8795a1;
font-size: .9rem;
}

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

@ -3,7 +3,7 @@ h1 {
}
.top-desc {
color: #81868a;
color: #8795a1;
}
.row-lyt {

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

@ -74,6 +74,16 @@
</app-project-roles>
</app-card>
</ng-template>
<ng-template appHasRole [appHasRole]="['user.grant.read']">
<app-card *ngIf="project?.projectId" title="{{ 'GRANTS.PROJECT.TITLE' | translate }}"
description="{{'GRANTS.PROJECT.DESCRIPTION' | translate }}">
<app-user-grants [filter]="userGrantSearchKey" [filterValue]="project.projectId"
[allowCreate]="['user.grant.write'] | hasRole"
[allowDelete]="['user.grant.delete'] | hasRole">
</app-user-grants>
</app-card>
</ng-template>
</ng-container>
</ng-container>
</div>

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

@ -31,7 +31,7 @@
.desc {
font-size: .9rem;
color: #81868a;
color: #8795a1;
}
.zitadel-warning {
@ -107,7 +107,7 @@
}
.side-section {
color: #81868a;
color: #8795a1;
}
}

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

@ -16,6 +16,7 @@ import {
ProjectState,
ProjectType,
ProjectView,
UserGrantSearchKey,
} from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
import { ProjectService } from 'src/app/services/project.service';
@ -57,6 +58,8 @@ export class OwnedProjectDetailComponent implements OnInit, OnDestroy {
public isZitadel: boolean = false;
public userGrantSearchKey: UserGrantSearchKey = UserGrantSearchKey.USERGRANTSEARCHKEY_PROJECT_ID;
constructor(
public translate: TranslateService,
private route: ActivatedRoute,

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

@ -49,7 +49,7 @@
min-height: 166px;
&.inactive {
color: #81868a;
color: #8795a1;
}
.selection-icon {
@ -58,10 +58,6 @@
top: -12px;
left: -12px;
user-select: none;
&:hover {
color: white;
}
}
img {
@ -81,7 +77,7 @@
font-size: 0.8rem;
margin-bottom: 0;
margin-top: .5rem;
color: #81868a;
color: #8795a1;
}
.name {
@ -97,7 +93,7 @@
.created {
font-size: 0.8rem;
color: #81868a;
color: #8795a1;
}
.organization {
@ -127,7 +123,7 @@
margin-right: 3px;
font-size: 1.3rem;
height: 1.4rem;
color: #81868a;
color: #8795a1;
}
}
@ -214,6 +210,6 @@
.n-items {
padding: 0 1rem;
font-size: .8rem;
color: #81868a;
color: #8795a1;
flex-basis: 100%;
}

6
console/src/app/pages/owned-projects/owned-project-list/owned-project-list.component.html
View File

@ -43,14 +43,14 @@
<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"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>

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

@ -4,7 +4,7 @@ h1 {
}
.sub {
color: #81868a;
color: #8795a1;
margin-bottom: 2rem;
}
@ -40,7 +40,7 @@ h1 {
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

9
console/src/app/pages/owned-projects/owned-projects-routing.module.ts
View File

@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { AuthGuard } from 'src/app/guards/auth.guard';
import { RoleGuard } from 'src/app/guards/role.guard';
import { ProjectType } from 'src/app/proto/generated/management_pb';
import { OwnedProjectDetailComponent } from './owned-project-detail/owned-project-detail.component';
import { OwnedProjectsComponent } from './owned-projects.component';
@ -27,6 +28,9 @@ const routes: Routes = [
},
{
path: ':projectid/members',
data: {
type: ProjectType.PROJECTTYPE_OWNED,
},
loadChildren: () => import('../../modules/project-members/project-members.module').then(m => m.ProjectMembersModule),
},
{
@ -44,6 +48,11 @@ const routes: Routes = [
loadChildren: () => import('../project-grant-create/project-grant-create.module')
.then(m => m.ProjectGrantCreateModule),
},
{
path: ':projectid/grant/:grantid',
loadChildren: () => import('./project-grant-detail/project-grant-detail.module')
.then(m => m.ProjectGrantDetailModule),
},
];
@NgModule({

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

@ -2,6 +2,6 @@
<h1>{{ 'PROJECT.PAGES.LIST' | translate }}</h1>
<p class="sub">{{ 'PROJECT.PAGES.LISTDESCRIPTION' | translate }}</p>
<h2>Owned Projects</h2>
<h2>{{'PROJECT.PAGES.TYPE.OWNED' | translate}}</h2>
<app-owned-project-list></app-owned-project-list>
</div>

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

@ -4,7 +4,7 @@ h1 {
}
.sub {
color: #81868a;
color: #8795a1;
margin-bottom: 2rem;
}

10
console/src/app/pages/owned-projects/owned-projects.module.ts
View File

@ -20,6 +20,9 @@ import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatTooltipModule } from '@angular/material/tooltip';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { AvatarModule } from 'src/app/modules/avatar/avatar.module';
import { ProjectGrantMembersModule } from 'src/app/modules/project-grant-members/project-grant-members.module';
import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module';
import { HttpLoaderFactory } from '../../app.module';
import { HasRoleModule } from '../../directives/has-role/has-role.module';
@ -39,9 +42,6 @@ import { OwnedProjectsRoutingModule } from './owned-projects-routing.module';
import { OwnedProjectsComponent } from './owned-projects.component';
import { ProjectApplicationGridComponent } from './project-application-grid/project-application-grid.component';
import { ProjectApplicationsComponent } from './project-applications/project-applications.component';
import {
ProjectGrantMembersCreateDialogComponent,
} from './project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantsComponent } from './project-grants/project-grants.component';
@NgModule({
@ -53,14 +53,16 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen
ProjectApplicationGridComponent,
ProjectApplicationsComponent,
ProjectGrantsComponent,
ProjectGrantMembersCreateDialogComponent,
],
imports: [
CommonModule,
OwnedProjectsRoutingModule,
UserGrantsModule,
ProjectContributorsModule,
ProjectGrantMembersModule,
FormsModule,
TranslateModule,
AvatarModule,
ReactiveFormsModule,
HasRoleModule,
MatTableModule,

6
console/src/app/pages/owned-projects/project-applications/project-applications.component.html
View File

@ -30,14 +30,14 @@
<table [dataSource]="dataSource" mat-table class="full-width-table" matSort aria-label="Elements">
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>

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

@ -8,7 +8,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;

1
console/src/app/pages/owned-projects/project-applications/project-applications.component.ts
View File

@ -38,7 +38,6 @@ export class ProjectApplicationsComponent implements AfterViewInit, OnInit {
public ngAfterViewInit(): void {
this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
merge(this.sort.sortChange, this.paginator.page)
.pipe(
tap(() => this.loadRolesPage()),

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

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

18
console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail-routing.module.ts Normal file
View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProjectGrantDetailComponent } from './project-grant-detail.component';
const routes: Routes = [
{
path: '',
component: ProjectGrantDetailComponent,
data: { animation: 'AddPage' },
},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ProjectGrantDetailRoutingModule { }

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

@ -0,0 +1,19 @@
<div class="max-width-container">
<div class="container">
<div class="left">
<a *ngIf="projectid" [routerLink]="[ '/projects', projectid]" mat-icon-button>
<mat-icon class="icon">arrow_back</mat-icon>
</a>
</div>
<div class="right">
<div class="head">
<h1>{{ 'PROJECT.GRANT.DETAIL.TITLE' | translate }}</h1>
<p class="desc">{{ 'PROJECT.GRANT.DETAIL.DESC' | translate }}</p>
</div>
<app-project-grant-members *ngIf="this.projectid && this.grantid" [disabled]="isZitadel"
[projectId]="projectid" [grantId]="grantid" [type]="projectType">
</app-project-grant-members>
</div>
</div>
</div>

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

@ -0,0 +1,43 @@
.container {
display: flex;
padding-bottom: 3rem;
.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: #8795a1;
}
}
}
}

25
console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ProjectGrantDetailComponent } from './project-grant-detail.component';
describe('GrantComponent', () => {
let component: ProjectGrantDetailComponent;
let fixture: ComponentFixture<ProjectGrantDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ProjectGrantDetailComponent],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ProjectGrantDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

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

@ -0,0 +1,32 @@
import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ProjectType } from 'src/app/proto/generated/management_pb';
import { OrgService } from 'src/app/services/org.service';
@Component({
selector: 'app-project-grant-detail',
templateUrl: './project-grant-detail.component.html',
styleUrls: ['./project-grant-detail.component.scss'],
})
export class ProjectGrantDetailComponent {
public projectid: string = '';
public grantid: string = '';
public projectType: ProjectType = ProjectType.PROJECTTYPE_OWNED;
public disabled: boolean = false;
public isZitadel: boolean = false;
constructor(
private orgService: OrgService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
this.projectid = params.projectid;
this.grantid = params.grantid;
this.orgService.GetIam().then(iam => {
this.isZitadel = iam.toObject().iamProjectId === this.projectid;
});
});
}
}

44
console/src/app/pages/owned-projects/project-grant-detail/project-grant-detail.module.ts Normal file
View File

@ -0,0 +1,44 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { 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 { TranslateModule } from '@ngx-translate/core';
import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
import { ProjectGrantMembersModule } from 'src/app/modules/project-grant-members/project-grant-members.module';
import { ProjectGrantDetailRoutingModule } from './project-grant-detail-routing.module';
import { ProjectGrantDetailComponent } from './project-grant-detail.component';
@NgModule({
declarations: [ProjectGrantDetailComponent],
imports: [
CommonModule,
ProjectGrantDetailRoutingModule,
ProjectGrantMembersModule,
MatAutocompleteModule,
HasRoleModule,
MatChipsModule,
MatButtonModule,
MatCheckboxModule,
MatIconModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatTooltipModule,
ReactiveFormsModule,
MatProgressSpinnerModule,
FormsModule,
TranslateModule,
],
})
export class ProjectGrantDetailModule { }

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

@ -1,3 +0,0 @@
.full-width {
width: 100%;
}

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

@ -32,14 +32,14 @@
<ng-container matColumnDef="select">
<th class="selection" mat-header-cell *matHeaderCellDef>
<mat-checkbox (change)="$event ? masterToggle() : null"
<mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
[checked]="selection.hasValue() && isAllSelected()"
[indeterminate]="selection.hasValue() && !isAllSelected()">
</mat-checkbox>
</th>
<td class="selection" mat-cell *matCellDef="let row">
<mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
[checked]="selection.isSelected(row)">
<mat-checkbox color="primary" (click)="$event.stopPropagation()"
(change)="$event ? selection.toggle(row) : null" [checked]="selection.isSelected(row)">
</mat-checkbox>
</td>
</ng-container>
@ -75,42 +75,10 @@
<span class="role" *ngFor="let role of grant.roleNamesList">{{role}}</span> </td>
</ng-container>
<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div *ngIf="projectId" class="element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<ng-template appHasRole
[appHasRole]="['project.grant.member.read:' + projectId,'project.grant.member.read']">
<div class="right">
<div class="title-row">
<span class="mem-title">Members</span>
<ng-template appHasRole
[appHasRole]="['project.grant.member.write:' + projectId, 'project.grant.member.write']">
<button [disabled]="disabled || element?.roleKeysList?.length === 0"
matTooltip="disabled or no roles defined" mat-icon-button
(click)="addProjectGrantMember(element)">
<mat-icon>add</mat-icon>
</button>
</ng-template>
</div>
<div class="mem-description"
*ngIf="selectedGrantMembers && selectedGrantMembers.length > 0">
<span *ngFor="let mem of selectedGrantMembers">{{mem.firstName}} {{mem.lastName}}
{{mem.email}} |
<span *ngFor="let role of mem.rolesList">{{role}} </span></span>
</div>
</div>
</ng-template>
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr class="data-row" mat-row *matRowDef="let element; columns: displayedColumns;" class="element-row"
[class.expanded-row]="expandedElement === element" (click)="setExpandableRow(element)">
<tr class="data-row" [routerLink]="['/projects',grant.projectId,'grant', grant.id]" mat-row
*matRowDef="let grant; columns: displayedColumns;" class="element-row">
</tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="detail-row"></tr>
</table>
<mat-paginator #paginator [pageSize]="50" [pageSizeOptions]="[25, 50, 100, 250]">

66
console/src/app/pages/owned-projects/project-grants/project-grants.component.scss
View File

@ -7,7 +7,7 @@
flex-direction: column;
.desc {
font-size: .8rem;
color: #81868a;
color: #8795a1;
}
.count {
font-size: 2rem;
@ -65,68 +65,12 @@
}
}
tr {
outline: none;
}
tr.detail-row {
height: 0;
}
tr {
.element-row:not(.expanded-row):hover {
background: whitesmoke;
}
.element-row:not(.expanded-row):active {
background: #efefef;
}
}
.element-row td {
border-bottom-width: 0;
}
.element-detail {
overflow: hidden;
display: flex;
.right {
display: flex;
flex-direction: column;
.title-row {
display: flex;
align-items: center;
.mem-title {
font-size: .8rem;
color: #81868a;
}
}
.mem-description {
border: 2px solid #81868a;
background-color: #212224;
border-radius: .5rem;
padding: 1rem;
margin: .5rem 0;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
.element-symbol {
font-weight: bold;
font-size: 40px;
line-height: normal;
}
.element-description {
padding: 16px;
}
.element-description-attribution {
opacity: 0.5;
}
.selection {

36
console/src/app/pages/owned-projects/project-grants/project-grants.component.ts
View File

@ -5,14 +5,14 @@ import { MatDialog } from '@angular/material/dialog';
import { MatPaginator } from '@angular/material/paginator';
import { MatTable } from '@angular/material/table';
import { tap } from 'rxjs/operators';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from 'src/app/modules/project-grant-members/project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrant, ProjectMemberView } from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
import { ToastService } from 'src/app/services/toast.service';
import {
ProjectGrantMembersCreateDialogComponent,
ProjectGrantMembersCreateDialogExportType,
} from '../project-grant-members-create-dialog/project-grant-members-create-dialog.component';
import { ProjectGrantsDataSource } from './project-grants-datasource';
@Component({
@ -76,28 +76,21 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
this.dataSource.grantsSubject.value.forEach(row => this.selection.select(row));
}
public setExpandableRow(grant: ProjectGrant.AsObject): void {
this.expandedElement = this.expandedElement === grant ? null : grant;
this.projectService.SearchProjectGrantMembers(this.projectId, grant.id, 10, 0).then(ret => {
this.selectedGrantMembers = ret.toObject().resultList;
});
}
public async addProjectGrantMember(grant: ProjectGrant.AsObject): Promise<void> {
const keysList = (await this.projectService.GetProjectGrantMemberRoles()).toObject();
console.log(keysList);
// TODO
public addProjectGrantMember(grant: ProjectGrant.AsObject): void {
const dialogRef = this.dialog.open(ProjectGrantMembersCreateDialogComponent, {
data: {
orgId: grant.grantedOrgId,
grantId: grant.id,
projectId: grant.projectId,
roleKeysList: grant.roleKeysList,
roleKeysList: keysList.rolesList,
},
width: '400px',
});
dialogRef.afterClosed().subscribe((dataToAdd: ProjectGrantMembersCreateDialogExportType) => {
console.log(dataToAdd);
if (dataToAdd) {
dataToAdd.userIds.forEach(userid => {
dataToAdd.userIds.forEach((userid: string) => {
this.projectService.AddProjectGrantMember(
this.projectId,
grant.id,
@ -113,13 +106,4 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit {
}
});
}
// TODO
public removeProjectGrantMember(grantId: string, userId: string): void {
this.projectService.RemoveProjectGrantMember(this.projectId, grantId, userId).then(() => {
this.toast.showInfo('Project Grant Member successfully removed');
}).catch(error => {
this.toast.showInfo(error.message);
});
}
}

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