@wizishop/img-manager 0.2.72 → 0.2.77

package/bundles/wizishop-img-manager.umd.js

@@ -416,7 +416,7 @@
             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));
+            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());
@@ -1984,6 +1984,10 @@
                 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) {
@@ -2059,7 +2063,7 @@
         ImgEditorComponent = __decorate([
             core.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
                 ]
@@ -3183,8 +3187,8 @@
             var _this = this;
             this.isLoading = true;
             this.displayPexelsResults = false;
-            this.isTotalRetieved = false;
             this.setParams();
+            this.refreshTotalImgList();
             this.imgManager.getShopImgList(this.params).pipe(operators.take(1)).subscribe(function (data) {
                 _this.initVariables(true);
                 var nbImgDisplayed = data.data.length;
@@ -3202,7 +3206,6 @@
                 if (data.totalRecords === 0) {
                     _this.displayPexelsLib();
                 }
-                _this.refreshTotalImgList();
             }, function (error) {
                 _this.alertService.openAlert(_this.errorGetAllImg);
                 _this.initVariables(false);
@@ -3210,12 +3213,19 @@
         };
         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(operators.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.alertService.openAlert(this.errorGetTotalImg);
                 _this.initVariables(false);
             });
         };
@@ -3687,8 +3697,8 @@
             this.pagination.currentPage++;
             this.pageChange.emit(this.pagination);
         };
