diff --git a/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html b/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html index 0a6b9851c7..4fc0037d13 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html +++ b/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html @@ -15,6 +15,7 @@ [tags]="allTags$ | async" (searchTermChange)="searchTerm$.next($event)" (tagsChange)="filterByTags$.next($event)" + #assetSearchInputComponent > { +export class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDestroy, Dialog { assets$: Observable; allTags$: Observable; paginationConfig: PaginationInstance = { @@ -33,8 +41,11 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog void; selection: Asset[] = []; @@ -56,11 +67,24 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog { this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage); }); - this.filterByTags$.pipe(takeUntil(this.destroy$)).subscribe(() => { + this.filterByTags$.pipe(debounceTime(100), takeUntil(this.destroy$)).subscribe(() => { this.fetchPage(this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage); }); } + ngAfterViewInit() { + if (0 < this.initialTags.length) { + this.allTags$ + .pipe( + rxjsTake(1), + map(allTags => allTags.filter(tag => this.initialTags.includes(tag.value))), + tap(tags => this.filterByTags$.next(tags)), + delay(1), + ) + .subscribe(tags => this.assetSearchInputComponent.setTags(tags)); + } + } + ngOnDestroy(): void { this.destroy$.next(); this.destroy$.complete();