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

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

@@ -1,134 +0,0 @@
-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

@@ -1,29 +0,0 @@
-// 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

@@ -1,22 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,262 +0,0 @@
-<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

@@ -1,45 +0,0 @@
-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

@@ -1,21 +0,0 @@
-: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%;
-}
-