@sumaris-net/ngx-components 18.10.29 → 18.12.0

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

@@ -0,0 +1,120 @@
+import { Directive, 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';
+}
+
+@Directive()
+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 start, if running
+    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,53 @@
+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,112 @@
+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { map } 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?: any): 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) =>
+          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?: any): 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 (const 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,13 @@
+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,134 @@
+import { LoadResult } from './services/entity-service.class';
+import {
+  getPropertyByPathAsString,
+  isNotEmptyArray,
+  isNotNil,
+  isNotNilObject,
+  isNotNilOrBlank,
+  propertiesPathComparator,
+  startsWithUpperCase,
+} from './functions';
+import { SortDirection } from '@angular/material/sort';
+import { EntityUtils } from '../core/services/model/entity.model';
+import { RegExpUtils } from './regexps';
+
+export function suggestFromArray<T = any>(
+  items: T[],
+  value: any,
+  filter?: {
+    id?: number;
+    offset?: number;
+    size?: number;
+    searchAttribute?: string;
+    searchAttributes?: string[];
+    includedIds?: number[];
+    excludedIds?: number[];
+    skipSort?: boolean;
+    anySearch?: boolean;
+  },
+  sortBy?: keyof T | string,
+  sortDirection?: SortDirection,
+  opts?: {
+    offset?: number;
+    size?: number;
+    [key: string]: any;
+  }
+): LoadResult<T> {
+  // Value is an array: use it
+  if (Array.isArray(value)) return { data: value as T[] };
+  // Value is an object: use it (wrapped in an array)
+  if (isNotNilObject(value)) return { data: [value as T] };
+
+  value = (typeof value === 'string' && value !== '*' && value.toUpperCase()) || undefined;
+
+  const keys = (filter && ((filter.searchAttribute && [filter.searchAttribute]) || filter.searchAttributes)) || ['label'];
+
+  if (!items) {
+    return { data: [], total: 0 };
+  }
+
+  // Filter items
+  let filteredItems = items;
+  if (isNotNilOrBlank(value)) {
+    let cleanSearchText = RegExpUtils.cleanSearchText(value as string);
+    if (cleanSearchText.length > 0) {
+      // If wildcard, search using a regexp
+      if (filter?.anySearch || RegExpUtils.hasWildcardCharacter(cleanSearchText)) {
+        const regexp = RegExpUtils.compileSearchRegexp(cleanSearchText, 'i');
+        filteredItems = filteredItems.filter((v) => keys.some((key) => RegExpUtils.match(getPropertyByPathAsString(v, key), regexp)));
+      }
+      // Else (no wildcard), search using startsWith
+      else {
+        cleanSearchText = cleanSearchText.toUpperCase();
+        filteredItems = filteredItems.filter((v) => keys.some((key) => startsWithUpperCase(getPropertyByPathAsString(v, key), cleanSearchText)));
+      }
+    }
+  }
+
+  // Included ids
+  const includedIds = filter?.includedIds || (isNotNil(filter?.id) ? [filter.id] : null);
+  if (isNotEmptyArray(includedIds)) {
+    filteredItems = filteredItems.filter((v) => includedIds.includes(+v['id']));
+  }
+
+  // Exclude ids
+  if (isNotEmptyArray(filter?.excludedIds)) {
+    const excludedIds = filter.excludedIds;
+    filteredItems = filteredItems.filter((v) => !excludedIds.includes(+v['id']));
+  }
+
+  // Sort
+  if (!filter || filter.skipSort !== true) {
+    // Make to copy input items, before sorting (if not yet already done)
+    // (to keep original items unchanged)
+    if (filteredItems === items) filteredItems = filteredItems.slice();
+
+    // Sort by given attributes
+    if (sortBy) {
+      EntityUtils.sort(filteredItems, sortBy, sortDirection);
+    }
+    // Sort by each keys
+    else {
+      filteredItems.sort(propertiesPathComparator(keys));
+    }
+  }
+
+  const total = filteredItems.length || 0;
+
+  // Pagination (truncate if need)
+  let pageData = filteredItems;
+  const offset = filter?.offset ?? opts?.offset ?? 0;
+  const size = filter?.size ?? opts?.size;
+  if ((offset || 0) > 0) {
+    pageData = pageData.slice(offset);
+  }
+  if (isNotNil(size) && pageData.length > filter.size) {
+    pageData = pageData.slice(0, size);
+  }
+
+  const result: LoadResult<T> = {
+    data: pageData,
+    total,
+  };
+
+  // Add fetch more capability, if total was fetched
+  const nextOffset = offset + pageData.length;
+  if (nextOffset < total) {
+    result.fetchMore = async (_) =>
+      suggestFromArray(
+        filteredItems,
+        undefined /*OPTIMISATION: already filtered*/,
+        {
+          ...filter,
+          offset: nextOffset,
+          skipSort: true, // OPTIMISATION: already sorted
+          excludedIds: undefined, // OPTIMISATION: already filtered
+        },
+        sortBy,
+        sortDirection,
+        opts
+      );
+  }
+
+  return result;
+}

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

@@ -0,0 +1,69 @@
+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,168 @@
+import { APP_INITIALIZER, ModuleWithProviders, NgModule, Provider } 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 { MAT_PAGINATOR_DEFAULT_OPTIONS, 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 { 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';
+import { SharedNamedFilterModule } from './named-filter/named-filter.module';
+import { EnvironmentLoader } from '../../environments/environment.loader';
+import { ENVIRONMENT } from '../../environments/environment.class';
+import { RxStateModule } from './rx-state/rx-state.module';
+
+export function scrollFactory(overlay: Overlay): () => CloseScrollStrategy {
+  return () => overlay.scrollStrategies.close();
+}
+
+export interface SharedModuleConfig {
+  loader?: Provider;
+}
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ReactiveFormsModule,
+    TranslateModule,
+    ColorPickerModule,
+    DragDropModule,
+    MarkdownModule,
+    RxStateModule,
+
+    // Sub modules
+    SharedMaterialModule,
+    SharedDirectivesModule,
+    SharedPipesModule,
+    SharedHotkeysModule,
+    SharedToolbarModule,
+    SharedNamedFilterModule,
+  ],
+  declarations: [
+    // Components
+    AppFormField,
+    AppLoadingSpinner,
+    UploadFileComponent,
+    UploadFilePopover,
+    SharedTestsPage,
+  ],
+  exports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule,
+    ReactiveFormsModule,
+    ColorPickerModule,
+    DragDropModule,
+    MarkdownModule,
+    NgxJdenticonModule,
+    RxStateModule,
+
+    // Sub-modules
+    SharedMaterialModule,
+    SharedDirectivesModule,
+    SharedPipesModule,
+    SharedHotkeysModule,
+    SharedToolbarModule,
+    SharedNamedFilterModule,
+
+    // Components
+    AppFormField,
+    AppLoadingSpinner,
+    UploadFileComponent,
+    UploadFilePopover,
+    SharedTestsPage,
+  ],
+})
+export class SharedModule {
+  static forRoot(config?: SharedModuleConfig): ModuleWithProviders<SharedModule> {
+    console.debug('[shared] Creating module (root)');
+
+    return {
+      ngModule: SharedModule,
+
+      providers: [
+        // Load environment (if a loader has been defined)
+        ...(config?.loader
+          ? [
+              config.loader,
+
+              {
+                provide: APP_INITIALIZER,
+                deps: [EnvironmentLoader],
+                useFactory: (loader: EnvironmentLoader) => () => loader.load(),
+                multi: true,
+              },
+              {
+                provide: ENVIRONMENT,
+                deps: [EnvironmentLoader, APP_INITIALIZER],
+                useFactory: (loader: EnvironmentLoader) => loader.get(),
+              },
+            ]
+          : []),
+
+        // { 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: MAT_PAGINATOR_DEFAULT_OPTIONS, useValue: { formFieldAppearance: 'fill' } },
+        { 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] },
+      ],
+    };
+  }
+}