feat(admin-ui): AssetPickerDialog can take initial tags

vendure-ecommerce · Apr 5, 2021 · 03c6706 · 03c6706
1 parent d0588aa
commit 03c6706
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 4 deletions.
diff --git a/...src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.html b/...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
 ></vdr-asset-search-input>
 <vdr-asset-gallery
     [assets]="(assets$ | async)! | paginate: paginationConfig"

diff --git a/...i/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts b/...i/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts
@@ -1,8 +1,15 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import {
+    AfterViewInit,
+    ChangeDetectionStrategy,
+    Component,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+} from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { PaginationInstance } from 'ngx-pagination';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { debounceTime, finalize, map, takeUntil, tap } from 'rxjs/operators';
+import { debounceTime, delay, finalize, map, take as rxjsTake, takeUntil, tap } from 'rxjs/operators';
 
 import {
     Asset,
@@ -15,6 +22,7 @@ import { DataService } from '../../../data/providers/data.service';
 import { QueryResult } from '../../../data/query-result';
 import { Dialog } from '../../../providers/modal/modal.service';
 import { NotificationService } from '../../../providers/notification/notification.service';
+import { AssetSearchInputComponent } from '../asset-search-input/asset-search-input.component';
 
 /**
  * A dialog which allows the creation and selection of assets.
@@ -25,16 +33,19 @@ import { NotificationService } from '../../../providers/notification/notificatio
     styleUrls: ['./asset-picker-dialog.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog<Asset[]> {
+export class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDestroy, Dialog<Asset[]> {
     assets$: Observable<GetAssetList.Items[]>;
     allTags$: Observable<TagFragment[]>;
     paginationConfig: PaginationInstance = {
         currentPage: 1,
         itemsPerPage: 25,
         totalItems: 1,
     };
+    @ViewChild('assetSearchInputComponent')
+    private assetSearchInputComponent: AssetSearchInputComponent;
 
     multiSelect = true;
+    initialTags: string[] = [];
 
     resolveWith: (result?: Asset[]) => void;
     selection: Asset[] = [];
@@ -56,11 +67,24 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog<Ass
         this.searchTerm$.pipe(debounceTime(250), takeUntil(this.destroy$)).subscribe(() => {
             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();