@wizishop/img-manager 15.0.4 → 15.0.7

package/fesm2020/wizishop-img-manager.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, Directive, Input, Output, Pipe, Component, ViewEncapsulation, HostBinding, HostListener, ViewChild, Inject, NgModule } from '@angular/core';
-import { ReplaySubject, Observable, Subject, BehaviorSubject, forkJoin } from 'rxjs';
+import { ReplaySubject, Observable, of, delay, tap, Subject, BehaviorSubject, forkJoin } from 'rxjs';
 import * as i3 from '@angular/common/http';
 import { HttpParams, HttpHeaders, HttpClientModule } from '@angular/common/http';
 import * as i7 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1 from '@wizishop/ng-wizi-bulma';
 import { NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { take, debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { take, debounceTime, map, takeUntil, distinctUntilChanged, tap as tap$1 } from 'rxjs/operators';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
@@ -209,7 +209,15 @@ class ImgManagerService {
         return header;
     }
     getShopImgList(params) {
-        return this.http.get(`${this.imgManagerRoute}/images`, this.getOptionsHeaders(params));
+        if (params && this.previousParams && this.previousParams.limit === params.limit
+            && this.previousParams.page === params.page && this.shopImgList
+            && this.previousParams["display_name:contains"] === params["display_name:contains"]) {
+            return of(this.shopImgList).pipe(delay(0));
+        }
+        return this.http.get(`${this.imgManagerRoute}/images`, this.getOptionsHeaders(params)).pipe(tap((shopImgList) => {
+            this.shopImgList = shopImgList;
+            this.previousParams = params;
+        }));
     }
     getShopTotalImgList(params) {
         return this.http.get(`${this.imgManagerRoute}/total/image`, this.getOptionsHeaders(params));
@@ -1279,7 +1287,7 @@ class AbstractDebounceDirective {
     }
     ngOnInit() {
         this.emitEvent$
-            .pipe(takeUntil(this.subscription$), debounceTime(this.debounceTime), distinctUntilChanged(), tap(value => this.emitChange(value)))
+            .pipe(takeUntil(this.subscription$), debounceTime(this.debounceTime), distinctUntilChanged(), tap$1(value => this.emitChange(value)))
             .subscribe();
     }
     emitChange(value) {
@@ -2427,14 +2435,14 @@ class MosaicViewComponent extends ImagesActionHandler {
     }
 }
 MosaicViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, deps: [{ token: ImgManagerService }, { token: ImgSelectionService }, { token: i3.HttpClient }, { token: ImgCDNService }, { token: ImgEventService }, { token: AlertService }, { token: i7.TranslateService }, { token: ImgManagerConfigService }], target: i0.ɵɵFactoryTarget.Component });
-MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"false\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"true\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
+MosaicViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: MosaicViewComponent, selector: "mosaic-view", inputs: { tabDisplayed: "tabDisplayed", fullSize: "fullSize", nbFakeImg: "nbFakeImg" }, outputs: { switchDisplayWindow: "switchDisplayWindow" }, usesInheritance: true, ngImport: i0, template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ImgCardComponent, selector: "img-card", inputs: ["tabDisplayed", "fullSize", "picture", "index"], outputs: ["toggleImgSelected", "switchDisplayWindow"] }, { kind: "component", type: LoaderComponent, selector: "wz-loader", inputs: ["text", "small", "position"] }, { kind: "component", type: InputSearchComponent, selector: "wz-input-search", inputs: ["placeholder", "smallPadding", "id"], outputs: ["changeDebounced"] }, { kind: "component", type: PaginationComponent, selector: "wz-pagination", inputs: ["pagination"], outputs: ["pageChange"] }, { kind: "pipe", type: i7.TranslatePipe, name: "translate" }, { kind: "pipe", type: NumberToArray, name: "numberToArray" }], animations: [
         listAnnimation
     ] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: MosaicViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'mosaic-view', animations: [
                         listAnnimation
-                    ], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"false\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"true\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n" }]
+                    ], template: "<div class=\"mosaic\" [ngClass]=\"{'fullSize': fullSize, 'small': stateDisplayed === 'small', 'mosaic--displayPexelsImg': displayPexelsResults}\">\n  <!-- Search section -->\n  <div\n    class=\"mosaic__search\"\n    [ngClass]=\"{'mosaic__search--small': stateDisplayed === 'small'}\"\n    *ngIf=\"tabDisplayed !== 'img-upload'\">\n      <wz-input-search\n        [(ngModel)]=\"tableFilters.searchValue\"\n        (changeDebounced)=\"onSearchChange($event)\"\n        [placeholder]=\"'ImgManager.SearchBar.placeholder' | translate\"\n        [smallPadding]=\"stateDisplayed === 'small'\"\n      ></wz-input-search>\n  </div>\n\n  <!-- Cards section -->\n  <div\n    class=\"mosaic__container__cards\"\n    [ngClass]=\"{'mosaic__container__cards--padding': stateDisplayed !== 'window'}\"\n    [@listAnimation]=\"picturesList.length\"\n    *ngIf=\"!isLoading && !displayPexelsResults\"\n    >\n      <img-card\n        *ngFor=\"let picture of picturesList; let index = index;\"\n        [picture]=\"picture\"\n        [stateDisplayed]=\"stateDisplayed\"\n        [tabDisplayed]=\"tabDisplayed\"\n        [disable]=\"disable\"\n        (toggleImgSelected)=\"onToggleSelectImg(index)\"\n        (pictureNameChange)=\"onCardRenamePicture($event)\"\n        (switchDisplayWindow)=\"switchDisplayWindowCard()\"\n        [fullSize]=\"fullSize\"\n      ></img-card>\n      <div\n        *ngFor=\"let fakeImg of nbFakeImg | numberToArray\"\n        class=\"mosaic__container__cards__fakeImg\"\n        [ngClass]=\"{'mosaic__container__cards__fakeImg--smallFakeImg': stateDisplayed === 'small' || tabDisplayed === 'img-upload'}\">\n      </div>\n  </div>\n  <!-- Loader section -->\n  <div class=\"mosaic__container__loader\"  *ngIf=\"isLoading\">\n    <wz-loader [small]=\"true\"></wz-loader>\n  </div>\n\n  <!-- Pagination section -->\n  <div class=\"mosaic__pagination\" *ngIf=\"picturesList.length && tabDisplayed !== 'img-upload' && !displayPexelsResults\" >\n    <wz-pagination\n    [pagination]=\"tableFilters\"\n    (pageChange)=\"onFiltersChange()\"\n    >\n    </wz-pagination>\n  </div>\n\n</div>\n" }]
         }], ctorParameters: function () { return [{ type: ImgManagerService }, { type: ImgSelectionService }, { type: i3.HttpClient }, { type: ImgCDNService }, { type: ImgEventService }, { type: AlertService }, { type: i7.TranslateService }, { type: ImgManagerConfigService }]; }, propDecorators: { tabDisplayed: [{
                 type: Input
             }], fullSize: [{
@@ -3143,7 +3151,7 @@ class ImagesViewComponent {
         this.nbImgToDelSelected = 0;
         this.disable = false; // Use to disable action during server request
         this.isLoading = true;
-        this.isTotalRetieved = false;
+        this.isTotalRetrieved = false;
         this.delListImgLoader = false;
         this.initComponent = true;
         this.failLoaded = false;
@@ -3346,7 +3354,7 @@ class ImagesViewComponent {
      * Set a img list in order to fill properly all the line of images displayed in mosaic.
      * Otherwise, the space-between css will do a bad display
      */
-    calculNbImgFake(nbImgDisplayed) {
+    calculateNbImgFake(nbImgDisplayed) {
         const nbImgPerLine = this.stateDisplayed === 'small' || this.tabDisplayed === 'img-upload' ? this.nbMaxImgPerLine : this.nbMinImgPerLine;
         if (nbImgDisplayed % nbImgPerLine !== 0) {
             this.nbFakeImg = nbImgPerLine - nbImgDisplayed % nbImgPerLine;
@@ -3417,35 +3425,38 @@ class ImagesViewComponent {
         this.displayPexelsResults = false;
         this.setParams();
         this.refreshTotalImgList();
-        this.imgManager.getShopImgList(this.params).pipe(take(1)).subscribe((data) => {
-            this.initVariables(true);
-            const nbImgDisplayed = data.data.length;
-            this.calculNbImgFake(nbImgDisplayed);
-            this.picturesList = data.data;
-            this.renamePictureService.setPicturesList(this.picturesList);
-            this.selectImgSelected();
-            this.length = this.isTotalRetieved ? this.length : data.totalRecords;
-            this.tableFilters.totalItems = this.isTotalRetieved ? this.tableFilters.totalItems : data.totalRecords;
-            this.tableFilters.itemsPerPage = this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage : this.pageSize;
-            // Display Pexels if no result
-            if (data.totalRecords === 0) {
-                this.displayPexelsLib();
+        this.imgManager.getShopImgList(this.params).pipe(take(1)).subscribe({
+            next: (data) => {
+                this.initVariables(true);
+                const nbImgDisplayed = data.data.length;
+                this.calculateNbImgFake(nbImgDisplayed);
+                this.picturesList = data.data;
+                this.renamePictureService.setPicturesList(this.picturesList);
+                this.selectImgSelected();
+                this.length = this.isTotalRetrieved ? this.length : data.totalRecords;
+                this.tableFilters.totalItems = this.isTotalRetrieved ? this.tableFilters.totalItems : data.totalRecords;
+                this.tableFilters.itemsPerPage = this.tableFilters.itemsPerPage ? this.tableFilters.itemsPerPage : this.pageSize;
+                // Display Pexels if no result
+                if (data.totalRecords === 0) {
+                    this.displayPexelsLib();
+                }
+            },
+            error: error => {
+                this.alertService.openAlert(this.errorGetAllImg);
+                this.initVariables(false);
             }
-        }, error => {
-            this.alertService.openAlert(this.errorGetAllImg);
-            this.initVariables(false);
         });
     }
     refreshTotalImgList() {
         const searchValue = this.tableFilters.searchValue;
-        if (this.isTotalRetieved && searchValue === this.previousSearchValue) {
+        if (this.isTotalRetrieved && searchValue === this.previousSearchValue) {
             // Keep current total result
             return;
         }
-        this.isTotalRetieved = false;
+        this.isTotalRetrieved = false;
         this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe((data) => {
             this.previousSearchValue = searchValue;
-            this.isTotalRetieved = true;
+            this.isTotalRetrieved = true;
             this.length = data.totalRecords;
             this.tableFilters.totalItems = data.totalRecords;
         }, error => {