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

fix(console): changes, project grant create, member add, org setup, project search autocomplete, grpc header url decoding (#303)

Browse Source 
* mobile max-width container

* fix project search autocomplete

* remove changes error, add bottom label

* fix project grant, contributor add
This commit is contained in:
Max Peintner
2020-06-26 16:45:18 +02:00
committed by GitHub
parent 63ccdb1147
commit 5fc250f046
27 changed files with 167 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/changes/changes.component.html
+1 -1
View File
@@ -11,5 +11,5 @@
<div class="sp-wrapper">
<mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
</div>
<span class="err-container" *ngIf="errorMessage">{{errorMessage}}</span>
<span class="end-container" *ngIf="bottom">{{'CHANGES.BOTTOM' | translate}}</span>
</div>
console/src/app/modules/changes/changes.component.scss
+3 -3
View File
@@ -39,8 +39,8 @@
justify-content: center;
}
.err-container {
font-size: 14px;
color: rgb(201,51,71);
.end-container {
font-size: 12px;
color: #81868a;
}
}
console/src/app/modules/changes/changes.component.ts
-2
View File
@@ -19,7 +19,6 @@ export class ChangesComponent implements OnInit {
@Input() public changeType: ChangeType = ChangeType.USER;
@Input() public id: string = '';
@Input() public sortDirectionAsc: boolean = true;
public errorMessage: string = '';
public bottom: boolean = false;
// Source data
@@ -118,7 +117,6 @@ export class ChangesComponent implements OnInit {
catchError(err => {
console.error(err);
this._loading.next(false);
this.errorMessage = decodeURI(err.message);
this.bottom = true;
return of([]);
}),
console/src/app/modules/project-contributors/project-contributors.component.html
+5 -1
View File
@@ -7,11 +7,15 @@
<ng-container *ngFor="let member of membersSubject | async">
<div (click)="showDetail()" class="avatar-circle"
matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}">
<app-avatar *ngIf="member && (member.displayName || (member.firstName && member.lastName))"
<app-avatar
*ngIf="member && (member.displayName || (member.firstName && member.lastName)); else thumbavatar"
class="avatar dontcloseonclick"
[name]="member.displayName ? member.displayName : (member.firstName + ' '+ member.lastName)"
[size]="32">
</app-avatar>
<ng-template #thumbavatar>
<i class="avatar las la-tools"></i>
</ng-template>
</div>
</ng-container>
</ng-container>
console/src/app/modules/project-contributors/project-contributors.component.ts
+1
View File
@@ -56,6 +56,7 @@ export class ProjectContributorsComponent implements OnInit {
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
console.log(members);
});
}
}
console/src/app/modules/project-members/project-members-datasource.ts
+1
View File
@@ -42,6 +42,7 @@ export class ProjectMembersDataSource extends DataSource<ProjectMember.AsObject>
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
console.log(members);
});
}
}
console/src/app/modules/project-members/project-members.component.html
+7
View File
@@ -60,6 +60,13 @@
</td>
</ng-container>
<ng-container matColumnDef="userId">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.USERID' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
{{member.userId}} </td>
</ng-container>
<ng-container matColumnDef="firstname">
<th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.MEMBER.FIRSTNAME' | translate }} </th>
<td class="pointer" [routerLink]="['/user', member.userId]" mat-cell *matCellDef="let member">
console/src/app/modules/project-members/project-members.component.ts
+29 -29
View File
@@ -1,13 +1,15 @@
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 { MatTable } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { tap } from 'rxjs/operators';
import { ProjectMember, ProjectType, ProjectView } from 'src/app/proto/generated/management_pb';
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';
import { CreationType, MemberCreateDialogComponent } from '../add-member-dialog/member-create-dialog.component';
import { ProjectMembersDataSource } from './project-members-datasource';
@Component({
@@ -25,9 +27,11 @@ export class ProjectMembersComponent implements AfterViewInit {
public selection: SelectionModel<ProjectMember.AsObject> = new SelectionModel<ProjectMember.AsObject>(true, []);
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles'];
public displayedColumns: string[] = ['select', 'userId', 'firstname', 'lastname', 'username', 'email', 'roles'];
constructor(private projectService: ProjectService,
constructor(
private projectService: ProjectService,
private dialog: MatDialog,
private toast: ToastService,
private route: ActivatedRoute) {
this.route.params.subscribe(params => {
@@ -88,33 +92,29 @@ export class ProjectMembersComponent implements AfterViewInit {
}
public openAddMember(): void {
const dialogRef = this.dialog.open(MemberCreateDialogComponent, {
data: {
creationType: CreationType.PROJECT_OWNED,
projectId: this.project.projectId,
},
width: '400px',
});
// TODO
// const dialogRef = this.dialog.open(ProjectMemberCreateDialogComponent, {
// data: {
// creationType: this.project.type ===
// ProjectType.PROJECTTYPE_GRANTED ? CreationType.PROJECT_GRANTED :
// ProjectType.PROJECTTYPE_OWNED ? CreationType.PROJECT_OWNED : undefined,
// projectId: this.project.id,
// },
// width: '400px',
// });
dialogRef.afterClosed().subscribe(resp => {
if (resp) {
const users: User.AsObject[] = resp.users;
const roles: string[] = resp.roles;
// 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.AddProjectMember(this.project.id, user.id, roles);
// })).then(() => {
// this.toast.showError('members added');
// }).catch(error => {
// this.toast.showError(error.message);
// });
// }
// }
// });
if (users && users.length && roles && roles.length) {
Promise.all(users.map(user => {
return this.projectService.AddProjectMember(this.project.projectId, user.id, roles);
})).then(() => {
this.toast.showError('members added');
}).catch(error => {
this.toast.showError(error.message);
});
}
}
});
}
}
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.html
+2 -2
View File
@@ -7,7 +7,7 @@
<mat-chip-list *ngIf="!singleOutput" #chipList aria-label="name selection">
<mat-chip class="chip" *ngFor="let selectedProject of projects" [selectable]="selectable"
[removable]="removable" (removed)="remove(selectedProject)">
{{selectedProject.name}}
{{selectedProject?.name ? selectedProject.name + ' (owned)' : selectedProject?.projectName ? selectedProject.projectName + ' (granted)': ''}}
<mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
</mat-chip>
<input placeholder="{{'PROJECT.NAME' | translate}}" #nameInput [formControl]="myControl"
@@ -21,7 +21,7 @@
<mat-spinner diameter="30"></mat-spinner>
</mat-option>
<mat-option *ngFor="let project of filteredProjects" [value]="project">
{{project.name}}
{{project?.name ? project.name + ' (owned)' : project?.projectName ? project.projectName + ' (granted)': ''}}
</mat-option>
</mat-autocomplete>
</mat-form-field>
console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts
+31 -23
View File
@@ -3,13 +3,13 @@ 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 } from 'rxjs';
import { from, merge } from 'rxjs';
import { debounceTime, switchMap, tap } from 'rxjs/operators';
import {
Project,
ProjectGrantView,
ProjectSearchKey,
ProjectSearchQuery,
ProjectView,
SearchMethod,
} from 'src/app/proto/generated/management_pb';
import { ProjectService } from 'src/app/services/project.service';
@@ -26,14 +26,18 @@ export class SearchProjectAutocompleteComponent {
public separatorKeysCodes: number[] = [ENTER, COMMA];
public myControl: FormControl = new FormControl();
public names: string[] = [];
public projects: Array<ProjectGrantView.AsObject> = [];
public filteredProjects: Array<ProjectGrantView.AsObject> = [];
public projects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
public filteredProjects: Array<ProjectGrantView.AsObject | ProjectView.AsObject | any> = [];
public isLoading: boolean = false;
@ViewChild('nameInput') public nameInput!: ElementRef<HTMLInputElement>;
@ViewChild('auto') public matAutocomplete!: MatAutocomplete;
@Input() public singleOutput: boolean = false;
@Output() public selectionChanged: EventEmitter<ProjectGrantView.AsObject[] | ProjectGrantView.AsObject>
= new EventEmitter();
@Output() public selectionChanged: EventEmitter<
ProjectGrantView.AsObject[]
| ProjectGrantView.AsObject
| ProjectView.AsObject
| ProjectView.AsObject[]
> = new EventEmitter();
constructor(private projectService: ProjectService) {
this.myControl.valueChanges
.pipe(
@@ -44,17 +48,22 @@ export class SearchProjectAutocompleteComponent {
query.setKey(ProjectSearchKey.PROJECTSEARCHKEY_PROJECT_NAME);
query.setValue(value);
query.setMethod(SearchMethod.SEARCHMETHOD_CONTAINS);
return from(this.projectService.SearchGrantedProjects(10, 0, [query]));
return merge(
from(this.projectService.SearchGrantedProjects(10, 0, [query])),
from(this.projectService.SearchProjects(10, 0, [query])),
);
}),
// finalize(() => this.isLoading = false),
).subscribe((projects) => {
this.isLoading = false;
this.filteredProjects = projects.toObject().resultList;
console.log(this.filteredProjects);
});
}
public displayFn(project?: Project.AsObject): string | undefined {
return project ? `${project.name}` : undefined;
public displayFn(project?: any): string | undefined {
return (project && project.projectName) ? `${project.projectName}` :
(project && project.name) ? `${project.name}` : undefined;
}
public add(event: MatChipInputEvent): void {
@@ -64,8 +73,10 @@ export class SearchProjectAutocompleteComponent {
if ((value || '').trim()) {
const index = this.filteredProjects.findIndex((project) => {
if (project.projectName) {
if (project?.projectName) {
return project.projectName === value;
} else if (project?.name) {
return project.name === value;
}
});
if (index > -1) {
@@ -92,22 +103,19 @@ export class SearchProjectAutocompleteComponent {
}
public selected(event: MatAutocompleteSelectedEvent): void {
const index = this.filteredProjects.findIndex((project) => project === event.option.value);
if (index !== -1) {
if (this.singleOutput) {
this.selectionChanged.emit(this.filteredProjects[index]);
console.log(event.option.value);
if (this.singleOutput) {
this.selectionChanged.emit(event.option.value);
} else {
if (this.projects && this.projects.length > 0) {
this.projects.push(event.option.value);
} else {
if (this.projects && this.projects.length > 0) {
this.projects.push(this.filteredProjects[index]);
} else {
this.projects = [this.filteredProjects[index]];
}
this.selectionChanged.emit(this.projects);
this.nameInput.nativeElement.value = '';
this.myControl.setValue(null);
this.projects = [event.option.value];
}
this.selectionChanged.emit(this.projects);
this.nameInput.nativeElement.value = '';
this.myControl.setValue(null);
}
}
}