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

package/src/app/shared/pipes/form.pipes.ts

@@ -0,0 +1,204 @@
+import {ChangeDetectorRef, OnDestroy, Pipe, PipeTransform} from '@angular/core';
+import {AbstractControl, UntypedFormArray, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
+import {FormErrorTranslator, FormErrorTranslatorOptions} from '../validator/form-error-adapter.class';
+import {Subscription} from 'rxjs';
+import {equals, isNotNil} from '../functions';
+
+@Pipe({
+  name: 'translateFormError',
+  pure: false
+})
+export class FormErrorTranslatePipe implements PipeTransform, OnDestroy {
+
+  value: string = '';
+
+  private _lastForm: UntypedFormGroup | null = null;
+  private _lastOptions: FormErrorTranslatorOptions | null = null;
+  private _onFormStatusChanges: Subscription | undefined;
+
+  constructor(
+    private adapter: FormErrorTranslator,
+    private _ref: ChangeDetectorRef
+  ) {
+  }
+
+  transform(form: UntypedFormGroup, opts?: FormErrorTranslatorOptions): string {
+    if (!form) {
+      this._dispose();
+      return '';
+    }
+
+    // if we ask another time for the same form and opts, return the last value
+    if (form === this._lastForm && equals(opts, this._lastOptions)) {
+      return this.value;
+    }
+
+    // store the query, in case it changes
+    this._lastForm = form;
+
+    // store the params, in case they change
+    this._lastOptions = opts;
+
+    // set the value
+    this._updateValue(form, opts);
+
+    // if there is a subscription to onLangChange, clean it
+    this._dispose();
+
+    // subscribe to onTranslationChange event, in case the translations change
+    if (!this._onFormStatusChanges) {
+      this._onFormStatusChanges = form.statusChanges.subscribe((status) => {
+        this._updateValue(form, opts, status);
+      });
+    }
+
+    return this.value;
+  }
+
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
+  private _updateValue(form: UntypedFormGroup, opts?: FormErrorTranslatorOptions, status?: any) {
+    if (status === 'INVALID' || form.invalid) {
+      this.value = this.adapter.translateFormErrors(form, opts);
+      this._ref.markForCheck();
+    }
+    else if (this.value !== undefined) {
+      this.value = undefined;
+      this._ref.markForCheck();
+    }
+  }
+
+  /**
+   * Clean any existing subscription to change events
+   */
+  private _dispose(): void {
+    this._onFormStatusChanges?.unsubscribe();
+    this._onFormStatusChanges = undefined;
+  }
+}
+
+@Pipe({
+  name: 'formGet'
+})
+export class FormGetPipe implements PipeTransform {
+
+  transform(form: AbstractControl, path: Array<string | number> | string ): AbstractControl {
+    return form.get(path);
+  }
+}
+
+@Pipe({
+  name: 'formGetControl'
+})
+export class FormGetControlPipe implements PipeTransform {
+
+  transform(form: AbstractControl, path?: Array<string | number> | string ): UntypedFormControl {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormControl;
+  }
+}
+
+@Pipe({
+  name: 'formGetArray'
+})
+export class FormGetArrayPipe implements PipeTransform {
+
+  transform(form: AbstractControl, path?: Array<string | number> | string ): UntypedFormArray {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormArray;
+  }
+}
+
+@Pipe({
+  name: 'formGetGroup'
+})
+export class FormGetGroupPipe implements PipeTransform {
+
+  transform(form: AbstractControl, path?: Array<string | number> | string ): UntypedFormGroup {
+    return (form && isNotNil(path) ? form.get(path) : form) as UntypedFormGroup;
+  }
+}
+
+@Pipe({
+  name: 'formGetValue',
+  pure: false
+})
+export class FormGetValuePipe implements PipeTransform, OnDestroy {
+
+  value: any = undefined;
+
+  private _lastControl: AbstractControl | null = null;
+  private _lastPath: Array<string | number> | string;
+  private _onControlValueChanges: Subscription | undefined;
+  private _onControlStatusChanges: Subscription | undefined;
+
+  constructor(
+    private _ref: ChangeDetectorRef
+  ) {
+  }
+
+  transform(form: AbstractControl, path?: Array<string | number> | string, listenStatusChanges = false): any {
+    if (!form) {
+      this._dispose();
+      return undefined;
+    }
+
+    // if we ask another time for the same form and opts, return the last value
+    if (form === this._lastControl && equals(path, this._lastPath)) {
+      return this.value;
+    }
+
+    // store the query, in case it changes
+    this._lastControl = form;
+
+    // store the params, in case they change
+    this._lastPath = path;
+
+    // set the value
+    const control = path ? form.get(path) : form;
+    this.value = control?.value;
+
+    // if there is a subscription to onLangChange, clean it
+    this._dispose();
+
+    if (control) {
+      // subscribe to valueChanges event
+      this._onControlValueChanges = control.valueChanges.subscribe((value) => {
+        if (value !== this.value) {
+          this.value = value;
+          this._ref.markForCheck();
+        }
+      });
+
+      // subscribe to statusChanges event
+      if (listenStatusChanges) {
+        this._onControlStatusChanges = control.statusChanges.subscribe((status) => {
+          const value = control.value;
+          if (value !== this.value) {
+            this.value = value;
+            this._ref.markForCheck();
+          }
+        });
+      }
+    }
+
+
+
+    return this.value;
+  }
+
+  ngOnDestroy(): void {
+    this._dispose();
+  }
+
+  /**
+   * Clean any existing subscription to change events
+   */
+  private _dispose(): void {
+    this._onControlValueChanges?.unsubscribe();
+    this._onControlValueChanges = undefined;
+    this._onControlStatusChanges?.unsubscribe();
+    this._onControlStatusChanges = undefined;
+  }
+
+}

package/src/app/shared/pipes/highlight.pipe.ts

@@ -0,0 +1,37 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+import { removeDiacritics, toBoolean } from '../functions';
+
+@Pipe({
+    name: 'highlight'
+})
+@Injectable({providedIn: 'root'})
+export class HighlightPipe implements PipeTransform {
+
+      // Replace search text by bold representation
+    transform(value: any, args?: string | { search: string; withAccent?: boolean } ): string {
+      if (typeof value !== 'string' || !args) return value;
+      const searchText = (typeof args === 'string' ? args : args.search);
+      const withAccent = (typeof args !== 'string') ? toBoolean(args?.withAccent, false) : false;
+      if (typeof searchText !== 'string') return value;
+      const searchRegexp = searchText
+        .replace(/[.]/g, '[.]')
+        .replace(/[*]+/g, '.*');
+      if (searchRegexp === '.*') return value; // skip if can match everything
+
+      if (withAccent) {
+        // Remove all accent characters to allow versatile comparison
+        const cleanedSearchText = removeDiacritics(searchRegexp).toUpperCase();
+        const index = removeDiacritics(value.toUpperCase()).indexOf(cleanedSearchText);
+        if (index !== -1) {
+          return value.substring(0, index) +
+            '<b>' + value.substring(index, index + cleanedSearchText.length) + '</b>' +
+            value.substring(index + cleanedSearchText.length);
+        }
+        return value;
+      } else {
+        // Default behaviour
+        const regexp = new RegExp('[ ]?' + searchRegexp, 'gi');
+        return ('' + value).replace(regexp, '<b>$&</b>');
+      }
+    }
+}

package/src/app/shared/pipes/latlong-format.pipe.ts

@@ -0,0 +1,30 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {formatLatitude, formatLongitude, LatLongFormatOptions} from '../material/latlong/latlong.utils';
+
+
+@Pipe({
+  name: 'latitudeFormat'
+})
+export class LatitudeFormatPipe implements PipeTransform {
+  transform = formatLatitude;
+}
+
+@Pipe({
+  name: 'longitudeFormat'
+})
+export class LongitudeFormatPipe implements PipeTransform {
+  transform = formatLongitude;
+}
+
+@Pipe({
+  name: 'latLongFormat'
+})
+/**
+ * @deprecated use 'latitudeFormat' or 'longitudeFormat' instead
+ */
+export class LatLongFormatPipe implements PipeTransform {
+
+  transform(value: number, opts?: Partial<LatLongFormatOptions> & {type: 'latitude'|'longitude'}): string | Promise<string> {
+    return ((!opts || opts?.type !== 'latitude') ? formatLongitude : formatLatitude)(value, opts);
+  }
+}

package/src/app/shared/pipes/maps.pipe.ts

@@ -0,0 +1,39 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'mapGet'
+})
+@Injectable({providedIn: 'root'})
+export class MapGetPipe implements PipeTransform {
+
+    transform(val: any, args: string | number | {key: string | number} ): any {
+      if (!val) return null;
+      const key = (args && typeof args === 'object' ? args.key : args) as any;
+      if (!key) return null;
+      return val[key];
+    }
+}
+
+@Pipe({
+  name: 'mapKeys'
+})
+@Injectable({providedIn: 'root'})
+export class MapKeysPipe implements PipeTransform {
+
+  transform(map: any): any[] {
+    if (!map) return null;
+    return Object.keys(map);
+  }
+}
+
+@Pipe({
+  name: 'mapValues'
+})
+@Injectable({providedIn: 'root'})
+export class MapValuesPipe implements PipeTransform {
+
+  transform(map: any): any[] {
+    if (!map) return null;
+    return Object.values(map);
+  }
+}

