@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/core/table/testing/table2.testing.ts

@@ -0,0 +1,274 @@
+import { AfterViewInit, ChangeDetectionStrategy, Component, forwardRef, Injector, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AppTable } from '../table.class';
+import { Referential } from '../../services/model/referential.model';
+import { IonInfiniteScroll } from '@ionic/angular';
+import { EntitiesTableDataSource } from '../entities-table-datasource.class';
+import { InMemoryEntitiesService } from '../../../shared/services/memory-entity-service.class';
+import { AppValidatorService } from '../../services/validator/base.validator.class';
+import { AbstractControl, UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { isNil } from '../../../shared/functions';
+import { ReferentialFilter } from '../../services/testing/referential-filter.model';
+import { debounceTime, filter, tap } from 'rxjs/operators';
+import { MatExpansionPanel } from '@angular/material/expansion';
+import { DEFAULT_PAGE_SIZE, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS } from '../table.model';
+import { Table2ValidatorService } from './table2-validator.service';
+import { StatusIds } from '../../services/model/model.enum';
+
+@Component({
+  selector: 'app-table2-testing',
+  styleUrls: ['table2.testing.scss'],
+  templateUrl: 'table2.testing.html',
+  providers: [
+    {
+      provide: AppValidatorService,
+      useClass: Table2ValidatorService,
+    },
+    {
+      provide: AppTable,
+      useExisting: forwardRef(() => Table2TestPage),
+    },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class Table2TestPage extends AppTable<Referential, ReferentialFilter> implements OnInit, OnDestroy, AfterViewInit {
+  static readonly maxRowCount = 100;
+
+  canEdit = true;
+  data: Referential[];
+  filterForm: UntypedFormGroup;
+  filterCriteriaCount = 0;
+  rowHeight = 33;
+  enableInfiniteScroll: boolean;
+  checkBoxSelection = true;
+  resizable = true;
+
+  @Input() filterPanelFloating = true;
+  @Input() sticky = true;
+  @Input() stickyEnd = true;
+
+  get hasMoreData(): boolean {
+    return this.data.length < 100;
+  }
+
+  @ViewChild(MatExpansionPanel, { static: true }) filterExpansionPanel: MatExpansionPanel;
+  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+  get dataService(): InMemoryEntitiesService<Referential> {
+    return this._dataSource.dataService as InMemoryEntitiesService<Referential>;
+  }
+
+  constructor(
+    injector: Injector,
+    protected validatorService: AppValidatorService,
+    protected formBuilder: UntypedFormBuilder
+  ) {
+    super(
+      injector,
+      [
+        ...RESERVED_START_COLUMNS,
+        'name',
+        'levelId',
+        'boolean',
+        'boolean2',
+        //'boolean3',
+        ...RESERVED_END_COLUMNS,
+      ],
+      new EntitiesTableDataSource(
+        Referential,
+        new InMemoryEntitiesService(Referential, ReferentialFilter, {
+          sortByReplacement: { id: 'id' },
+        }),
+        validatorService,
+        {
+          suppressErrors: false,
+        }
+      ),
+      null
+    );
+
+    // Works with true and false
+    this.enableInfiniteScroll = this.mobile;
+
+    this.autoLoad = false;
+    this.inlineEdition = true;
+    this.i18nColumnPrefix = 'TABLE.TESTING.';
+
+    this.confirmBeforeDelete = true;
+    this.confirmBeforeCancel = false;
+    this.undoableDeletion = false;
+    this.saveBeforeDelete = false;
+
+    this.saveBeforeSort = true;
+    this.saveBeforeFilter = true;
+    this.propagateRowError = true;
+
+    this.filterForm = formBuilder.group({
+      searchText: [null],
+    });
+
+    this.onStartEditingRow.subscribe((row) => {
+      row.validator.patchValue({ entityName: 'TestVO' }, { emitEvent: false });
+    });
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Update filter when changes
+    this.registerSubscription(
+      this.filterForm.valueChanges
+        .pipe(
+          debounceTime(250),
+          filter(() => this.filterForm.valid),
+          tap((value) => {
+            const filter = ReferentialFilter.fromObject(value);
+            this.filterCriteriaCount = filter.countNotEmptyCriteria();
+            this.markForCheck();
+            // Applying the filter
+            this.setFilter(filter, { emitEvent: false });
+          }),
+          // Save filter in settings (after a debounce time)
+          debounceTime(500),
+          tap((json) => this.settings.savePageSetting(this.settingsId, json, 'filter'))
+        )
+        .subscribe()
+    );
+
+    this.registerAutocompleteField('level', {
+      items: [
+        { id: 1, label: 'A', name: 'item A' },
+        { id: 1, label: 'B', name: 'item B' },
+      ],
+      mobile: this.mobile,
+    });
+
+    this.registerSubscription(
+      this.onRefresh.subscribe(() => {
+        this.filterForm.markAsUntouched();
+        this.filterForm.markAsPristine();
+      })
+    );
+
+    this.markAsReady();
+  }
+
+  async ngAfterViewInit() {
+    super.ngAfterViewInit();
+
+    // Restore filter from settings
+    await this.restoreFilter();
+
+    // Load data
+    this.load();
+  }
+
+  ngOnDestroy() {
+    console.debug('[test-table] Destroying table...');
+    super.ngOnDestroy();
+  }
+
+  protected async restoreFilter() {
+    await this.settings.ready();
+
+    const json = this.settings.getPageSettings(this.settingsId, 'filter');
+    console.debug('[table-test] Restoring filter from settings...', json);
+
+    if (json) {
+      const filter = ReferentialFilter.fromObject(json);
+      this.filterForm.patchValue(json, { emitEvent: false });
+      this.filterCriteriaCount = filter.countNotEmptyCriteria();
+      this.setFilter(filter, { emitEvent: true });
+      this.markForCheck();
+    }
+  }
+
+  async load() {
+    console.debug('[test-table] Updating data...');
+    this.markAsLoading();
+
+    if (isNil(this.data)) {
+      this.data = this.generateData(0, Table2TestPage.maxRowCount);
+    }
+    this.dataService.value = this.data;
+
+    this.emitRefresh();
+  }
+
+  async fetchMore(event) {
+    console.debug('[table-test] Loading more...', event);
+    const fetched = await this._dataSource.fetchMore();
+
+    if (fetched && event?.target && event.target.complete) {
+      // Wait end of load
+      await this.waitIdle();
+      // Mark target event as completed (e.g. IonRefresher)
+      event.target.complete();
+    }
+  }
+
+  async save(opts?: { keepEditing?: boolean }): Promise<boolean> {
+    const saved = await super.save(opts);
+    if (saved) {
+      // Update source data
+      this.data = this.dataService.value;
+    }
+    return saved;
+  }
+
+  clearControlValue(event: Event, formControl: AbstractControl): boolean {
+    if (event) event.stopPropagation(); // Avoid to enter input the field
+    formControl.setValue(null);
+    return false;
+  }
+
+  toggleFilterPanelFloating() {
+    this.filterPanelFloating = !this.filterPanelFloating;
+    this.markForCheck();
+  }
+
+  applyFilterAndClosePanel(event?: Event) {
+    this.defaultPageSize = DEFAULT_PAGE_SIZE;
+    this.emitRefresh(event);
+    this.filterExpansionPanel.close();
+    if (this.filterExpansionPanel && this.filterPanelFloating) this.filterExpansionPanel.close();
+  }
+
+  closeFilterPanel() {
+    if (this.filterExpansionPanel) this.filterExpansionPanel.close();
+    if (!this.filterPanelFloating) {
+      this.filterPanelFloating = true;
+      this.markForCheck();
+    }
+  }
+
+  resetFilter(_?: Event) {
+    this.filterForm.reset({}, { emitEvent: true });
+    this.setFilter(ReferentialFilter.fromObject({}), { emitEvent: true });
+    this.filterExpansionPanel.close();
+  }
+
+  protected generateData(offset?: number, size?: number): Referential[] {
+    offset = offset || 0;
+    size = size || 100;
+
+    const result = new Array<Referential>();
+    for (let i = 0; i < size; i++) {
+      const id = i + 1 + offset;
+      const item = Referential.fromObject({
+        id,
+        label: 'CODE-' + id,
+        name: 'Name #' + id,
+        levelId: { id: 1, label: 'A', name: 'Item A' },
+        statusId: StatusIds.ENABLE,
+        comments: 'My comment #' + id,
+        boolean: id % 2 === 0,
+        boolean2: true,
+        // boolean3: false,
+        entityName: 'TestVO',
+      });
+      result.push(item);
+    }
+
+    return result;
+  }
+}

package/src/app/shared/alerts.ts

@@ -0,0 +1,296 @@
+import { AlertController } from '@ionic/angular';
+import { TranslateService } from '@ngx-translate/core';
+
+export class Alerts {
+  /**
+   * Ask the user to save before leaving. If return undefined: user has cancelled
+   * <p>
+   *   from a routed page, prefer using ComponentDirtyGuard
+   *
+   * @param alertCtrl
+   * @param translate
+   * @param event
+   */
+  static async askSaveBeforeLeave(alertCtrl: AlertController, translate: TranslateService, event?: Event): Promise<boolean | undefined> {
+    let confirm = false;
+    let cancel = false;
+    const translations = translate.instant([
+      'COMMON.BTN_SAVE',
+      'COMMON.BTN_CANCEL',
+      'COMMON.BTN_ABORT_CHANGES',
+      'CONFIRM.SAVE',
+      'CONFIRM.ALERT_HEADER',
+    ]);
+    const alert = await 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: () => {
+            confirm = true; // update upper value
+          },
+        },
+      ],
+    });
+    await alert.present();
+    await alert.onDidDismiss();
+
+    if (confirm) return true; // = Do save and leave
+
+    if (cancel) {
+      // Stop the event
+      if (event) event.preventDefault();
+
+      return undefined; // User cancelled
+    }
+
+    return false; // Leave without saving
+  }
+
+  /**
+   * Ask the user to conform an action. If return undefined: user has cancelled
+   *
+   * @param alertCtrl
+   * @param translate
+   * @param immediate is action has an immediate effect ?
+   * @param event
+   * @param interpolateParams
+   */
+  static async askActionConfirmation(
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    immediate?: boolean,
+    event?: Event,
+    interpolateParams?: any
+  ): Promise<boolean | undefined> {
+    const messageKey = immediate === true ? 'CONFIRM.ACTION_IMMEDIATE' : 'CONFIRM.ACTION';
+    return Alerts.askConfirmation(messageKey, alertCtrl, translate, event, interpolateParams);
+  }
+
+  /**
+   * Ask the user to confirm. If return undefined: user has cancelled
+   *
+   * @pram messageKey i18n message key
+   * @param messageKey
+   * @param alertCtrl
+   * @param translate
+   * @param event
+   * @param interpolateParams
+   */
+  static async askConfirmation(
+    messageKey: string,
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    event?: Event,
+    interpolateParams?: any
+  ): Promise<boolean | undefined> {
+    if (!alertCtrl || !translate) throw new Error("Missing required argument 'alertCtrl' or 'translate'");
+    let confirm = false;
+    let cancel = false;
+    const translations = translate.instant(['COMMON.BTN_YES_CONTINUE', 'COMMON.BTN_CANCEL', messageKey, 'CONFIRM.ALERT_HEADER'], interpolateParams);
+    const alert = await alertCtrl.create({
+      header: translations['CONFIRM.ALERT_HEADER'],
+      message: translations[messageKey],
+      buttons: [
+        {
+          text: translations['COMMON.BTN_CANCEL'],
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            cancel = true;
+          },
+        },
+        {
+          text: translations['COMMON.BTN_YES_CONTINUE'],
+          handler: () => {
+            confirm = true; // update upper value
+          },
+        },
+      ],
+    });
+    await alert.present();
+    await alert.onDidDismiss();
+
+    if (confirm) return true; // = Do save and leave
+
+    if (cancel) {
+      // Stop the event
+      if (event) event.preventDefault();
+
+      return undefined; // User cancelled
+    }
+
+    return false; // Leave without saving
+  }
+
+  /**
+   * Ask the user to save before leaving. If return undefined: user has cancelled
+   *
+   * @param alertCtrl
+   * @param translate
+   * @param event
+   * @param interpolateParams
+   */
+  static async askDeleteConfirmation(
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    event?: Event,
+    interpolateParams?: any
+  ): Promise<boolean | undefined> {
+    let confirm = false;
+    let cancel = false;
+    const translations = translate.instant(
+      ['COMMON.BTN_YES_DELETE', 'COMMON.BTN_CANCEL', 'CONFIRM.DELETE', 'CONFIRM.ALERT_HEADER'],
+      interpolateParams
+    );
+    const alert = await alertCtrl.create({
+      header: translations['CONFIRM.ALERT_HEADER'],
+      message: translations['CONFIRM.DELETE'],
+      buttons: [
+        {
+          text: translations['COMMON.BTN_CANCEL'],
+          role: 'cancel',
+          cssClass: 'secondary',
+          handler: () => {
+            cancel = true;
+          },
+        },
+        {
+          text: translations['COMMON.BTN_YES_DELETE'],
+          handler: () => {
+            confirm = true; // update upper value
+          },
+        },
+      ],
+    });
+    await alert.present();
+    await alert.onDidDismiss();
+
+    if (confirm) return true; // = Do save and leave
+
+    if (cancel) {
+      // Stop the event
+      if (event) event.preventDefault();
+
+      return undefined; // User cancelled
+    }
+
+    return false; // Leave without saving
+  }
+
+  static async askSaveBeforeAction(
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    opts?: { valid?: boolean; validMessageI18n?: string; invalidMessageI18n?: string },
+    interpolateParams?: any
+  ): Promise<{ confirmed: boolean; save: boolean } | undefined> {
+    let save = false;
+    let confirmed = false;
+    let alert: HTMLIonAlertElement;
+    const validMessageI18n = opts?.validMessageI18n || 'CONFIRM.SAVE_BEFORE_CONTINUE';
+    const invalidMessageI18n = opts?.invalidMessageI18n || 'CONFIRM.CANCEL_CHANGES';
+
+    // Ask user before save
+    if (opts?.valid) {
+      const translations = translate.instant(
+        ['COMMON.BTN_CANCEL', 'COMMON.BTN_SAVE', 'COMMON.BTN_ABORT_CHANGES', 'CONFIRM.ALERT_HEADER', validMessageI18n],
+        interpolateParams
+      );
+      alert = await alertCtrl.create({
+        header: translations['CONFIRM.ALERT_HEADER'],
+        message: translations[validMessageI18n],
+        buttons: [
+          {
+            text: translations['COMMON.BTN_CANCEL'],
+            role: 'cancel',
+            cssClass: 'secondary',
+            handler: () => {},
+          },
+          {
+            text: translations['COMMON.BTN_ABORT_CHANGES'],
+            cssClass: 'secondary',
+            handler: () => {
+              confirmed = true;
+            },
+          },
+          {
+            text: translations['COMMON.BTN_SAVE'],
+            handler: () => {
+              save = true;
+              confirmed = true;
+            },
+          },
+        ],
+      });
+    } else {
+      const translations = translate.instant(
+        ['COMMON.BTN_ABORT_CHANGES', 'COMMON.BTN_CANCEL', 'CONFIRM.ALERT_HEADER', invalidMessageI18n],
+        interpolateParams
+      );
+
+      alert = await alertCtrl.create({
+        header: translations['CONFIRM.ALERT_HEADER'],
+        message: translations[invalidMessageI18n],
+        buttons: [
+          {
+            text: translations['COMMON.BTN_ABORT_CHANGES'],
+            cssClass: 'secondary',
+            handler: () => {
+              confirmed = true;
+            },
+          },
+          {
+            text: translations['COMMON.BTN_CANCEL'],
+            role: 'cancel',
+            handler: () => {},
+          },
+        ],
+      });
+    }
+
+    await alert.present();
+    await alert.onDidDismiss();
+
+    return { confirmed, save };
+  }
+
+  static async showError(
+    messageKey: string,
+    alertCtrl: AlertController,
+    translate: TranslateService,
+    opts?: {
+      titleKey?: string;
+    },
+    interpolateParams?: any
+  ) {
+    if (!messageKey || !alertCtrl || !translate) throw new Error("Missing a required argument ('messageKey', 'alertCtrl' or 'translate')");
+    const titleKey = (opts && opts.titleKey) || 'ERROR.ALERT_HEADER';
+    const translations = translate.instant(['COMMON.BTN_OK', messageKey, titleKey], interpolateParams);
+    const alert = await alertCtrl.create({
+      header: translations[titleKey],
+      message: translations[messageKey],
+      buttons: [
+        {
+          text: translations['COMMON.BTN_OK'],
+          role: 'cancel',
+        },
+      ],
+    });
+    await alert.present();
+    await alert.onDidDismiss();
+  }
+}

