@firestitch/list 9.10.0 → 9.11.1

package/app/classes/list-controller.d.ts

@@ -5,7 +5,7 @@ import { FsScrollInstance, FsScrollService } from '@firestitch/scroll';
 import { SelectionDialog } from '@firestitch/selection';
 import { Model } from 'tsmodels';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { FsListConfig, FsListEmptyStateConfig, FsListFetchFn, FsListFetchSubscription, FsListNoResultsConfig, FsListRestoreConfig, FsListScrollableConfig, FsListTrackByFn } from '../interfaces';
+import { FsListAfterFetchFn, FsListConfig, FsListEmptyStateConfig, FsListFetchFn, FsListFetchSubscription, FsListNoResultsConfig, FsListRestoreConfig, FsListScrollableConfig, FsListTrackByFn } from '../interfaces';
 import { ColumnsController } from './columns-controller';
 import { ActionsController } from './index';
 import { DataController } from './data-controller';
@@ -42,6 +42,7 @@ export declare class List extends Model {
     noResults: FsListNoResultsConfig;
     emptyState: FsListEmptyStateConfig;
     fetchFn: FsListFetchFn;
+    afterFetchFn: FsListAfterFetchFn;
     initialized$: BehaviorSubject<boolean>;
     loading$: BehaviorSubject<boolean>;
     filtersQuery: any;

package/app/components/body/row/cell/cell.component.d.ts

@@ -14,7 +14,7 @@ export declare class FsCellComponent implements OnInit, OnChanges, OnDestroy {
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
-    protected _initCellContext(): void;
+    private _initCellContext;
     private _initCellTemplate;
     private _listenGroupOpen;
 }

package/app/components/footer/footer-row/footer-cell/footer-cell.component.d.ts

@@ -1,7 +1,4 @@
 import { FsCellComponent } from '../../../body/row/cell/cell.component';
-import { Row } from '../../../../models/row';
 export declare class FsFooterCellComponent extends FsCellComponent {
-    rows: Row[];
     constructor();
-    protected _initCellContext(): void;
 }

package/app/components/footer/footer-row/footer-row.component.d.ts

@@ -1,10 +1,8 @@
 import { ChangeDetectorRef, ElementRef, KeyValueDiffers, Renderer2 } from '@angular/core';
 import { FsRowComponent } from '../../body/row/row.component';
 import { ReorderController, ReorderPosition } from '../../../classes/reorder-controller';
-import { Row } from '../../../models/row';
 export declare class FsFooterRowComponent extends FsRowComponent {
     hasRowActions: boolean;
-    rows: Row[];
     readonly ReorderPosition: typeof ReorderPosition;
     constructor(el: ElementRef, reorderController: ReorderController, cdRef: ChangeDetectorRef, differs: KeyValueDiffers, renderer: Renderer2);
 }

package/app/components/footer/footer.component.d.ts

@@ -1,10 +1,8 @@
 import { Column } from '../../models/column.model';
 import { SelectionController } from '../../classes/selection-controller';
-import { Row } from '../../models/row';
 export declare class FsFooterComponent {
     hasRowActions: boolean;
     columns: Column[];
     selection: SelectionController;
-    rows: Row[];
     constructor();
 }

package/app/interfaces/listconfig.interface.d.ts

@@ -33,6 +33,7 @@ export interface FsListConfig {
     rowClass?: (row: any) => string;
     actions?: FsListAction[];
     fetch?: FsListFetchFn;
+    afterFetch?: FsListAfterFetchFn;
     scrollable?: FsListScrollableConfig | boolean;
     selection?: FsListSelectionConfig;
     initialFetch?: boolean;
@@ -142,7 +143,7 @@ export interface FsListRowActionGroup {
     rowActions: FsListRowAction[];
 }
 export interface FsListRowAction {
-    label?: string;
+    label?: string | FsListRowActionLabelFn;
     type?: ActionType;
     className?: string;
     icon?: string;
@@ -159,6 +160,9 @@ export interface FsListRowAction {
 export interface FsListRowActionLinkFn {
     (row: FsListAbstractRow): FsListRowActionLink;
 }
+export interface FsListRowActionLabelFn {
+    (row: FsListAbstractRow): string;
+}
 export interface FsListRowActionLink {
     link: any[] | string;
     queryParams?: Record<string, any>;
@@ -218,3 +222,4 @@ export declare type FsListFetchFn = (query: Record<string, any>, options: FsList
     data: unknown[];
     paging?: FsPaging;
 }>;
+export declare type FsListAfterFetchFn = (query: Record<string, any>, data: unknown[]) => void;

package/app/models/row-action.model.d.ts

@@ -3,7 +3,6 @@ import { ActionType } from '../enums/button-type.enum';
 import { FsListRowActionLink } from '../interfaces';
 export declare class RowAction extends Model {
     icon: string;
-    label: string;
     menu: boolean;
     remove: {
         title: string;
@@ -14,16 +13,19 @@ export declare class RowAction extends Model {
     show: Function;
     restore: boolean;
     rowActions: RowAction[];
+    label: string;
     routerLink: FsListRowActionLink;
     classArray: string[];
     isShown: boolean;
     click: Function;
     private _linkFn;
+    private _labelFn;
     private readonly _isGroup;
     constructor(config?: any);
     get isGroup(): boolean;
     _fromJSON(value: any): void;
     checkShowStatus(row: any, index: any): void;
     updateLink(row: any): void;
+    updateLabel(row: any): void;
     private clickEvent;
 }

package/bundles/firestitch-list.umd.js

@@ -517,6 +517,7 @@
         function RowAction(config) {
             if (config === void 0) { config = {}; }
             var _this = _super.call(this) || this;
+            _this.label = '';
             _this.classArray = [];
             _this.isShown = true;
             _this._isGroup = false;
@@ -549,6 +550,13 @@
                 return _this.clickEvent(row, event, index, rowActionsRef, clickFn);
             };
             this._linkFn = value.link;
+            if (typeof value.label === 'function') {
+                this._labelFn = value.label;
+                this.label = '';
+            }
+            else {
+                this.label = value.label;
+            }
             if (this.className) {
                 this.classArray = this.className.split(' ').reduce(function (acc, elem) {
                     acc.push(elem);
@@ -583,6 +591,19 @@
                 }
             }
         };
+        RowAction.prototype.updateLabel = function (row) {
+            if (!this.isShown) {
+                return;
+            }
+            if (this.isGroup) {
+                this.rowActions.forEach(function (action) {
+                    action.updateLabel(row);
+                });
+            }
+            else if (this._labelFn) {
+                this.label = this._labelFn(row);
+            }
+        };
         RowAction.prototype.clickEvent = function (row, event, index, rowActionsRef, clickFn) {
             // Stop event propagation for parent
             event.stopPropagation();
@@ -599,10 +620,6 @@
             tsmodels.Alias(),
             __metadata("design:type", String)
         ], RowAction.prototype, "icon", void 0);
-        __decorate([
-            tsmodels.Alias(),
-            __metadata("design:type", String)
-        ], RowAction.prototype, "label", void 0);
         __decorate([
             tsmodels.Alias(),
             __metadata("design:type", Boolean)
@@ -3338,7 +3355,7 @@
             var _this = this;
             var fetch$ = this.fetch$.asObservable();
             // Should wait until saved filters not loaded
-            if (!!this.filters && !!this.savedFilters) {
+            if (!!this.filters) {
                 fetch$ = rxjs.combineLatest([fetch$, this.filtersReady$])
                     .pipe(operators.map(function (_a) {
                     var _b = __read(_a, 1), params = _b[0];
@@ -3598,6 +3615,9 @@
             if (((_c = this.emptyState) === null || _c === void 0 ? void 0 : _c.validate) && this.emptyStateTemplate) {
                 this.emptyStateEnabled = this.emptyState.validate(query, lodashEs.cloneDeep(response.data));
             }
+            if (this.afterFetchFn) {
+                this.afterFetchFn(query, this.dataController.visibleRowsData);
+            }
             this.fetchComplete$.next();
             this.loading$.next(false);
         };
@@ -3717,6 +3737,10 @@
             tsmodels.Alias('fetch'),
             __metadata("design:type", Function)
         ], List.prototype, "fetchFn", void 0);
+        __decorate([
+            tsmodels.Alias('afterFetch'),
+            __metadata("design:type", Function)
+        ], List.prototype, "afterFetchFn", void 0);
         return List;
     }(tsmodels.Model));
 
@@ -4566,7 +4590,7 @@
         FsListComponent = __decorate([
             core.Component({
                 selector: 'fs-list',
-                template: "<div class=\"fs-list-container\"\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\n                  'has-filters': list.filterConfig?.items.length,\n                  'has-heading': list.heading,\n                  'has-status': list.status,\n                  'has-chips': list.chips,\n                  'has-actions': list.actions.hasActions,\n                  'first-load': firstLoad,\n                  'loading': list.loading$ | async }\">\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\n</div>\n\n<ng-template #listContainerContent>\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\n    <!-- Header -->\n    <div class=\"fs-list-header-container\">\n\n      <div class=\"fs-list-header\"\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\n        <div class=\"heading-container\">\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\n        </div>\n        <fs-filter\n          class=\"fs-list-filter\"\n          *ngIf=\"list.filterConfig\"\n          [filter]=\"list.filterConfig\"\n          [showSortBy]=\"!list.status\"\n          [showFilterInput]=\"list.filterInput\"\n          (ready)=\"filterReady()\">\n\n          <ng-template fsFilterStatusBar>\n            <ng-container *ngIf=\"\n              list.paging &&\n              !(reorderController.manualReorderActivated$ | async) &&\n              (!reorderController.enabled || reorderController.status) &&\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\n              <!-- Status -->\n              <fs-list-status\n                class=\"fs-list-status\"\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\n                [rows]=\"listData\"\n                [sorting]=\"list.sorting\"\n                [paging]=\"list.paging\"\n                [firstLoad]=\"firstLoad\"\n                [scrollable]=\"list.scrollable\">\n              </fs-list-status>\n            </ng-container>\n          </ng-template>\n        </fs-filter>\n      </div>\n    </div>\n\n    <!-- Table implementation -->\n    <div class=\"fs-list-table-container\">\n      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\n        <thead fs-list-head\n               class=\"fs-list-head\"\n               role=\"rowgroup\"\n               *ngIf=\"list.columns.hasHeader\"\n               [ngClass]=\"list.columns.theadClass\"\n               [columns]=\"list.columns.visibleColumns\"\n               [sorting]=\"list.sorting\"\n               [selection]=\"list.selection\"\n               [hasRowActions]=\"list.hasRowActions\"\n        >\n        </thead>\n\n        <tbody fs-list-body\n               fsListDraggableList\n               class=\"fs-list-body\"\n               role=\"rowgroup\"\n               [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\n               [rows]=\"listData\"\n               [rowActionsRaw]=\"list.rowActionsRaw\"\n               [groupActionsRaw]=\"list.groupActionsRaw\"\n               [hasRowActions]=\"list.hasRowActions\"\n               [rowEvents]=\"list.rowEvents\"\n               [rowClass]=\"list.rowClass\"\n               [columns]=\"list.columns.visibleColumns\"\n               [restoreMode]=\"list.restoreMode\"\n               [selection]=\"list.selection\"\n               [rowRemoved]=\"rowRemoved\"\n        >\n        </tbody>\n\n        <tfoot fs-list-footer\n               class=\"fs-list-footer\"\n               *ngIf=\"list.columns.hasFooter\"\n               [columns]=\"list.columns.visibleColumns\"\n               [selection]=\"list.selection\"\n               [hasRowActions]=\"list.hasRowActions\"\n               [rows]=\"list.dataController.visibleRows\">\n        </tfoot>\n      </table>\n      <fs-list-loader\n        *ngIf=\"firstLoad\"\n        [columns]=\"list.columns.columns\"\n        [loaderLines]=\"loaderLines\">\n      </fs-list-loader>\n    </div>\n\n    <fs-list-pagination\n      *ngIf=\"paginatorVisible\"\n      class=\"fs-list-pagination\"\n      [rows]=\"listData\"\n      [pagination]=\"list.paging\">\n    </fs-list-pagination>\n\n\n    <ng-container *ngIf=\"!firstLoad\">\n      <div\n          *ngIf=\"listData.length === 0\"\n          class=\"fs-list-no-results-container\">\n        <div\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\n            class=\"fs-list-no-results\">\n          {{ list.noResults?.message }}\n        </div>\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\n        </ng-container>\n      </div>\n    </ng-container>\n  </ng-container>\n</ng-template>\n\n",
+                template: "<div class=\"fs-list-container\"\r\n     [ngClass]=\"{ 'has-filter-input': list.filterInput,\r\n                  'has-filters': list.filterConfig?.items.length,\r\n                  'has-heading': list.heading,\r\n                  'has-status': list.status,\r\n                  'has-chips': list.chips,\r\n                  'has-actions': list.actions.hasActions,\r\n                  'first-load': firstLoad,\r\n                  'loading': list.loading$ | async }\">\r\n  <ng-template [ngTemplateOutlet]=\"listContainerContent\"></ng-template>\r\n</div>\r\n\r\n<ng-template #listContainerContent>\r\n  <ng-container *ngIf=\"list.dataController.visibleRows$ | async as listData\">\r\n    <!-- Header -->\r\n    <div class=\"fs-list-header-container\">\r\n\r\n      <div class=\"fs-list-header\"\r\n        [ngClass]=\"{ 'no-wrap': reorderController.manualReorderActivated$ || !list.filterConfig?.items.length }\">\r\n        <div class=\"heading-container\">\r\n          <h2 class=\"heading\" *ngIf=\"list.heading\">{{list.heading}}</h2>\r\n          <span class=\"subheading\" *ngIf=\"list.subheading\">{{list.subheading}}</span>\r\n        </div>\r\n        <fs-filter\r\n          class=\"fs-list-filter\"\r\n          *ngIf=\"list.filterConfig\"\r\n          [filter]=\"list.filterConfig\"\r\n          [showSortBy]=\"!list.status\"\r\n          [showFilterInput]=\"list.filterInput\"\r\n          (ready)=\"filterReady()\">\r\n\r\n          <ng-template fsFilterStatusBar>\r\n            <ng-container *ngIf=\"\r\n              list.paging &&\r\n              !(reorderController.manualReorderActivated$ | async) &&\r\n              (!reorderController.enabled || reorderController.status) &&\r\n              ((list.scrollable && list.scrollable.status) || !list.scrollable)\">\r\n              <!-- Status -->\r\n              <fs-list-status\r\n                class=\"fs-list-status\"\r\n                [ngClass]=\"{ 'hidden-mobile': !list.status }\"\r\n                [rows]=\"listData\"\r\n                [sorting]=\"list.sorting\"\r\n                [paging]=\"list.paging\"\r\n                [firstLoad]=\"firstLoad\"\r\n                [scrollable]=\"list.scrollable\">\r\n              </fs-list-status>\r\n            </ng-container>\r\n          </ng-template>\r\n        </fs-filter>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Table implementation -->\r\n    <div class=\"fs-list-table-container\">\r\n      <table class=\"fs-list-table\" role=\"grid\" *ngIf=\"!firstLoad && listData.length > 0 && !list.emptyStateEnabled\">\r\n        <thead fs-list-head\r\n               class=\"fs-list-head\"\r\n               role=\"rowgroup\"\r\n               *ngIf=\"list.columns.hasHeader\"\r\n               [ngClass]=\"list.columns.theadClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [sorting]=\"list.sorting\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n        >\r\n        </thead>\r\n\r\n        <tbody fs-list-body\r\n               fsListDraggableList\r\n               class=\"fs-list-body\"\r\n               role=\"rowgroup\"\r\n               [class.disabled]=\"!!(reorderController.reorderDisabled$ | async)\"\r\n               [rows]=\"listData\"\r\n               [rowActionsRaw]=\"list.rowActionsRaw\"\r\n               [groupActionsRaw]=\"list.groupActionsRaw\"\r\n               [hasRowActions]=\"list.hasRowActions\"\r\n               [rowEvents]=\"list.rowEvents\"\r\n               [rowClass]=\"list.rowClass\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [restoreMode]=\"list.restoreMode\"\r\n               [selection]=\"list.selection\"\r\n               [rowRemoved]=\"rowRemoved\"\r\n        >\r\n        </tbody>\r\n\r\n        <tfoot fs-list-footer\r\n               class=\"fs-list-footer\"\r\n               *ngIf=\"list.columns.hasFooter\"\r\n               [columns]=\"list.columns.visibleColumns\"\r\n               [selection]=\"list.selection\"\r\n               [hasRowActions]=\"list.hasRowActions\">\r\n        </tfoot>\r\n      </table>\r\n      <fs-list-loader\r\n        *ngIf=\"firstLoad\"\r\n        [columns]=\"list.columns.columns\"\r\n        [loaderLines]=\"loaderLines\">\r\n      </fs-list-loader>\r\n    </div>\r\n\r\n    <fs-list-pagination\r\n      *ngIf=\"paginatorVisible\"\r\n      class=\"fs-list-pagination\"\r\n      [rows]=\"listData\"\r\n      [pagination]=\"list.paging\">\r\n    </fs-list-pagination>\r\n\r\n\r\n    <ng-container *ngIf=\"!firstLoad\">\r\n      <div \r\n          *ngIf=\"listData.length === 0\" \r\n          class=\"fs-list-no-results-container\">\r\n        <div \r\n            *ngIf=\"list.noResults?.message && !list.emptyStateEnabled\"\r\n            class=\"fs-list-no-results\">\r\n          {{ list.noResults?.message }}\r\n        </div>\r\n        <ng-container *ngIf=\"list.emptyStateEnabled\">\r\n          <ng-template [ngTemplateOutlet]=\"list.emptyStateTemplate\"></ng-template>\r\n        </ng-container>        \r\n      </div>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush,
                 providers: [
                     GroupExpandNotifierService,
@@ -5488,14 +5512,10 @@
             core.Input(),
             __metadata("design:type", SelectionController)
         ], FsFooterComponent.prototype, "selection", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsFooterComponent.prototype, "rows", void 0);
         FsFooterComponent = __decorate([
             core.Component({
                 selector: '[fs-list-footer]',
-                template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n    [rows]=\"rows\"\n></tr>\n",
+                template: "<tr fs-list-footer-row\n    [columns]=\"columns\"\n    [hasRowActions]=\"hasRowActions\"\n    [selection]=\"selection\"\n></tr>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [])
@@ -5521,14 +5541,10 @@
             core.Input(),
             __metadata("design:type", Boolean)
         ], FsFooterRowComponent.prototype, "hasRowActions", void 0);
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsFooterRowComponent.prototype, "rows", void 0);
         FsFooterRowComponent = __decorate([
             core.Component({
                 selector: '[fs-list-footer-row]',
-                template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [rows]=\"rows\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n",
+                template: "<td *ngIf=\"reorderController.leftReorderActivated$ | async\" class=\"fs-list-col drag-col\"></td>\n\n<td *ngIf=\"selection\" class=\"fs-list-col fs-list-col-selection\"></td>\n<ng-container *ngFor=\"let column of columns; trackBy: trackByFn\">\n  <td fs-list-footer-cell\n      *ngIf=\"!column.footerColspanned\"\n      [column]=\"column\"\n      [row]=\"row\"\n      [rowIndex]=\"rowIndex\"\n      [ngClass]=\"column.footerConfigs.classesArray\"\n      [attr.colspan]=\"column.footerConfigs.colspan\"\n      [attr.width]=\"column.width\">\n  </td>\n</ng-container>\n\n<!-- Drag -->\n<td *ngIf=\"reorderController.rightReorderActivated$ | async\" class=\"fs-list-col row-actions\"></td>\n\n<!-- Row Actions -->\n<td *ngIf=\"hasRowActions && !(reorderController.enabled && reorderController.strategy === ReorderStrategy.Manual)\" class=\"fs-list-col drag-col\"></td>\n",
                 changeDetection: core.ChangeDetectionStrategy.OnPush
             }),
             __metadata("design:paramtypes", [core.ElementRef,
@@ -5545,15 +5561,6 @@
         function FsFooterCellComponent() {
             return _super.call(this) || this;
         }
-        FsFooterCellComponent.prototype._initCellContext = function () {
-            this.cellContext.column = this.column;
-            this.cellContext.$implicit = this.rows
-                .map(function (row) { return row.data; });
-        };
-        __decorate([
-            core.Input(),
-            __metadata("design:type", Array)
-        ], FsFooterCellComponent.prototype, "rows", void 0);
         FsFooterCellComponent = __decorate([
             core.Component({
                 selector: '[fs-list-footer-cell]',
@@ -5758,7 +5765,10 @@
             return index;
         };
         FsRowActionsComponent.prototype.clickOnTrigger = function (event) {
+            var _this = this;
             event.stopPropagation();
+            this.rowActions
+                .forEach(function (action) { return action.updateLabel(_this.row.data); });
         };
         /**
          * Emit that some row must be removed