feat(admin-ui): Auto-select newly uploaded assets in AssetPickerDialog

vendure-ecommerce · Jul 15, 2021 · 96cc8f9 · 96cc8f9
1 parent 1b218ed
commit 96cc8f9
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 5 deletions.
diff --git a/...es/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.html b/...es/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.html
@@ -2,7 +2,7 @@
     <div
         class="card"
         *ngFor="let asset of assets"
-        (click)="toggleSelection($event, asset)"
+        (click)="toggleSelection(asset, $event)"
         [class.selected]="isSelected(asset)"
     >
         <div class="card-img">

diff --git a/...ages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.ts b/...ages/admin-ui/src/lib/core/src/shared/components/asset-gallery/asset-gallery.component.ts
@@ -38,9 +38,9 @@ export class AssetGalleryComponent implements OnChanges {
         }
     }
 
-    toggleSelection(event: MouseEvent, asset: Asset) {
+    toggleSelection(asset: AssetLike, event?: MouseEvent) {
         const index = this.selection.findIndex(a => a.id === asset.id);
-        if (this.multiSelect && event.shiftKey && 1 <= this.selection.length) {
+        if (this.multiSelect && event?.shiftKey && 1 <= this.selection.length) {
             const lastSelection = this.selection[this.selection.length - 1];
             const lastSelectionIndex = this.assets.findIndex(a => a.id === lastSelection.id);
             const currentIndex = this.assets.findIndex(a => a.id === asset.id);
@@ -50,13 +50,13 @@ export class AssetGalleryComponent implements OnChanges {
                 ...this.assets.slice(start, end).filter(a => !this.selection.find(s => s.id === a.id)),
             );
         } else if (index === -1) {
-            if (this.multiSelect && (event.ctrlKey || event.shiftKey)) {
+            if (this.multiSelect && (event?.ctrlKey || event?.shiftKey)) {
                 this.selection.push(asset);
             } else {
                 this.selection = [asset];
             }
         } else {
-            if (this.multiSelect && event.ctrlKey) {
+            if (this.multiSelect && event?.ctrlKey) {
                 this.selection.splice(index, 1);
             } else if (1 < this.selection.length) {
                 this.selection = [asset];
@@ -69,6 +69,11 @@ export class AssetGalleryComponent implements OnChanges {
         this.selectionChange.emit(this.selection);
     }
 
+    selectMultiple(assets: AssetLike[]) {
+        this.selection = assets;
+        this.selectionChange.emit(this.selection);
+    }
+
     isSelected(asset: AssetLike): boolean {
         return !!this.selection.find(a => a.id === asset.id);
     }

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
@@ -21,6 +21,7 @@
     [assets]="(assets$ | async)! | paginate: paginationConfig"
     [multiSelect]="multiSelect"
     (selectionChange)="selection = $event"
+    #assetGalleryComponent
 ></vdr-asset-gallery>
 
 <div class="paging-controls">

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
@@ -13,6 +13,7 @@ import { debounceTime, delay, finalize, map, take as rxjsTake, takeUntil, tap }
 
 import {
     Asset,
+    CreateAssets,
     GetAssetList,
     LogicalOperator,
     SortOrder,
@@ -22,6 +23,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 { AssetGalleryComponent } from '../asset-gallery/asset-gallery.component';
 import { AssetSearchInputComponent } from '../asset-search-input/asset-search-input.component';
 
 /**
@@ -43,6 +45,8 @@ export class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDest
     };
     @ViewChild('assetSearchInputComponent')
     private assetSearchInputComponent: AssetSearchInputComponent;
+    @ViewChild('assetGalleryComponent')
+    private assetGalleryComponent: AssetGalleryComponent;
 
     multiSelect = true;
     initialTags: string[] = [];
@@ -119,6 +123,10 @@ export class AssetPickerDialogComponent implements OnInit, AfterViewInit, OnDest
                     this.notificationService.success(_('asset.notify-create-assets-success'), {
                         count: files.length,
                     });
+                    const assets = res.createAssets.filter(
+                        a => a.__typename === 'Asset',
+                    ) as CreateAssets.AssetInlineFragment[];
+                    this.assetGalleryComponent.selectMultiple(assets);
                 });
         }
     }