@dsivd/prestations-ng 14.5.13 → 14.5.14-beta4

package/CHANGELOG.md

@@ -26,6 +26,16 @@ A change is considered **breaking** if you have to change your code or update yo
 
 ---
 
+## [14.5.14]
+
+### Added
+
+- [foehn-table.module.ts](projects/prestations-ng/src/foehn-table/foehn-table.module.ts)
+- [foehn-table.component.ts](projects/prestations-ng/src/foehn-table/foehn-table.component.ts)
+- [foehn-table.component.html](projects/prestations-ng/src/foehn-table/foehn-table.component.html)
+    - added a paginated table
+    - for examples, see related page in the devtool (https://dsi-vd.github.io/prestations-ng/list#foehn_table)
+
 ## [14.5.13]
 
 ### Added

package/bundles/dsivd-prestations-ng.umd.js

@@ -1911,7 +1911,10 @@
         'foehn-picture-upload.validate-selection-label': 'Valider la sélection',
         'foehn-picture-upload.cancel-selection-label': 'Annuler',
         'foehn-picture-upload.selection-not-validated-label': 'Merci de valider votre sélection',
-        'foehn-picture-upload.delete-picture-label': 'Supprimer'
+        'foehn-picture-upload.delete-picture-label': 'Supprimer',
+        'foehn-table.totalElements': '{total} éléments trouvés',
+        'foehn-table.totalElements.1': '1 élément trouvé',
+        'foehn-table.totalElements.0': 'Aucun résultat'
     };
 
     var DICTIONARY_BASE_URL = 'api/dictionary';
@@ -9712,6 +9715,199 @@
         return PageChangeEvent;
     }());
 
