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

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

@@ -1,803 +0,0 @@
-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);
-  }
-}