@sumaris-net/ngx-components 18.11.0 → 18.12.0

package/src/app/shared/storage/storage.service.ts

@@ -0,0 +1,131 @@
+import { Inject, Injectable } from '@angular/core';
+import { Storage } from '@ionic/storage-angular';
+import { IStorage, StorageDrivers } from './storage.utils';
+import { StartableService } from '../services/startable-service.class';
+import { Platform } from '@ionic/angular';
+import { environment } from '../../../environments/environment';
+import { ENVIRONMENT, Environment } from '../../../environments/environment.class';
+import * as cordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
+
+@Injectable({
+  providedIn: 'root',
+  deps: [ENVIRONMENT],
+})
+export class StorageService extends StartableService<Storage> implements IStorage<Storage> {
+  get driver(): string | undefined {
+    return this._data?.driver;
+  }
+
+  constructor(
+    platform: Platform,
+    private storage: Storage,
+    @Inject(ENVIRONMENT) private environment: Environment
+  ) {
+    super(platform);
+    this._debug = !environment.production;
+    this.start();
+  }
+
+  protected async ngOnStart(): Promise<Storage> {
+    try {
+      console.debug(`[storage] Starting... {driverOrder: ${environment.storage?.driverOrder}}`);
+
+      // Define Cordova SQLLite driver
+      await this.storage.defineDriver(cordovaSQLiteDriver);
+
+      // Create the storage instance
+      const storage = await this.storage.create();
+
+      // Migrate from old storage
+      await this.migrate(storage);
+
+      console.info(`[storage] Started using driver: ${storage?.driver}`);
+      return storage;
+    } catch (err) {
+      console.error('[storage] Cannot create storage: ' + (err?.message || err), err);
+    }
+  }
+
+  protected async migrate(storage: Storage) {
+    const canMigrate = storage?.driver === StorageDrivers.SQLLite;
+
+    if (!canMigrate) return; // Skip
+
+    //
+    // const oldForage = storage.createInstance({
+    //   name: storage.config().name,
+    //   storeName: storage.config().storeName,
+    //   driver: [storage.INDEXEDDB, storage.WEBSQL]
+    // });
+    //
+    // const keys = await oldForage.keys();
+    //
+    // // No data in the odl storage: skip migration
+    // if (isEmptyArray(keys)) {
+    //   // Drop the old instance (not need anymore)
+    //   console.debug(`[platform] Old storage is empty: dropping unused instance {name: '${storage.config().name}', driver: '${oldForage.driver()}'}`);
+    //   await oldForage.dropInstance();
+    // }
+    // // IF some data stored in the OLD storage: start migration
+    // else {
+    //
+    //   const now = Date.now();
+    //   console.info(`[platform] Starting storage migration...`);
+    //
+    //   const toast = await this.showToast({message: 'INFO.DATA_MIGRATION_STARTED', type: 'info', duration: 30000});
+    //   try {
+    //     await StorageUtils.copy(oldForage, storage, {keys, deleteAfterCopy: false});
+    //
+    //     const duration = Date.now() - now;
+    //     setTimeout(() => toast.dismiss(),  Math.max(2000 - duration, 0));
+    //     await this.showToast({message: 'INFO.DATA_MIGRATION_SUCCEED',
+    //       type: 'info',
+    //       showCloseButton: true
+    //     });
+    //     console.info('[platform] Starting storage migration [OK]');
+    //
+    //     // Drop the old instance
+    //     console.info(`[platform] Drop old storage {name: '${storage.config().name}', driver: '${oldForage.driver()}'}`);
+    //     await oldForage.dropInstance();
+    //   }
+    //   catch (err) {
+    //     console.error(err && err.message || err, err);
+    //     await toast.dismiss();
+    //     await this.showToast({message: 'ERROR.DATA_MIGRATION_FAILED',
+    //       type: 'error',
+    //       showCloseButton: true
+    //     });
+    //   }
+    //}
+  }
+
+  async set(key: string, value: any) {
+    if (!this.started) await this.ready();
+    return this._data.set(key, value);
+  }
+
+  async get(key: string): Promise<any> {
+    if (!this.started) await this.ready();
+    return this._data.get(key);
+  }
+
+  async remove(key: string) {
+    if (!this.started) await this.ready();
+    return this._data.remove(key);
+  }
+
+  async keys(): Promise<string[]> {
+    if (!this.started) await this.ready();
+    return this._data.keys();
+  }
+
+  async clear() {
+    if (!this.started) await this.ready();
+    await this._data.clear();
+  }
+
+  async forEach(iteratorCallback: (value: any, key: string, iterationNumber: number) => any): Promise<void> {
+    if (!this.started) await this.ready();
+    return this._data.forEach(iteratorCallback);
+  }
+}