package/src/app/shared/pipes/math.pipes.ts

@@ -0,0 +1,39 @@
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+
+@Pipe({
+    name: 'mathAbs'
+})
+@Injectable({providedIn: 'root'})
+export class MathAbsPipe implements PipeTransform {
+
+    transform(val: number): any {
+      if (val !== undefined && val !== null) {
+        return Math.abs(val);
+      } else {
+        return val;
+      }
+    }
+}
+
+@Pipe({
+  name: 'even'
+})
+@Injectable({providedIn: 'root'})
+export class EvenPipe implements PipeTransform {
+
+  transform(val: number): any {
+    return val % 2 === 0;
+  }
+}
+
+@Pipe({
+  name: 'odd'
+})
+@Injectable({providedIn: 'root'})
+export class OddPipe implements PipeTransform {
+
+  transform(val: number): any {
+    return val % 2 !== 0;
+  }
+}
+

package/src/app/shared/pipes/ng-init.pipe.ts

@@ -0,0 +1,14 @@
+import {Directive, OnInit, Output, EventEmitter} from '@angular/core';
+
+@Directive({
+  selector: '[ngInit]'
+})
+export class NgInitDirective implements OnInit {
+
+  @Output()
+  ngInit = new EventEmitter<any>();
+
+  ngOnInit() {
+    this.ngInit.emit();
+  }
+}

