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

package/src/app/shared/services/startable-service.class.ts

@@ -0,0 +1,131 @@
+import {Optional} from '@angular/core';
+import {Subject, Subscription} from 'rxjs';
+import {takeUntil} from 'rxjs/operators';
+
+export interface IStartableService<T = any> {
+  started: boolean;
+  start(): Promise<T>;
+  stop(): Promise<void>;
+  ready(): Promise<T>;
+}
+
+export function isStartableService(data: any): data is IStartableService {
+  return (typeof data?.['start'] === 'function')
+    && (typeof data?.['stop'] === 'function')
+    && (typeof data?.['ready'] === 'function')
+    ;
+}
+
+export abstract class StartableService<T = any, O = any> implements IStartableService<T> {
+
+  readonly startSubject = new Subject<T>();
+  readonly stopSubject = new Subject<void>();
+
+  protected _debug = false;
+  protected _startByReadyFunction = true; // should start when calling ready() ?
+  protected _data: T = null;
+
+  private _started = false;
+  private _startPromise: Promise<T> = null;
+  private _startPrerequisite: () => Promise<any> = null;
+  private _subscription: Subscription = null;
+
+  protected constructor(
+    @Optional() prerequisiteService?: { ready: () => Promise<any> }
+  ) {
+    this._startPrerequisite = prerequisiteService
+      ? () => prerequisiteService.ready()
+      : () => Promise.resolve();
+  }
+
+  start(opts?: O): Promise<T> {
+    if (this._startPromise) return this._startPromise;
+    if (this._started) return Promise.resolve(this._data);
+
+    this._startPromise = this._startPrerequisite()
+      .then(() => this.ngOnStart(opts))
+      .then(data => {
+        this._data = data;
+
+        this._started = true;
+        this._startPromise = undefined;
+
+        this.startSubject.next(data);
+
+        return data;
+      })
+      .catch(err => {
+        if (!this.stopped) {
+          console.error('Failed to start a service: ' + (err && err.message || err), err);
+          this._startPromise = null;
+          this._started = false;
+        }
+        return null;
+      });
+    return this._startPromise;
+  }
+
+  ready(): Promise<T> {
+    if (this._started) return Promise.resolve(this._data);
+    if (this._startPromise) return this._startPromise;
+    if (this._startByReadyFunction) return this.start();
+
+    return this.startSubject
+      .pipe(takeUntil(this.stopSubject))
+      .toPromise();
+  }
+
+  async stop() {
+    try {
+      this.unsubscribe();
+      await this.ngOnStop();
+    }
+    catch (err) {
+      console.error('Failed to stop a service: ' + (err && err.message || err), err);
+    }
+    finally {
+      this._data = null;
+      this._started = false;
+      this._startPromise = undefined;
+      this.stopSubject.next();
+    }
+  }
+
+  async restart(opts?: O): Promise<T> {
+    if (this._startPromise) await this._startPromise; // Wait end of previous loading
+    if (this._started) await this.stop(); // Then stop if started
+    return this.start(opts); // Then start again
+  }
+
+  get started(): boolean {
+    return this._started;
+  }
+
+  get starting(): boolean {
+    return !!this._startPromise;
+  }
+
+  get stopped(): boolean {
+    return !this._started && !this._startPromise;
+  }
+
+  protected registerSubscription(sub: Subscription) {
+    this._subscription = this._subscription || new Subscription();
+    this._subscription.add(sub);
+  }
+
+  protected unregisterSubscription(sub: Subscription): void {
+    this._subscription?.remove(sub);
+  }
+
+  protected unsubscribe() {
+    this._subscription?.unsubscribe();
+    this._subscription = null;
+  }
+
+  protected ngOnStop(): Promise<void> | void {
+    // Can be overwritten by subclasses
+  }
+
+  protected abstract ngOnStart(opts?: O): Promise<T>;
+}

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