package/src/app/shared/storage/storage.utils.ts

@@ -0,0 +1,25 @@
+import { InjectionToken } from '@angular/core';
+import { Drivers } from '@ionic/storage';
+import * as LocalForage from 'localforage';
+import * as CordovaSQLiteDriver from 'localforage-cordovasqlitedriver';
+
+export interface IStorage<T = any> {
+  readonly driver: string;
+  ready(): Promise<T>;
+  set(key: string, value: any): Promise<void>;
+  get(key: string): Promise<any>;
+  remove(key: string): Promise<void>;
+  keys(): Promise<string[]>;
+  clear(): Promise<void>;
+  forEach(iteratorCallback: (value: any, key: string, iterationNumber: number) => any): Promise<void>;
+}
+
+export const StorageDrivers = {
+  SQLLite: CordovaSQLiteDriver._driver,
+  SecureStorage: Drivers.SecureStorage,
+  WebSQL: LocalForage.WEBSQL,
+  IndexedDB: Drivers.IndexedDB,
+  LocalStorage: Drivers.LocalStorage,
+};
+
+export const APP_STORAGE = new InjectionToken<IStorage>('Storage');

package/src/app/shared/testing/maskito.test.html

@@ -0,0 +1,40 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Maskito test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <form [formGroup]="form">
+    <ion-grid>
+      <ion-row>
+        <ion-col>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                <ion-label color="primary">Test Strategy Pattern</ion-label>
+              </ion-card-title>
+            </ion-card-header>
+            <ion-card-content>
+              <mat-form-field>
+                <input
+                  matInput
+                  #strategyInput
+                  formControlName="strategy"
+                  autocomplete="off"
+                  type="text"
+                  [maskito]="'__ _______ ___' | maskitoPlaceholder: labelMask"
+                  placeholder="Strategy field"
+                />
+              </mat-form-field>
+            </ion-card-content>
+          </ion-card>
+        </ion-col>
+      </ion-row>
+    </ion-grid>
+  </form>
+</ion-content>

package/src/app/shared/testing/maskito.test.ts

@@ -0,0 +1,33 @@
+import { Component } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+
+@Component({
+  selector: 'app-maskito-test',
+  templateUrl: './maskito.test.html',
+})
+export class MaskitoTestPage {
+  form: UntypedFormGroup;
+
+  labelMask: (string | RegExp)[] = [
+    /\d/,
+    /\d/,
+    ' ',
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    /^[a-zA-Z]$/,
+    ' ',
+    /\d/,
+    /\d/,
+    /\d/,
+  ];
+
+  constructor(protected formBuilder: UntypedFormBuilder) {
+    this.form = formBuilder.group({
+      strategy: [null],
+    });
+  }
+}

package/src/app/shared/testing/observable.test.html

@@ -0,0 +1,53 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Observables test page</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content class="ion-padding">
+  <ion-card>
+    <ion-card-header>
+      <ion-card-title>waitFor, waitForTrue, waitForFalse</ion-card-title>
+    </ion-card-header>
+    <ion-card-content>
+      <div style="display: inline-block">
+        <p>Set options:</p>
+        <ion-button color="medium" fill="outline" (click)="setOptions({ stopError: false })">
+          stopError: false
+        </ion-button>
+        <ion-button color="medium" fill="outline" (click)="setOptions({ stopError: true })">stopError: true</ion-button>
+        <ion-button color="medium" fill="outline" (click)="setOptions({ stopError: 'my error' })">
+          stopError: 'my error'
+        </ion-button>
+
+        <ion-button color="medium" fill="outline" (click)="setOptions({ timeout: 2000 })">timeout: 2000</ion-button>
+        <ion-button color="medium" fill="outline" (click)="setOptions({ timeout: null })">timeout: null</ion-button>
+        <br />
+        <p>Call await function:</p>
+        <ion-button (click)="waitForTrue()">waitForTrue</ion-button>
+        <ion-button (click)="firstNotNilPromise()">firstNotNilPromise</ion-button>
+        <br />
+        <p>Send event to source:</p>
+        <ion-button (click)="emit(true)">Emit 'true'</ion-button>
+        <ion-button (click)="emit(false)">Emit 'false'</ion-button>
+        <br />
+        <p>Stop:</p>
+        <ion-button color="danger" (click)="stop()">Stop</ion-button>
+      </div>
+    </ion-card-content>
+  </ion-card>
+
+  <ion-card>
+    <ion-toolbar>
+      <ion-title>Running job count: {{ runningTaskCount }}</ion-title>
+      <ion-button fill="outline" slot="end" (click)="result.innerHTML = ''">Clear log</ion-button>
+    </ion-toolbar>
+    <ion-card-content>
+      <div #result style="color: var(--ion-color-medium)"></div>
+    </ion-card-content>
+  </ion-card>
+</ion-content>

