@wizishop/img-manager 0.2.69 → 0.2.74

package/fesm5/wizishop-img-manager.js

@@ -5,7 +5,7 @@ import { HttpParams, HttpHeaders, HttpClient, HttpClientModule } from '@angular/
 import { trigger, state, style, transition, animate, query, stagger } from '@angular/animations';
 import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { NwbAlertService, NwbFilterRoutingBuilder, NwbAllModule } from '@wizishop/ng-wizi-bulma';
-import { debounceTime, map, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
+import { debounceTime, map, take, takeUntil, distinctUntilChanged, tap } from 'rxjs/operators';
 import { DOCUMENT, CommonModule } from '@angular/common';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { NgScrollbarModule } from 'ngx-scrollbar';
@@ -212,6 +212,9 @@ var ImgManagerService = /** @class */ (function () {
     ImgManagerService.prototype.getShopImgList = function (params) {
         return this.http.get(this.imgManagerRoute + "/images", this.getOptionsHeaders(params));
     };
+    ImgManagerService.prototype.getShopTotalImgList = function (params) {
+        return this.http.get(this.imgManagerRoute + "/total/images", this.getOptionsHeaders(params));
+    };
     ImgManagerService.prototype.getShopImg = function (idFile) {
         return this.http.get(this.imgManagerRoute + "/images/" + idFile, this.getOptionsHeaders());
     };
@@ -2061,7 +2064,7 @@ var ImgSelectionComponent = /** @class */ (function () {
     ImgSelectionComponent = __decorate([
         Component({
             selector: 'img-selection',
-            template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-container *ngIf=\"isLoading && !(imgSelectedList && imgSelectedList.length)\">\n  <wz-loader></wz-loader>\n</ng-container>\n"
+            template: "<div\n  class=\"trash\"\n  cdkDropList\n  #unSelectList=\"cdkDropList\"\n  (cdkDropListDropped)=\"removeImgFromSelection($event)\">\n    <p>{{'ImgManager.ImgSelection.unselect' | translate}}</p>\n</div>\n\n<div\n class=\"img-selection\"\n [ngClass]=\"{'img-selection--visible' : imgSelectedList && imgSelectedList.length}\"\n *ngIf=\"!isLoading\">\n\n    <div\n      cdkDropList\n      #selectionList=\"cdkDropList\"\n      cdkDropListOrientation=\"horizontal\"\n      class=\"list_img_selection\"\n      (cdkDropListDropped)=\"drop($event)\"\n      [cdkDropListConnectedTo]=\"[unSelectList]\"\n      >\n\n        <div\n          class=\"img_box\"\n          *ngFor=\"let picture of imgSelectedList; let index = index\"\n          cdkDrag\n          (cdkDragStarted)=\"dragStart = true;\"\n          (cdkDragEnded)=\"dragStart = false;\"\n          >\n\n          <img\n            *ngIf=\"index < 1\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '400'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <img\n            *ngIf=\"index > 0\"\n            class=\"drag__img\"\n            [src]=\"picture.file_name | imgSrc : '200'\"\n            [title]=\"picture.display_name\"\n          />\n\n          <div class=\"delete-btn\" (click)=\"removeImg(index)\">{{'ImgManager.ImgSelection.deleteImg' | translate}}</div>\n\n          <span class=\"drag__tooltips\">{{'ImgManager.ImgSelection.tooltips' | translate}}</span>\n\n        </div>\n    </div>\n</div>\n\n<!-- Loader -->\n<ng-container *ngIf=\"isLoading\">\n  <wz-loader></wz-loader>\n</ng-container>\n"
         }),
         __metadata("design:paramtypes", [ImgSelectionService])
     ], ImgSelectionComponent);
@@ -2669,6 +2672,7 @@ var ImagesViewComponent = /** @class */ (function () {
         this.nbImgToDelSelected = 0;
         this.disable = false; // Use to disable action during server request
         this.isLoading = true;
+        this.isTotalRetieved = false;
         this.delListImgLoader = false;
         this.initComponent = true;
         this.failLoaded = false;
@@ -2680,6 +2684,7 @@ var ImagesViewComponent = /** @class */ (function () {
         this.pageSize = 30; // Default value
         this.pageSizeOptions = [25, 50, 100, 250];
         this.errorGetAllImg = 'ImgManager.ImgLib.errorGetAllImg';
+        this.errorGetTotalImg = 'ImgManager.ImgLib.errorGetTotalImg';
         this.errorGetImg = 'ImgManager.ImgLib.errorGetCanvaImg';
         this.msgNoImgFound = 'ImgManager.ImgLib.noImgFound';
         this.errorRemoveImg = 'ImgManager.ImgList.errorRemoveImg';
@@ -2887,7 +2892,7 @@ var ImagesViewComponent = /** @class */ (function () {
     };
     ImagesViewComponent.prototype.getImg = function (id_file) {
         var _this = this;
-        this.imgSubscribe = this.imgManager.getShopImg(id_file).subscribe(function (picture) {
+        this.imgManager.getShopImg(id_file).pipe(take(1)).subscribe(function (picture) {
             if (!_this.imgAlreadyExist(picture.id_file)) {
                 // check the img is not already present
                 _this.picturesList.unshift(picture);
@@ -2975,16 +2980,17 @@ var ImagesViewComponent = /** @class */ (function () {
         var _this = this;
         this.isLoading = true;
         this.displayPexelsResults = false;
+        this.isTotalRetieved = false;
         this.setParams();
-        this.imgSubscribe = this.imgManager.getShopImgList(this.params).subscribe(function (data) {
+        this.imgManager.getShopImgList(this.params).pipe(take(1)).subscribe(function (data) {
             _this.initVariables(true);
             var nbImgDisplayed = data.data.length;
             _this.calculNbImgFake(nbImgDisplayed);
             _this.picturesList = data.data;
             _this.renamePictureService.setPicturesList(_this.picturesList);
             _this.selectImgSelected();
-            _this.length = data.totalRecords;
-            _this.tableFilters.totalItems = data.totalRecords;
+            _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;
             if (_this.maxLengthCardShow) {
                 _this.picturesList = _this.picturesList.splice(0, 8);
@@ -2993,11 +2999,23 @@ var ImagesViewComponent = /** @class */ (function () {
             if (data.totalRecords === 0) {
                 _this.displayPexelsLib();
             }
+            _this.refreshTotalImgList();
         }, function (error) {
             _this.alertService.openAlert(_this.errorGetAllImg);
             _this.initVariables(false);
         });
     };
+    ImagesViewComponent.prototype.refreshTotalImgList = function () {
+        var _this = this;
+        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe(function (data) {
+            _this.isTotalRetieved = true;
+            _this.length = data.totalRecords;
+            _this.tableFilters.totalItems = data.totalRecords;
+        }, function (error) {
+            _this.alertService.openAlert(_this.errorGetTotalImg);
+            _this.initVariables(false);
+        });
+    };
     ImagesViewComponent.prototype.ngOnDestroy = function () {
         this.searchQueryChanged.unsubscribe();
         this.imgRemovedEvent.unsubscribe();