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

package/src/app/shared/logging/logging-service.class.ts

@@ -0,0 +1,134 @@
+import {ILogger, ILoggingAppender, ILoggingService, Log, LogUtils} from './logger.model';
+import {Inject, Injectable, InjectionToken} from '@angular/core';
+import {BehaviorSubject, of, Subscription, timer} from 'rxjs';
+import {DateUtils} from '../dates';
+import {APP_STORAGE, IStorage} from '../storage/storage.utils';
+import {Environment, ENVIRONMENT} from '../../../environments/environment.class';
+import {debounceTime, filter, switchMap, throttleTime} from 'rxjs/operators';
+import {isEmptyArray, isNotEmptyArray} from '../functions';
+import {LoggingServiceConfig} from './logging-service.config';
+import {LogLevel} from './log-level.model';
+import {StartableService} from '../services/startable-service.class';
+
+
+export class Logger implements ILogger {
+  constructor(private _name: string,
+              private _appender: ILoggingAppender) {
+  }
+
+  trace(methodName: string, ...params: any[]): void {
+    this._appender.append(this._name, LogLevel.TRACE, this.toString(methodName, ...params));
+  }
+
+  debug(methodName: string, ...params: any[]): void {
+    this._appender.append(this._name, LogLevel.DEBUG, this.toString(methodName, ...params));
+  }
+
+  info(methodName: string, ...params: any[]): void {
+    this._appender.append(this._name, LogLevel.INFO, this.toString(methodName, ...params));
+  }
+
+  warn(methodName: string, ...params: any[]): void {
+    this._appender.append(this._name, LogLevel.WARN, this.toString(methodName, ...params));
+  }
+
+  error(methodName: string, ...params: any[]) {
+    this._appender.append(this._name, LogLevel.ERROR, this.toString(methodName, ...params));
+  }
+
+  fatal(methodName: string, ...params: any[]) {
+    this._appender.append(this._name, LogLevel.FATAL, this.toString(methodName, ...params));
+  }
+
+  private toString(methodName, ...params: any[]) {
+    return `[${methodName}] ` + (params || []).map(p => {
+      if (typeof p === 'string') return p;
+      if (typeof p === 'number') return '' + p;
+      return JSON.stringify(p);
+    }).join(' ');
+  }
+}
+
+export const APP_LOGGING_SERVICE = new InjectionToken<ILoggingService>('LoggingService');
+
+@Injectable()
+export class LoggingService extends StartableService<void> implements ILoggingService, ILoggingAppender {
+
+  _dataSubject = new BehaviorSubject<Log[]>([]);
+  _debounceTimeMs: number;
+  _storageKey: string;
+  _maxMessages: number;
+  _saving = false;
+
+  constructor(@Inject(APP_STORAGE) private storage: IStorage,
+              @Inject(ENVIRONMENT) protected environment: Environment
+  ) {
+    super(storage);
+    this.configure(environment.logging)
+  }
+
+  async configure(config: LoggingServiceConfig) {
+    await this.restart(config);
+  }
+
+  protected async ngOnStart(opts?: LoggingServiceConfig): Promise<void> {
+    this._debounceTimeMs = opts?.localStorageAppender?.debounceTimeMs || 1000 /* = 1s */;
+    this._maxMessages = opts?.localStorageAppender?.maxMessages || 250;
+    this._storageKey = opts?.localStorageAppender?.localStorageKey || 'log';
+
+    console.info(`[logging] Configuring logging... {localStorageKey: '${this._storageKey}', maxMessages: ${this._maxMessages}, savePeriodMs: ${this._debounceTimeMs}}`);
+
+    // Save timer
+    this.registerSubscription(
+      this._dataSubject
+      // Avoid to many call
+      .pipe(
+        debounceTime(this._debounceTimeMs)
+      )
+      .subscribe(() => this.storeLocally())
+    );
+  }
+
+  getLogger(loggerName: string): ILogger {
+    return new Logger(loggerName, this);
+  }
+
+  append(loggerName: string, level: LogLevel, message: string) {
+    this._dataSubject.next([
+      ...this._dataSubject.value,
+      <Log>{loggerName: loggerName, level, message, date: DateUtils.moment()}
+    ])
+  }
+
+  protected async storeLocally() {
+    if (this._saving) return;
+    this._saving = true;
+    try {
+      const newMessages: any[] = (this._dataSubject.value || []).map(LogUtils.asObject);
+
+      if (isEmptyArray(newMessages)) return; // Skip if no data
+      this._dataSubject.next([]); // Reset log
+
+      const oldValue = await this.storage.get(this._storageKey);
+      const oldMessages: any[] = (typeof oldValue === 'string') ? JSON.parse(oldValue) : (oldValue || []);
+      let lastMessages = [
+        ...(oldMessages || []),
+        ...newMessages
+      ];
+      if (lastMessages.length > this._maxMessages) {
+        lastMessages = lastMessages.slice(lastMessages.length - this._maxMessages)
+      }
+
+      if (isNotEmptyArray(lastMessages)) {
+        console.info(`[logging] Saving ${newMessages.length} messages to storage...`);
+        await this.storage.set(this._storageKey, lastMessages);
+      }
+    }
+    catch(err) {
+      console.error(err);
+    }
+    finally {
+      this._saving = false;
+    }
+  }
+}