package/src/app/shared/pipes/number-format.pipe.ts

@@ -0,0 +1,21 @@
+import { Injectable, Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+    name: 'numberFormat'
+})
+@Injectable({providedIn: 'root'})
+export class NumberFormatPipe implements PipeTransform {
+
+    transform(val: number, opts?: Intl.NumberFormatOptions & {fixedDecimals?: number}): string | Promise<string> {
+      // Format the output to display any way you want here.
+      // For instance:
+      if (val !== undefined && val !== null) {
+        if (opts?.fixedDecimals) {
+          return val.toFixed(opts.fixedDecimals);
+        }
+        return val.toLocaleString(undefined, opts);
+      } else {
+        return '';
+      }
+    }
+}

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

@@ -0,0 +1,134 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {IonicModule} from '@ionic/angular';
+import {DateFormatPipe} from './date-format.pipe';
+import {DateDiffDurationPipe} from './date-diff-duration.pipe';
+import {DateFromNowPipe} from './date-from-now.pipe';
+import {LatitudeFormatPipe, LatLongFormatPipe, LongitudeFormatPipe} from './latlong-format.pipe';
+import {NumberFormatPipe} from './number-format.pipe';
+import {HighlightPipe} from './highlight.pipe';
+import {FileSizePipe} from './file-size.pipe';
+import {DurationPipe} from './duration.pipe';
+import {EvenPipe, MathAbsPipe, OddPipe} from './math.pipes';
+import {ArrayFilterPipe, ArrayFirstPipe, ArrayIncludesPipe, ArrayJoinPipe, ArrayLengthPipe, ArrayPluckPipe, EmptyArrayPipe, NotEmptyArrayPipe} from './arrays.pipe';
+import {MapGetPipe, MapKeysPipe, MapValuesPipe} from './maps.pipe';
+import {IsNilOrBlankPipe, IsNilOrNaNPipe, IsNilPipe, IsNotNilOrBlankPipe, IsNotNilOrNaNPipe, IsNotNilPipe, StrIncludesPipe, StrLengthPipe, ToStringPipe} from './string.pipes';
+import {TranslatablePipe, TranslateContextPipe} from './translate-context.pipe';
+import {NgInitDirective} from './ng-init.pipe';
+import {FormErrorTranslatePipe, FormGetArrayPipe, FormGetControlPipe, FormGetGroupPipe, FormGetPipe, FormGetValuePipe} from './form.pipes';
+import {PropertyFormatPipe, PropertyGetPipe} from './property.pipes';
+import {MatColorPipe} from './colors.pipe';
+import {AsAnyPipe, AsArrayPipe, AsObservablePipe} from './types.pipes';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule
+  ],
+  declarations: [
+    PropertyGetPipe,
+    PropertyFormatPipe,
+    DateFormatPipe,
+    DateDiffDurationPipe,
+    DurationPipe,
+    DateFromNowPipe,
+    LatLongFormatPipe,
+    LatitudeFormatPipe,
+    LongitudeFormatPipe,
+    HighlightPipe,
+    NumberFormatPipe,
+    FileSizePipe,
+    MathAbsPipe,
+    OddPipe,
+    EvenPipe,
+    NotEmptyArrayPipe,
+    EmptyArrayPipe,
+    ArrayLengthPipe,
+    ArrayFirstPipe,
+    ArrayPluckPipe,
+    ArrayIncludesPipe,
+    ArrayFilterPipe,
+    ArrayJoinPipe,
+    MapGetPipe,
+    MapKeysPipe,
+    MapValuesPipe,
+    IsNilOrBlankPipe,
+    IsNotNilOrBlankPipe,
+    IsNilOrNaNPipe,
+    IsNotNilOrNaNPipe,
+    IsNotNilPipe,
+    IsNilPipe,
+    ToStringPipe,
+    StrLengthPipe,
+    StrIncludesPipe,
+    TranslateContextPipe,
+    TranslatablePipe,
+    NgInitDirective,
+    FormErrorTranslatePipe,
+    FormGetPipe,
+    FormGetControlPipe,
+    FormGetArrayPipe,
+    FormGetGroupPipe,
+    FormGetValuePipe,
+    PropertyFormatPipe,
+    MatColorPipe,
+    AsAnyPipe,
+    AsArrayPipe,
+    AsObservablePipe
+  ],
+  exports: [
+    PropertyGetPipe,
+    PropertyFormatPipe,
+    DateFormatPipe,
+    DateFromNowPipe,
+    DateDiffDurationPipe,
+    DurationPipe,
+    LatLongFormatPipe,
+    LatitudeFormatPipe,
+    LongitudeFormatPipe,
+    HighlightPipe,
+    NumberFormatPipe,
+    FileSizePipe,
+    MathAbsPipe,
+    OddPipe,
+    EvenPipe,
+    NotEmptyArrayPipe,
+    EmptyArrayPipe,
+    ArrayLengthPipe,
+    ArrayFirstPipe,
+    ArrayPluckPipe,
+    ArrayJoinPipe,
+    MapGetPipe,
+    MapKeysPipe,
+    MapValuesPipe,
+    IsNilOrBlankPipe,
+    IsNotNilOrBlankPipe,
+    IsNilOrNaNPipe,
+    IsNotNilOrNaNPipe,
+    IsNotNilPipe,
+    IsNilPipe,
+    ToStringPipe,
+    StrLengthPipe,
+    StrIncludesPipe,
+    ArrayIncludesPipe,
+    ArrayFilterPipe,
+    TranslateContextPipe,
+    TranslatablePipe,
+    NgInitDirective,
+    FormErrorTranslatePipe,
+    FormGetPipe,
+    FormGetControlPipe,
+    FormGetArrayPipe,
+    FormGetGroupPipe,
+    FormGetValuePipe,
+    MatColorPipe,
+    AsAnyPipe,
+    AsArrayPipe,
+    AsObservablePipe
+  ]
+})
+export class SharedPipesModule {
+
+}