-        PaginationComponent.prototype.onGotoPageChange = function (event) {
-            this.pagination.currentPage = parseInt(event.target.value);
+        PaginationComponent.prototype.onGotoPageChange = function (pageNumber) {
+            this.pagination.currentPage = parseInt(pageNumber);
             this.pageChange.emit(this.pagination);
         };
         __decorate([
@@ -3703,7 +3713,7 @@
         PaginationComponent = __decorate([
             core.Component({
                 selector: 'wz-pagination',
-                template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <select name=\"page\" (change)=\"onGotoPageChange($event)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n        <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n          <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n            {{ pageIndex }}\n          </option>\n        </ng-container>\n      </select>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n"
+                template: "<div class=\"wz-pagination\" *ngIf=\"pagination && pagination.itemsPerPage\">\n  <div class=\"wz-pagination__wrapper\">\n    <div class=\"wz-pagination__wrapper__page\">\n      <p>{{ 'PaginationComponent.page' | translate }}</p>\n\n      <wz-page-selector [pagination]=\"pagination\" [totalItems]=\"pagination.totalItems\" (pageChange)=\"onGotoPageChange($event)\"></wz-page-selector>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__elements\">\n      <p>{{ pagination.currentPage | customPagniationText: pagination.totalItems:pagination.itemsPerPage }}</p>\n    </div>\n\n    <div class=\"wz-pagination__wrapper__arrows\">\n      <div\n        (click)=\"decrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--left\"\n        [ngClass]=\"{ 'wz-pagination__wrapper__arrows__arrow--disabled': pagination.currentPage === 1 }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n      <div\n        (click)=\"incrementPage()\"\n        class=\"wz-pagination__wrapper__arrows__arrow wz-pagination__wrapper__arrows__arrow--right\"\n        [ngClass]=\"{\n          'wz-pagination__wrapper__arrows__arrow--disabled':\n            pagination.currentPage | IsLastPage: pagination.totalItems:pagination.itemsPerPage\n        }\"\n      >\n        <span class=\"wz-pagination__wrapper__arrows__arrow__icon\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n"
             }),
             __metadata("design:paramtypes", [])
         ], PaginationComponent);
@@ -4422,6 +4432,118 @@
         return NumberToArray;
     }());
 
+    var PageSelectorComponent = /** @class */ (function () {
+        function PageSelectorComponent() {
+            this.openAbsoluteSelect = false;
+            this.largeNumberOfPage = false;
+            this.numberOfPage = 0;
+            this.pageChange = new core.EventEmitter();
+        }
+        Object.defineProperty(PageSelectorComponent.prototype, "pagination", {
+            get: function () {
+                return this._pagination;
+            },
+            set: function (pagination) {
+                this._pagination = pagination;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(PageSelectorComponent.prototype, "totalItems", {
+            get: function () {
+                return this._totalItems;
+            },
+            set: function (totalItems) {
+                this.numberOfPage = Math.ceil(totalItems / this.pagination.itemsPerPage);
+                this.largeNumberOfPage = this.numberOfPage > 30;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        PageSelectorComponent.prototype.onGotoPageChange = function (event, directValue) {
+            if (directValue) {
+                this.pageChange.emit(event);
+                this.openAbsoluteSelect = false;
+            }
+            else {
+                this.pageChange.emit(parseInt(event.target.value));
+            }
+        };
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Object),
+            __metadata("design:paramtypes", [Object])
+        ], PageSelectorComponent.prototype, "pagination", null);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Number),
+            __metadata("design:paramtypes", [Number])
+        ], PageSelectorComponent.prototype, "totalItems", null);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], PageSelectorComponent.prototype, "pageChange", void 0);
+        PageSelectorComponent = __decorate([
+            core.Component({
+                selector: 'wz-page-selector',
+                template: "<div class=\"wz-selector\">\n\n  <div class=\"wz-selector__default\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n    <div class=\"wz-selector__default__base\" *ngIf=\"largeNumberOfPage;\" (click)=\"openAbsoluteSelect = !openAbsoluteSelect\">\n      <input name=\"page-input\" [value]=\"pagination.currentPage\" (change)=\"onGotoPageChange($event, false);openAbsoluteSelect = false;\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\" />\n      <i class=\"fas fa-sort-down\"></i>\n    </div>\n    <div class=\"wz-selector__default__absolute\" *ngIf=\"openAbsoluteSelect\">\n      <div class=\"wz-selector__default__absolute__wrapper\" *ngFor=\"let pageIndex of (pagination.totalItems | LargeNumberOfPage: pagination.itemsPerPage : pagination.currentPage).slice().reverse() as result\">\n        <div class=\"wz-selector__default__absolute__wrapper__item\" [ngClass]=\"{'selected': pageIndex.value === pagination.currentPage}\" (click)=\"onGotoPageChange(pageIndex.value, true)\">\n          <span>{{ pageIndex.display }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"!largeNumberOfPage\">\n    <select name=\"page\" (change)=\"onGotoPageChange($event, false)\" [ngStyle]=\"{'width': 40 + (10*pagination.currentPage.toString().length) + 'px'}\">\n      <ng-container *ngFor=\"let pageIndex of pagination.totalItems | ArrayTotalPages: pagination.itemsPerPage\">\n        <option [selected]=\"pageIndex === pagination.currentPage\" [value]=\"pageIndex\">\n          {{ pageIndex }}\n        </option>\n      </ng-container>\n    </select>\n  </ng-container>\n</div>\n"
+            }),
+            __metadata("design:paramtypes", [])
+        ], PageSelectorComponent);
+        return PageSelectorComponent;
+    }());
+
+    var LargeNumberOfPagePipe = /** @class */ (function () {
+        function LargeNumberOfPagePipe() {
+        }
+        /**
+         * Return an incremental array
+         * Display 30 pages, from -15 to +15 of the current page
+         * @param totalItems
+         * @param itemsPerPage
+         */
+        LargeNumberOfPagePipe.prototype.transform = function (totalItems, itemsPerPage, currentPage) {
+            if (!(totalItems >= 0 && itemsPerPage >= 0)) {
+                throw new Error('totalItems or itemsPerPage missing in ArrayTotalPages pipe.');
+            }
+            var arrayLength = 32;
+            var startAtPage = currentPage <= 15 ? 0 : currentPage - 15;
+            var totalPage = Math.ceil(totalItems / itemsPerPage);
+            var arrayWithPageNumber = Array.apply(null, { length: arrayLength })
+                .map(Number.call, Number)
+                .map(function (x) {
+                var pageIndex = {
+                    display: startAtPage + x + 1,
+                    value: startAtPage + x + 1
+                };
+                if (x === arrayLength - 2) {
+                    pageIndex.display = '...';
+                }
+                if (x === arrayLength - 1) {
+                    pageIndex.display = totalPage;
+                    pageIndex.value = totalPage;
+                }
+                return pageIndex;
+            });
+            if (startAtPage) {
+                arrayWithPageNumber.unshift({
+                    display: 1,
+                    value: 1
+                }, {
+                    display: "...",
+                    value: 2
+                });
+            }
+            return arrayWithPageNumber;
+        };
+        LargeNumberOfPagePipe = __decorate([
+            core.Pipe({
+                name: 'LargeNumberOfPage'
+            })
+        ], LargeNumberOfPagePipe);
+        return LargeNumberOfPagePipe;
+    }());
+
     ;
     var components = [
         WzImgManagerComponent,
@@ -4444,7 +4566,8 @@
         InputSearchComponent,
         PaginationComponent,
         CheckboxComponent,
-        AlertComponent
+        AlertComponent,
+        PageSelectorComponent,
     ];
     var directives = [
         DragDropDirective,
@@ -4463,7 +4586,8 @@
         PagniationIsLastPage,
         PagniationText,
         ImageSrcPipe,
-        NumberToArray
+        NumberToArray,
+        LargeNumberOfPagePipe
     ];
     var WzImgManagerModule = /** @class */ (function () {
         function WzImgManagerModule() {
@@ -4538,21 +4662,23 @@
     exports.ɵbd = PaginationComponent;
     exports.ɵbe = CheckboxComponent;
     exports.ɵbf = AlertComponent;
-    exports.ɵbg = DragDropDirective;
-    exports.ɵbh = LoadingDirective;
-    exports.ɵbi = AutoHideDirective;
-    exports.ɵbj = CopyClipboardDirective;
-    exports.ɵbk = TableColumn;
-    exports.ɵbl = CheckBoxRow;
-    exports.ɵbm = TableColumnHeader;
-    exports.ɵbn = TableRow;
-    exports.ɵbo = AbstractDebounceDirective;
-    exports.ɵbp = DebounceKeyupDirective;
-    exports.ɵbq = PagniationArrayTotalPages;
-    exports.ɵbr = PagniationIsLastPage;
-    exports.ɵbs = PagniationText;
-    exports.ɵbt = ImageSrcPipe;
-    exports.ɵbu = NumberToArray;
+    exports.ɵbg = PageSelectorComponent;
+    exports.ɵbh = DragDropDirective;
+    exports.ɵbi = LoadingDirective;
+    exports.ɵbj = AutoHideDirective;
+    exports.ɵbk = CopyClipboardDirective;
+    exports.ɵbl = TableColumn;
+    exports.ɵbm = CheckBoxRow;
+    exports.ɵbn = TableColumnHeader;
+    exports.ɵbo = TableRow;
+    exports.ɵbp = AbstractDebounceDirective;
+    exports.ɵbq = DebounceKeyupDirective;
+    exports.ɵbr = PagniationArrayTotalPages;
+    exports.ɵbs = PagniationIsLastPage;
+    exports.ɵbt = PagniationText;
+    exports.ɵbu = ImageSrcPipe;
+    exports.ɵbv = NumberToArray;
+    exports.ɵbw = LargeNumberOfPagePipe;
     exports.ɵc = UserSettingsService;
     exports.ɵd = ImgEventService;
     exports.ɵe = DomService;