From ca6c30fbe44cf33965580b88cee937d00ef5b287 Mon Sep 17 00:00:00 2001 From: Michael Bromley Date: Mon, 18 May 2020 16:22:31 +0200 Subject: [PATCH] feat(admin-ui): Display visual feedback when uploading Assets --- .../asset-list/asset-list.component.html | 1 + .../asset-list/asset-list.component.ts | 29 ++++++++------- .../asset-file-input.component.html | 8 ++++- .../asset-file-input.component.ts | 3 +- .../asset-picker-dialog.component.html | 1 + .../asset-picker-dialog.component.ts | 36 ++++++++++--------- .../src/lib/static/i18n-messages/en.json | 6 ++-- 7 files changed, 50 insertions(+), 34 deletions(-) diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html index f6ef131ed1..dabf7250e1 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html +++ b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.html @@ -12,6 +12,7 @@ diff --git a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts index 2fee9bdcce..350036e455 100644 --- a/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts +++ b/packages/admin-ui/src/lib/catalog/src/components/asset-list/asset-list.component.ts @@ -14,7 +14,7 @@ import { import { SortOrder } from '@vendure/common/lib/generated-shop-types'; import { PaginationInstance } from 'ngx-pagination'; import { combineLatest, EMPTY, Observable } from 'rxjs'; -import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators'; +import { debounceTime, finalize, map, switchMap, takeUntil } from 'rxjs/operators'; @Component({ selector: 'vdr-asset-list', @@ -24,6 +24,7 @@ import { debounceTime, map, switchMap, takeUntil } from 'rxjs/operators'; export class AssetListComponent extends BaseListComponent implements OnInit { searchTerm = new FormControl(''); + uploading = false; paginationConfig$: Observable; constructor( @@ -36,7 +37,7 @@ export class AssetListComponent extends BaseListComponent this.dataService.product.getAssetList(...args), - data => data.assets, + (data) => data.assets, (skip, take) => ({ options: { skip, @@ -66,24 +67,28 @@ export class AssetListComponent extends BaseListComponent { - super.refresh(); - this.notificationService.success(_('asset.notify-create-assets-success'), { - count: files.length, + this.uploading = true; + this.dataService.product + .createAssets(files) + .pipe(finalize(() => (this.uploading = false))) + .subscribe((res) => { + super.refresh(); + this.notificationService.success(_('asset.notify-create-assets-success'), { + count: files.length, + }); }); - }); } } deleteAsset(asset: Asset) { this.showModalAndDelete(asset.id) .pipe( - switchMap(response => { + switchMap((response) => { if (response.result === DeletionResult.DELETED) { return [true]; } else { return this.showModalAndDelete(asset.id, response.message || '').pipe( - map(r => r.result === DeletionResult.DELETED), + map((r) => r.result === DeletionResult.DELETED), ); } }), @@ -95,7 +100,7 @@ export class AssetListComponent extends BaseListComponent { + (err) => { this.notificationService.error(_('common.notify-delete-error'), { entity: 'Asset', }); @@ -114,8 +119,8 @@ export class AssetListComponent extends BaseListComponent (res ? this.dataService.product.deleteAsset(assetId, !!message) : EMPTY)), - map(res => res.deleteAsset), + switchMap((res) => (res ? this.dataService.product.deleteAsset(assetId, !!message) : EMPTY)), + map((res) => res.deleteAsset), ); } } diff --git a/packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.html b/packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.html index dbb58bc709..314b050fb5 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.html +++ b/packages/admin-ui/src/lib/core/src/shared/components/asset-file-input/asset-file-input.component.html @@ -1,7 +1,13 @@ -
(); dragging = false; overDropZone = false; @@ -64,7 +65,7 @@ export class AssetFileInputComponent implements OnInit { this.dragging = false; this.overDropZone = false; const files = Array.from(event.dataTransfer ? event.dataTransfer.items : []) - .map(i => i.getAsFile()) + .map((i) => i.getAsFile()) .filter(notNullOrUndefined); this.selectFiles.emit(files); } 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 432064f543..36303e9c86 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 @@ -3,6 +3,7 @@ {{ 'asset.select-assets' | translate }}
diff --git a/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts b/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts index b372be0c2a..a701e72de2 100644 --- a/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts +++ b/packages/admin-ui/src/lib/core/src/shared/components/asset-picker-dialog/asset-picker-dialog.component.ts @@ -3,7 +3,7 @@ import { FormControl } from '@angular/forms'; import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'; import { PaginationInstance } from 'ngx-pagination'; import { Observable, Subject } from 'rxjs'; -import { debounceTime, map, takeUntil, tap } from 'rxjs/operators'; +import { debounceTime, finalize, map, takeUntil, tap } from 'rxjs/operators'; import { Asset, GetAssetList, SortOrder } from '../../../common/generated-types'; import { DataService } from '../../../data/providers/data.service'; @@ -31,6 +31,7 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog void; selection: Asset[] = []; searchTerm = new FormControl(''); + uploading = false; private listQuery: QueryResult; private destroy$ = new Subject(); @@ -39,15 +40,12 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog (this.paginationConfig.totalItems = result.assets.totalItems)), - map(result => result.assets.items), + tap((result) => (this.paginationConfig.totalItems = result.assets.totalItems)), + map((result) => result.assets.items), ); this.searchTerm.valueChanges - .pipe( - debounceTime(250), - takeUntil(this.destroy$), - ) - .subscribe(searchTerm => { + .pipe(debounceTime(250), takeUntil(this.destroy$)) + .subscribe((searchTerm) => { this.fetchPage( this.paginationConfig.currentPage, this.paginationConfig.itemsPerPage, @@ -89,16 +87,20 @@ export class AssetPickerDialogComponent implements OnInit, OnDestroy, Dialog { - this.fetchPage( - this.paginationConfig.currentPage, - this.paginationConfig.itemsPerPage, - this.searchTerm.value, - ); - this.notificationService.success(_('asset.notify-create-assets-success'), { - count: files.length, + this.uploading = true; + this.dataService.product + .createAssets(files) + .pipe(finalize(() => (this.uploading = false))) + .subscribe((res) => { + this.fetchPage( + this.paginationConfig.currentPage, + this.paginationConfig.itemsPerPage, + this.searchTerm.value, + ); + this.notificationService.success(_('asset.notify-create-assets-success'), { + count: files.length, + }); }); - }); } } diff --git a/packages/admin-ui/src/lib/static/i18n-messages/en.json b/packages/admin-ui/src/lib/static/i18n-messages/en.json index 710e9bdf96..70cb6d90f2 100644 --- a/packages/admin-ui/src/lib/static/i18n-messages/en.json +++ b/packages/admin-ui/src/lib/static/i18n-messages/en.json @@ -21,7 +21,8 @@ "update-focal-point": "Update point", "update-focal-point-error": "Could not update focal point", "update-focal-point-success": "Updated focal point", - "upload-assets": "Upload assets" + "upload-assets": "Upload assets", + "uploading": "Uploading..." }, "breadcrumb": { "administrators": "Administrators", @@ -665,7 +666,6 @@ "job-error": "Job error", "job-queue-name": "Queue name", "job-result": "Job result", - "job-state": "Job state", - "jobs-in-progress": "{ count } {count, plural, one {job} other {jobs}} in progress" + "job-state": "Job state" } }