package/src/app/shared/testing/observable.test.scss

@@ -0,0 +1,3 @@
+ion-button {
+  text-transform: none !important;
+}

package/src/app/shared/testing/observable.test.ts

@@ -0,0 +1,101 @@
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { firstNotNilPromise, FirstOptions, WaitForOptions, waitForTrue } from '../observables';
+import { Observable, Subject } from 'rxjs';
+import { isNotNil } from '../functions';
+import { tap } from 'rxjs/operators';
+import { DateUtils, toDateISOString } from '../dates';
+
+@Component({
+  selector: 'app-observable-test',
+  templateUrl: './observable.test.html',
+  styleUrls: ['./observable.test.scss'],
+})
+export class ObservableTestPage implements OnDestroy {
+  _stopSubject = new Subject<void>();
+
+  $value = new Subject<any>();
+  runningTaskCount = 0;
+  taskId = 0;
+  options: Partial<FirstOptions> = {
+    stop: this._stopSubject,
+  };
+
+  @ViewChild('result') resultDiv!: ElementRef;
+
+  constructor() {}
+
+  ngOnDestroy() {
+    this._stopSubject.next();
+  }
+
+  setOptions(opts: any) {
+    this.options = {
+      ...this.options,
+      ...opts,
+    };
+    this.log('Options changes to: ', { ...this.options, stop: this.options?.stop ? '$stop' : 'null' });
+  }
+
+  setOptionsError(errorMessage) {
+    this.setOptions({ stopError: new Error(errorMessage) });
+  }
+
+  async firstNotNilPromise(opts?: FirstOptions) {
+    const logPrefix = `[firstNotNilPromise() #${++this.taskId}] `;
+    await this.execute(firstNotNilPromise, opts, logPrefix);
+  }
+
+  async waitForTrue(opts?: WaitForOptions) {
+    const logPrefix = `[waitForTrue() #${++this.taskId}] `;
+    await this.execute(waitForTrue, opts, logPrefix);
+  }
+
+  async execute<T, O extends WaitForOptions = WaitForOptions>(fn: (o: Observable<any>, opts: O) => Promise<T>, opts?: O, logPrefix?: string) {
+    opts = {
+      ...this.options,
+      stop: this._stopSubject,
+      ...opts,
+    };
+    logPrefix = logPrefix || `[#${++this.taskId}] `;
+
+    const value$ = this.$value.pipe(tap((value) => this.log(logPrefix + `Received value: ${value}`)));
+
+    try {
+      this.runningTaskCount++;
+      this.log(logPrefix + 'Waiting...');
+
+      // Execute the async function
+      const result = await fn(value$, opts);
+
+      // Dump result
+      if (isNotNil(result)) this.log(logPrefix + '[OK] with result:', result);
+      else this.log(logPrefix + '[OK]');
+    } catch (err) {
+      const errorMsg = logPrefix + 'Error: ' + (err?.message || '');
+      console.error(errorMsg, err);
+      this.log(errorMsg + (err?.originalStack ? `<pre>${err.originalStack}</pre>` : ''));
+    } finally {
+      this.runningTaskCount--;
+    }
+  }
+
+  emit(value: any) {
+    this.$value.next(value);
+  }
+
+  stop() {
+    this._stopSubject.next();
+  }
+
+  log(message: string, ...args: any) {
+    let fullMessage = `${toDateISOString(DateUtils.moment())} - ${message}`;
+    if (args?.length) {
+      fullMessage += ' - <small>' + args.map(JSON.stringify).join(', ') + '</small>';
+    }
+    this.appendLog(fullMessage);
+  }
+
+  appendLog(message: string) {
+    this.resultDiv.nativeElement.innerHTML += message + '<br/>';
+  }
+}

package/src/app/shared/testing/tests.page.html

@@ -0,0 +1,22 @@
+<ion-header>
+  <ion-toolbar color="primary">
+    <ion-buttons slot="start">
+      <ion-menu-button></ion-menu-button>
+      <ion-back-button></ion-back-button>
+    </ion-buttons>
+
+    <ion-title>Tests</ion-title>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <ion-list *ngIf="pages?.length">
+    <ng-container *ngFor="let item of pages">
+      <ion-item-divider *ngIf="item.divider; else link">{{ item.label }}</ion-item-divider>
+
+      <ng-template #link>
+        <ion-item tappable class="text-1x" (click)="openPage(item.page)">{{ item.label }}</ion-item>
+      </ng-template>
+    </ng-container>
+  </ion-list>
+</ion-content>

