@rs-pk/asset-management 1.0.29 → 1.0.31

package/fesm2015/rs-pk-asset-management.js

@@ -1252,6 +1252,7 @@ class UploadAssetsService {
         this._api = _api;
         this.files = [];
         this.fileNames = [];
+        this.uploadErrors = new Map();
         this.supportedSize = 10 * 1024 * 1024; // 10MB
         // 10MB
         this.documentExtension = ['.pdf', '.csv'];
@@ -1327,9 +1328,21 @@ class UploadAssetsService {
      * @return {?}
      */
     deleteFile(index) {
+        this.uploadErrors.delete(this.files[index]);
         this.files.splice(index, 1);
         this.fileNames.splice(index, 1);
     }
+    /**
+     * @param {?} index
+     * @return {?}
+     */
+    getUploadName(index) {
+        /** @type {?} */
+        const nameSplit = this.files[index].name.split('.');
+        /** @type {?} */
+        const ext = `.${nameSplit.splice(nameSplit.length - 1, 1)[0]}`;
+        return `${this.fileNames[index].name}${ext}`;
+    }
     /**
      * @param {?} parentAssetId
      * @return {?}
@@ -1337,21 +1350,11 @@ class UploadAssetsService {
     uploadMultipleAssets(parentAssetId) {
         const { files } = this;
         /** @type {?} */
-        const fileNames = this.fileNames.map((/**
-         * @param {?} file
-         * @return {?}
-         */
-        file => file.name));
-        /** @type {?} */
         const formData = new FormData();
         formData.append('parentAssetId', parentAssetId);
         formData.append('companyId', '732DA8D2-04EC-4BE0-A168-63EE0DCF50D8');
         for (let i = 0; i < files.length; i++) {
-            /** @type {?} */
-            const nameSplit = files[i].name.split('.');
-            /** @type {?} */
-            const ext = `.${nameSplit.splice(nameSplit.length - 1, 1)[0]}`;
-            formData.append('files', files[i], `${fileNames[i]}${ext}`);
+            formData.append('files', files[i], this.getUploadName(i));
         }
         return this._api.post(`${this.baseUrl}/File/Upload`, formData);
     }
@@ -1374,6 +1377,8 @@ if (false) {
     /** @type {?} */
     UploadAssetsService.prototype.fileNames;
     /** @type {?} */
+    UploadAssetsService.prototype.uploadErrors;
+    /** @type {?} */
     UploadAssetsService.prototype.supportedSize;
     /** @type {?} */
     UploadAssetsService.prototype.documentExtension;
@@ -2079,6 +2084,12 @@ class FileItemComponent {
     ngOnInit() {
         this.initDataFile();
     }
+    /**
+     * @return {?}
+     */
+    get uploadErrors() {
+        return this.uploadAssetService.uploadErrors.get(this.file);
+    }
     /**
      * @private
      * @return {?}
@@ -2178,8 +2189,8 @@ class FileItemComponent {
 FileItemComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-file-item',
-                template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || documentExts.indexOf(dataFile.ext) > -1;\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"documentExts.indexOf(dataFile.ext) > -1 || dataFile.data\"\n      [src]=\"documentExts.indexOf(dataFile.ext) > -1 ? base64PNG[dataFile.ext] : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['ext'] }}\n    {{ uploadAssetService.supportedTypes.join(', ') }}\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['size'] }}\n    {{ uploadAssetService.supportedSize | fileSize: 0 }}\n  </div>\n  <div *ngIf=\"dataFile.errors.maxLength\" class=\"file-item__error\">\n    {{ uploadAssetService.messageErrors['maxLength'] }}\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
-                styles: [":host::ng-deep{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;background-color:#f9f9f9;border-radius:10px}:host::ng-deep .file-item__img{display:flex;justify-content:center;align-items:center;width:250px;height:150px;border-radius:10px}:host::ng-deep .file-item__img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}:host::ng-deep .file-item__img img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .file-item__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-item__content{flex:1;padding-left:5%;padding-right:5%}:host::ng-deep .file-item__content--name{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px}:host::ng-deep .file-item__content--info{margin-top:10px;display:flex}:host::ng-deep .file-item__content--info__item:not(:last-child){margin-right:50px}:host::ng-deep .file-item__content--info__item span{color:#000;text-transform:uppercase}:host::ng-deep .file-item__error{margin-top:10px;color:#f44336}:host::ng-deep .file-item__action{color:#f44336;cursor:pointer}"]
+                template: "<div class=\"file-item__img\">\n  <ng-container\n    *ngIf=\"\n      file.type.indexOf('image') > -1 || documentExts.indexOf(dataFile.ext) > -1;\n      else defaultFile\n    \"\n  >\n    <img\n      [class.image]=\"file.type.indexOf('image') > -1\"\n      *ngIf=\"documentExts.indexOf(dataFile.ext) > -1 || dataFile.data\"\n      [src]=\"documentExts.indexOf(dataFile.ext) > -1 ? base64PNG[dataFile.ext] : dataFile.data\"\n    />\n  </ng-container>\n  <ng-template #defaultFile>\n    <mat-icon>attach_file</mat-icon>\n  </ng-template>\n</div>\n<div class=\"file-item__content\">\n  <input\n    class=\"file-item__content--name\"\n    matInput\n    placeholder=\"Enter file name\"\n    [value]=\"dataFile.name\"\n    required\n    (input)=\"onChange($event)\"\n  />\n  <div class=\"file-item__content--info\">\n    <div class=\"file-item__content--info__item\">\n      Extension: <span>{{ dataFile.ext }}</span>\n    </div>\n    <div class=\"file-item__content--info__item\">\n      Size: <span>{{ dataFile.size | fileSize }}</span>\n    </div>\n  </div>\n  <div *ngIf=\"dataFile.errors.ext\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>\n      {{ uploadAssetService.messageErrors['ext'] }}\n      {{ uploadAssetService.supportedTypes.join(', ') }}\n    </span>\n  </div>\n  <div *ngIf=\"dataFile.errors.size\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>\n      {{ uploadAssetService.messageErrors['size'] }}\n      {{ uploadAssetService.supportedSize | fileSize: 0 }}\n    </span>\n  </div>\n  <div *ngIf=\"dataFile.errors.maxLength\" class=\"file-item__error\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>{{ uploadAssetService.messageErrors['maxLength'] }}</span>\n  </div>\n  <div *ngFor=\"let message of uploadErrors\" class=\"file-item__error\" role=\"alert\">\n    <mat-icon class=\"file-item__error--icon\">error_outline</mat-icon>\n    <span>{{ message }}</span>\n  </div>\n</div>\n<div class=\"file-item__action\">\n  <mat-icon (click)=\"onRemove()\">delete_outline</mat-icon>\n</div>\n",
+                styles: [":host::ng-deep{padding:10px 5%;display:flex;justify-content:space-between;align-items:center;background-color:#f9f9f9;border-radius:10px}:host::ng-deep .file-item__img{display:flex;justify-content:center;align-items:center;width:250px;height:150px;border-radius:10px}:host::ng-deep .file-item__img img{max-width:100%;max-height:100%;-o-object-fit:contain;object-fit:contain}:host::ng-deep .file-item__img img.image{background-image:url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEBLAEsAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/2wBDAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQH/wAARCAAUABQDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwD+/ivFPFOf+EjvxzjbBgdv+PeDp+OfxzSt4q18AkageASB9ntu3OM+Vn8c5rsdG0fT9d06DVdUgN1f3XmefP5ksO/ypXhj/dwvHGu2ONF+VF3bQSM0AeYUV7IPCWgjgWRA/wCvi4P85SaKAPGm5Vh7H+VeyeERjQLEDoPP/WeQ/wAzRRQB0tFFFAH/2Q==)}:host::ng-deep .file-item__img mat-icon{font-size:100px;width:auto;height:auto}:host::ng-deep .file-item__content{flex:1;padding-left:5%;padding-right:5%}:host::ng-deep .file-item__content--name{width:100%;padding:10px;border:1px solid #d8d8d8;border-radius:5px}:host::ng-deep .file-item__content--info{margin-top:10px;display:flex}:host::ng-deep .file-item__content--info__item:not(:last-child){margin-right:50px}:host::ng-deep .file-item__content--info__item span{color:#000;text-transform:uppercase}:host::ng-deep .file-item__error{display:flex;align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:8px;padding:4px 10px;border-radius:6px;background-color:#fdecea;color:#d32f2f;font-size:13px;line-height:18px;word-break:break-word}:host::ng-deep .file-item__error--icon{flex-shrink:0;margin-right:6px;font-size:16px;width:16px;height:16px}:host::ng-deep .file-item__action{color:#f44336;cursor:pointer}"]
             }] }
 ];
 /** @nocollapse */
@@ -2817,6 +2828,8 @@ class UploadDialogComponent {
         this.uploadAssetsService = uploadAssetsService;
         this.isLoading = false;
         this.disabled = true;
+        this.errorMessages = [];
+        this.defaultErrorMessage = 'Something went wrong while uploading. Please try again.';
         this.destroy$ = new Subject();
         if (this.data.fileType) {
             this.uploadAssetsService.supportedTypes =
@@ -2841,6 +2854,7 @@ class UploadDialogComponent {
          */
         error => {
             this.disabled = error;
+            this.clearErrors();
             this.changeDetectorRef.detectChanges();
         }));
     }
@@ -2850,12 +2864,15 @@ class UploadDialogComponent {
      */
     onValidate(hasError) {
         this.disabled = hasError;
+        this.clearErrors();
     }
     /**
      * @return {?}
      */
     uploadFiles() {
         this.isLoading = true;
+        this.clearErrors();
+        this.dialogRef.disableClose = true;
         this.uploadAssetsService
             .uploadMultipleAssets(this.data.currentAssetId)
             .pipe(takeUntil(this.destroy$))
@@ -2867,8 +2884,102 @@ class UploadDialogComponent {
             if (res) {
                 this.closeDialog(true);
             }
+        }), (/**
+         * @param {?} err
+         * @return {?}
+         */
+        err => {
+            this.setUploadErrors(this.getErrorMessages(err));
+            this.stopLoading();
+        }), (
+        // the request can complete without a truthy response (or be swallowed by an interceptor)
+        /**
+         * @return {?}
+         */
+        () => this.stopLoading()));
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    stopLoading() {
+        this.isLoading = false;
+        this.dialogRef.disableClose = false;
+        this.changeDetectorRef.detectChanges();
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    clearErrors() {
+        this.errorMessages = [];
+        this.uploadAssetsService.uploadErrors.clear();
+    }
+    // show each message on the file it mentions, the rest stay under the list
+    /**
+     * @private
+     * @param {?} messages
+     * @return {?}
+     */
+    setUploadErrors(messages) {
+        const { getFiles: files, uploadErrors } = this.uploadAssetsService;
+        /** @type {?} */
+        const uploadNames = files.map((/**
+         * @param {?} file
+         * @param {?} index
+         * @return {?}
+         */
+        (file, index) => this.uploadAssetsService.getUploadName(index)));
+        this.errorMessages = messages.filter((/**
+         * @param {?} message
+         * @return {?}
+         */
+        message => {
+            /** @type {?} */
+            let index = uploadNames.findIndex((/**
+             * @param {?} name
+             * @return {?}
+             */
+            name => message.indexOf(name) > -1));
+            if (index < 0 && files.length === 1) {
+                index = 0;
+            }
+            if (index < 0) {
+                return true;
+            }
+            uploadErrors.set(files[index], [...(uploadErrors.get(files[index]) || []), message]);
+            return false;
         }));
     }
+    /**
+     * @private
+     * @param {?} err
+     * @return {?}
+     */
+    getErrorMessages(err) {
+        // HttpErrorResponse keeps the API body in `error`, an interceptor may already unwrap it
+        /** @type {?} */
+        const body = err && err.error && typeof err.error === 'object' ? err.error : err || {};
+        /** @type {?} */
+        const messages = (body.Messages || [])
+            .map((/**
+         * @param {?} message
+         * @return {?}
+         */
+        message => (typeof message === 'string' ? message : message && message.Text)))
+            .filter(Boolean);
+        if (!messages.length && body.ResponseMessage) {
+            messages.push(body.ResponseMessage);
+        }
+        return messages.length
+            ? messages.filter((/**
+             * @param {?} message
+             * @param {?} index
+             * @return {?}
+             */
+            (message, index) => messages.indexOf(message) === index))
+            : [this.defaultErrorMessage];
+    }
     /**
      * @param {?=} res
      * @return {?}
@@ -2887,9 +2998,9 @@ class UploadDialogComponent {
 UploadDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lib-upload-dialog',
-                template: "<lib-modal heading=\"Add new assets\">\n  <ng-container content>\n    <lib-upload-file\n      *ngIf=\"!uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-upload-file>\n    <lib-file-list\n      *ngIf=\"uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-file-list>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close>Cancel</button>\n    <button\n      class=\"upload__action\"\n      [class.loading]=\"isLoading\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"uploadFiles()\"\n      [disabled]=\"disabled || isLoading\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Upload</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
+                template: "<lib-modal heading=\"Add new assets\">\n  <ng-container content>\n    <lib-upload-file\n      *ngIf=\"!uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-upload-file>\n    <lib-file-list\n      *ngIf=\"uploadAssetsService?.getFiles?.length\"\n      (revalidate)=\"onValidate($event)\"\n    ></lib-file-list>\n    <div *ngFor=\"let message of errorMessages\" class=\"upload__error\" role=\"alert\">\n      <mat-icon class=\"upload__error--icon\">error_outline</mat-icon>\n      <span>{{ message }}</span>\n    </div>\n  </ng-container>\n  <ng-container actions>\n    <button mat-raised-button mat-dialog-close [disabled]=\"isLoading\">Cancel</button>\n    <button\n      class=\"upload__action\"\n      [class.loading]=\"isLoading\"\n      mat-raised-button\n      color=\"primary\"\n      (click)=\"uploadFiles()\"\n      [disabled]=\"disabled || isLoading\"\n    >\n      <ng-container *ngIf=\"isLoading\">\n        <mat-spinner [diameter]=\"20\"></mat-spinner>\n      </ng-container>\n      <span>Upload</span>\n    </button>\n  </ng-container>\n</lib-modal>\n",
                 providers: [UploadAssetsService],
-                styles: [":host::ng-deep{display:block;width:1200px;max-width:100%;font-size:14px;line-height:16px;color:#979797;letter-spacing:.15px}:host::ng-deep .mat-dialog-title{position:relative;margin-bottom:0;padding-bottom:24px;color:#000}:host::ng-deep .mat-dialog-actions{justify-content:flex-end;padding:24px 0 0}:host::ng-deep .upload__action{min-width:100px}:host::ng-deep .upload__action.loading{padding:0 5px}:host::ng-deep .upload__action.loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}:host::ng-deep .upload__action.loading .mat-spinner{margin-right:10px}"]
+                styles: [":host::ng-deep{display:block;width:1200px;max-width:100%;font-size:14px;line-height:16px;color:#979797;letter-spacing:.15px}:host::ng-deep .mat-dialog-title{position:relative;margin-bottom:0;padding-bottom:24px;color:#000}:host::ng-deep .mat-dialog-actions{justify-content:flex-end;padding:24px 0 0}:host::ng-deep .upload__error{display:flex;align-items:center;width:-moz-fit-content;width:fit-content;max-width:100%;margin-top:8px;padding:4px 10px;border-radius:6px;background-color:#fdecea;color:#d32f2f;font-size:13px;line-height:18px;word-break:break-word}:host::ng-deep .upload__error--icon{flex-shrink:0;margin-right:6px;font-size:16px;width:16px;height:16px}:host::ng-deep .upload__action{min-width:100px}:host::ng-deep .upload__action.loading{padding:0 5px}:host::ng-deep .upload__action.loading .mat-button-wrapper{display:flex;width:100%;justify-content:center;align-items:center}:host::ng-deep .upload__action.loading .mat-spinner{margin-right:10px}"]
             }] }
 ];
 /** @nocollapse */
@@ -2904,6 +3015,13 @@ if (false) {
     UploadDialogComponent.prototype.isLoading;
     /** @type {?} */
     UploadDialogComponent.prototype.disabled;
+    /** @type {?} */
+    UploadDialogComponent.prototype.errorMessages;
+    /**
+     * @type {?}
+     * @private
+     */
+    UploadDialogComponent.prototype.defaultErrorMessage;
     /**
      * @type {?}
      * @private
@@ -3161,6 +3279,7 @@ class AssetListComponent {
         this.hasAccessPermission = true;
         this.hasArchivePermission = true;
         this.backgroundProcessingNum = BackgroudProcessingStatus;
+        this.processingCheckDelay = 5000;
         this.unsubscribe$ = new Subject$1();
         this.selectedAssets = [];
     }
@@ -3176,15 +3295,7 @@ class AssetListComponent {
      */
     ngOnChanges(changes) {
         if (changes.assets) {
-            // Check if asset is uploading
-            if (this.assets && this.assets.find((/**
-             * @param {?} x
-             * @return {?}
-             */
-            x => x.BackgroudProcessingStatus === this.backgroundProcessingNum.InProcessing))) {
-                this._resetUploadingAssets();
-            }
-            ;
+            this.checkProcessingAssets();
             this.paginator.pageIndex = this.assetService.pageIndex;
             this.paginator.pageSize = this.assetService.pageSize;
             this.paginator.length = this.assetService.fileTotal;
@@ -3319,15 +3430,8 @@ class AssetListComponent {
          * @param {?} res
          * @return {?}
          */
-        (res) => {
-            /** @type {?} */
-            const pagination = res && res.Meta || {};
-            /** @type {?} */
-            const assets = res && res.Data && res.Data.Children || [];
-            /** @type {?} */
-            const totalFile = res && res.Data && res.Data.TotalFile || 0;
-            this.assetService.setAssetList(assets, pagination, totalFile);
-        })).add((/**
+        (res) => this.setAssetList(res)))
+            .add((/**
          * @return {?}
          */
         () => {
@@ -3337,31 +3441,73 @@ class AssetListComponent {
             });
         }));
     }
+    /**
+     * @private
+     * @param {?} res
+     * @return {?}
+     */
+    setAssetList(res) {
+        /** @type {?} */
+        const pagination = res && res.Meta || {};
+        /** @type {?} */
+        const assets = res && res.Data && res.Data.Children || [];
+        /** @type {?} */
+        const totalFile = res && res.Data && res.Data.TotalFile || 0;
+        this.assetService.setAssetList(assets, pagination, totalFile);
+    }
+    // Called on every new asset list: while some files are still processed in the background,
+    // reload the list once after a delay. The reloaded list calls this again, until nothing is processing.
     /**
      * @private
      * @return {?}
      */
-    _resetUploadingAssets() {
+    checkProcessingAssets() {
+        this.stopProcessingCheck();
         /** @type {?} */
-        const reload = setInterval((/**
+        const hasProcessingAssets = this.assets && this.assets.some((/**
+         * @param {?} asset
          * @return {?}
          */
-        () => {
-            this.fetchChildrenAssets();
-            if (this.assets.find((/**
-             * @param {?} x
+        (asset) => asset.BackgroudProcessingStatus === this.backgroundProcessingNum.InProcessing));
+        if (hasProcessingAssets) {
+            this.processingCheckTimer = setTimeout((/**
              * @return {?}
              */
-            x => x.BackgroudProcessingStatus === this.backgroundProcessingNum.Processed))) {
-                clearInterval(reload);
-            }
-            console.log('Upload Successfully!'); // interval will be cleared after completing this whole block
-        }), 5000);
+            () => this.reloadProcessingAssets()), this.processingCheckDelay);
+        }
+    }
+    // Silent reload, without the global loading bar
+    /**
+     * @private
+     * @return {?}
+     */
+    reloadProcessingAssets() {
+        if (!this.currentFolderId) {
+            return;
+        }
+        this.processingCheckRequest = this.assetService
+            .getChildrenAssets({ assetId: this.currentFolderId })
+            .subscribe((/**
+         * @param {?} res
+         * @return {?}
+         */
+        (res) => this.setAssetList(res)));
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    stopProcessingCheck() {
+        clearTimeout(this.processingCheckTimer);
+        if (this.processingCheckRequest) {
+            this.processingCheckRequest.unsubscribe();
+        }
     }
     /**
      * @return {?}
      */
     ngOnDestroy() {
+        this.stopProcessingCheck();
         this.unsubscribe$.next();
         this.unsubscribe$.complete();
     }
@@ -3401,6 +3547,21 @@ if (false) {
     AssetListComponent.prototype.assets;
     /** @type {?} */
     AssetListComponent.prototype.backgroundProcessingNum;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckDelay;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckTimer;
+    /**
+     * @type {?}
+     * @private
+     */
+    AssetListComponent.prototype.processingCheckRequest;
     /**
      * @type {?}
      * @private
@@ -5846,20 +6007,78 @@ if (false) {
  */
 /** @type {?} */
 const AdminConfig = {
-    locale: 'en-US',
-    timeZone: 'local',
+    locale: "en-US",
+    countryName: {
+        US: "United States",
+        CA: "Canada",
+    },
     format: {
-        date: 'MM/DD/YYYY',
-        dayMonth: 'MMM DD',
-        dateTime: 'MM/DD/YYYY HH:mm',
-        fullDateTime: 'MM/DD/YYYY HH:mm:ss',
-        dateTimeAM: 'MM/DD/YYYY hh:mm A',
-        apiDate: 'YYYY/MM/DD',
-        apiDateTime: 'YYYY-MM-DD[T]HH:mm:ssZ',
-        apiDateTimeNoZ: 'YYYY-MM-DD[T]HH:mm:ss',
-        apiDateMonthYear: 'MMM DD YYYY',
-        urlParam: 'YYYY-MM-DD',
+        date: "MM/DD/YYYY",
+        dayMonth: "MMM DD",
+        dateTime: "MM/DD/YYYY HH:mm",
+        fullDateTime: "MM/DD/YYYY HH:mm:ss",
+        dateTimeAM: "MM/DD/YYYY hh:mm A",
+        apiDate: "YYYY/MM/DD",
+        apiDateTime: "YYYY-MM-DD[T]HH:mm:ssZ",
+        apiDateTimeNoZ: "YYYY-MM-DD[T]HH:mm:ss",
+        apiDateMonthYear: "MMM DD YYYY",
+        urlParam: "YYYY-MM-DD",
+    },
+    mask: {
+        phone: "(000) 000-0000",
+        date: "M0/d0/0000",
+        zipCode: {
+            US: "00000",
+            CA: "AAA AAA",
+        },
+        money: "0*.00",
+        number: "0*.00",
+        integer: "0*",
+        tax: "00.0000",
+        sku: "0000000000000",
+        upca: "000000000000",
+        pin: "000000",
+        mi9ProductUpc: "00000000000000",
+    },
+    regex: {
+        password: "^(?=.*[a-zA-Z])(?=.*[0-9]).{6,12}",
+        bigyPassword: "^(?=.*[a-zA-Z])(?=.*[0-9]).{8,}$",
+        url: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\.%_~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/,
+        shortCode: "^[A-Z0-9_]{1,20}$",
+        longCode: "^[A-Z0-9_]{1,100}$",
+        email: /^[\w-\.]+@([\w]+[\.-])+[\w-]{2,}$/,
+        textWithoutSpecialChars: /^[a-zA-Z0-9\. ]+$/,
+        textWithSpecialChars: /^[a-zA-Z0-9_-]+$/,
+        // Allow char '_ -'
+        textWithSpaceAndSpecialChars: /^[a-zA-Z0-9\. /_-]+$/,
+        // Allow space and char '_ - /'
+        address: /^[a-zA-Z0-9][a-zA-Z0-9\_\/\. ]+$/,
+        leadTimeKeyPress: /^[0-9mhdw ]+$/,
+        leadTime: [
+            /^(?:(?<minutes>\d{0,2})m\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<weeks>\d{0,2})w\s*)?$/,
+            /^(?:(?<weeks>\d{0,2})w\s*)?(?:(?<days>\d{0,2})d\s*)?(?:(?<hours>\d{0,3})h\s*)?(?:(?<minutes>\d{0,2})m\s*)?$/,
+        ],
+        userPIN: /^[0-9]{6}$/,
+        storeCode: /^[0-9]{1,10}$/,
+        sku: /^[0-9]{1,14}$/,
+        sku13: /^[0-9]{1,13}$/,
+        keyConfigProvider: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/]*$/,
+        //not allow character '?#%='
+        textNoSpace: /^[a-zA-Z]+$/,
+        textWithSpace: /^(\s+\S+\s*)*(?!\s).*$/,
+        //not allow a string containing only white spaces
+        slug: /^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/,
+        tag: /^[a-zA-Z0-9](-?_?[a-zA-Z0-9])*$/,
+        noSpace: /^[a-zA-Z0-9!*()_+\-\[\]{}:\\|,.<>\/\?\=\&\%\#\@]*$/,
     },
+    pattern: {},
+    pipe: {},
+    pageSizeOptions: [5, 10, 25, 50, 100],
+    maxOrderNumber: 99999,
+    // TinyMCE
+    tinyHeightDefault: "75vh",
+    tinyMCEPluginConfig: "print preview fullpage importcss searchreplace autolink autosave save directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists wordcount imagetools textpattern noneditable help charmap quickbars emoticons",
+    tinyMCEToolbarConfig: "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | fileManagerButton | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist checklist | forecolor backcolor | pagebreak | charmap emoticons | fullscreen  preview save print | image media template link anchor codesample | ltr rtl",
 };
 
 /**