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

fix(console): infinite scrolling for org context (#7965)

Browse Source 
* add scroll directive, iterative loading

* sorting column

* fix: filter

* batch of 100, max height 350px

* cleanup
This commit is contained in:
Max Peintner
2024-05-17 17:28:29 +00:00
committed by GitHub
parent 6858ed7b21
commit f482231f79
8 changed files with 107 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
console/src/app/modules/org-context/org-context.component.ts
+95 -27
View File
@@ -1,11 +1,14 @@
import { SelectionModel } from '@angular/cdk/collections';
import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
import { UntypedFormControl } from '@angular/forms';
import { BehaviorSubject, catchError, debounceTime, finalize, from, map, Observable, of, pipe, tap } from 'rxjs';
import { BehaviorSubject, catchError, debounceTime, finalize, from, map, Observable, of, pipe, scan, take, tap } from 'rxjs';
import { TextQueryMethod } from 'src/app/proto/generated/zitadel/object_pb';
import { Org, OrgNameQuery, OrgQuery, OrgState, OrgStateQuery } from 'src/app/proto/generated/zitadel/org_pb';
import { Org, OrgFieldName, OrgNameQuery, OrgQuery, OrgState, OrgStateQuery } from 'src/app/proto/generated/zitadel/org_pb';
import { AuthenticationService } from 'src/app/services/authentication.service';
import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
import { ToastService } from 'src/app/services/toast.service';
const ORG_QUERY_LIMIT = 100;
@Component({
selector: 'cnsl-org-context',
@@ -16,7 +19,30 @@ export class OrgContextComponent implements OnInit {
public pinned: SelectionModel<Org.AsObject> = new SelectionModel<Org.AsObject>(true, []);
public orgLoading$: BehaviorSubject<any> = new BehaviorSubject(false);
public orgs$: Observable<Org.AsObject[]> = of([]);
public bottom: boolean = false;
private _done: BehaviorSubject<any> = new BehaviorSubject(false);
private _loading: BehaviorSubject<any> = new BehaviorSubject(false);
public _orgs: BehaviorSubject<Org.AsObject[]> = new BehaviorSubject<Org.AsObject[]>([]);
public orgs$: Observable<Org.AsObject[]> = this._orgs.pipe(
map((orgs) => {
return orgs.sort((left, right) => left.name.localeCompare(right.name));
}),
pipe(
tap((orgs: Org.AsObject[]) => {
this.pinned.clear();
this.getPrefixedItem('pinned-orgs').then((stringifiedOrgs) => {
if (stringifiedOrgs) {
const orgIds: string[] = JSON.parse(stringifiedOrgs);
const pinnedOrgs = orgs.filter((o) => orgIds.includes(o.id));
pinnedOrgs.forEach((o) => this.pinned.select(o));
}
});
}),
),
);
public filterControl: UntypedFormControl = new UntypedFormControl('');
@Input() public org!: Org.AsObject;
@ViewChild('input', { static: false }) input!: ElementRef;
@@ -26,15 +52,17 @@ export class OrgContextComponent implements OnInit {
constructor(
public authService: AuthenticationService,
private auth: GrpcAuthService,
private toast: ToastService,
) {
this.filterControl.valueChanges.pipe(debounceTime(500)).subscribe((value) => {
this.loadOrgs(value.trim().toLowerCase());
const filteredValues = this.loadOrgs(0, value.trim().toLowerCase());
this.mapAndUpdate(filteredValues, true);
});
}
public ngOnInit(): void {
this.focusFilter();
this.loadOrgs();
this.init();
}
public setActiveOrg(org: Org.AsObject) {
@@ -42,7 +70,24 @@ export class OrgContextComponent implements OnInit {
this.closedCard.emit();
}
public loadOrgs(filter?: string): void {
public onNearEndScroll(position: 'top' | 'bottom'): void {
if (position === 'bottom') {
this.more();
}
}
public more(): void {
const _cursor = this._orgs.getValue().length;
let more: Promise<Org.AsObject[]> = this.loadOrgs(_cursor, '');
this.mapAndUpdate(more);
}
public init(): void {
let first: Promise<Org.AsObject[]> = this.loadOrgs(0);
this.mapAndUpdate(first);
}
public loadOrgs(offset: number, filter?: string): Promise<Org.AsObject[]> {
if (!filter) {
const value = this.input?.nativeElement?.value;
if (value) {
@@ -61,29 +106,52 @@ export class OrgContextComponent implements OnInit {
orgNameQuery.setMethod(TextQueryMethod.TEXT_QUERY_METHOD_CONTAINS_IGNORE_CASE);
query.setNameQuery(orgNameQuery);
}
this.orgLoading$.next(true);
this.orgs$ = from(this.auth.listMyProjectOrgs(undefined, 0, query ? [query] : undefined)).pipe(
map((resp) => {
return resp.resultList.sort((left, right) => left.name.localeCompare(right.name));
}),
catchError(() => of([])),
pipe(
tap((orgs: Org.AsObject[]) => {
this.pinned.clear();
this.getPrefixedItem('pinned-orgs').then((stringifiedOrgs) => {
if (stringifiedOrgs) {
const orgIds: string[] = JSON.parse(stringifiedOrgs);
const pinnedOrgs = orgs.filter((o) => orgIds.includes(o.id));
pinnedOrgs.forEach((o) => this.pinned.select(o));
}
});
}),
),
finalize(() => {
return this.auth
.listMyProjectOrgs(ORG_QUERY_LIMIT, offset, query ? [query] : undefined, OrgFieldName.ORG_FIELD_NAME_NAME, 'asc')
.then((result) => {
this.orgLoading$.next(false);
}),
);
return result.resultList;
})
.catch((error) => {
this.orgLoading$.next(false);
this.toast.showError(error);
return [];
});
}
private mapAndUpdate(col: Promise<Org.AsObject[]>, clear?: boolean): any {
if (clear === false && (this._done.value || this._loading.value)) {
return;
}
if (!this.bottom) {
this._loading.next(true);
return from(col)
.pipe(
take(1),
tap((res: Org.AsObject[]) => {
const current = this._orgs.getValue();
if (clear) {
this._orgs.next(res);
} else {
this._orgs.next([...current, ...res]);
}
this._loading.next(false);
if (!res.length) {
this._done.next(true);
}
}),
catchError((_) => {
this._loading.next(false);
this.bottom = true;
return of([]);
}),
)
.subscribe();
}
}
public closeCard(element: HTMLElement): void {