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

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

@@ -0,0 +1,885 @@
+import {AfterViewInit, ChangeDetectorRef, Directive, EventEmitter, Injector, OnDestroy, OnInit, Optional} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {AlertController, IonRouterOutlet, NavController, ToastController} from '@ionic/angular';
+
+import {TranslateService} from '@ngx-translate/core';
+import {Observable, of, Subject, Subscription} from 'rxjs';
+import {isMoment} from 'moment';
+import {AddToPageHistoryOptions, LocalSettingsService} from '../../services/local-settings.service';
+import {debounceTime, filter, mapTo, mergeMap} from 'rxjs/operators';
+import {Entity} from '../../services/model/entity.model';
+import {UsageMode} from '../../services/model/settings.model';
+import {FormGroup} from '@angular/forms';
+import {AppTabEditor, AppTabEditorOptions, IAppTabEditor} from './editor.class';
+import {AppFormUtils} from '../form.utils';
+import {Alerts} from '../../../shared/alerts';
+import {ErrorCodes, ServerErrorCodes} from '../../services/errors';
+import {equals, isInt, isNil, isNilOrBlank, isNotEmptyArray, isNotNil, isNotNilOrBlank, toBoolean, toNumber} from '../../../shared/functions';
+import {EntityServiceLoadOptions, IEntityService} from '../../../shared/services/entity-service.class';
+import {DateFormatService} from '../../../shared/pipes/date-format.pipe';
+import {Environment, ENVIRONMENT} from '../../../../environments/environment.class';
+import {HistoryPageReference} from '../../services/model/history.model';
+import {firstFalse, waitForFalse, WaitForOptions} from '../../../shared/observables';
+import {FormErrorTranslator} from '../../../shared/validator/form-error-adapter.class';
+import {FormErrors} from '../../../shared/forms';
+import {isStartableService} from '../../../shared/services/startable-service.class';
+
+export interface IAppEntityEditor extends IAppTabEditor {
+  usageMode: UsageMode;
+  isNewData: boolean;
+}
+
+export class AppEditorOptions extends AppTabEditorOptions {
+  autoLoad?: boolean;
+  autoLoadDelay?: number;
+  pathIdAttribute?: string;
+  enableListenChanges?: boolean;
+  listenIntervalInSeconds?: number;
+
+  /**
+   * Change page route (window URL) when saving for the first time
+   */
+  autoUpdateRoute?: boolean; // Default to true
+
+  /**
+   * Open the next tab, after saving for the first time
+   */
+  autoOpenNextTab?: boolean; // Default to true
+
+  i18nPrefix?: string;
+}
+
+export interface AppError {
+  code?: number;
+  message?: string;
+}
+
+
+export interface AppErrorWithDetails extends AppError {
+  details: AppError & {errors?: FormErrors};
+}
+
+// @dynamic
+@Directive()
+// eslint-disable-next-line @angular-eslint/directive-class-suffix
+export abstract class AppEntityEditor<
+  T extends Entity<T, ID>,
+  S extends IEntityService<T, ID> = IEntityService<T, any>,
+  ID = number
+  >
+  extends AppTabEditor<T, ID, EntityServiceLoadOptions>
+  implements OnInit, OnDestroy, AfterViewInit, IAppEntityEditor {
+
+  data: T;
+  defaultBackHref: string;
+  historyIcon: {icon?: string; matIcon?: string };
+
+  $title = new Subject<string>();
+  onUpdateView = new EventEmitter<T>();
+
+  protected readonly dateFormat: DateFormatService;
+  protected readonly cd: ChangeDetectorRef;
+  protected readonly settings: LocalSettingsService;
+  protected readonly environment: Environment;
+  protected readonly routerOutlet: IonRouterOutlet;
+  protected errorTranslator: FormErrorTranslator;
+
+  private _usageMode: UsageMode;
+  private readonly _enableListenChanges: boolean;
+  private readonly _listenIntervalInSeconds: number;
+  private readonly _pathIdAttribute: string;
+  private readonly _autoLoad: boolean;
+  private readonly _autoLoadDelay: number;
+  private readonly _autoUpdateRoute: boolean;
+  private _autoOpenNextTab: boolean;
+  private _listenChangesSubscription: Subscription;
+
+  get usageMode(): UsageMode {
+    return this._usageMode;
+  }
+
+  set usageMode(value: UsageMode) {
+    if (this._usageMode !== value) {
+      this._usageMode = value;
+      this.markForCheck();
+    }
+  }
+
+  get isOnFieldMode(): boolean {
+    return this.settings.isOnFieldMode(this._usageMode);
+  }
+
+  get isNewData(): boolean {
+    return isNil(this.data?.id);
+  }
+
+  get service(): S {
+    return this.dataService;
+  }
+
+  get autoOpenNextTab(): boolean {
+    return this._autoOpenNextTab;
+  }
+
+  set autoOpenNextTab(value: boolean){
+    this._autoOpenNextTab = value;
+  }
+
+  protected get pathIdAttribute(): string {
+    return this._pathIdAttribute;
+  }
+
+  protected constructor(
+    injector: Injector,
+    protected dataType: new() => T,
+    protected dataService?: S,
+    @Optional() options?: AppEditorOptions
+  ) {
+    super(injector.get(ActivatedRoute),
+      injector.get(Router),
+      injector.get(NavController),
+      injector.get(AlertController),
+      injector.get(TranslateService),
+      options);
+    this.environment = injector.get(ENVIRONMENT);
+    options = <AppEditorOptions>{
+      // Default options
+      enableListenChanges: this.environment.entityEditor?.enableListenChanges || false, // False  by default
+      listenIntervalInSeconds: toNumber(this.environment.entityEditor?.listenIntervalInSeconds, 0), // no timer by default
+      pathIdAttribute: 'id',
+      autoLoad: true,
+      autoUpdateRoute: true,
+      i18nPrefix: '',
+
+      // Following options are override inside ngOnInit()
+      // autoOpenNextTab: ...,
+
+      // Override defaults
+      ...options
+    };
+
+    this.settings = injector.get(LocalSettingsService);
+    this.errorTranslator = injector.get(FormErrorTranslator);
+    this.routerOutlet = injector.get(IonRouterOutlet);
+    this.cd = injector.get(ChangeDetectorRef);
+    this.dateFormat = injector.get(DateFormatService);
+    this.toastController = injector.get(ToastController);
+    this._enableListenChanges = options.enableListenChanges;
+    this._listenIntervalInSeconds = options.listenIntervalInSeconds;
+    this._pathIdAttribute = options.pathIdAttribute;
+    this._autoLoad = options.autoLoad;
+    this._autoLoadDelay = options.autoLoadDelay;
+    this._autoUpdateRoute = options.autoUpdateRoute;
+    this._autoOpenNextTab = options.autoOpenNextTab;
+    this.i18nContext = {
+      prefix: options.i18nPrefix,
+      suffix: ''
+    };
+
+    // FOR DEV ONLY ----
+    //this.debug = !environment.production;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Defaults
+    this._autoOpenNextTab = toBoolean(this._autoOpenNextTab, !this.isOnFieldMode);
+    this.historyIcon = this.historyIcon || {icon: 'list'};
+
+    // Register forms
+    this.registerForms();
+
+    // Disable page, during load
+    this.disable();
+  }
+
+  ngAfterViewInit() {
+    super.ngAfterViewInit();
+
+    // Load data
+    if (this._autoLoad) {
+      setTimeout(() => this.loadFromRoute(), this._autoLoadDelay);
+    }
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.$title.complete();
+    this.$title.unsubscribe();
+    this.onUpdateView.complete();
+    this.onUpdateView.unsubscribe();
+    this.savingSubject.unsubscribe();
+  }
+
+  waitIdle(opts?: WaitForOptions): Promise<void> {
+    // Wait end of saving
+    if (this.saving) return waitForFalse(this.savingSubject);
+
+    return super.waitIdle(opts);
+  }
+
+  /**
+   * Load data from id, using the dataService
+   *
+   * @param id
+   * @param opts
+   */
+  async load(id?: ID, opts?: EntityServiceLoadOptions & {
+    emitEvent?: boolean;
+    openTabIndex?: number;
+    updateRoute?: boolean;
+    [key: string]: any;
+  }) {
+    if (!this.dataService) throw new Error('Cannot load data: missing \'dataService\'!');
+
+    this.resetError();
+
+    // New data
+    if (isNil(id)) {
+      try {
+        // Create using default values
+        const data = new this.dataType();
+        this._usageMode = this.computeUsageMode(data);
+        await this.onNewEntity(data, opts);
+        await this.updateView(data, {
+          openTabIndex: 0,
+          ...opts
+        });
+      }
+      catch (err) {
+        this.setError(err, {emitEvent: false});
+        this.selectedTabIndex = 0;
+      }
+      finally {
+        this.markAsLoaded();
+      }
+    }
+
+    // Load existing data
+    else {
+      try {
+        const data = await this.dataService.load(id, opts);
+        if (!data) throw {code: ErrorCodes.DATA_NOT_FOUND_ERROR, message: 'ERROR.DATA_NO_FOUND'};
+        this._usageMode = this.computeUsageMode(data);
+        await this.onEntityLoaded(data, opts);
+        await this.updateView(data, opts);
+        this.startListenChanges();
+      }
+      catch (err) {
+        this.setError(err);
+        this.selectedTabIndex = 0;
+      }
+      finally {
+        this.markAsLoaded();
+      }
+    }
+  }
+
+  canUserWrite(data: T, opts?: any): boolean {
+    return this.dataService.canUserWrite(data, opts);
+  }
+
+  startListenChanges() {
+    // Skip if disabled, or already listening
+    if (this._listenChangesSubscription || !this._enableListenChanges) return;
+    // Skip if new (nothing to listen)
+    if (this.isNewData) return;
+
+    // Listen for changes on server
+    const subscription = this.listenChanges(this.data.id, {
+      interval: this._listenIntervalInSeconds
+    })?.pipe(
+        filter(isNotNil),
+        mergeMap((data) => this.saving
+          // If saving, wait end, to avoid to detect self changes
+          ? firstFalse(this.savingSubject).pipe(mapTo(data), debounceTime(500))
+          : of(data))
+      )
+      .subscribe((data: T) => {
+        const isNewer = isMoment(data.updateDate) && (!this.data.updateDate || data.updateDate.isAfter(this.data.updateDate));
+        if (!isNewer) return; // Skip
+
+        // Editor has no changes: reload
+        if (!this.dirty) {
+          if (this.debug) console.debug(`[data-editor] Changes detected on server, at {${data.updateDate}}: reloading page...`);
+          this.reload();
+        }
+        // Cannot reload: alert the user
+        else {
+          if (this.debug) console.debug(`[data-editor] Changes detected on server, at {${data.updateDate}}, but page is dirty: skip reloading.`);
+          this.showToast({message: 'ERROR.DATA_UPDATE_DATE_CHANGED', type: 'warning', showCloseButton: true});
+        }
+      });
+
+    // Register subscription
+    if (subscription) {
+      this._listenChangesSubscription = subscription;
+      this.registerSubscription(this._listenChangesSubscription);
+      subscription.add(() => {
+        this.unregisterSubscription(subscription);
+        this._listenChangesSubscription = null;
+      });
+    }
+  }
+
+  stopListenChanges(){
+    this._listenChangesSubscription?.unsubscribe();
+  }
+
+  async ready(opts?: WaitForOptions): Promise<void> {
+    await super.ready(opts);
+
+    // Wait service to be ready
+    if (isStartableService(this.dataService)) {
+      await this.dataService.ready();
+    }
+  }
+
+  async updateView(data: T | null, opts?: {
+    emitEvent?: boolean;
+    openTabIndex?: number;
+    updateRoute?: boolean;
+  }): Promise<void> {
+    const idChanged = isNotNil(data.id)
+      && this.previousDataId !== undefined // Ignore if first loading (=undefined)
+      && this.previousDataId !== data.id;
+
+    opts = {
+      updateRoute: this._autoUpdateRoute && idChanged && !this.loading,
+      ...opts
+    };
+
+    this.data = data;
+    this.previousDataId = data.id || null;
+
+    await this.ready();
+    await this.setValue(data);
+
+    if (!opts || opts.emitEvent !== false) {
+      this.markAsPristine();
+      this.markAsUntouched();
+      this.updateViewState(data);
+
+      // Need to update route
+      if (opts.updateRoute === true) {
+        this.updateTabAndRoute(data, opts)
+          // Update the title - should be executed AFTER updateRoute because of path change - fix #185
+          .then(() => this.updateTitle(data));
+      }
+      else {
+        // Update the next tab
+        this.updateTabIndex(opts.openTabIndex);
+
+        // Update the title.
+        this.updateTitle(data);
+      }
+
+      this.onUpdateView.emit(data);
+    }
+  }
+
+  /**
+   * Enable or disable state
+   */
+  updateViewState(data: T, opts?: {onlySelf?: boolean; emitEvent?: boolean }) {
+    if (this.isNewData || this.canUserWrite(data)) {
+      this.enable(opts);
+    }
+    else {
+      this.disable(opts);
+
+      // Allow to sort table
+      this.tables?.forEach(t => t.enableSort());
+    }
+
+  }
+
+  /**
+   * Update the route location, and open the next tab
+   */
+  async updateTabAndRoute(data: T, opts?: {
+    openTabIndex?: number;
+  }): Promise<void> {
+    const queryParams = {...this.queryParams};
+
+    // Open the next tab
+    this.updateTabIndex(opts && opts.openTabIndex);
+
+    // Update route location
+    await this.updateRoute(data, { ...queryParams, tab:  this.selectedTabIndex});
+  }
+
+  /**
+   * Update the route location, and open the next tab
+   */
+  updateTabIndex(tabIndex?: number) {
+    if (isNotNil(tabIndex) && tabIndex >= 0 && tabIndex !== this.selectedTabIndex) {
+      this.selectedTabIndex = tabIndex;
+      this.markForCheck();
+    }
+  }
+
+  async saveAndClose(event: Event, options?: any): Promise<boolean> {
+
+    const saved = await this.save(event);
+    if (saved) {
+      await this.close(event);
+    }
+    return saved;
+  }
+
+  async close(event: Event) {
+    if (event) {
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    return this.goBack();
+  }
+
+  /**
+   * Save the editor, by calling the dataService.save().
+   * Ensure that editor if valid. If not, display an error
+   *
+   * @param event
+   * @param opts
+   */
+  async save(event?: Event, opts?: any): Promise<boolean> {
+    if (this.loading || this.saving) {
+      console.debug('[data-editor] Skip save: editor is busy (loading or saving)');
+      return false;
+    }
+    if (!this.dirty) {
+      console.debug('[data-editor] Skip save: editor not dirty');
+      return true;
+    }
+
+    // Wait end of async validation
+    await this.waitWhilePending();
+
+    // If invalid
+    if (this.invalid) {
+      this.logFormErrors();
+      this.openFirstInvalidTab();
+      this.scrollToTop();
+      this.markAllAsTouched();
+
+      this.submitted = true;
+      return false;
+    }
+
+    this.markAsSaving();
+    this.resetError();
+
+    if (this.debug) console.debug('[data-editor] Saving data...');
+
+    try {
+      // Compute next tab index (if enable)
+      const nextTabIndex = this._autoOpenNextTab && isNil(this.previousDataId) && this.computeNextTabIndex();
+
+      // Save all dirty tables
+      const saved = await this.saveDirtyChildren();
+      if (!saved) return false;
+
+      // Get data
+      const data = await this.getValue();
+
+      this.disable();
+
+      // Save form
+      const updatedData = await this.dataService.save(data, opts);
+
+      await this.onEntitySaved(updatedData);
+
+      // Update the view (e.g metadata)
+      await this.updateView(updatedData, {
+        // Open next tab only if user has not changed it
+        openTabIndex: nextTabIndex > this._selectedTabIndex ? nextTabIndex : undefined,
+        ...opts
+      });
+
+      // Subscribe to remote changes
+      if (!this._listenChangesSubscription) this.startListenChanges();
+
+      this.submitted = false;
+
+      return true;
+    } catch (err) {
+      this.submitted = true;
+      this.selectedTabIndex = 0; // Can be override by subclasses, using setError()
+      this.setError(err);
+      this.scrollToTop(); // Scroll to top (to show error)
+      this.markAsDirty();
+      this.enable();
+
+      // Concurrent change on pod
+      if (err.code === ServerErrorCodes.BAD_UPDATE_DATE && isNotNil(this.data.id)) {
+        // Call a data reload (in background), to update the GraphQL cache, and allow to cancel changes
+        this.dataService.load(this.data.id, {fetchPolicy: 'network-only'}).then(() => {
+          console.debug('[data-editor] Data cache reloaded. User can reload page');
+        });
+      }
+
+      return false;
+    } finally {
+      this.markAsSaved();
+    }
+  }
+
+  /**
+   * Save data (if dirty and valid), and return it. Otherwise, return nil value.
+   */
+  async saveAndGetDataIfValid(): Promise<T | undefined> {
+    // Form is not valid
+    if (!this.valid) {
+
+      // Make sure validation is finished
+      await AppFormUtils.waitWhilePending(this);
+
+      // If invalid: Open the first tab in error
+      if (this.invalid) {
+        this.openFirstInvalidTab();
+        return undefined;
+      }
+
+      // Continue (valid)
+    }
+
+    // Form is valid, but not saved
+    if (this.dirty) {
+      const saved = await this.save(new Event('save'));
+      if (!saved) return undefined;
+    }
+
+    // Valid and saved data
+    return this.data;
+  }
+
+  async delete(event?: Event): Promise<boolean> {
+    if (this.loading || this.saving) return false;
+
+    // Ask user confirmation
+    const confirmation = await Alerts.askDeleteConfirmation(this.alertCtrl, this.translate);
+    if (!confirmation) return;
+
+    console.debug('[data-editor] Asking to delete...');
+
+    this.markAsSaving();
+    this.resetError();
+
+    try {
+      // Get data
+      const data = await this.getValue();
+      const isNew = this.isNewData;
+
+      this.disable();
+
+      if (!isNew) {
+        await this.dataService.delete(data);
+      }
+
+      await this.onEntityDeleted(data);
+
+      // Remove page history
+      this.removePageHistory();
+
+
+    } catch (err) {
+      this.submitted = true;
+      this.selectedTabIndex = 0;
+      this.setError(err);
+      this.markAsSaved();
+      this.enable();
+      return false;
+    }
+
+    // Wait, then go back (wait is need in order to update back href is need)
+    await setTimeout(() => this.goBack(), 500);
+
+    return true;
+  }
+
+  async reload() {
+    this.markAsLoading();
+    await this.load(this.data?.id, {fetchPolicy: "network-only"});
+  }
+
+  async unload(opts?: {emitEvent?: boolean }): Promise<void> {
+    await super.unload(opts);
+    this.stopListenChanges();
+    this.form.reset();
+    this.registerForms();
+    this.data = null;
+    // TODO: find a way to remove current page from the navigation history
+  }
+
+  async goBack(event?: Event): Promise<void | boolean> {
+    // Go back
+    if (this.toolbar?.canGoBack) {
+      return this.toolbar.goBack();
+    }
+    else if (this.defaultBackHref) {
+      return this.navController.navigateBack(this.defaultBackHref);
+    } else {
+      // Back to home
+      return this.navController.navigateBack('/');
+    }
+  }
+
+  resetError(opts?: {emitEvent?: boolean}) {
+    super.resetError(opts);
+  }
+
+  setError(err: string | AppErrorWithDetails, opts?: {emitEvent?: boolean; detailsCssClass?: string; }) {
+    if (!err) {
+      super.setError(undefined, opts);
+    }
+    else if (typeof err === 'string') {
+      console.error('[entity-editor] Error: ' + (err || ''));
+      super.setError(err as string, opts);
+    }
+    else {
+      console.error('[entity-editor] Error: ' + err.message || '', err);
+      let userMessage = err.message && this.translate.instant(err.message) || err;
+
+      // Add details error (if any) under the main message
+      const detailMessage = (!err.details || typeof err.details === 'string')
+        ? err.details as string
+        : err.details.message;
+      if (isNotNilOrBlank(detailMessage)) {
+        const cssClass = opts?.detailsCssClass || 'error-details';
+        userMessage += `<br/><small class="${cssClass}" title="${detailMessage}">`;
+        userMessage += detailMessage.length < 70 ? detailMessage : detailMessage.substring(0, 67) + '...';
+        userMessage += '</small>';
+      }
+      super.setError(userMessage, opts);
+    }
+  }
+
+
+  /**
+   * Load data from the snapshot route
+   *
+   * @protected
+   */
+  protected loadFromRoute(): Promise<void> {
+    const route = this.route.snapshot;
+    if (!route || isNilOrBlank(this._pathIdAttribute)) {
+      throw new Error('Unable to load from route: missing \'route\' or \'options.pathIdAttribute\'.');
+    }
+    let id = route.params[this._pathIdAttribute];
+    if (isNil(id) || id === 'new') {
+      return this.load(undefined, route.params);
+    } else {
+      // Convert as number, if need
+      if (isInt(id)) {
+        id = parseInt(id);
+      }
+      return this.load(id, route.params);
+    }
+  }
+
+  /**
+   * Return undefined to keep same tab
+   *
+   * @protected
+   */
+  protected computeNextTabIndex(): number | undefined {
+    const nextTabIndex = this.selectedTabIndex + 1;
+    return nextTabIndex < this.tabCount ? nextTabIndex : undefined;
+  }
+
+  protected async onBeforeEntityLoad(): Promise<void> {
+    // can be overwritten by subclasses
+  }
+
+  protected async onNewEntity(data: T, options?: EntityServiceLoadOptions): Promise<void> {
+    // can be overwritten by subclasses
+  }
+
+  protected async onEntityLoaded(data: T, options?: EntityServiceLoadOptions): Promise<void> {
+    // can be overwritten by subclasses
+  }
+
+  protected async onEntitySaved(data: T): Promise<void> {
+    // can be overwritten by subclasses
+  }
+
+  protected async onEntityDeleted(data: T): Promise<void> {
+    // can be overwritten by subclasses
+  }
+
+  protected computeUsageMode(data: T): UsageMode {
+    return this.settings.isUsageMode('FIELD') ? 'FIELD' : 'DESK';
+  }
+
+  protected waitWhilePending(opts?: WaitForOptions): Promise<void> {
+    return AppFormUtils.waitWhilePending(this, opts);
+  }
+
+  protected async getValue(): Promise<T> {
+    const json = await this.getJsonValueToSave();
+
+    const res = new this.dataType();
+    res.fromObject(json);
+
+    return res;
+  }
+
+  protected getJsonValueToSave(): Promise<any> {
+    return Promise.resolve(this.form.value);
+  }
+
+  /**
+   * Compute the title
+   *
+   * @param data
+   */
+  protected async updateTitle(data?: T) {
+    data = data || this.data;
+    const title = await this.computeTitle(data);
+    this.$title.next(title);
+
+    // If NOT data, then add to page history
+    if (!this.isNewData) {
+      const page = await this.computePageHistory(title);
+      if (page) return this.addToPageHistory(page);
+    }
+  }
+
+  protected async addToPageHistory(page: HistoryPageReference, opts?: AddToPageHistoryOptions) {
+    if (!page) return; // Skip
+
+    return this.settings.addToPageHistory(page, {
+      removePathQueryParams: true,
+      removeTitleSmallTag: true,
+      emitEvent: false,
+      ...opts
+    });
+  }
+
+  protected async computePageHistory(title: string): Promise<HistoryPageReference> {
+    if (this.debug) console.debug('[entity-editor] Computing page history, using url: ' + this.router.url);
+    return {
+      title,
+      path: this.router.url
+    };
+  }
+
+  protected async removePageHistory(opts?: { emitEvent?: boolean }) {
+    return this.settings.removePageHistory(this.router.url, opts);
+  }
+
+
+  protected computePageUrl(id: ID|'new'): string | any[] {
+    const parentUrl = this.getParentPageUrl();
+    return parentUrl && `${parentUrl}/${id}`;
+  }
+
+  protected getParentPageUrl(withQueryParams?: boolean) {
+    let parentUrl = this.defaultBackHref;
+
+    // Remove query params
+    if (withQueryParams !== true && parentUrl && parentUrl.indexOf('?') !== -1) {
+      parentUrl = parentUrl.substring(0, parentUrl.indexOf('?'));
+    }
+
+    return parentUrl;
+  }
+
+  protected listenChanges(id: ID, opts?: any): Observable<T | undefined> {
+    return this.dataService.listenChanges(this.data.id, {
+      // Make sure to skip cache, because NOT the full graph will be fetched by subscription
+      // When a changes occur, we call reload() to force refetching the full graph
+      fetchPolicy: 'no-cache',
+      ...opts
+    });
+  }
+
+  protected markForCheck() {
+    this.cd?.markForCheck();
+  }
+
+  /**
+   * Update the route, without reloading the component
+   *
+   * @param data
+   * @param queryParams
+   * @protected
+   */
+  protected async updateRoute(data: T, queryParams?: any): Promise<boolean> {
+    const currId = this.route.snapshot.paramMap.get(this.pathIdAttribute);
+    const futureId = isNotNil(data.id) ? data.id.toString() : 'new';
+    this.queryParams = {
+      ...this.queryParams,
+      ...queryParams
+    };
+    if (currId === futureId) {
+      // Update queryParam only (not the path)
+      if (!equals(this.route.snapshot.queryParams, this.queryParams)) {
+        if (this.debug) console.debug('[entity-editor] Updating route using queryParams: ', queryParams);
+        return await this.router.navigate(['.'], {
+          relativeTo: this.route,
+          queryParams: this.queryParams,
+          state: {animated: false}
+        });
+      }
+    }
+    else {
+      // Current route was '/new' => change to '/new?id=:id' (to allow CustomReuseStrategy to detect that route can be reused)
+      if (currId === 'new') {
+        const res = await this.router.navigate(['.'], {
+          relativeTo: this.route,
+          replaceUrl: true,
+          queryParams: {
+            ...this.queryParams,
+            [this.pathIdAttribute]: futureId
+          },
+          state: {animated: false}
+        });
+        if (!res) return false;
+      }
+
+      const path = this.computePageUrl(isNotNil(data.id) ? data.id : 'new');
+      const commands: any[] = (path && typeof path === 'string') ? path.split('/').slice(1) : path as any[];
+      if (isNotEmptyArray(commands)) {
+        if (this.debug) console.debug('[entity-editor] Updating route to: ' + path);
+        return await this.router.navigate(commands, {
+          replaceUrl: true,
+          queryParams: this.queryParams,
+          state: {animated: false}
+        });
+      }
+      return Promise.reject('Missing page URL');
+    }
+
+  }
+
+
+  /* -- private functions -- */
+
+  /**
+   * Open the first tab that is invalid
+   */
+  private openFirstInvalidTab() {
+    const invalidTabIndex = this.getFirstInvalidTabIndex();
+    if (invalidTabIndex !== -1 && this.selectedTabIndex !== invalidTabIndex) {
+      this.selectedTabIndex = invalidTabIndex;
+      this.markForCheck();
+    }
+  }
+
+  /* -- protected abstract methods (to override) -- */
+
+  protected abstract registerForms();
+
+  protected abstract computeTitle(data: T): Promise<string>;
+
+  protected abstract setValue(data: T): Promise<void> | void;
+
+  protected abstract get form(): FormGroup;
+
+  protected abstract getFirstInvalidTabIndex(): number;
+
+}