@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/table/table.model.ts

@@ -0,0 +1,39 @@
+import { Subject, Subscription } from 'rxjs';
+
+export const SETTINGS_DISPLAY_COLUMNS = 'displayColumns';
+export const SETTINGS_SORTED_COLUMN = 'sortedColumn';
+export const SETTINGS_FILTER = 'filter';
+export const SETTINGS_PAGE_SIZE = 'pageSize';
+export const SETTINGS_COMPACT_ROWS = 'compactRows';
+export const DEFAULT_PAGE_SIZE = 20;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100, 200, 500];
+export const RESERVED_START_COLUMNS = ['select', 'id'];
+export const RESERVED_END_COLUMNS = ['actions'];
+export const DEFAULT_REQUIRED_COLUMNS = ['id'];
+export const TABLE_SETTINGS_ENUM = {
+  FILTER_KEY: 'filter',
+  COMPACT_ROWS_KEY: 'compactRows',
+};
+
+export class CellValueChangeListener {
+  subject: Subject<any>;
+  subscription: Subscription; // The row start editing subscription
+  formPath: string;
+  emitInitialValue: boolean;
+}
+
+export interface IModalDetailOptions<T = any> {
+  // Data
+  isNew: boolean;
+  data: T;
+  disabled: boolean;
+
+  // Callback functions
+  onDelete?: (event: Event, data: T) => Promise<boolean>;
+}
+
+export type SaveActionType = 'delete' | 'sort' | 'filter';
+
+export interface IEntitiesTableDataSource<R> {
+  getRows(): R[];
+}

package/src/app/core/table/table.module.ts

@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { TableSelectColumnsComponent } from './table-select-columns.component';
+import { TranslateModule } from '@ngx-translate/core';
+import { IsAllSelectedPipe, IsNotAllSelectedPipe } from './table.pipes';
+import { AppRowField } from './column/row-field.component';
+import { ResizableModule } from '../../shared/directives/resizable/resizable.module';
+import { ActionsColumnComponent } from './column/actions-column.component';
+import { NavActionsColumnComponent } from './column/nav-actions-column.component';
+
+const components = [
+  // Components
+  TableSelectColumnsComponent,
+  ActionsColumnComponent,
+  NavActionsColumnComponent,
+  AppRowField,
+  // Pipes
+  IsAllSelectedPipe,
+  IsNotAllSelectedPipe,
+];
+
+@NgModule({
+  imports: [SharedModule, TranslateModule.forChild(), ResizableModule],
+
+  declarations: components,
+  exports: [TranslateModule, ...components],
+})
+export class AppTableModule {}

package/src/app/core/table/table.pipes.ts

