@wizishop/img-manager 0.2.74 → 0.2.78

package/fesm5/wizishop-img-manager.js

@@ -213,7 +213,7 @@ var ImgManagerService = /** @class */ (function () {
         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());
@@ -1781,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) {
@@ -1856,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
             ]
@@ -2980,8 +2984,8 @@ var ImagesViewComponent = /** @class */ (function () {
         var _this = this;
         this.isLoading = true;
         this.displayPexelsResults = false;
-        this.isTotalRetieved = false;
         this.setParams();
+        this.refreshTotalImgList();
         this.imgManager.getShopImgList(this.params).pipe(take(1)).subscribe(function (data) {
             _this.initVariables(true);
             var nbImgDisplayed = data.data.length;
@@ -2999,7 +3003,6 @@ var ImagesViewComponent = /** @class */ (function () {
             if (data.totalRecords === 0) {
                 _this.displayPexelsLib();
             }
-            _this.refreshTotalImgList();
         }, function (error) {
             _this.alertService.openAlert(_this.errorGetAllImg);
             _this.initVariables(false);
@@ -3007,12 +3010,19 @@ var ImagesViewComponent = /** @class */ (function () {
     };
     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.alertService.openAlert(this.errorGetTotalImg);
             _this.initVariables(false);
         });
     };
@@ -3484,8 +3494,8 @@ var PaginationComponent = /** @class */ (function () {
         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([
@@ -3500,7 +3510,7 @@ var PaginationComponent = /** @class */ (function () {
     PaginationComponent = __decorate([
         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);
@@ -4219,6 +4229,118 @@ var NumberToArray = /** @class */ (function () {
     return NumberToArray;
 }());
 
+var PageSelectorComponent = /** @class */ (function () {
+    function PageSelectorComponent() {
+        this.openAbsoluteSelect = false;
+        this.largeNumberOfPage = false;
+        this.numberOfPage = 0;
+        this.pageChange = new 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([
+        Input(),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [Object])
+    ], PageSelectorComponent.prototype, "pagination", null);
+    __decorate([
+        Input(),
+        __metadata("design:type", Number),
+        __metadata("design:paramtypes", [Number])
+    ], PageSelectorComponent.prototype, "totalItems", null);
+    __decorate([
+        Output(),
+        __metadata("design:type", EventEmitter)
+    ], PageSelectorComponent.prototype, "pageChange", void 0);
+    PageSelectorComponent = __decorate([
+        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([
+        Pipe({
+            name: 'LargeNumberOfPage'
+        })
+    ], LargeNumberOfPagePipe);
+    return LargeNumberOfPagePipe;
+}());
+
 ;
 var components = [
     WzImgManagerComponent,
@@ -4241,7 +4363,8 @@ var components = [
     InputSearchComponent,
     PaginationComponent,
     CheckboxComponent,
-    AlertComponent
+    AlertComponent,
+    PageSelectorComponent,
 ];
 var directives = [
     DragDropDirective,
@@ -4260,7 +4383,8 @@ var pipes = [
     PagniationIsLastPage,
     PagniationText,
     ImageSrcPipe,
-    NumberToArray
+    NumberToArray,
+    LargeNumberOfPagePipe
 ];
 var WzImgManagerModule = /** @class */ (function () {
     function WzImgManagerModule() {
@@ -4325,5 +4449,5 @@ var ImgCDNConfigDTO = /** @class */ (function () {
  * Generated bundle index. Do not edit.
  */
 
-export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, DragDropDirective as ɵbg, LoadingDirective as ɵbh, AutoHideDirective as ɵbi, CopyClipboardDirective as ɵbj, TableColumn as ɵbk, CheckBoxRow as ɵbl, TableColumnHeader as ɵbm, TableRow as ɵbn, AbstractDebounceDirective as ɵbo, DebounceKeyupDirective as ɵbp, PagniationArrayTotalPages as ɵbq, PagniationIsLastPage as ɵbr, PagniationText as ɵbs, ImageSrcPipe as ɵbt, NumberToArray as ɵbu, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
+export { CanvaButtonApi, CanvaService, ImgApiDto, ImgCDNConfigDTO, ImgManagerConfigDto, ImgManagerService, ImgSelectionService, RenamePictureService, WzImgManagerComponent, WzImgManagerModule, ImgManagerConfigService as ɵa, ImgCDNService as ɵb, TableComponent as ɵba, FiltersTableService as ɵbb, InputSearchComponent as ɵbc, PaginationComponent as ɵbd, CheckboxComponent as ɵbe, AlertComponent as ɵbf, PageSelectorComponent as ɵbg, DragDropDirective as ɵbh, LoadingDirective as ɵbi, AutoHideDirective as ɵbj, CopyClipboardDirective as ɵbk, TableColumn as ɵbl, CheckBoxRow as ɵbm, TableColumnHeader as ɵbn, TableRow as ɵbo, AbstractDebounceDirective as ɵbp, DebounceKeyupDirective as ɵbq, PagniationArrayTotalPages as ɵbr, PagniationIsLastPage as ɵbs, PagniationText as ɵbt, ImageSrcPipe as ɵbu, NumberToArray as ɵbv, LargeNumberOfPagePipe as ɵbw, UserSettingsService as ɵc, ImgEventService as ɵd, DomService as ɵe, ImgTabsComponent as ɵf, AlertService as ɵg, ImgUploadComponent as ɵh, easeInOut as ɵi, PexelLibComponent as ɵj, listAnnimation as ɵk, PexelsService as ɵl, ImgCardComponent as ɵm, ImagesActionHandler as ɵn, UploadListComponent as ɵo, ImgEditorComponent as ɵp, EditorInfoSectionComponent as ɵq, CanvaBtnComponent as ɵr, ImgSelectionComponent as ɵs, LoaderComponent as ɵt, DropdownComponent as ɵu, CropperComponent as ɵv, insertRemove as ɵw, ImagesViewComponent as ɵx, MosaicViewComponent as ɵy, TableViewComponent as ɵz };
 //# sourceMappingURL=wizishop-img-manager.js.map