@@ -0,0 +1,47 @@
+import {isEmptyArray} from '../functions';
+import {chainPromises} from '../observables';
+
+export class StorageUtils {
+
+  /**
+   * Copy one storage content, into anthoer
+   *
+   * @param from
+   * @param to
+   */
+  static async copy(from: LocalForage, to: LocalForage, options?: {
+      keys: string[];
+      deleteAfterCopy?: boolean;
+    }) {
+    if (!from || !to || from === to) throw new Error('Invalid \'from\' or \'to\' arguments. Must be not null storage');
+
+    options = {deleteAfterCopy: false, ...options};
+
+    // Get keys to copy
+    const keys = options.keys || (await from.keys());
+    if (isEmptyArray(keys)) return Promise.resolve(); // Nothing to copy
+
+    const now = Date.now();
+    console.info(`[storage-utils] Copying ${keys.length} keys from '${from.driver()}' to '${to.driver()}'... {deleteAfterCopy: ${options.deleteAfterCopy}`);
+    let errorCount = 0;
+
+    return chainPromises(
+      keys.map(key => () => from.getItem(key)
+        .then((data) => to.setItem(key, data))
+        .then(() => options.deleteAfterCopy && from.removeItem(key))
+        .catch((err) => {
+          console.error(`[storage-utils] Error during migration of key '${key}'`, err);
+          errorCount++;
+        }))
+    )
+      .then(() => {
+        if (errorCount === 0) {
+          console.info(`[storage-utils] Migrating data [OK] in ${Date.now() - now}ms`);
+        }
+        else {
+          throw {message: 'ERROR.COPY_STORAGE_ERROR'};
+        }
+      });
+  }
+}
+

package/src/app/shared/services/translate-context.service.ts

@@ -0,0 +1,116 @@
+import {Injectable} from '@angular/core';
+import {TranslateService} from '@ngx-translate/core';
+import {map, mergeMap} from 'rxjs/operators';
+import {Observable, of} from 'rxjs';
+import {isNil, isNilOrBlank, isNotNilOrBlank} from '../functions';
+
+
+@Injectable({providedIn: 'root'})
+export class TranslateContextService {
+
+  constructor(
+    protected translate: TranslateService
+  ) {
+  }
+
+
+  get(key: string|string[], context?: string, interpolateParams?: Object): Observable<any> {
+    // No context: do a normal translate
+    if (!key || !isNil(context)) return this.translate.get(key, interpolateParams);
+
+    if (Array.isArray(key)) {
+      if (!key.length) return of();
+      // Observe the first key, then add other
+      return this.get(key[0])
+        .pipe(map(
+          translation => {
+                return key.slice(1) // Skip 1, because we already have it
+                  .reduce((map, k) => {
+                    map[k] = this.instant(k, context);
+                    return map;
+                  },
+                  // Init with the first value
+                  {
+                    [key[0]]: translation
+                  });
+          })
+        );
+    }
+
+    // Compute a contextual i18n key, using the context as suffix
+    const contextualKeys = this.contextualKeys(key, context);
+
+    // Return the contextual translation, or default of not exists
+    return this.translate.get(contextualKeys, interpolateParams)
+      .pipe(
+        map(translations => this.findFirstValid(contextualKeys, translations))
+      );
+  }
+
+  instant(key: string|string[], context?: string, interpolateParams?: Object): any {
+    // No context: do a normal translate
+    if (!key || isNilOrBlank(context)) return this.translate.instant(key, interpolateParams);
+
+    if (Array.isArray(key)) {
+      return key.reduce((map, k) => {
+        map[k] = this.instant(k, context);
+        return map;
+      }, {});
+    }
+
+    // Compute a contextual i18n key, using the context as suffix
+    const contextualKeys = this.contextualKeys(key, context);
+    const translations = this.translate.instant(contextualKeys, interpolateParams);
+
+    return this.findFirstValid(contextualKeys, translations);
+  }
+
+  /**
+   * Compute contextual i18n keys, using the context as suffix.<br>
+   * Suffix can be simple name (like 'aaa' - will return ['<key>.aaa']) or complexe (like 'aaa.bbb' - will return ['<key>.aaa.bbb', '<key>.aaa']
+   *
+   * @param key
+   * @param context
+   * @private
+   */
+  contextualKeys(key: string, context: string): string[] {
+    return context.split('.')
+      .filter(isNotNilOrBlank)
+      .reduce((res, item) => {
+        const inheritedContext = res.length > 0 ? (res[res.length - 1] + '.') : '';
+        return res.concat( inheritedContext + item)
+      }, [])
+      .reverse() // Start with children, ends with parent key
+      .map(contextItem => this.contextualKey(key, contextItem))
+      .concat(key)
+  }
+
+  /**
+   * Compute a contextual i18n key, using the context as suffix
+   *
+   * @param key
+   * @param context
+   * @private
+   */
+  contextualKey(key: string, context: string): string {
+
+    // Append a dot on context if missing
+    if (!context.endsWith('.')) {
+      context = context + '.';
+    }
+
+    // Compute a contextual i18n key, using the context as suffix
+    const parts = key.split('.');
+    return (parts.length === 1)
+      ? `${context}${key}`
+      : parts.slice(0, parts.length - 1).concat(context + parts[parts.length - 1]).join('.');
+  }
+
+  private findFirstValid(keys: string[], translations: { [key: string]: string }): string {
+    // For eac contextual key: try to find translation, then use the first valid
+    for (let key of keys) {
+      if (translations[key] !== key) return translations[key];
+    }
+    return translations[keys[keys.length-1]]; // Return the last keys translation
+  }
+}