package/src/app/shared/testing/tests.page.ts

@@ -0,0 +1,32 @@
+import { Component, Inject, InjectionToken, Optional } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
+
+export declare interface TestingPage {
+  label: string;
+  page?: string;
+  divider?: boolean;
+}
+
+export const APP_TESTING_PAGES = new InjectionToken<TestingPage[]>('testingPages');
+
+@Component({
+  selector: 'app-tests-page',
+  templateUrl: './tests.page.html',
+})
+export class SharedTestsPage {
+  constructor(
+    protected route: ActivatedRoute,
+    protected router: Router,
+    protected translate: TranslateService,
+    @Optional() @Inject(APP_TESTING_PAGES) public pages: TestingPage[]
+  ) {
+    console.info('[testing] Loaded tests pages:', pages);
+  }
+
+  async openPage(page): Promise<boolean> {
+    return this.router.navigate([page], {
+      relativeTo: this.route,
+    });
+  }
+}

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

@@ -0,0 +1,50 @@
+<ion-toolbar color="primary" id="header">
+  <ion-title>Toasts</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+  <p>Toast examples:</p>
+
+  <ion-button (click)="showToast()" color="dark">default</ion-button>
+
+  <ion-button (click)="showInfo()" color="secondary">info</ion-button>
+
+  <ion-button (click)="showWarning()" color="accent">warning</ion-button>
+
+  <ion-button (click)="showError()" color="danger">error</ion-button>
+
+  <ion-button (click)="showInfo({ message: 'This is <b>HTML</b> text' })" color="danger">message with HTML</ion-button>
+  <br />
+
+  <ion-list>
+    <ion-item>
+      <ion-label>Header (optional)</ion-label>
+      <ion-input [(ngModel)]="options.header"></ion-input>
+    </ion-item>
+    <ion-item>
+      <ion-label>Message</ion-label>
+      <ion-input [(ngModel)]="options.message"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-checkbox [(ngModel)]="options.showCloseButton">
+        <ion-label>Close button ?</ion-label>
+      </ion-checkbox>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Duration</ion-label>
+      <ion-input [(ngModel)]="options.duration"></ion-input>
+    </ion-item>
+
+    <ion-item>
+      <ion-label>Position</ion-label>
+      <ion-select [(ngModel)]="options.position">
+        <ion-select-option value="auto">auto</ion-select-option>
+        <ion-select-option value="top">top</ion-select-option>
+        <ion-select-option value="bottom">bottom</ion-select-option>
+        <ion-select-option value="middle">middle</ion-select-option>
+      </ion-select>
+    </ion-item>
+  </ion-list>
+</ion-content>

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

@@ -0,0 +1,22 @@
+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 { ToastTestingPage } from './toast.testing';
+import { FormsModule } from '@angular/forms';
+
+const routes: Routes = [
+  {
+    path: 'toast',
+    pathMatch: 'full',
+    component: ToastTestingPage,
+  },
+];
+
+@NgModule({
+  imports: [CommonModule, IonicModule, TranslateModule.forChild(), RouterModule.forChild(routes), FormsModule],
+  declarations: [ToastTestingPage],
+  exports: [RouterModule, ToastTestingPage],
+})
+export class ToastTestingModule {}

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

@@ -0,0 +1,52 @@
+import { Component, Injector } from '@angular/core';
+import { ShowToastOptions, Toasts } from './toasts';
+
+@Component({
+  selector: 'toast-testing',
+  templateUrl: 'toast.testing.html',
+})
+export class ToastTestingPage {
+  protected options: ShowToastOptions = {
+    showCloseButton: false,
+    duration: -1, // 5000, // 5s
+    header: undefined,
+    message: 'This is a message text !',
+    positionAnchor: 'header',
+    position: 'top',
+  };
+
+  constructor(private injector: Injector) {}
+
+  showToast(opts?: ShowToastOptions) {
+    return Toasts.showSimple(this.injector, {
+      ...this.options,
+      position: this.options.position === ('auto' as any) ? null : this.options.position,
+      ...opts,
+    });
+  }
+
+  showInfo(opts?: ShowToastOptions) {
+    return this.showToast({
+      type: 'info',
+      ...opts,
+    });
+  }
+
+  showWarning(opts?: ShowToastOptions) {
+    return this.showToast({
+      type: 'warning',
+      ...opts,
+    });
+  }
+
+  showError(opts?: ShowToastOptions) {
+    return this.showToast({
+      type: 'error',
+      ...opts,
+    });
+  }
+
+  toggleCloseButton() {
+    this.options.showCloseButton = !this.options.showCloseButton;
+  }
+}