fix(console): ui issues (#1670)

* mark required fields

* membership overflow, deactivate btn

* app create show info

* remove padding

* lint scss

* fix count of results

* rm log
This commit is contained in:
Max Peintner
2021-04-27 08:15:53 +02:00
committed by GitHub
parent c4607409a5
commit 10e85d999e
19 changed files with 1193 additions and 1151 deletions
@@ -7,8 +7,8 @@ import { Member } from 'src/app/proto/generated/zitadel/member_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
export enum ProjectType {
PROJECTTYPE_OWNED = 'OWNED',
PROJECTTYPE_GRANTED = 'GRANTED',
PROJECTTYPE_OWNED = 'OWNED',
PROJECTTYPE_GRANTED = 'GRANTED',
}
/**
@@ -17,68 +17,70 @@ export enum ProjectType {
* (including sorting, pagination, and filtering).
*/
export class ProjectMembersDataSource extends DataSource<Member.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public membersSubject: BehaviorSubject<Member.AsObject[]> = new BehaviorSubject<Member.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private mgmtService: ManagementService) {
super();
}
constructor(private mgmtService: ManagementService) {
super();
}
public loadMembers(projectId: string,
projectType: ProjectType,
pageIndex: number, pageSize: number, grantId?: string): void {
const offset = pageIndex * pageSize;
public loadMembers(projectId: string,
projectType: ProjectType,
pageIndex: number, pageSize: number, grantId?: string): void {
const offset = pageIndex * pageSize;
this.loadingSubject.next(true);
this.loadingSubject.next(true);
const promise:
Promise<ListProjectMembersResponse.AsObject> |
Promise<ListProjectGrantMembersResponse.AsObject>
| undefined =
projectType === ProjectType.PROJECTTYPE_OWNED ?
this.mgmtService.listProjectMembers(projectId, pageSize, offset) :
projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ?
this.mgmtService.listProjectGrantMembers(projectId,
grantId, pageSize, offset) : undefined;
if (promise) {
from(promise).pipe(
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
const promise:
Promise<ListProjectMembersResponse.AsObject> |
Promise<ListProjectGrantMembersResponse.AsObject>
| undefined =
projectType === ProjectType.PROJECTTYPE_OWNED ?
this.mgmtService.listProjectMembers(projectId, pageSize, offset) :
projectType === ProjectType.PROJECTTYPE_GRANTED && grantId ?
this.mgmtService.listProjectGrantMembers(projectId,
grantId, pageSize, offset) : undefined;
if (promise) {
from(promise).pipe(
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details?.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(members => {
this.membersSubject.next(members);
});
}
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<Member.AsObject[]> {
return this.membersSubject.asObservable();
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<Member.AsObject[]> {
return this.membersSubject.asObservable();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.membersSubject.complete();
this.loadingSubject.complete();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.membersSubject.complete();
this.loadingSubject.complete();
}
}
@@ -4,150 +4,152 @@ import { BehaviorSubject, from, Observable, of } from 'rxjs';
import { catchError, finalize, map } from 'rxjs/operators';
import { ListUserGrantResponse } from 'src/app/proto/generated/zitadel/management_pb';
import {
UserGrant,
UserGrantProjectGrantIDQuery,
UserGrantProjectIDQuery,
UserGrantQuery,
UserGrantUserIDQuery,
UserGrant,
UserGrantProjectGrantIDQuery,
UserGrantProjectIDQuery,
UserGrantQuery,
UserGrantUserIDQuery,
} from 'src/app/proto/generated/zitadel/user_pb';
import { ManagementService } from 'src/app/services/mgmt.service';
export enum UserGrantContext {
NONE = 'none',
USER = 'user',
OWNED_PROJECT = 'owned',
GRANTED_PROJECT = 'granted',
NONE = 'none',
USER = 'user',
OWNED_PROJECT = 'owned',
GRANTED_PROJECT = 'granted',
}
export class UserGrantsDataSource extends DataSource<UserGrant.AsObject> {
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public totalResult: number = 0;
public viewTimestamp!: Timestamp.AsObject;
public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
public grantsSubject: BehaviorSubject<UserGrant.AsObject[]> = new BehaviorSubject<UserGrant.AsObject[]>([]);
private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
public loading$: Observable<boolean> = this.loadingSubject.asObservable();
constructor(private userService: ManagementService) {
super();
}
constructor(private userService: ManagementService) {
super();
}
public loadGrants(
context: UserGrantContext,
pageIndex: number,
pageSize: number,
data: {
projectId?: string;
grantId?: string;
userId?: string;
},
queries?: UserGrantQuery[],
): void {
switch (context) {
case UserGrantContext.USER:
if (data && data.userId) {
this.loadingSubject.next(true);
public loadGrants(
context: UserGrantContext,
pageIndex: number,
pageSize: number,
data: {
projectId?: string;
grantId?: string;
userId?: string;
},
queries?: UserGrantQuery[],
): void {
switch (context) {
case UserGrantContext.USER:
if (data && data.userId) {
this.loadingSubject.next(true);
const userfilter = new UserGrantQuery();
const ugUiq = new UserGrantUserIDQuery();
ugUiq.setUserId(data.userId);
userfilter.setUserIdQuery(ugUiq);
const userfilter = new UserGrantQuery();
const ugUiq = new UserGrantUserIDQuery();
ugUiq.setUserId(data.userId);
userfilter.setUserIdQuery(ugUiq);
if (queries) {
queries.push(userfilter);
} else {
queries = [userfilter];
}
if (queries) {
queries.push(userfilter);
} else {
queries = [userfilter];
}
const promise = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise);
}
break;
case UserGrantContext.OWNED_PROJECT:
if (data && data.projectId) {
this.loadingSubject.next(true);
const projectfilter = new UserGrantQuery();
const ugPfq = new UserGrantProjectIDQuery();
ugPfq.setProjectId(data.projectId);
projectfilter.setProjectIdQuery(ugPfq);
if (queries) {
queries.push(projectfilter);
} else {
queries = [projectfilter];
}
const promise1 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise1);
}
break;
case UserGrantContext.GRANTED_PROJECT:
if (data && data.grantId && data.projectId) {
this.loadingSubject.next(true);
const grantfilter = new UserGrantQuery();
const uggiq = new UserGrantProjectGrantIDQuery();
uggiq.setProjectGrantId(data.grantId);
grantfilter.setProjectGrantIdQuery(uggiq);
const projectfilter = new UserGrantQuery();
const ugPfq = new UserGrantProjectIDQuery();
ugPfq.setProjectId(data.projectId);
projectfilter.setProjectIdQuery(ugPfq);
if (queries) {
queries.push(grantfilter);
} else {
queries = [grantfilter];
}
const promise2 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise2);
}
break;
default:
this.loadingSubject.next(true);
const promise3 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries ?? []);
this.loadResponse(promise3);
break;
const promise = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise);
}
}
break;
case UserGrantContext.OWNED_PROJECT:
if (data && data.projectId) {
this.loadingSubject.next(true);
private loadResponse(promise: Promise<ListUserGrantResponse.AsObject>): void {
from(promise).pipe(
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(grants => {
this.grantsSubject.next(grants);
});
const projectfilter = new UserGrantQuery();
const ugPfq = new UserGrantProjectIDQuery();
ugPfq.setProjectId(data.projectId);
projectfilter.setProjectIdQuery(ugPfq);
if (queries) {
queries.push(projectfilter);
} else {
queries = [projectfilter];
}
const promise1 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise1);
}
break;
case UserGrantContext.GRANTED_PROJECT:
if (data && data.grantId && data.projectId) {
this.loadingSubject.next(true);
const grantfilter = new UserGrantQuery();
const uggiq = new UserGrantProjectGrantIDQuery();
uggiq.setProjectGrantId(data.grantId);
grantfilter.setProjectGrantIdQuery(uggiq);
const projectfilter = new UserGrantQuery();
const ugPfq = new UserGrantProjectIDQuery();
ugPfq.setProjectId(data.projectId);
projectfilter.setProjectIdQuery(ugPfq);
if (queries) {
queries.push(grantfilter);
} else {
queries = [grantfilter];
}
const promise2 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries);
this.loadResponse(promise2);
}
break;
default:
this.loadingSubject.next(true);
const promise3 = this.userService.listUserGrants(pageSize, pageSize * pageIndex, queries ?? []);
this.loadResponse(promise3);
break;
}
}
private loadResponse(promise: Promise<ListUserGrantResponse.AsObject>): void {
from(promise).pipe(
map(resp => {
if (resp.details?.totalResult) {
this.totalResult = resp.details.totalResult;
} else {
this.totalResult = 0;
}
if (resp.details?.viewTimestamp) {
this.viewTimestamp = resp.details.viewTimestamp;
}
return resp.resultList;
}),
catchError(() => of([])),
finalize(() => this.loadingSubject.next(false)),
).subscribe(grants => {
this.grantsSubject.next(grants);
});
}
/**
* 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<UserGrant.AsObject[]> {
return this.grantsSubject.asObservable();
}
/**
* Connect this data source to the table. The table will only update when
* the returned stream emits new items.
* @returns A stream of the items to be rendered.
*/
public connect(): Observable<UserGrant.AsObject[]> {
return this.grantsSubject.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.grantsSubject.complete();
this.loadingSubject.complete();
}
/**
* Called when the table is being destroyed. Use this function, to clean up
* any open connections or free any held resources that were set up during connect.
*/
public disconnect(): void {
this.grantsSubject.complete();
this.loadingSubject.complete();
}
}