package/src/app/shared/services/validator-service.class.ts

@@ -0,0 +1,14 @@
+import {ValidatorService} from '@e-is/ngx-material-table';
+import {AbstractControl, UntypedFormGroup} from '@angular/forms';
+
+export interface IValidatorService<T> extends ValidatorService {
+
+  getFormGroup(data?: T): UntypedFormGroup;
+
+  /**
+   * Compute errors from a controls
+   * @param control any control, or FormGroup, or FormArray
+   */
+  getI18nFormErrors(control: AbstractControl): string[];
+
+}

package/src/app/shared/services.ts

@@ -0,0 +1,91 @@
+import {LoadResult} from './services/entity-service.class';
+import {
+  getPropertyByPathAsString,
+  isNotEmptyArray,
+  isNotNil,
+  isNotNilOrBlank,
+  matchUpperCase,
+  propertiesPathComparator,
+  startsWithUpperCase
+} from './functions';
+
+export function suggestFromArray<T = any>(items: T[], value: any, opts?: {
+  offset?: number;
+  size?: number;
+  searchAttribute?: string;
+  searchAttributes?: string[];
+  excludedIds?: number[];
+  skipSort?: boolean;
+}): LoadResult<T> {
+  if (isNotNil(value) && typeof value === 'object') return {data: [value]};
+
+  value = (typeof value === 'string' && value !== '*') && value.toUpperCase() || undefined;
+
+  const keys = opts && (opts.searchAttribute && [opts.searchAttribute] || opts.searchAttributes) || ['label'];
+
+  if (!items) {
+    return {data: [], total: 0};
+  }
+
+  // Filter items
+  let filteredItems = items;
+  if (isNotNilOrBlank(value)) {
+
+    // If wildcard, search using regexp
+    if ((value as string).indexOf('*') !== -1) {
+      value = (value as string).replace(/[*]+/g, '.*');
+      filteredItems = filteredItems.filter(v => keys.findIndex(key => matchUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
+    }
+    // Else (no wildcard), search using startsWith
+    else {
+      filteredItems = filteredItems.filter(v => keys.findIndex(key => startsWithUpperCase(getPropertyByPathAsString(v, key), value)) !== -1);
+    }
+  }
+
+  // Exclude ids
+  if (isNotEmptyArray(opts?.excludedIds)) {
+    filteredItems = filteredItems.filter(v => !opts.excludedIds.includes(+v['id']));
+  }
+
+  // Sort
+  if (!opts || opts.skipSort !== true) {
+
+    // Make to copy input items, before sorting (if not yet already done)
+    if (filteredItems === items) filteredItems = filteredItems.slice();
+
+    // Sort by keys
+    filteredItems.sort(propertiesPathComparator(keys));
+  }
+
+  const total = filteredItems.length || 0;
+
+  // Pagination (truncate if need)
+  let pageData = filteredItems;
+  if (opts) {
+    if ((opts.offset || 0) > 0) {
+      pageData = pageData.slice(opts.offset);
+    }
+    if (isNotNil(opts.size) && pageData.length > opts.size) {
+      pageData = pageData.slice(0, opts.size);
+    }
+  }
+
+  const result: LoadResult<T> = {
+    data: pageData,
+    total
+  };
+
+  // Add fetch more capability, if total was fetched
+  const nextOffset = (opts && opts.offset || 0) + pageData.length;
+  if (nextOffset < total) {
+    result.fetchMore = async (_) => suggestFromArray(filteredItems, undefined /*OPTIMISATION: already applied*/,
+      {
+        ...opts,
+        offset: nextOffset,
+        skipSort: true, // OPTIMISATION: already sorted
+        excludedIds: undefined // OPTIMISATION: already filtered
+      });
+  }
+
+  return result;
+}

package/src/app/shared/shared-routing.module.ts

@@ -0,0 +1,66 @@
+import {Injectable, NgModule} from '@angular/core';
+import {ActivatedRouteSnapshot, RouteReuseStrategy, RouterModule} from '@angular/router';
+import {IonicRouteStrategy} from '@ionic/angular';
+import {ComponentDirtyGuard} from './guard/component-dirty.guard';
+import {isNil, isNotNil} from './functions';
+
+
+@Injectable()
+export class CustomReuseStrategy extends IonicRouteStrategy {
+
+  /**
+   * Force to reuse the route when:
+   *  - path change from [/new] -> [/:id]
+   *  - or path change from [/new] -> [/new?id=:id]
+   * @param future
+   * @param curr
+   */
+  shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+    const reuse = super.shouldReuseRoute(future, curr);
+
+    // Is sam route config
+    if (!reuse && future.routeConfig && future.routeConfig === curr.routeConfig) {
+      // Read the parameter name, where id is stored
+      const pathIdParam = future.routeConfig.data && future.routeConfig.data.pathIdParam || 'id';
+
+      // Read the current route id
+      const currId = curr.params[pathIdParam] === 'new'
+        ? (curr.queryParams[pathIdParam] || curr.queryParams['id'] || 'new') // e.g. path like '/new/?id=<ID>'
+        : curr.params[pathIdParam]; // e.g. path like '/<ID>'
+
+      // Read the future route id
+      const futureId = future.params[pathIdParam] === 'new'
+        ? (future.queryParams[pathIdParam] || future.queryParams['id'] || 'new') // e.g. path like '/new/?id=<ID>'
+        : future.params[pathIdParam]; // e.g. path like '/<ID>'
+
+      // Reuse if same ID, using a futureId, if exists
+      if (isNotNil(futureId)) {
+        // Allow reuse when changing from /new to /new?id=:id
+        if (currId === 'new' && isNil(curr.queryParams[pathIdParam]) && future.params[pathIdParam] === 'new' && isNotNil(future.queryParams[pathIdParam])) {
+          return true;
+        }
+
+        // Allow reuse same id, expect when expected '/new'
+        return futureId !== 'new' && futureId === currId;
+      }
+    }
+
+    return reuse;
+  }
+}
+
+@NgModule({
+  imports: [
+    RouterModule
+  ],
+  providers: [
+    { provide: RouteReuseStrategy, useClass: CustomReuseStrategy },
+    { provide: ComponentDirtyGuard, useClass: ComponentDirtyGuard }
+  ]
+})
+export class SharedRoutingModule {
+
+  constructor() {
+    console.debug('[shared-routing] Creating module...');
+  }
+}

package/src/app/shared/shared.module.spec.ts

@@ -0,0 +1,13 @@
+import {SharedModule} from './shared.module';
+
+describe('SharedModule', () => {
+    let sharedModule: SharedModule;
+
+    beforeEach(() => {
+        sharedModule = new SharedModule();
+    });
+
+    it('should create an instance', () => {
+        expect(sharedModule).toBeTruthy();
+    });
+});

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

@@ -0,0 +1,146 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedMaterialModule } from './material/material.module';
+import { ReactiveFormsModule } from '@angular/forms';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { IonicModule } from '@ionic/angular';
+import { DateFormatService } from './pipes/date-format.pipe';
+import { DateFromNowPipe } from './pipes/date-from-now.pipe';
+import { TextMaskModule } from 'angular2-text-mask';
+import { MatPaginatorIntl } from '@angular/material/paginator';
+import { MatPaginatorI18n } from './material/paginator/material.paginator-i18n';
+import { ColorPickerModule } from 'ngx-color-picker';
+import { AppFormField } from './form/field.component';
+import { AudioProvider } from './audio/audio';
+import { CloseScrollStrategy, FullscreenOverlayContainer, Overlay, OverlayContainer } from '@angular/cdk/overlay';
+import { SharedHotkeysModule } from './hotkeys/shared-hotkeys.module';
+import { FileService } from './file/file.service';
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, MAT_AUTOCOMPLETE_SCROLL_STRATEGY } from '@angular/material/autocomplete';
+import { MAT_SELECT_SCROLL_STRATEGY } from '@angular/material/select';
+import { SharedDirectivesModule } from './directives/directives.module';
+import { SharedPipesModule } from './pipes/pipes.module';
+import { AppLoadingSpinner } from './form/loading-spinner';
+import { DateDiffDurationPipe } from './pipes/date-diff-duration.pipe';
+import { LatitudeFormatPipe, LatLongFormatPipe, LongitudeFormatPipe } from './pipes/latlong-format.pipe';
+import { HighlightPipe } from './pipes/highlight.pipe';
+import { NumberFormatPipe } from './pipes/number-format.pipe';
+import { MarkdownModule } from 'ngx-markdown';
+import { AppHelpModal } from './help/help.modal';
+import { Environment, ENVIRONMENT } from '../../environments/environment.class';
+import { TranslateContextService } from './services/translate-context.service';
+import { MatStepperIntl } from '@angular/material/stepper';
+import { MatStepperI18n } from './material/stepper/material.stepper-i18n';
+import { UploadFileComponent } from './upload-file/upload-file.component';
+import { UploadFilePopover } from './upload-file/upload-file-popover.component';
+import { SharedTestsPage } from './testing/tests.page';
+import { APP_STORAGE } from './storage/storage.utils';
+import { StorageService } from './storage/storage.service';
+import { SharedToolbarModule } from './toolbar/toolbar.module';
+import { NgxJdenticonModule } from 'ngx-jdenticon';
+
+
+export function scrollFactory(overlay: Overlay): () => CloseScrollStrategy {
+  return () => overlay.scrollStrategies.close();
+}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    ColorPickerModule,
+    TextMaskModule,
+    DragDropModule,
+    MarkdownModule,
+
+    // Sub modules
+    SharedMaterialModule,
+    SharedDirectivesModule,
+    SharedPipesModule,
+    SharedHotkeysModule,
+    SharedToolbarModule
+  ],
+  declarations: [
+    // Components
+    AppFormField,
+    AppLoadingSpinner,
+    AppHelpModal,
+    UploadFileComponent,
+    UploadFilePopover,
+    SharedTestsPage,
+  ],
+  exports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule,
+    ReactiveFormsModule,
+    ColorPickerModule,
+    TextMaskModule,
+    DragDropModule,
+    MarkdownModule,
+    NgxJdenticonModule,
+
+    // Sub-modules
+    SharedMaterialModule,
+    SharedDirectivesModule,
+    SharedPipesModule,
+    SharedHotkeysModule,
+    SharedToolbarModule,
+
+    // Components
+    AppFormField,
+    AppLoadingSpinner,
+    AppHelpModal,
+    UploadFileComponent,
+    UploadFilePopover,
+    SharedTestsPage
+  ]
+})
+export class SharedModule {
+
+  static forRoot(environment?: Environment): ModuleWithProviders<SharedModule> {
+    console.debug('[shared] Creating module (root)');
+
+    return {
+      ngModule: SharedModule,
+
+      providers: [
+
+        // Define environment token if provided. Can be defined elsewhere (see Quadrige)
+        ...(!!environment ? [{ provide: ENVIRONMENT, useValue: environment }] : []),
+        // { provide: StorageService, useClass: StorageService, deps: [ENVIRONMENT]},
+        { provide: APP_STORAGE, useExisting: StorageService},
+
+        StorageService,
+        AudioProvider,
+        FileService,
+        TranslateContextService,
+        DateFormatService,
+
+        // Export Pipes as providers
+        DateFromNowPipe,
+        DateDiffDurationPipe,
+        LatLongFormatPipe,
+        LatitudeFormatPipe,
+        LongitudeFormatPipe,
+        HighlightPipe,
+        NumberFormatPipe,
+
+        { provide: OverlayContainer, useClass: FullscreenOverlayContainer },
+        { provide: MatPaginatorIntl, useClass: MatPaginatorI18n, deps: [TranslateService] },
+        { provide: MatStepperIntl, useClass: MatStepperI18n, deps: [TranslateService] },
+
+        // FIXME: try to force a custom overlay for autocomplete, because of there is a bug when using inside an ionic modal
+        //{ provide: Overlay, useClass: Overlay},
+        { provide: MAT_AUTOCOMPLETE_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] },
+        { provide: MAT_AUTOCOMPLETE_DEFAULT_OPTIONS, useValue: {
+            autoActiveFirstOption: true
+          }
+        },
+        { provide: MAT_SELECT_SCROLL_STRATEGY, useFactory: scrollFactory, deps: [Overlay] }
+      ]
+    };
+  }
+}

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

