@sumaris-net/ngx-components 2.6.4-alpha3 → 2.6.4-alpha5

package/src/app/core/form/entity/editor.class.ts

@@ -0,0 +1,803 @@
+import {AfterViewInit, Directive, EventEmitter, Input, OnDestroy, OnInit, Optional, Output, ViewChild} from '@angular/core';
+import {ActivatedRoute, Params, Router} from '@angular/router';
+import {MatTabChangeEvent, MatTabGroup} from '@angular/material/tabs';
+import {AlertController, IonContent, NavController, ToastController} from '@ionic/angular';
+import {TranslateService} from '@ngx-translate/core';
+import {BehaviorSubject, Subject, Subscription, TeardownLogic} from 'rxjs';
+import {AppTable} from '../../table/table.class';
+import {AppForm} from '../form.class';
+import {FormButtonsBarToken} from '../buttons/form-buttons-bar.component';
+import {AppFormProvider, AppFormUtils, IAppForm, IAppFormGetter} from '../form.utils';
+import {ShowToastOptions, Toasts} from '../../../shared/toast/toasts';
+import {HammerSwipeEvent} from '../../../shared/gesture/hammer.utils';
+import {ToolbarToken} from '../../../shared/toolbar/toolbar';
+import {isNotNil, toNumber} from '../../../shared/functions';
+import {CanLeave} from '../../../shared/guard/component-dirty.guard';
+import {AbstractControl} from '@angular/forms';
+import {waitForFalse, WaitForOptions, waitForTrue} from '../../../shared/observables';
+
+export interface IAppEditor extends CanLeave, IAppForm {
+  save(event?: Event, options?: any): Promise<boolean>;
+  cancel(event?: Event): Promise<void>;
+  addChildForm(form: IAppForm | IAppFormGetter): void;
+}
+
+export interface IAppTabEditor extends IAppEditor {
+  selectedTabIndex: number;
+  setSelectedTabIndex(value: number, opts?: {emitEvent?: boolean; realignInkBar?: boolean;}): void;
+  unload(opts?: {emitEvent?: boolean}): Promise<void>;
+  realignInkBar();
+}
+
+export class AppTabEditorOptions {
+
+  /**
+   * Number of tab. 1 by default
+   */
+  tabCount?: number;
+
+  /**
+   * '200ms' by default
+   */
+  tabGroupAnimationDuration?: string;
+
+  /**
+   * Should enable swipe between tab, on touch screen
+   */
+  enableSwipe?: boolean; // true by default
+}
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class AppEditor<T = any, ID = number, O = any>
+  implements IAppEditor, OnInit, OnDestroy, AfterViewInit {
+
+  private _children: IAppForm[];
+  private _subscription = new Subscription();
+
+  protected _enabled = false;
+  protected toastController: ToastController;
+  protected readonly destroySubject = new Subject<void>();
+
+  readonly readySubject = new BehaviorSubject<boolean>(false);
+  readonly dirtySubject = new BehaviorSubject<boolean>(false);
+  readonly loadingSubject = new BehaviorSubject<boolean>(true);
+  readonly errorSubject = new BehaviorSubject<string>(undefined);
+  readonly savingSubject = new BehaviorSubject<boolean>(false);
+  readonly touchedSubject = new BehaviorSubject<boolean>(false);
+
+  debug = false;
+  previousDataId: ID;
+  submitted = false;
+  queryParams: Params;
+  i18nContext: {
+    prefix: string;
+    suffix: string;
+  };
+
+  /**
+   *  @deprecated
+   */
+  protected set _loading(value: boolean) {
+    this.loadingSubject.next(value);
+  }
+
+  /**
+   *  @deprecated
+   */
+  protected get _loading(): boolean {
+    return this.loadingSubject.value;
+  }
+  /**
+   *  @deprecated
+   */
+  protected get _$ready(): BehaviorSubject<boolean> {
+    return this.readySubject;
+  }
+  /**
+   *  @deprecated
+   */
+  protected get _$loading(): BehaviorSubject<boolean> {
+    return this.loadingSubject;
+  }
+
+  get error(): string {
+    return this.errorSubject.value;
+  }
+
+  set error(error: string) {
+    this.setError(error);
+  }
+
+  get saving(): boolean {
+    return this.savingSubject.value || this.editors?.some(e => e.saving);
+  }
+
+  get destroyed(): boolean {
+    return this.destroySubject?.closed !== false
+  }
+
+  @ViewChild(ToolbarToken) toolbar: ToolbarToken|null = null;
+  @ViewChild(FormButtonsBarToken, { static: true }) formButtonsBar: FormButtonsBarToken|null = null;
+  @ViewChild(IonContent, {static: true}) content: IonContent;
+
+  get tables(): AppTable<any>[] {
+    return this._children && (this._children.filter(c => c instanceof AppTable) as AppTable<any>[]);
+  }
+  get forms(): AppForm<any>[] {
+    return this._children && (this._children.filter(c => c instanceof AppForm) as AppForm<any>[]);
+  }
+  get editors(): AppEditor<any>[] {
+    return this._children && (this._children.filter(c => c instanceof AppEditor) as AppEditor[]);
+  }
+  get dirty(): boolean {
+    return this.dirtySubject.value || (this._children && this._children.findIndex(c => c.enabled && c.dirty) !== -1) || false;
+  }
+
+  /**
+   * Is valid (tables and forms)
+   */
+  get valid(): boolean {
+    // Important: Should be not invalid AND not pending, so use '!valid' (DO NOT use 'invalid')
+    return !this._children || this._children.findIndex(c => c.enabled && !c.valid) === -1;
+  }
+
+  get invalid(): boolean {
+    return (this._children && this._children.findIndex(c => c.enabled && c.invalid) !== -1) || false;
+  }
+
+  get pending(): boolean {
+    return (this._children && this._children.findIndex(c => c.enabled && c.pending) !== -1) || false;
+  }
+
+  get loading(): boolean {
+    return this.loadingSubject.value || (this._children && this._children.findIndex(c => c.enabled && c.loading) !== -1) || false;
+  }
+
+  get loaded(): boolean {
+    return !this.loadingSubject.value && (!this._children || this._children.findIndex(c => c.enabled && c.loading) === -1) || false;
+  }
+
+  get touched(): boolean {
+    return this.touchedSubject.value || (this._children && this._children.findIndex(c => c.enabled && c.touched) !== -1) || false;
+  }
+
+  get untouched(): boolean {
+    return !this.touchedSubject.value && (!this._children || this._children.findIndex(c => c.enabled && c.touched) === -1) || false;
+  }
+
+  get enabled(): boolean {
+    return this._enabled;
+  }
+
+  get disabled(): boolean {
+    return !this._enabled;
+  }
+
+  get children(): IAppForm[] {
+    return this._children;
+  }
+
+  get empty(): boolean {
+    return !this._enabled;
+  }
+
+  abstract get isNewData(): boolean;
+
+  protected constructor(
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected navController: NavController,
+    protected alertCtrl: AlertController,
+    protected translate: TranslateService
+  ) {
+  }
+
+  ngOnInit() {
+
+    if (this.formButtonsBar) {
+      this.registerSubscription(this.formButtonsBar.onBack.subscribe(event => this.goBack(event)));
+    }
+  }
+
+  ngAfterViewInit() {
+    // Can be overridden by subclasses
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+
+    this.readySubject.unsubscribe();
+    this.loadingSubject.unsubscribe();
+    this.errorSubject.unsubscribe();
+
+    this.destroySubject.next();
+    this.destroySubject.unsubscribe();
+  }
+
+  addChildForm(form: IAppForm | IAppFormGetter) {
+    if (!form) throw new Error('Trying to register an undefined child form');
+    this._children = this._children || [];
+    if (typeof form === 'function') {
+      this._children.push(new AppFormProvider(form));
+    }
+    else {
+      this._children.push(form);
+    }
+    return this;
+  }
+
+  addChildForms(forms: (IAppForm | IAppFormGetter)[]) {
+    (forms || []).forEach(form => this.addChildForm(form));
+  }
+
+  removeChildForm(form: IAppForm | IAppFormGetter): IAppForm | IAppFormGetter {
+    if (!form) throw new Error('Trying to remove an undefined child form');
+    const index = (this._children || []).findIndex(c => c === form);
+    if (index !== -1) {
+      return this._children.splice(index, 1)[0];
+    }
+    return undefined;
+  }
+
+  disable(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    this._enabled = false;
+    this._children?.forEach(c => c.disable(opts));
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  enable(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    this._enabled = true;
+    this._children?.forEach(c => c.enable(opts));
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  markAsPristine(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    this.error = null;
+    this.submitted = false;
+    if (this.dirtySubject.value !== false) {
+      this.dirtySubject.next(false);
+    }
+    this._children?.forEach(c => c.markAsPristine(opts));
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  markAsUntouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    if (this.touchedSubject.value !== false) {
+      this.touchedSubject.next(false);
+    }
+    this._children?.forEach(c => c.markAsUntouched());
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  /**
+   * @deprecated prefer to use markAllAsTouched()
+   * @param opts
+   */
+  markAsTouched(opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    if (!this.touchedSubject.value !== true) {
+      this.touchedSubject.next(true);
+    }
+    this._children?.forEach(c => c.markAsTouched(opts));
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  markAllAsTouched(opts?: {emitEvent?: boolean }) {
+    if (this.touchedSubject.value !== true) {
+      this.touchedSubject.next(true);
+    }
+    this._children?.forEach(c => c.markAllAsTouched(opts));
+    if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+  }
+
+  markAsDirty(opts?: {onlySelf?: boolean; emitEvent?: boolean;}){
+    if (!this.dirtySubject.value) {
+      this.dirtySubject.next(true);
+      if (!this.loading && (!opts || opts.emitEvent !== false)) this.markForCheck();
+    }
+  }
+
+  markAsLoading(opts?: {onlySelf?: boolean; emitEvent?: boolean;}){
+    if (!this.loadingSubject.value) {
+      this.loadingSubject.next(true);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  markAsLoaded(opts?: {
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }){
+    if (this.loadingSubject.value) {
+      this.loadingSubject.next(false);
+      if (!opts || opts.onlySelf !== true) {
+        // Emit to children forms and editors
+        // note: tables should be changed by parent
+        this.forms?.forEach(f => f.markAsLoaded(opts));
+        this.editors?.forEach(e => e.markAsLoaded(opts));
+      }
+      if (!opts || opts.emitEvent !== false) {
+        this.markForCheck();
+      }
+    }
+  }
+
+  markAsReady(opts?: {emitEvent?: boolean }) {
+    this._children?.forEach(c => c.markAsReady(opts));
+    this.readySubject.next(true);
+  }
+
+  ready(opts?: WaitForOptions): Promise<void> {
+    if (this.readySubject.value) return Promise.resolve();
+    return waitForTrue(this.readySubject, opts);
+  }
+
+  waitIdle(opts?: WaitForOptions): Promise<void> {
+    if (!this.loadingSubject.value) return Promise.resolve();
+    return waitForFalse(this.loadingSubject, opts);
+  }
+
+  markAsSaving(opts?: { emitEvent?: boolean }){
+    if (this.savingSubject.value !== true) {
+      this.savingSubject.next(true);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  markAsSaved(opts?: { emitEvent?: boolean }){
+    if (this.savingSubject.value !== false) {
+      this.savingSubject.next(false);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  async cancel(event?: Event): Promise<void> {
+    if (this.isNewData) {
+      await this.unload(); // async reset
+    }
+    else if (this.dirty){
+      await this.reload(); // async reload
+    }
+  }
+
+  /**
+   * Unload the page (remove all data). Useful when reusing angular cache a cancelled page
+   *
+   * @param opts
+   */
+  async unload(opts?: {emitEvent?: boolean }): Promise<void> {
+    console.debug('[editor] Unloading data...');
+    this.markAsLoading();
+    this._children?.forEach(f => {
+      if (f instanceof AppForm) {
+        // Fix error when 'null' is pass (default value = {} was not applied)
+        f.reset(undefined, opts);
+      }
+      else if (f instanceof AppTable) {
+        f.dataSource.disconnect();
+      }
+      else if (f instanceof AppEditor) {
+        f.unload(opts);
+      }
+    });
+
+    this.markAsPristine(opts);
+    this.markAsSaved(opts);
+  }
+
+  async reloadWithConfirmation(confirm?: boolean) {
+    const needConfirm = this.dirty;
+    // if not confirm yet: ask confirmation
+    if (!confirm && needConfirm) {
+      const translations = this.translate.instant(['COMMON.BTN_ABORT_CHANGES', 'COMMON.BTN_CANCEL', 'CONFIRM.CANCEL_CHANGES', 'CONFIRM.ALERT_HEADER']);
+      const alert = await this.alertCtrl.create({
+        header: translations['CONFIRM.ALERT_HEADER'],
+        message: translations['CONFIRM.CANCEL_CHANGES'],
+        buttons: [
+          {
+            text: translations['COMMON.BTN_ABORT_CHANGES'],
+            cssClass: 'secondary',
+            handler: () => {
+              confirm = true; // update upper value
+            }
+          },
+          {
+            text: translations['COMMON.BTN_CANCEL'],
+            role: 'cancel',
+            handler: () => {
+            }
+          }
+        ]
+      });
+      await alert.present();
+      await alert.onDidDismiss();
+    }
+
+    // If confirm: execute the reload
+    if (confirm || !needConfirm) {
+      this.scrollToTop();
+      this.disable();
+      return await this.reload();
+    }
+  }
+
+  async goBack(event?: Event): Promise<void | boolean> {
+    // Go back
+    if (this.toolbar?.canGoBack) {
+      return this.toolbar.goBack();
+    } else {
+      // Back to home
+      return this.navController.navigateBack('/');
+    }
+  }
+
+
+
+  abstract load(id?: ID, options?: O): Promise<void>;
+
+  abstract save(event?: Event, options?: any): Promise<boolean>;
+
+  abstract reload(): Promise<void>;
+
+  logFormErrors(prefix?: string) {
+    if (this.debug) console.debug('[editor] Editor not valid. Checking where (forms, tables)...');
+    this._children?.forEach(c => this.logChildrenErrors(c, prefix));
+  }
+
+  /* -- protected methods -- */
+
+  protected async scrollToTop(duration?: number) {
+    duration = toNumber(duration, 500);
+
+    if (!this.content) {
+      console.warn(`[tab-editor] Cannot scroll to top. (no 'ion-content' tag found ${this.constructor.name}`);
+
+      // TODO: FIXME (not working as the page is not the window)
+      const scrollToTop = window.setInterval(() => {
+        const pos = window.scrollY;
+        if (pos > 0) {
+          window.scrollTo(0, pos - 20); // how far to scroll on each step
+        } else {
+          window.clearInterval(scrollToTop);
+        }
+      }, 16);
+      return;
+    }
+
+    return this.content.scrollToTop(duration);
+  }
+
+  protected registerSubscription(sub: Subscription|TeardownLogic) {
+    this._subscription.add(sub);
+  }
+
+  protected unregisterSubscription(sub: Subscription) {
+    this._subscription.remove(sub);
+  }
+
+  protected async saveIfDirtyAndConfirm(event?: Event, opts?: {
+    emitEvent?: boolean;
+    confirmed?: boolean
+  }): Promise<boolean> {
+    if (!this.dirty) return true;
+
+    let confirmed = opts?.confirmed || false;
+    if (!confirmed) {
+      let cancel = false;
+      const translations = this.translate.instant(['COMMON.BTN_SAVE', 'COMMON.BTN_CANCEL', 'COMMON.BTN_ABORT_CHANGES', 'CONFIRM.SAVE', 'CONFIRM.ALERT_HEADER']);
+      const alert = await this.alertCtrl.create({
+        header: translations['CONFIRM.ALERT_HEADER'],
+        message: translations['CONFIRM.SAVE'],
+        buttons: [
+          {
+            text: translations['COMMON.BTN_CANCEL'],
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {
+              cancel = true;
+            }
+          },
+          {
+            text: translations['COMMON.BTN_ABORT_CHANGES'],
+            cssClass: 'secondary',
+            handler: () => {
+            }
+          },
+          {
+            text: translations['COMMON.BTN_SAVE'],
+            handler: () => {
+              confirmed = true; // update upper value
+            }
+          }
+        ]
+      });
+      await alert.present();
+      await alert.onDidDismiss();
+
+      if (!confirmed) {
+        return !cancel;
+      }
+    }
+
+    return await this.save(event, opts);
+  }
+
+  protected async showToast(opts: ShowToastOptions) {
+    if (!this.toastController) throw new Error('Missing toastController in component\'s constructor');
+    await Toasts.show(this.toastController, this.translate, opts);
+  }
+
+  protected logChildrenErrors(c: IAppForm | AbstractControl, prefix?: string, path?: string) {
+    prefix = prefix || '[app-tab-editor] ';
+    // If editor
+    if (c instanceof AppEditor) {
+      c.logFormErrors();
+    }
+    // Angular form control
+    else if (c instanceof AbstractControl) {
+      AppFormUtils.logFormErrors(c, prefix, path);
+    }
+    // If form provider: get delegate
+    else if (c instanceof AppFormProvider) {
+      if (!c.empty && !c.valid) {
+        c.waitDelegate({timeout: 1000}).then(delegate => this.logChildrenErrors(delegate, prefix, 'provider'));
+      }
+    }
+    // If table
+    else if (c instanceof AppTable) {
+      if (c.invalid && c.editedRow && c.editedRow.validator) {
+        const path = c.constructor.name.toLowerCase();
+        AppFormUtils.logFormErrors(c.editedRow.validator, prefix, path);
+      }
+    }
+    // If form
+    else if (c instanceof AppForm) {
+      if (!c.empty && !c.valid) {
+        if (c.pending) {
+          const path = c.constructor.name.toLowerCase();
+          console.warn( `${prefix} -> ${path}: waiting while pending...`);
+          AppFormUtils.waitWhilePending(c, {timeout: 1000})
+            .then(() => this.logChildrenErrors(c.form, prefix, path));
+        }
+        else {
+          AppFormUtils.logFormErrors(c.form, prefix);
+        }
+      }
+    }
+    // If editor
+    else if (c instanceof AppEditor) {
+      if (!c.empty && !c.valid) {
+        if (c.pending) {
+          const path = c.constructor.name.toLowerCase();
+          console.warn( `${prefix} -> ${path}: waiting while pending...`);
+          AppFormUtils.waitWhilePending(c, {timeout: 1000})
+            .then(() => c.logFormErrors(prefix));
+        }
+        else {
+          c.logFormErrors(prefix);
+        }
+      }
+    }
+    else {
+      console.warn( `${prefix} Unknown children sub-form: `, c);
+    }
+  }
+
+  protected setError(value: string, opts?: {emitEvent?: boolean;}) {
+    if (this.errorSubject.value !== value) {
+      this.errorSubject.next(value);
+      if (!opts || opts.emitEvent !== false) this.markForCheck();
+    }
+  }
+
+  protected resetError(opts?: {emitEvent?: boolean}) {
+    this.setError(undefined, opts);
+  }
+
+  protected markForCheck() {
+    // Should be override by subclasses, if change detection is Push
+  }
+}
+
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class AppTabEditor<T = any, ID = number, O = any>
+  extends AppEditor<T, ID, O>
+  implements IAppTabEditor {
+
+  protected _selectedTabIndex = 0;
+
+  // Editor options
+  tabCount: number;
+  enableSwipe: boolean;
+  tabGroupAnimationDuration: string;
+
+  @Input() queryTabIndexParamName: string;
+
+  @Input() set selectedTabIndex(value: number) {
+    this.setSelectedTabIndex(value);
+  }
+  get selectedTabIndex(): number {
+    return this._selectedTabIndex;
+  }
+
+  @Output() readonly selectedTabIndexChange = new EventEmitter<number>();
+
+  @ViewChild('tabGroup', { static: true }) tabGroup: MatTabGroup;
+
+  protected constructor(
+    @Optional() protected route: ActivatedRoute, // Modal editor give 'null'
+    protected router: Router,
+    protected navController: NavController,
+    protected alertCtrl: AlertController,
+    protected translate: TranslateService,
+    @Optional() options?: AppTabEditorOptions) {
+    super(route, router, navController, alertCtrl, translate);
+    options = {
+      tabCount: 1,
+      enableSwipe: true,
+      tabGroupAnimationDuration: '200ms',
+      ...options
+    }
+    this.tabCount = options.tabCount;
+    this.enableSwipe = options.enableSwipe;
+    this.tabGroupAnimationDuration = options.tabGroupAnimationDuration;
+    this.queryTabIndexParamName = 'tab';
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Read the selected tab index, from path query params
+    if (this.tabGroup && this.route && this.queryTabIndexParamName) {
+      this.registerSubscription(this.route.queryParams
+        .subscribe(queryParams => {
+          this.queryParams = {...queryParams};
+
+          // Parse tab param
+          if (this.tabCount > 1 && this.queryTabIndexParamName) {
+            const tabIndex = queryParams[this.queryTabIndexParamName];
+            this.queryParams[this.queryTabIndexParamName] = tabIndex && parseInt(tabIndex) || undefined;
+            if (isNotNil(this.queryParams[this.queryTabIndexParamName])) {
+              this.selectedTabIndex = this.queryParams[this.queryTabIndexParamName];
+            }
+          }
+
+          // Realign tab, after a delay because the tab can be disabled when component is created
+          setTimeout(() => this.tabGroup.realignInkBar(), 500);
+        }));
+    }
+  }
+
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.selectedTabIndexChange.complete();
+    this.loadingSubject.unsubscribe();
+    this.errorSubject.unsubscribe();
+  }
+
+  setSelectedTabIndex(value: number, opts?: {emitEvent?: boolean; realignInkBar?: boolean }) {
+    // Fix value
+    if (value < 0) {
+      value = 0;
+    }
+    else if (value > this.tabCount - 1) {
+      console.warn(`[tab-editor] Invalid tab index ${value}. Max value is ${this.tabCount-1}`)
+      value = this._selectedTabIndex;
+    }
+
+    this._selectedTabIndex = value;
+    this.selectedTabIndexChange.next(value);
+
+    if (this.tabGroup && (!opts || opts.realignInkBar !== false)) {
+      this.tabGroup.selectedIndex = value;
+      this.markForCheck();
+      // Wait tab change in UI, before realign ink tab
+      setTimeout(() => this.tabGroup.realignInkBar(), 200);
+    }
+    else if (!opts || opts.emitEvent !== false) {
+      this.markForCheck();
+    }
+  }
+
+  realignInkBar() {
+    this.tabGroup?.realignInkBar();
+  }
+
+
+  onTabChange(event: MatTabChangeEvent, queryTabIndexParamName?: string): boolean {
+    queryTabIndexParamName = queryTabIndexParamName || this.queryTabIndexParamName;
+
+    if (!queryTabIndexParamName || !this.route) return true; // Skip if tab query param not set, or no route
+
+    if (!this.queryParams || +this.queryParams[queryTabIndexParamName] !== event.index) {
+
+      this.queryParams = this.queryParams || {};
+      this.queryParams[queryTabIndexParamName] = event.index;
+
+      if (queryTabIndexParamName === 'tab' && isNotNil(this.queryParams['subtab'])) {
+        delete this.queryParams.subtab; // clean subtab
+      }
+      this.router.navigate(['.'], {
+        relativeTo: this.route,
+        queryParams: this.queryParams,
+        replaceUrl: true,
+        state: {animated: false}
+      });
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Action triggered when user swipes
+   */
+  onSwipeTab(event: HammerSwipeEvent): boolean {
+    // DEBUG
+    // if (this.debug) console.debug("[tab-page] onSwipeTab()");
+
+    // Skip, if not a valid swipe event
+    if (!this.enableSwipe || !event
+      || event.defaultPrevented || (event.srcEvent && event.srcEvent.defaultPrevented)
+      || event.pointerType !== 'touch'
+    ) {
+      return false;
+    }
+
+    // DEBUG
+    //if (this.debug)
+    //console.debug("[tab-page] Detected swipe: " + event.type, event);
+
+    let selectTabIndex = this.selectedTabIndex;
+    switch (event.type) {
+      // Open next tab
+      case 'swipeleft':
+        const isLast = selectTabIndex >= (this.tabCount - 1);
+        selectTabIndex = isLast ? 0 : selectTabIndex + 1;
+        break;
+
+
+      // Open previous tab
+      case 'swiperight':
+        const isFirst = selectTabIndex <= 0;
+        selectTabIndex = isFirst ? this.tabCount : selectTabIndex - 1;
+        break;
+
+      // Other case
+      default:
+        console.error('[tab-page] Unknown swipe action: ' + event.type);
+        return false;
+    }
+
+    setTimeout(() => {
+      this.selectedTabIndex = selectTabIndex;
+      this.markForCheck();
+    });
+
+    return true;
+  }
+
+  onSubTabChange(event: MatTabChangeEvent) {
+    this.onTabChange(event, 'subtab');
+  }
+
+  async unload(opts?: { emitEvent?: boolean }): Promise<void> {
+    this.selectedTabIndex = 0;
+    await super.unload(opts);
+  }
+
+  protected abstract getFirstInvalidTabIndex(): number;
+
+  protected async saveDirtyChildren(): Promise<boolean> {
+    // Save all dirty tables
+    const results = await Promise.all([
+      ...this.tables,
+      ...this.editors
+    ]
+      .filter(c => c.dirty)
+      .map(c => c.save()));
+
+    return !results.some(saved => saved !== true);
+  }
+}