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

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

@@ -0,0 +1,133 @@
+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(private 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/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,117 @@
+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,30 @@
+
+<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,34 @@
+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,42 @@
+<ion-toolbar color="primary">
+  <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-checkbox [value]="defaultOptions.showCloseButton"  (ionChange)="toggleCloseButton()">
+        <ion-label>Close button ?</ion-label>
+      </ion-checkbox>
+    </ion-item>
+  </ion-list>
+
+
+</ion-content>

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

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

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

@@ -0,0 +1,58 @@
+import {Component, Injector} from '@angular/core';
+import {ToastController} from '@ionic/angular';
+import {ShowToastOptions, Toasts} from './toasts';
+import {TranslateService} from '@ngx-translate/core';
+
+@Component({
+  selector: 'toast-testing',
+  templateUrl: 'toast.testing.html'
+})
+export class ToastTestingPage  {
+
+  readonly defaultOptions: ShowToastOptions = {
+    showCloseButton: false
+  };
+
+  constructor(
+    private injector: Injector
+  ) {
+  }
+
+  showToast(opts?: ShowToastOptions) {
+    return Toasts.showSimple(this.injector, {
+      ...this.defaultOptions,
+      duration: 5000, // 5s
+      message: 'This is a message',
+      ...opts
+    });
+  }
+
+  showInfo(opts?: ShowToastOptions) {
+   return this.showToast({
+     type: 'info',
+     message: 'This is a info text !',
+     ...opts
+   });
+  }
+
+  showWarning(opts?: ShowToastOptions) {
+    return this.showToast({
+      type: 'warning',
+      message: 'This is a warning text !',
+      ...opts
+    });
+  }
+
+  showError(opts?: ShowToastOptions) {
+    return this.showToast({
+      type: 'error',
+      message: 'This is a error text !',
+      ...opts
+    });
+  }
+
+
+  toggleCloseButton() {
+    this.defaultOptions.showCloseButton = !this.defaultOptions.showCloseButton;
+  }
+}