@@ -0,0 +1,50 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {MaterialTestingModule, SHARED_MATERIAL_TESTING_PAGES} from './material/material.testing.module';
+import {TranslateModule} from '@ngx-translate/core';
+import {ToastTestingModule} from './toast/toast.testing.module';
+import {UploadFileTestingModule} from './upload-file/testing/upload-file.testing.module';
+import {TestingPage} from './testing/tests.page';
+import {ImageGalleryTestingModule} from './image/gallery/testing/gallery.testing.module';
+import {IonicModule} from '@ionic/angular';
+import {AudioTestingModule} from './audio/audio.testing.module';
+import {SHARED_STORAGE_TESTING_PAGES, StorageExplorerModule} from './storage/storage-explorer.module';
+
+export const SHARED_TESTING_PAGES: TestingPage[] = [
+  ...SHARED_MATERIAL_TESTING_PAGES,
+
+  {label: 'Shared other components', divider: true},
+  {label: 'Image gallery', page: '/testing/shared/gallery'},
+  {label: 'Toast', page: '/testing/shared/toast'},
+  {label: 'File upload', page: '/testing/shared/upload-file'},
+  {label: 'Sound & Vibration', page: '/testing/shared/audio'},
+
+  ...SHARED_STORAGE_TESTING_PAGES,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule.forChild(),
+
+    // Testing sub-modules
+    MaterialTestingModule,
+    ToastTestingModule,
+    UploadFileTestingModule,
+    ImageGalleryTestingModule,
+    AudioTestingModule,
+    StorageExplorerModule
+  ],
+  exports: [
+    // Testing sub-modules
+    MaterialTestingModule,
+    ToastTestingModule,
+    UploadFileTestingModule,
+    ImageGalleryTestingModule,
+    AudioTestingModule,
+    StorageExplorerModule
+  ]
+})
+export class SharedTestingModule {
+}