@@ -0,0 +1,87 @@
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { SelectionModel } from '@angular/cdk/collections';
+import { AbstractSelectionModelPipe } from '../../shared/pipes/selection.pipes';
+import { AppTable } from './table.class';
+import { Observable, Subscription } from 'rxjs';
+import { AppAsyncTable } from './async-table.class';
+
+export type AppTableRowCountProperty = 'visibleRowCount' | 'totalRowCount';
+
+@Pipe({
+  name: 'abstract-table-selection',
+})
+export abstract class AbstractTableSelectionPipe<
+  R,
+  O,
+  T extends AppTable<any> | AppAsyncTable<any> = AppTable<any> | AppAsyncTable<any>,
+> extends AbstractSelectionModelPipe<any, R, O> {
+  private _onRowsChanges: Subscription;
+
+  protected constructor(_ref: ChangeDetectorRef) {
+    super(_ref);
+  }
+
+  transform(selectionOrTable: SelectionModel<any> | T, tableOrOpts?: T | O, opts?: O): R {
+    // @ts-ignore
+    const _table: T = tableOrOpts instanceof AppTable<any> ? tableOrOpts : selectionOrTable instanceof AppTable<any> ? selectionOrTable : undefined;
+    // @ts-ignore
+    const _selection: SelectionModel<any> = _table?.selection || selectionOrTable;
+    // @ts-ignore
+    const _opts: O = opts || !(tableOrOpts instanceof AppTable<any> && (tableOrOpts as O));
+    return super.transform(_selection, _table, _opts);
+  }
+
+  protected _subscribe(selection: SelectionModel<any>, table?: T, opts?: O): Subscription {
+    this._onRowsChanges = ((table as T)?.dataSource?.rowsSubject as Observable<any>)?.subscribe((_) => {
+      const result = this._transform(selection, table, opts);
+      if (result !== this._result) {
+        this._result = result;
+        this._ref.markForCheck();
+      }
+    });
+
+    return super._subscribe(selection, table);
+  }
+
+  protected _dispose() {
+    super._dispose();
+    this._onRowsChanges?.unsubscribe();
+    this._onRowsChanges = null;
+  }
+}
+
+@Pipe({
+  name: 'isAllSelected',
+  pure: false,
+})
+export class IsAllSelectedPipe extends AbstractTableSelectionPipe<boolean, AppTableRowCountProperty> implements PipeTransform, OnDestroy {
+  constructor(_ref: ChangeDetectorRef) {
+    super(_ref);
+  }
+
+  protected _transform(
+    selection: SelectionModel<any>,
+    table: AppTable<any>,
+    countPropertyName: AppTableRowCountProperty = 'visibleRowCount'
+  ): boolean {
+    return selection.selected.length === table?.[countPropertyName];
+  }
+}
+
+@Pipe({
+  name: 'isNotAllSelected',
+  pure: false,
+})
+export class IsNotAllSelectedPipe extends IsAllSelectedPipe implements PipeTransform, OnDestroy {
+  constructor(_ref: ChangeDetectorRef) {
+    super(_ref);
+  }
+
+  protected _transform(
+    selection: SelectionModel<any>,
+    table: AppTable<any>,
+    countPropertyName: AppTableRowCountProperty = 'visibleRowCount'
+  ): boolean {
+    return selection.hasValue() && selection.selected.length !== table?.[countPropertyName];
+  }
+}

package/src/app/core/table/table.utils.ts

@@ -0,0 +1,42 @@
+import { AppTable } from './table.class';
+import { TableElement } from '@e-is/ngx-material-table';
+import { AppFormUtils } from '../form/form.utils';
+import { AsyncTableElement } from '@e-is/ngx-material-table/src/app/ngx-material-table/async/async-table-element';
+import { EntityUtils, IEntity } from '../services/model/entity.model';
+import { isNotNil } from '../../shared/functions';
+import { SortDirection } from '@angular/material/sort';
+
+export class AppTableUtils {
+  static waitIdle(table: AppTable<any, any, any>): Promise<any> {
+    if (!table || !table.dataSource) {
+      throw new Error('Invalid table. Missing table or table.dataSource');
+    }
+    return table.dataSource.waitIdle();
+  }
+
+  static logRowErrors(row: TableElement<any> | AsyncTableElement<any>, logPrefix?: string): void {
+    AppFormUtils.logFormErrors(row.validator, logPrefix);
+  }
+
+  static getEntityId<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(row: TableElement<T> | AsyncTableElement<T>): ID {
+    // When using validator: use the control (avoid to load the full form's value)
+    if (row.validator) return row.validator.get('id').value as ID;
+    return EntityUtils.getId(row.currentData);
+  }
+
+  static getEntityIds<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(rows: TableElement<T>[] | AsyncTableElement<T>[]): ID[] {
+    return (rows || [])
+      .map((row) => row.currentData)
+      .filter(isNotNil)
+      .map(EntityUtils.getId)
+      .filter(isNotNil);
+  }
+
+  static getEntities<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(rows: TableElement<T>[] | AsyncTableElement<T>[]): T[] {
+    return (rows || []).map((row) => row.currentData).filter(isNotNil);
+  }
+
+  static inverseDirection(direction: SortDirection): SortDirection {
+    return direction === 'asc' ? 'desc' : 'asc';
+  }
+}

package/src/app/core/table/testing/multi-table.testing.html