package/src/app/shared/logging/logging-service.config.ts

@@ -0,0 +1,29 @@
+// Based on https://github.com/Ritzlgrmft/ionic-logging-service/blob/main/projects/ionic-logging-service/src/lib/logging-service.configuration.ts
+export interface LoggingServiceConfig {
+  localStorageAppender?: {
+    /**
+     * Key which is used to store the messages in the local storage.
+     *
+     * Default: 'log'.
+     */
+    localStorageKey: string;
+
+    /**
+     * Maximum number of log messages stored by the appender.
+     *
+     * Default: 250.
+     */
+    maxMessages?: number;
+
+    /**
+     * Threshold.
+     *
+     * Valid values are: ALL, DEBUG, ERROR, FATAL, INFO, OFF, TRACE, WARN
+     *
+     * Default: WARN.
+     */
+    threshold?: string;
+
+    debounceTimeMs?: number;
+  }
+}

package/src/app/shared/logging/logging-service.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule.forChild(),
+
+    // Testing sub-modules
+  ],
+  declarations: [
+
+  ],
+  exports: [
+    // Testing sub-modules
+  ]
+})
+export class LoggingServiceModule {
+}

package/src/app/shared/material/autocomplete/material.autocomplete.config.ts

@@ -0,0 +1,83 @@
+import {LoadResult, SuggestFn, SuggestService} from '../../services/entity-service.class';
+import {MatAutocompleteFieldUtils} from './material.autocomplete.utils';
+import {Observable} from 'rxjs';
+import {DisplayFn, EqualsFn} from '../../form/field.model';
+
+export declare interface MatAutocompleteFieldConfig<T = any, F = any> {
+  attributes?: string[];
+  suggestFn?: (value: any, options?: any) => Promise<T[] | LoadResult<T>>;
+  filter?: Partial<F>;
+  items?: Observable<T[]> | T[];
+  columnSizes?: (number | 'auto' | undefined)[];
+  columnNames?: (string | undefined)[];
+  multiple?: boolean;
+  displayWith?: DisplayFn;
+  equals?: EqualsFn; // Used by <mat-chips-field>
+  showAllOnFocus?: boolean;
+  showPanelOnFocus?: boolean;
+  class?: string;
+  mobile?: boolean;
+  debounceTime?: number;
+  suggestLengthThreshold?: number;
+  highlightAccent?: boolean;
+}
+
+export declare interface MatAutocompleteFieldAddOptions<T = any, F = any> extends Partial<MatAutocompleteFieldConfig<T, F>> {
+  service?: SuggestService<T, F>;
+}
+
+export class MatAutocompleteConfigHolder {
+  fields: {
+    [key: string]: MatAutocompleteFieldConfig;
+  } = {};
+
+  getUserAttributes: (fieldName: string, defaultAttributes?: string[]) => string[];
+
+  constructor(private options?: {
+    getUserAttributes: (fieldName: string, defaultAttributes?: string[]) => string[];
+  }) {
+    // Store the function from options (e.g. get from user settings)
+    // or create a default function
+    this.getUserAttributes = options?.getUserAttributes ||
+      ((fieldName, defaultAttributes) => defaultAttributes || ['label', 'name']);
+  }
+
+  add<T = any, F = any>(fieldName: string, options?: MatAutocompleteFieldAddOptions<T, F>): MatAutocompleteFieldConfig<T, F> {
+    if (!fieldName) {
+      throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
+    }
+    options = options || <MatAutocompleteFieldAddOptions>{};
+    const suggestFn: SuggestFn<T, F> = options.suggestFn
+      || (options.service && ((v, f) => options.service.suggest(v, f)))
+      || undefined;
+    const attributes = (this.getUserAttributes(fieldName, options.attributes) || ['label', 'name']);
+    // Keep original the function from options, when exists
+    const attributesOrFn = attributes.map((a, index) => typeof a === 'function' && options.attributes[index] || a);
+    const filter: Partial<F> = {
+      searchAttribute: attributes.length === 1 ? attributes[0] : undefined,
+      searchAttributes: attributes.length > 1 ? attributes : undefined,
+      ...options.filter
+    };
+    const displayWith = options.displayWith || MatAutocompleteFieldUtils.createDisplayFn(attributes, options.multiple);
+    const equals = options.equals || MatAutocompleteFieldUtils.defaultEquals;
+
+    const config: MatAutocompleteFieldConfig = {
+      ...options,
+      attributes: attributesOrFn,
+      suggestFn,
+      filter,
+      displayWith,
+      equals
+    };
+
+    this.fields[fieldName] = config;
+    return config;
+  }
+
+  get<T = any>(fieldName: string): MatAutocompleteFieldConfig<T> {
+    if (!fieldName) {
+      throw new Error('Unable to add config, with name: ' + (fieldName || 'undefined'));
+    }
+    return this.fields[fieldName] || this.add(fieldName) as MatAutocompleteFieldConfig<T>;
+  }
+}