package/src/app/shared/pipes/property.pipes.ts

@@ -0,0 +1,87 @@
+import {Injectable, Pipe, PipeTransform} from '@angular/core';
+import {getPropertyByPath, isNil, isNotNil, joinPropertiesPath} from '../functions';
+import {DateFormatService} from './date-format.pipe';
+import {FormFieldDefinition} from '../form/field.model';
+import {TranslateService} from '@ngx-translate/core';
+
+@Pipe({name: 'propertyGet'})
+export class PropertyGetPipe implements PipeTransform {
+
+    transform(obj: any, args: string | {key: string; defaultValue?: any } ): any {
+      return getPropertyByPath(obj,
+        // Path
+        args && (typeof args === 'string' ? args : args.key),
+        // Default value
+        args && (args as any).defaultValue);
+    }
+}
+
+
+@Pipe({
+  name: 'propertyFormat'
+})
+@Injectable({providedIn: 'root'})
+export class PropertyFormatPipe implements PipeTransform {
+
+  private _i18nYes: string;
+  private _i18nNo: string;
+
+  constructor(private dateFormat: DateFormatService, private translate: TranslateService) {
+
+  }
+
+  transform(obj: any, keyOrDefinition: string|FormFieldDefinition): string | Promise<string> {
+    if (!obj) return '';
+    const definition = keyOrDefinition && (typeof keyOrDefinition === 'object') && keyOrDefinition;
+    const key = definition?.key || keyOrDefinition as string;
+    if (!key) {
+      // Should never occur
+      console.warn('Invalid use of pipe \'formatProperty\': missing key or definition');
+      return '';
+    }
+    const value = obj[key];
+    if (isNil(value)) return value;
+    const type = definition?.type || typeof value;
+    switch (type) {
+      case 'date':
+        return this.dateFormat.transform(value) as string;
+      case 'dateTime':
+        return this.dateFormat.transform(value, {time: true}) as string;
+      case 'enum':
+      {
+        // DEBUG
+        // console.debug('formatProperty by definition (type='enum', key=' +definition.key+ '):', value );
+        const item = (definition.values as any[] || [value]).find(item => (isNotNil(item.key) ? item.key : item) === value);
+        return item.value || item;
+      }
+      case 'entity':
+      {
+        if (definition.autocomplete?.displayWith) {
+          return definition.autocomplete.displayWith(value)
+        }
+        return joinPropertiesPath(value, definition.autocomplete?.attributes || ['label', 'name']) || undefined;
+      }
+      case 'boolean':
+        return (obj === 1 || obj === true || obj === 'true') ? this.i18nYes : this.i18nNo;
+      case 'integer':
+      case 'double':
+      case 'string':
+      default:
+        return value;
+    }
+  }
+
+  get i18nYes(): string {
+    if (!this._i18nYes) {
+      this._i18nYes = this.translate.instant('COMMON.YES');
+    }
+    return this._i18nYes;
+  }
+
+  get i18nNo(): string {
+    if (!this._i18nNo) {
+      this._i18nNo = this.translate.instant('COMMON.NO');
+    }
+    return this._i18nNo;
+  }
+}