@@ -0,0 +1,456 @@
+<app-toolbar
+  color="primary"
+  [canGoBack]="true"
+  [hasValidate]="(loadingSubject | async) !== true && (dirtySubject | async) === true"
+  (onValidate)="save()"
+  [backHref]="'/testing'"
+>
+  <ion-title>Table (click to edit)</ion-title>
+  <ion-buttons slot="end">
+    <ng-container *ngIf="!selection.hasValue(); else hasSelection">
+      <input matInput type="number" step="1" style="color: black; width: 50px" [(ngModel)]="rowHeight" />
+
+      <!-- Add -->
+      <button mat-icon-button *ngIf="canEdit && !mobile" [title]="'COMMON.BTN_ADD' | translate" (click)="addRow()">
+        <mat-icon>add</mat-icon>
+      </button>
+
+      <!-- reset filter -->
+      <button mat-icon-button (click)="resetFilter()" *ngIf="filterCriteriaCount">
+        <mat-icon color="accent">filter_list_alt</mat-icon>
+        <mat-icon class="icon-secondary" style="left: 16px; top: 5px; font-weight: bold">close</mat-icon>
+      </button>
+
+      <!-- show filter -->
+      <button mat-icon-button (click)="filterExpansionPanel.toggle()">
+        <mat-icon
+          *ngIf="filterCriteriaCount; else emptyFilter"
+          [matBadge]="filterCriteriaCount"
+          matBadgeColor="accent"
+          matBadgeSize="small"
+          matBadgePosition="above after"
+          aria-hidden="false"
+        >
+          filter_list_alt
+        </mat-icon>
+        <ng-template #emptyFilter>
+          <mat-icon>filter_list_alt</mat-icon>
+        </ng-template>
+      </button>
+
+      <!-- save -->
+      <button mat-icon-button *ngIf="mobile" [disabled]="(dirtySubject | async) !== true" (click)="save()">
+        <mat-icon>save</mat-icon>
+      </button>
+
+      <!-- start/stop timer to auto-load data -->
+      <ion-button *ngIf="!timer" (click)="startTimer()">Start reload</ion-button>
+      <ion-button *ngIf="timer" (click)="stopTimer()" color="accent">Stop reload</ion-button>
+    </ng-container>
+
+    <!-- if row selection -->
+    <ng-template #hasSelection>
+      <!-- delete -->
+      <button
+        mat-icon-button
+        *ngIf="canEdit"
+        [title]="'COMMON.BTN_DELETE' | translate"
+        (click)="deleteSelection($event)"
+      >
+        <mat-icon>delete</mat-icon>
+      </button>
+
+      <!-- duplicate -->
+      <button
+        mat-icon-button
+        *ngIf="canEdit && selection.selected | isArrayLength: { equals: 1 }"
+        [title]="'COMMON.BTN_DUPLICATE' | translate"
+        (click)="duplicateRow($event, selection.selected[0])"
+      >
+        <mat-icon>file_copy</mat-icon>
+      </button>
+    </ng-template>
+  </ion-buttons>
+</app-toolbar>
+<ion-content class="ion-no-padding">
+  <ion-refresher slot="fixed" *ngIf="mobile" (ionRefresh)="doRefresh($event)">
+    <ion-refresher-content></ion-refresher-content>
+  </ion-refresher>
+
+  <!-- error -->
+  <ion-item *ngIf="mobile && error" lines="none" @slideUpDownAnimation>
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error | translate"></ion-label>
+  </ion-item>
+
+  <!-- search -->
+  <mat-expansion-panel #filterExpansionPanel class="filter-panel filter-panel-floating">
+    <form class="form-container ion-padding-top" [formGroup]="filterForm" (ngSubmit)="applyFilterAndClosePanel($event)">
+      <ion-grid>
+        <ion-row>
+          <ion-col>
+            <!-- search text -->
+            <mat-form-field>
+              <mat-label>{{ 'TABLE.TESTING.SEARCH_TEXT' | translate }}</mat-label>
+              <ion-icon matPrefix name="search"></ion-icon>
+              <input matInput formControlName="searchText" autocomplete="off" />
+              <button
+                mat-icon-button
+                matSuffix
+                tabindex="-1"
+                type="button"
+                (click)="clearControlValue($event, filterForm.controls.searchText)"
+                [hidden]="filterForm.controls.searchText.disabled || !filterForm.controls.searchText.value"
+              >
+                <mat-icon>close</mat-icon>
+              </button>
+            </mat-form-field>
+          </ion-col>
+        </ion-row>
+      </ion-grid>
+    </form>
+
+    <mat-action-row>
+      <!-- Counter  -->
+      <ion-label
+        [hidden]="(loadingSubject | async) || filterForm.dirty"
+        [color]="empty && 'danger'"
+        class="ion-padding"
+      >
+        {{
+          (totalRowCount ? 'COMMON.RESULT_COUNT' : 'COMMON.NO_RESULT')
+            | translate
+              : {
+                  count: (totalRowCount | numberFormat),
+                }
+        }}
+      </ion-label>
+
+      <div class="toolbar-spacer"></div>
+
+      <!-- Close panel -->
+      <ion-button
+        mat-button
+        fill="clear"
+        color="dark"
+        (click)="filterExpansionPanel.close()"
+        [disabled]="loadingSubject | async"
+      >
+        <ion-text translate>COMMON.BTN_CLOSE</ion-text>
+      </ion-button>
+
+      <!-- Search button -->
+      <ion-button
+        mat-button
+        [color]="filterForm.dirty ? 'tertiary' : 'dark'"
+        [fill]="filterForm.dirty ? 'solid' : 'clear'"
+        (click)="applyFilterAndClosePanel($event)"
+      >
+        <ion-text translate>COMMON.BTN_APPLY</ion-text>
+      </ion-button>
+    </mat-action-row>
+  </mat-expansion-panel>
+
+  <!-- table -->
+  <div [class.table-container]="!enableInfiniteScroll">
+    <table
+      #table
+      mat-table
+      matSort
+      matSortDisableClear
+      [dataSource]="dataSource"
+      [matSortActive]="defaultSortBy"
+      [matSortDirection]="defaultSortDirection"
+      [trackBy]="trackByFn"
+      [style.--mat-row-height]="rowHeight + 'px'"
+    >
+      <ng-container matColumnDef="select" [sticky]="sticky" [class.mat-column-sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef [class.cdk-visually-hidden]="!canEdit">
+          <mat-checkbox
+            (change)="$event ? masterToggle() : null"
+            [checked]="this | isAllSelected"
+            [indeterminate]="this | isNotAllSelected"
+          ></mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row" [class.cdk-visually-hidden]="!canEdit">
+          <mat-checkbox (click)="toggleSelectRow($event, row)" [checked]="selection | isSelected: row"></mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- Id column -->
+      <ng-container matColumnDef="id" [sticky]="sticky" [class.mat-column-sticky]="sticky">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label>#</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">{{ row.currentData?.id }}</td>
+      </ng-container>
+
+      <!-- Label column -->
+      <ng-container matColumnDef="label">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.LABEL</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'label'">
+          <mat-form-field *ngIf="row.editing; else readonlyCell" [hideRequiredMarker]="false">
+            <input
+              matInput
+              autocomplete="off"
+              [formControl]="row.validator.controls['label']"
+              [placeholder]="'TABLE.TESTING.LABEL' | translate"
+              [appAutofocus]="row.editing && focusColumn === 'label'"
+              [readonly]="!row.editing"
+            />
+            <mat-error *ngIf="row.validator.controls['label'].hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+          <ng-template #readonlyCell>
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'label' }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Name column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.NAME</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'name'">
+          <mat-form-field *ngIf="row.editing; else readonlyCell">
+            <input
+              matInput
+              [formControl]="row.validator?.controls.name"
+              [placeholder]="'TABLE.TESTING.NAME' | translate"
+              [appAutofocus]="row.editing && focusColumn === 'name'"
+            />
+            <mat-error *ngIf="row.validator?.controls.name.hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+          <ng-template #readonlyCell>
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'name' }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Level column -->
+      <ng-container matColumnDef="levelId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.LEVEL_ID</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" (click)="focusColumn = 'levelId'">
+          <mat-autocomplete-field
+            *ngIf="row.editing; else readonlyCell"
+            [formControl]="row.validator.controls.levelId"
+            [placeholder]="'TABLE.TESTING.LEVEL_ID' | translate"
+            floatLabel="never"
+            [config]="autocompleteFields.level"
+            [readonly]="!row.editing"
+            [autofocus]="row.editing && focusColumn === 'levelId'"
+            [required]="true"
+          ></mat-autocomplete-field>
+          <ng-template #readonlyCell>
+            <ion-label appAutoTitle>
+              {{ row.validator | formGetValue: 'levelId' | referentialToString: autocompleteFields.level.attributes }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Status column  -->
+      <ng-container matColumnDef="statusId">
+        <th mat-header-cell *matHeaderCellDef>
+          <span translate>USER.STATUS</span>
+        </th>
+        <td mat-cell *matCellDef="let row" [class.mat-form-field-disabled]="!row.editing">
+          <mat-form-field>
+            <mat-select
+              [formControl]="row.validator.controls['statusId']"
+              [placeholder]="i18nColumnPrefix + 'STATUS_ID' | translate"
+            >
+              <mat-option *ngFor="let item of statusList" [value]="item.id">
+                <mat-icon><ion-icon [name]="item.icon"></ion-icon></mat-icon>
+                <mat-label>{{ item.label | translate }}</mat-label>
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="row.validator.controls['statusId'].hasError('required')" translate>
+              ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+        </td>
+      </ng-container>
+
+      <!-- Enum column  -->
+      <!-- NOTE : Never used in table  -->
+      <!--      <ng-container matColumnDef="values">-->
+      <!--        <th mat-header-cell *matHeaderCellDef>-->
+      <!--          <span translate>Enums</span>-->
+      <!--        </th>-->
+      <!--        <td mat-cell *matCellDef="let row" [class.mat-form-field-disabled]="!row.editing">-->
+      <!--          <app-form-field-->
+      <!--            [formControl]="row.validator|formGetControl:'properties.values'"-->
+      <!--            [definition]="columnDefinitions['values']"-->
+      <!--          ></app-form-field>-->
+      <!--        </td>-->
+      <!--      </ng-container>-->
+
+      <!-- boolean (as checkbox) -->
+      <ng-container matColumnDef="boolean">
+        <th mat-header-cell *matHeaderCellDef cdkDrag [resizable]="true">
+          <!-- if sortable, wrap the header with a mat-sort-header -->
+          <span mat-sort-header>
+            <ion-label>Boolean</ion-label>
+          </span>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-boolean-field
+            *ngIf="!readOnly && row.editing; else readOnlyTemplate"
+            floatLabel="never"
+            [style]="'checkbox'"
+            placeholder="Oui/Non"
+            [formControl]="row.validator | formGetControl: 'properties.boolean'"
+            [compact]="true"
+          ></mat-boolean-field>
+          <ng-template #readOnlyTemplate>
+            <ion-label appAutoTitle>
+              {{ (row.validator | formGetValue: 'properties.boolean') ? '&#x2714;' : '&#x2718;' }}
+            </ion-label>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Creation date column -->
+      <ng-container matColumnDef="updateDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header>
+          <ion-label translate>TABLE.TESTING.UPDATE_DATE</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row" class="mat-form-field-disabled">
+          <ion-text color="medium" *ngIf="row.id !== -1">
+            <small>
+              {{ row.validator | formGetValue: 'creationDate' | dateFormat: { time: true } }}
+            </small>
+          </ion-text>
+        </td>
+      </ng-container>
+
+      <!-- Comment column -->
+      <ng-container matColumnDef="comments">
+        <th mat-header-cell *matHeaderCellDef>
+          <ion-label translate>TABLE.TESTING.COMMENTS</ion-label>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-form-field *ngIf="row.editing; else iconComment">
+            <!--<textarea matInput [formControl]="row.validator?.controls.comments"
+                      [placeholder]="'TABLE.TESTING.COMMENTS'|translate"
+                      [readonly]="!row.editing"></textarea>-->
+
+            <input
+              type="text"
+              matInput
+              [formControl]="row.validator?.controls.comments"
+              [placeholder]="'TABLE.TESTING.COMMENTS' | translate"
+              [readonly]="!row.editing"
+            />
+          </mat-form-field>
+
+          <ng-template #iconComment>
+            <ion-icon
+              [color]="row.validator?.controls.comments.value ? 'tertiary' : 'medium'"
+              name="chatbox"
+              slot="icon-only"
+            ></ion-icon>
+          </ng-template>
+        </td>
+      </ng-container>
+
+      <!-- Actions buttons column -->
+      <app-actions-column
+        [stickyEnd]="stickyEnd"
+        [canCancel]="false"
+        [style]="'table'"
+        (optionsClick)="openSelectColumnsModal($event)"
+        (cancelOrDeleteClick)="cancelOrDelete($event.event, $event.row)"
+        (confirmAndAddClick)="confirmAndAdd($event.event, $event.row)"
+        (backward)="confirmAndBackward($event.event, $event.row)"
+        (forward)="confirmAndForward($event.event, $event.row)"
+        [cellTemplate]="cellInjection"
+      >
+        <!-- cell injection-->
+        <ng-template #cellInjection let-row>
+          <span *ngIf="row.editing && !row.validator.dirty">-</span>
+        </ng-template>
+      </app-actions-column>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr
+        mat-row
+        *matRowDef="let row; columns: displayedColumns"
+        [class.mat-mdc-row-selected]="row.editing"
+        [class.mat-mdc-row-error]="row.validator?.invalid"
+        [class.mat-mdc-row-disabled]="!row.editing"
+        [class.mat-mdc-row-dirty]="row.validator?.dirty"
+        (click)="clickRow($event, row)"
+        (keydown.escape)="escapeEditingRow($event)"
+        [cdkTrapFocus]="row.validator?.invalid"
+      ></tr>
+    </table>
+
+    <ng-container *ngIf="loadingSubject | async; else noResult">
+      <ion-item>
+        <ion-skeleton-text animated></ion-skeleton-text>
+      </ion-item>
+    </ng-container>
+
+    <ng-template #noResult>
+      <ion-item *ngIf="totalRowCount === 0">
+        <ion-text color="danger" class="text-italic" translate>COMMON.NO_RESULT</ion-text>
+      </ion-item>
+    </ng-template>
+
+    <ion-infinite-scroll
+      *ngIf="enableInfiniteScroll"
+      [threshold]="mobile ? '10%' : '2%'"
+      position="bottom"
+      (ionInfinite)="fetchMore($event)"
+    >
+      <ion-infinite-scroll-content
+        loadingSpinner="circles"
+        [loadingText]="'COMMON.LOADING_DOTS' | translate"
+      ></ion-infinite-scroll-content>
+    </ion-infinite-scroll>
+  </div>
+</ion-content>
+
+<ion-footer>
+  <!-- Paginator  -->
+  <mat-paginator
+    *ngIf="!enableInfiniteScroll"
+    [length]="totalRowCount"
+    [pageSize]="defaultPageSize"
+    [pageSizeOptions]="defaultPageSizeOptions"
+    showFirstLastButtons
+  ></mat-paginator>
+
+  <app-form-buttons-bar
+    *ngIf="canEdit && !mobile"
+    (onCancel)="load()"
+    (onSave)="save()"
+    [disabled]="(loadingSubject | async) || !dirty"
+  >
+    <!-- error -->
+    <ion-item *ngIf="error$ | async" lines="none">
+      <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+      <ion-label color="danger" [innerHTML]="error | translate"></ion-label>
+    </ion-item>
+  </app-form-buttons-bar>
+</ion-footer>
+
+<ion-fab slot="fixed" vertical="bottom" horizontal="end" *ngIf="canEdit && mobile">
+  <ion-fab-button color="tertiary" (click)="addRow($event)">
+    <ion-icon name="add"></ion-icon>
+  </ion-fab-button>
+</ion-fab>