package/src/app/shared/material/autocomplete/material.autocomplete.html

@@ -0,0 +1,262 @@
+<ion-grid class="ion-no-padding">
+  <ion-row>
+    <ion-col class="ion-no-padding">
+      <!-- readonly -->
+      <mat-form-field *ngIf="_readonly; else writable"
+                      [floatLabel]="floatLabel"
+                      [appearance]="appearance"
+                      [title]="_displayValue"
+                      class="mat-form-field-disabled">
+
+        <mat-label>{{placeholder}}</mat-label>
+
+        <div matPrefix>
+          <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+        </div>
+
+        <input matInput hidden type="text" readonly="true"
+               [formControl]="formControl" >
+        <ion-text>{{displayWith(value)}}</ion-text>
+
+        <div matSuffix>
+          <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+        </div>
+
+      </mat-form-field>
+
+      <ng-template #writable>
+        <mat-form-field [floatLabel]="floatLabel"
+                        [appearance]="appearance"
+                        [class.mat-form-field-disabled]="disabled"
+                        [title]="_displayValue">
+
+          <mat-label>{{placeholder}}</mat-label>
+
+          <div matPrefix>
+            <ng-container *ngTemplateOutlet="matPrefixTemplate"></ng-container>
+          </div>
+
+          <!-- Mobile or Multiple (use <mat-select>) -->
+          <mat-select #matSelect
+                      *ngIf="mobile || multiple; else desktopTemplate"
+                      [disableRipple]="true"
+                      [placeholder]="placeholder"
+                      [formControl]="formControl"
+                      [tabindex]="_tabindex"
+                      [panelClass]="classList"
+                      (focus)="filterMatSelectFocusEvent($event)"
+                      (blur)="filterMatSelectBlurEvent($event)"
+                      (keydown.escape)="keydownEscape.emit($event)"
+                      (keyup.enter)="keyupEnter.emit($event)"
+                      [compareWith]="equals"
+                      [multiple]="multiple"
+                      [typeaheadDebounceInterval]="debounceTime * 10"
+                      [required]="required">
+            <mat-select-trigger>{{ displayWith(value) }}</mat-select-trigger>
+
+            <!-- Search bar -->
+            <mat-option  class="mat-select-searchbar" *ngIf="showSearchBar"
+                         [class.mat-select-searchbar-sticky]="stickySearchBar"
+                         disabled>
+              <ion-searchbar #ionSearchbar
+                             inputmode="search"
+                             autocomplete="off"
+                             animated="true"
+                             showClearButton="true"
+                             [debounce]="debounceTime"
+                             (ionClear)="markAsLoading()"
+                             (ionInput)="ionSearchBarChanged($event)"
+                             [placeholder]="'COMMON.BTN_SEARCH'|translate"
+              ></ion-searchbar>
+            </mat-option>
+
+            <!-- Headers -->
+            <ion-row class="mat-select-header column ion-no-padding"
+                     [class.multiple]="multiple"
+                     [class.mat-select-searchbar-sticky]="showSearchBar && stickySearchBar">
+              <ion-col *ngFor="let attr of displayAttributes; index as i" [size]="displayColumnSizes[i]">
+                <ion-label [innerHTML]="displayColumnNames[i] | translate"></ion-label>
+              </ion-col>
+            </ion-row>
+
+            <!-- None option -->
+            <mat-option *ngIf="!required && !multiple && !clearable" class="ion-no-padding">
+              <ion-row class="ion-no-padding">
+                <ion-col class="ion-no-padding">
+                  <ion-label><i translate>COMMON.EMPTY_OPTION</i></ion-label>
+                </ion-col>
+              </ion-row>
+            </mat-option>
+
+            <ng-container *ngIf="_$filteredItems | async as items; else loadingTemplate">
+              <!-- No item option -->
+              <mat-option *ngIf="items | isEmptyArray" class="ion-padding text-italic" disabled>
+                <ion-label><i>{{noResultMessage | translate}}</i></ion-label>
+              </mat-option>
+
+              <!-- Options -->
+              <mat-option *ngFor="let item of items" [value]="item" class="ion-no-padding">
+                <ion-row [classList]="item.classList">
+                  <ion-col *ngFor="let path of displayAttributes; index as i;"
+                           [size]="displayColumnSizes[i]">
+                    <ion-text [innerHTML]="item | propertyGet: path"></ion-text>
+                  </ion-col>
+                </ion-row>
+              </mat-option>
+
+              <!-- More item -->
+              <mat-option *ngIf="_moreItemsCount" (ngInit)="_initMatSelectInfiniteScroll()"
+                          class="ion-padding" disabled>
+                <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+              </mat-option>
+            </ng-container>
+
+            <!-- footer -->
+            <mat-option *ngIf="itemCount as count" class="mat-option-footer mat-autocomplete-footer ion-no-padding" disabled>
+              <ion-text class="ion-float-end ion-padding-end"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>
+            </mat-option>
+
+            <!-- Loading spinner -->
+            <ng-template #loadingTemplate>
+              <mat-option *ngIf="(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate"
+                          class="ion-padding" disabled>
+                <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+              </mat-option>
+            </ng-template>
+
+            <!-- Need more characters -->
+            <ng-template #waitMoreCharacterTemplate>
+              <mat-option class="ion-padding text-italic" disabled>
+                <ion-label>
+                  {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}
+                </ion-label>
+              </mat-option>
+            </ng-template>
+          </mat-select>
+
+
+          <!--
+            NOTE :
+             - "selectInputContent($event) || onFocus.emit($event)" : call onFocus only when to the input is empty (nothing to select)
+          -->
+          <ng-template #desktopTemplate>
+            <input matInput #matInputText type="text"
+                   [matAutocomplete]="autocomplete"
+                   [matAutocompletePosition]="matAutocompletePosition"
+                   [formControl]="formControl"
+                   [placeholder]="placeholder"
+                   [appAutofocus]="autofocus"
+                   [tabindex]="_tabindex"
+                   [required]="required"
+                   (click)="clicked.emit($event)"
+                   (focus)="filterInputTextFocusEvent($event)"
+                   (blur)="filterInputTextBlurEvent($event)"
+                   (keydown.escape)="keydownEscape.emit($event)"
+                   (keyup.enter)="keyupEnter.emit($event)"
+                   (keyup.arrowDown)="!autocomplete.showPanel && dropButtonClick.emit($event)">
+
+            <!-- autocomplete -->
+            <mat-autocomplete #autocomplete="matAutocomplete"
+                              autoActiveFirstOption
+                              [displayWith]="displayWith"
+                              [class]="classList"
+                              [panelWidth]="panelWidth">
+              <!-- Headers -->
+              <ion-row class="mat-autocomplete-header column ion-no-padding">
+                <ion-col *ngFor="let attr of displayAttributes; index as i" [size]="displayColumnSizes[i]">
+                  <ion-label [innerHTML]="displayColumnNames[i] | translate"></ion-label>
+                </ion-col>
+              </ion-row>
+
+              <!-- Options -->
+              <ng-container *ngIf="_$filteredItems | async as items; else loadingTemplate">
+                <!-- No item option -->
+                <mat-option *ngIf="items | isEmptyArray" class="ion-padding text-italic" disabled>
+                  <ion-label><i>{{noResultMessage | translate}}</i></ion-label>
+                </mat-option>
+
+                <mat-option *ngFor="let item of items" [value]="item" class="ion-no-padding">
+                  <ion-row [classList]="item.classList">
+                    <ion-col *ngFor="let path of displayAttributes; index as i;"
+                             [size]="displayColumnSizes[i]"
+                             [title]="text.innerText">
+                      <ion-text><span #text [innerHTML]="item | propertyGet: path | highlight: { search: formControl.value, withAccent: highlightAccent }"></span></ion-text>
+                    </ion-col>
+                  </ion-row>
+                </mat-option>
+
+                <!-- More item -->
+                <mat-option *ngIf="_moreItemsCount" (ngInit)="_initAutocompleteInfiniteScroll()"
+                            class="ion-padding" disabled>
+                  <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+                </mat-option>
+              </ng-container>
+
+              <!-- Loading spinner -->
+              <ng-template #loadingTemplate>
+                <mat-option *ngIf="(_displayValue | strLength) >= suggestLengthThreshold; else waitMoreCharacterTemplate"
+                            class="ion-padding" disabled>
+                  <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+                </mat-option>
+              </ng-template>
+
+              <!-- Need more characters -->
+              <ng-template #waitMoreCharacterTemplate>
+                <mat-option class="ion-padding text-italic" disabled>
+                  <ion-label>
+                    {{'INFO.PLEASE_TYPE_MORE_CHARACTERS'|translate:{minLength: suggestLengthThreshold} }}
+                  </ion-label>
+                </mat-option>
+              </ng-template>
+
+              <!-- footer -->
+              <ion-row *ngIf="itemCount as count" class="mat-autocomplete-footer ion-no-padding">
+                <ion-col>
+                  <ion-text class="ion-float-end ion-padding-end"><i>{{'COMMON.RESULT_COUNT'|translate: {count: count} }}</i></ion-text>
+                </ion-col>
+              </ion-row>
+
+            </mat-autocomplete>
+
+          </ng-template>
+
+          <div matSuffix>
+            <ng-container *ngTemplateOutlet="matSuffixTemplate"></ng-container>
+          </div>
+
+          <mat-error *ngIf="formControl.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+          <mat-error *ngIf="formControl.hasError('entity')" translate>ERROR.FIELD_INVALID</mat-error>
+          <ng-content select="[matError]"></ng-content>
+
+        </mat-form-field>
+      </ng-template>
+    </ion-col>
+    <ion-col size="auto" class="ion-align-self-center">
+      <ng-content select="[matAfter]"></ng-content>
+    </ion-col>
+  </ion-row>
+</ion-grid>
+
+<ng-template #matPrefixTemplate>
+  <ng-content select="[matPrefix]"></ng-content>
+</ng-template>
+
+
+<ng-template #matSuffixTemplate>
+  <button matSuffix mat-icon-button tabindex="-1"
+          type="button"
+          *ngIf="!mobile && !multiple"
+          (click)="dropButtonClick.emit($event)"
+          [hidden]="disabled">
+    <mat-icon class="large select-arrow">arrow_drop_down</mat-icon>
+  </button>
+  <button matSuffix mat-icon-button tabindex="-1"
+          type="button"
+          *ngIf="clearable"
+          (click)="clearValue($event)"
+          [hidden]="disabled || !formControl.value">
+    <mat-icon>close</mat-icon>
+  </button>
+
+  <ng-content select="[matSuffix]"></ng-content>
+</ng-template>

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