package/src/app/shared/pipes/string.pipes.ts

@@ -0,0 +1,85 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {isNil, isNilOrBlank, isNilOrNaN, isNotNil, isNotNilOrBlank, isNotNilOrNaN} from '../functions';
+
+@Pipe({
+  name: 'isNotNilOrBlank'
+})
+export class IsNotNilOrBlankPipe implements PipeTransform {
+  transform(value: string): boolean {
+    return isNotNilOrBlank(value);
+  }
+}
+
+@Pipe({
+  name: 'isNilOrBlank'
+})
+export class IsNilOrBlankPipe implements PipeTransform {
+  transform(value: string): boolean {
+    return isNilOrBlank(value);
+  }
+}
+
+@Pipe({
+  name: 'isNilOrNaN'
+})
+export class IsNilOrNaNPipe implements PipeTransform {
+  transform(value: number): boolean {
+    return isNilOrNaN(value);
+  }
+}
+
+@Pipe({
+  name: 'isNotNilOrNaN'
+})
+export class IsNotNilOrNaNPipe implements PipeTransform {
+  transform(value: number): boolean {
+    return isNotNilOrNaN(value);
+  }
+}
+
+@Pipe({
+  name: 'isNotNil'
+})
+export class IsNotNilPipe implements PipeTransform {
+  transform(value: any): boolean {
+    return isNotNil(value);
+  }
+}
+
+@Pipe({
+  name: 'isNil'
+})
+export class IsNilPipe implements PipeTransform {
+  transform(value: any): boolean {
+    return isNil(value);
+  }
+}
+
+@Pipe({
+  name: 'toString'
+})
+export class ToStringPipe implements PipeTransform {
+  transform(value: number): string {
+    return (value !== null && value !== undefined) ? value.toString() : '';
+  }
+}
+
+
+@Pipe({
+  name: 'strLength'
+})
+export class StrLengthPipe implements PipeTransform {
+  transform(value: string): number {
+    return value && value.length || 0;
+  }
+}
+
+
+@Pipe({
+  name: 'strIncludes'
+})
+export class StrIncludesPipe implements PipeTransform {
+  transform(value: string, searchString: string, position?: number): boolean {
+    return value?.includes(searchString, position) || false;
+  }
+}