+    var hasInputChanged = function (change) { return !(!change ||
+        !change.currentValue ||
+        change.previousValue === change.currentValue); };
+    var FoehnTableComponent = /** @class */ (function () {
+        function FoehnTableComponent() {
+            this.itemsPerPage = 10;
+            this.id = 'foehn-table';
+            this.previousLabel = 'Précédent';
+            this.nextLabel = 'Suivant';
+            this.pageChange = new i0.EventEmitter();
+            this.sortChange = new i0.EventEmitter();
+            this.currentPage = 1;
+            this.filteredList = [];
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            this.trackByFn = function (index, item) { return index; };
+        }
+        Object.defineProperty(FoehnTableComponent.prototype, "list", {
+            set: function (list) {
+                this._list = list;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        FoehnTableComponent.prototype.ngOnChanges = function (changes) {
+            var itemsPerPageChange = changes.itemsPerPage;
+            var listChange = changes.list;
+            var fixedPageCountChange = changes.fixedPageCount;
+            if (!hasInputChanged(itemsPerPageChange) &&
+                !hasInputChanged(listChange) &&
+                !hasInputChanged(fixedPageCountChange)) {
+                return;
+            }
+            this.buildFilteredList();
+        };
+        FoehnTableComponent.prototype.previousPage = function () {
+            this.currentPage = this.currentPage - 1;
+            this.buildFilteredList();
+            this.pageChange.next({
+                previousPage: this.currentPage + 1,
+                currentPage: this.currentPage,
+                pageCount: this.pagesCount()
+            });
+        };
+        FoehnTableComponent.prototype.hasPreviousPage = function () {
+            return this.currentPage > 1;
+        };
+        FoehnTableComponent.prototype.nextPage = function () {
+            this.currentPage = this.currentPage + 1;
+            this.buildFilteredList();
+            this.pageChange.next({
+                previousPage: this.currentPage - 1,
+                currentPage: this.currentPage,
+                pageCount: this.pagesCount()
+            });
+        };
+        FoehnTableComponent.prototype.hasNextPage = function () {
+            return this.currentPage < this.pagesCount();
+        };
+        FoehnTableComponent.prototype.showPage = function (page, emitPageChangeEvent) {
+            if (emitPageChangeEvent === void 0) { emitPageChangeEvent = false; }
+            if (this.currentPage === page) {
+                return;
+            }
+            var previousPage = this.currentPage;
+            this.currentPage = page;
+            this.buildFilteredList();
+            if (emitPageChangeEvent) {
+                this.pageChange.next({
+                    previousPage: previousPage,
+                    currentPage: this.currentPage,
+                    pageCount: this.pagesCount()
+                });
+            }
+        };
+        FoehnTableComponent.prototype.pagesCount = function () {
+            if (!!this.fixedPageCount) {
+                return this.fixedPageCount;
+            }
+            return this._list
+                ? Math.ceil(this._list.length / this.itemsPerPage)
+                : 0;
+        };
+        FoehnTableComponent.prototype.triggerSort = function (sortAttribute) {
+            var sortDirection = 'DESC';
+            if (this.sort.sortAttribute === sortAttribute) {
+                sortDirection = this.sort.sortDirection === 'DESC' ? 'ASC' : 'DESC';
+            }
+            this.sortChange.next({
+                sortDirection: sortDirection,
+                sortAttribute: sortAttribute
+            });
+        };
+        FoehnTableComponent.prototype.buildFilteredList = function () {
+            if (!!this.fixedPageCount) {
+                this.filteredList = this._list;
+                return;
+            }
+            var currentPageExists = (this.currentPage - 1) * this.itemsPerPage <= this._list.length;
+            if (!currentPageExists) {
+                this.currentPage = 1;
+            }
+            var start = (this.currentPage - 1) * this.itemsPerPage;
+            this.filteredList = this._list
+                ? this._list.slice(start, start + this.itemsPerPage)
+                : [];
+        };
+        return FoehnTableComponent;
+    }());
+    FoehnTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    FoehnTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.4", type: FoehnTableComponent, selector: "foehn-table", inputs: { itemsPerPage: "itemsPerPage", id: "id", previousLabel: "previousLabel", nextLabel: "nextLabel", totalElements: "totalElements", fixedPageCount: "fixedPageCount", columnsConfiguration: "columnsConfiguration", sort: "sort", trackByFn: "trackByFn", list: "list" }, outputs: { pageChange: "pageChange", sortChange: "sortChange" }, usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"row\" [id]=\"id\">\n    <div class=\"col-12\">\n        <h4 *ngIf=\"!!totalElements && totalElements === 1\">\n            {{ 'foehn-table.totalElements.1' | fromDictionary }}\n        </h4>\n        <h4 *ngIf=\"!!totalElements && totalElements !== 1\">\n            {{\n                'foehn-table.totalElements'\n                    | fromDictionary: { total: totalElements.toString() }\n            }}\n        </h4>\n    </div>\n\n    <div class=\"col-12 table-responsive\">\n        <table class=\"table table-hover\">\n            <thead class=\"vd-bg-pattern-bars-gray\">\n                <tr>\n                    <th\n                        scope=\"col\"\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id\"\n                    >\n                        <ng-container *ngIf=\"!col.sortAttribute\">\n                            <span\n                                [innerHTML]=\"\n                                    col.columnLabelKey | fromDictionary\n                                \"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.sortAttribute\">\n                            <a\n                                href=\"#\"\n                                class=\"vd-text-thin\"\n                                (click)=\"\n                                    $event.preventDefault();\n                                    triggerSort(col.sortAttribute)\n                                \"\n                                [title]=\"\n                                    'Trier par ' +\n                                    (col.columnLabelKey | fromDictionary)\n                                \"\n                            >\n                                <span\n                                    [innerHTML]=\"\n                                        col.columnLabelKey | fromDictionary\n                                    \"\n                                ></span>\n                                <ng-container\n                                    *ngIf=\"\n                                        sort.sortAttribute === col.sortAttribute\n                                    \"\n                                >\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'ASC'\"\n                                    >\n                                        <foehn-icon-chevron-up></foehn-icon-chevron-up>\n                                    </span>\n                                    <span\n                                        class=\"ml-3\"\n                                        *ngIf=\"sort.sortDirection === 'DESC'\"\n                                    >\n                                        <foehn-icon-chevron-down></foehn-icon-chevron-down>\n                                    </span>\n                                </ng-container>\n                            </a>\n                        </ng-container>\n                    </th>\n                </tr>\n            </thead>\n            <tbody>\n                <tr\n                    *ngFor=\"\n                        let item of filteredList;\n                        let index = index;\n                        trackBy: trackByFn\n                    \"\n                >\n                    <td\n                        *ngFor=\"let col of columnsConfiguration\"\n                        [id]=\"col.id + '-' + index\"\n                    >\n                        <ng-container *ngIf=\"!!col.isImportant\">\n                            <span\n                                *ngIf=\"col.isImportant(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <svg\n                                    xmlns=\"http://www.w3.org/2000/svg\"\n                                    width=\"30\"\n                                    height=\"30\"\n                                    style=\"color: var(--red)\"\n                                    fill=\"currentColor\"\n                                    class=\"bi bi-exclamation\"\n                                    viewBox=\"0 0 16 16\"\n                                >\n                                    <path\n                                        d=\"M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.553.553 0 0 1-1.1 0L7.1 4.995z\"\n                                    />\n                                </svg>\n                            </span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!col.routerLinkGetter\">\n                            <span\n                                [innerHTML]=\"col.valueGetter(item)\"\n                                class=\"cell-vertical-align-middle\"\n                            ></span>\n                        </ng-container>\n\n                        <ng-container *ngIf=\"!!col.routerLinkGetter\">\n                            <a\n                                [routerLink]=\"col.routerLinkGetter(item)\"\n                                queryParamsHandling=\"merge\"\n                                class=\"cell-vertical-align-middle\"\n                            >\n                                <span\n                                    [innerHTML]=\"col.valueGetter(item)\"\n                                ></span>\n                            </a>\n                        </ng-container>\n                    </td>\n                </tr>\n                <tr *ngIf=\"!filteredList.length\">\n                    <td [colSpan]=\"columnsConfiguration.length\">\n                        <div class=\"w-100 text-center\">\n                            {{ 'foehn-table.totalElements.0' | fromDictionary }}\n                        </div>\n                    </td>\n                </tr>\n            </tbody>\n        </table>\n\n        <div class=\"row d-flex justify-content-between p-1\">\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasPreviousPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--previous\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"previousPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    <foehn-icon-chevron-left></foehn-icon-chevron-left>\n                                    {{ previousLabel }}\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage - 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n\n            <div class=\"col-lg-3 col-md-3 col-sm-6 col-xs-6\">\n                <nav\n                    class=\"vd-pagination\"\n                    aria-label=\"Pagination\"\n                    *ngIf=\"hasNextPage()\"\n                >\n                    <ul class=\"vd-pagination__list\">\n                        <li\n                            class=\"vd-pagination__item vd-pagination__item--next\"\n                        >\n                            <button\n                                class=\"btn-link vd-pagination__link btn-no-extra vd-pagination__link-reset\"\n                                (click)=\"nextPage()\"\n                            >\n                                <span class=\"vd-pagination__title\">\n                                    {{ nextLabel }}\n                                    <foehn-icon-chevron-right></foehn-icon-chevron-right>\n                                </span>\n                                <span class=\"sr-only\">:</span>\n                                <span class=\"vd-pagination__label\">\n                                    {{ currentPage + 1 }} sur {{ pagesCount() }}\n                                </span>\n                            </button>\n                        </li>\n                    </ul>\n                </nav>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: [".btn-no-extra{padding:0;border:none;font-weight:400;-webkit-text-decoration-line:none;text-decoration-line:none}.vd-pagination__link-reset{background:none;border:none;font-weight:inherit;-webkit-text-decoration-line:none;text-decoration-line:none;text-align:inherit;cursor:pointer}.vd-pagination__link-reset:focus{background-color:#ffbf47}.cell-vertical-align-middle{vertical-align:middle}\n"], components: [{ type: FoehnIconChevronUpComponent, selector: "foehn-icon-chevron-up" }, { type: FoehnIconChevronDownComponent, selector: "foehn-icon-chevron-down" }, { type: FoehnIconChevronLeftComponent, selector: "foehn-icon-chevron-left" }, { type: FoehnIconChevronRightComponent, selector: "foehn-icon-chevron-right" }], directives: [{ type: i3__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "fromDictionary": SdkDictionaryPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'foehn-table',
+                        templateUrl: './foehn-table.component.html',
+                        styleUrls: ['./foehn-table.component.css']
+                    }]
+            }], propDecorators: { itemsPerPage: [{
+                    type: i0.Input
+                }], id: [{
+                    type: i0.Input
+                }], previousLabel: [{
+                    type: i0.Input
+                }], nextLabel: [{
+                    type: i0.Input
+                }], totalElements: [{
+                    type: i0.Input
+                }], fixedPageCount: [{
+                    type: i0.Input
+                }], columnsConfiguration: [{
+                    type: i0.Input
+                }], pageChange: [{
+                    type: i0.Output
+                }], sort: [{
+                    type: i0.Input
+                }], sortChange: [{
+                    type: i0.Output
+                }],
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
+            trackByFn: [{
+                    type: i0.Input
+                }], list: [{
+                    type: i0.Input
+                }] } });
+
+    var FoehnTableModule = /** @class */ (function () {
+        function FoehnTableModule() {
+        }
+        return FoehnTableModule;
+    }());
+    FoehnTableModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    FoehnTableModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, declarations: [FoehnTableComponent], imports: [i3.CommonModule,
+            FoehnIconsModule,
+            SdkDictionaryModule,
+            i1$1.RouterModule], exports: [FoehnTableComponent] });
+    FoehnTableModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, imports: [[
+                i3.CommonModule,
+                FoehnIconsModule,
+                SdkDictionaryModule,
+                i1$1.RouterModule
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.4", ngImport: i0__namespace, type: FoehnTableModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i3.CommonModule,
+                            FoehnIconsModule,
+                            SdkDictionaryModule,
+                            i1$1.RouterModule
+                        ],
+                        declarations: [FoehnTableComponent],
+                        exports: [FoehnTableComponent]
+                    }]
+            }] });
+
+    var FoehnTableColumnConfiguration = /** @class */ (function () {
+        function FoehnTableColumnConfiguration() {
+        }
+        return FoehnTableColumnConfiguration;
+    }());
+
+    var FoehnTablePageChangeEvent = /** @class */ (function () {
+        function FoehnTablePageChangeEvent() {
+        }
+        return FoehnTablePageChangeEvent;
+    }());
+
+    var TableSort = /** @class */ (function () {
+        function TableSort() {
+        }
+        return TableSort;
+    }());
+
     var RedirectComponent = /** @class */ (function () {
         function RedirectComponent(iamInterceptor) {
             var _this = this;
@@ -13115,6 +13311,10 @@
     exports.FoehnRemainingAlertsSummaryModule = FoehnRemainingAlertsSummaryModule;
     exports.FoehnSelectComponent = FoehnSelectComponent;
     exports.FoehnSkipLinkComponent = FoehnSkipLinkComponent;
+    exports.FoehnTableColumnConfiguration = FoehnTableColumnConfiguration;
+    exports.FoehnTableComponent = FoehnTableComponent;
+    exports.FoehnTableModule = FoehnTableModule;
+    exports.FoehnTablePageChangeEvent = FoehnTablePageChangeEvent;
     exports.FoehnTimeComponent = FoehnTimeComponent;
     exports.FoehnUserConnectedAsComponent = FoehnUserConnectedAsComponent;
     exports.FoehnUserConnectedAsModule = FoehnUserConnectedAsModule;
@@ -13179,6 +13379,7 @@
     exports.Street = Street;
     exports.StreetNumber = StreetNumber;
     exports.THOUSANDS_SEPARATOR = THOUSANDS_SEPARATOR;
+    exports.TableSort = TableSort;
     exports.UploaderHelper = UploaderHelper;
     exports.ValidationHandlerService = ValidationHandlerService;