@@ -0,0 +1,45 @@
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatIconModule} from '@angular/material/icon';
+import {MatButtonModule} from '@angular/material/button';
+import {MatSelectModule} from '@angular/material/select';
+import {MatAutocompleteField} from './material.autocomplete';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {SharedPipesModule} from '../../pipes/pipes.module';
+import {ReactiveFormsModule} from '@angular/forms';
+import {SharedDirectivesModule} from '../../directives/directives.module';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    ScrollingModule,
+    ReactiveFormsModule,
+    SharedPipesModule,
+    SharedDirectivesModule,
+    MatCommonModule,
+    MatAutocompleteModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatIconModule,
+    MatButtonModule,
+    MatSelectModule,
+    TranslateModule.forChild()
+  ],
+  exports: [
+    MatAutocompleteModule,
+    MatAutocompleteField,
+  ],
+  declarations: [
+    MatAutocompleteField
+  ]
+})
+export class SharedMatAutocompleteModule {
+}
+

package/src/app/shared/material/autocomplete/material.autocomplete.scss

@@ -0,0 +1,21 @@
+:host {
+  display: inline-block;
+  position: relative;
+
+  &.ion-text-wrap {
+    ion-label {
+      white-space: normal !important;
+    }
+  }
+}
+
+button[hidden] {
+  display: none;
+}
+
+// This try to copy style as .mat-select-arrow
+mat-icon.select-arrow {
+  color: rgba(0,0,0,0.47);
+  font-size: 150%;
+}
+