@wizishop/img-manager 0.2.71 → 0.2.76

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/image", this.getOptionsHeaders(params));
+    };
     ImgManagerService.prototype.getShopImg = function (idFile) {
         return this.http.get(this.imgManagerRoute + "/images/" + idFile, this.getOptionsHeaders());
     };
@@ -1778,6 +1781,10 @@ var ImgEditorComponent = /** @class */ (function () {
             return;
         }
         this.isLoading = true;
+        if (!this.isImgModified && !this.isNameModified) {
+            this.isLoading = false;
+            this.onEditClosed();
+        }
         var obsReplaceImg = this.imgManagerService.replaceImg(this.currentCroppedImage, this.imgToEdit.id_file);
         var obsChangeImgName = this.imgManagerService.changeImgName(this.imgToEdit.display_name, this.imgToEdit.id_file);
         if (this.isImgModified && this.isNameModified) {
@@ -1853,7 +1860,7 @@ var ImgEditorComponent = /** @class */ (function () {
     ImgEditorComponent = __decorate([
         Component({
             selector: 'img-editor',
-            template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <button\n                      class=\"button img-editor__infoSection__actions__cancel\"\n                      (click)=\"onCancel()\"\n                      [disabled]=\"isLoading\"\n                    >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <div\n                        class=\"button danger button img-editor__infoSection__actions__save\"\n                        [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n                        (click)=\"onSave()\"\n                    >\n                        {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n                        <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n",
+            template: "<div class=\"img-editor\" [@easeInOut]=\"'in'\">\n\n    <ng-scrollbar\n        #scrollable\n        [visibility]=\"'native'\"\n        class=\"img-editor__scroll\"\n        [ngClass]=\"{\n            'img-editor__scroll--full': stateDisplayed === 'full',\n            'img-editor__scroll--smallDisplay': stateDisplayed === 'small',\n            'img-editor__scroll--window': stateDisplayed === 'window'\n        }\"\n    >\n    <div class=\"columns\">\n        <!-- Left section -->\n        <div class=\"column is-one-third img-editor__infoSection\">\n\n            <info-section\n              [imgToEdit]=\"imgToEdit\"\n              [(isNameModified)]=\"isNameModified\"\n              >\n            </info-section>\n\n            <!-- Button Action Section -->\n\n            <div class=\"img-editor__infoSection__actions\">\n                <div>\n                    <button\n                      class=\"button img-editor__infoSection__actions__cancel\"\n                      (click)=\"onCancel()\"\n                      [disabled]=\"isLoading || (!isImgModified  && !isNameModified)\"\n                    >\n                        {{ 'ImgManager.ImgLib.cancel' | translate }}\n                    </button>\n                    <div\n                        class=\"button danger button img-editor__infoSection__actions__save\"\n                        [ngClass]=\"{'img-editor__infoSection__actions__save--disable': isLoading}\"\n                        (click)=\"onSave()\"\n                    >\n                        {{ 'ImgManager.ImgEditor.saveBtn' | translate }}\n                        <span btnLoadingAnim *ngIf=\"isLoading\" class=\"btnLoadingAnnimation\"></span>\n                    </div>\n\n                </div>\n            </div>\n        </div>\n\n\n        <!-- Right section -->\n        <div class=\"column img-editor__container\">\n            <cropper\n              [imgToEdit]=\"imgToEdit\"\n              [(isImgModified)]=\"isImgModified\"\n              (currentCroppedImageChange)=\"onImgCropped($event)\"\n              (editClosed)=\"onEditClosed($event)\">\n            </cropper>\n        </div>\n    </div>\n    </ng-scrollbar>\n</div>\n",
             animations: [
                 easeInOut
             ]
@@ -2669,6 +2676,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 +2688,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 +2896,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);
@@ -2976,15 +2985,16 @@ var ImagesViewComponent = /** @class */ (function () {
         this.isLoading = true;
         this.displayPexelsResults = false;
         this.setParams();
-        this.imgSubscribe = this.imgManager.getShopImgList(this.params).subscribe(function (data) {
+        this.refreshTotalImgList();
+        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);
@@ -2998,6 +3008,24 @@ var ImagesViewComponent = /** @class */ (function () {
             _this.initVariables(false);
         });
     };
+    ImagesViewComponent.prototype.refreshTotalImgList = function () {
+        var _this = this;
+        var searchValue = this.tableFilters.searchValue;
+        if (this.isTotalRetieved && searchValue === this.previousSearchValue) {
+            // Keep current total result
+            return;
+        }
+        this.isTotalRetieved = false;
+        this.imgManager.getShopTotalImgList(this.params).pipe(take(1)).subscribe(function (data) {
+            _this.previousSearchValue = searchValue;
+            _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();