package/src/app/shared/audio/audio.testing.html

@@ -0,0 +1,29 @@
+<ion-toolbar color="primary">
+  <ion-title>Toasts</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+  <p>Toast examples:</p>
+
+  <ion-button (click)="playStartupSound()" color="dark">
+    <ion-icon name="play" slot="start"></ion-icon>
+    Startup
+  </ion-button>
+
+  <ion-button (click)="playBeepConfirm()" color="success">
+    <ion-icon name="play" slot="start"></ion-icon>
+    Confirmation
+  </ion-button>
+
+  <ion-button (click)="playBeepNotification()" color="tertiary">
+    <ion-icon name="play" slot="start"></ion-icon>
+    Notification
+  </ion-button>
+
+  <ion-button (click)="playBeepError()" color="accent">
+    <ion-icon name="play" slot="start"></ion-icon>
+    Error
+  </ion-button>
+
+  <ion-button (click)="vibrate()" color="accent">Vibrate (many time)</ion-button>
+</ion-content>

package/src/app/shared/audio/audio.testing.module.ts

@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { IonicModule } from '@ionic/angular';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { AudioTestingPage } from './audio.testing';
+
+const routes: Routes = [
+  {
+    path: 'audio',
+    pathMatch: 'full',
+    component: AudioTestingPage,
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, IonicModule, TranslateModule.forChild(), RouterModule.forChild(routes)],
+  declarations: [AudioTestingPage],
+  exports: [RouterModule, AudioTestingPage],
+})
+export class AudioTestingModule {}

package/src/app/shared/audio/audio.testing.ts

@@ -0,0 +1,27 @@
+import { Component } from '@angular/core';
+import { AudioProvider } from './audio';
+
+@Component({
+  selector: 'audio-testing',
+  templateUrl: 'audio.testing.html',
+})
+export class AudioTestingPage {
+  constructor(private audio: AudioProvider) {}
+
+  playBeepConfirm() {
+    return this.audio.playBeepConfirm();
+  }
+  playBeepError() {
+    return this.audio.playBeepError();
+  }
+  playStartupSound() {
+    return this.audio.playStartupSound();
+  }
+  playBeepNotification() {
+    return this.audio.playBeepNotification();
+  }
+
+  vibrate(duration?: number | number[]) {
+    return this.audio.vibrate(duration || [1000, 500, 1000, 500, 1000]);
+  }
+}