@sumaris-net/ngx-components 18.14.0 → 18.14.2

package/src/app/shared/image/gallery/testing/gallery.service.testing.ts

@@ -1,99 +0,0 @@
-import { Injectable } from '@angular/core';
-
-import { SortDirection } from '@angular/material/sort';
-import { map } from 'rxjs/operators';
-import { BehaviorSubject, Observable } from 'rxjs';
-import { StartableService } from '../../../services/startable-service.class';
-import { EntitiesServiceWatchOptions, IEntitiesService, LoadResult } from '../../../services/entity-service.class';
-import { Platform } from '@ionic/angular';
-import { isNil, isNotNil, removeDuplicatesFromArray } from '../../../functions';
-import { Entity, EntityUtils } from '../../../../core/services/model/entity.model';
-import { EntityClass } from '../../../../core/services/model/entity.decorators';
-import { Image } from '../../image.model';
-import { EntityFilter } from '../../../../core/services/model/filter.model';
-
-// @dynamic
-@EntityClass({ typename: 'ImageAttachmentVO' })
-export class ImageAttachment extends Entity<ImageAttachment> implements Image {
-  static fromObject: (source: any, opts?: any) => ImageAttachment;
-
-  dataUrl: string = null;
-  url: string = null;
-  title: string = null;
-
-  fromObject(source: any, opts?: any) {
-    super.fromObject(source, opts);
-    this.url = source.url;
-    this.dataUrl = source.dataUrl;
-    this.title = source.title;
-  }
-}
-
-// @dynamic
-@EntityClass({ typename: 'ImageAttachmentFilterVO' })
-export class ImageAttachmentFilter extends EntityFilter<ImageAttachmentFilter, ImageAttachment> {
-  static fromObject: (source: any, opts?: any) => ImageAttachmentFilter;
-}
-
-@Injectable()
-export class ImageAttachmentService extends StartableService implements IEntitiesService<ImageAttachment, ImageAttachmentFilter> {
-  $images = new BehaviorSubject<Partial<ImageAttachment>[]>([
-    ImageAttachment.fromObject({ id: 0, url: 'https://test.sumaris.net/assets/img/bg/ray-1.jpg', title: 'ray #1' }),
-    ImageAttachment.fromObject({ id: 1, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #2' }),
-  ]);
-
-  constructor(protected platform: Platform) {
-    super(platform);
-    console.debug('[gallery-testing-service] Create service');
-  }
-
-  protected ngOnStart(): Promise<any> {
-    return Promise.resolve(undefined);
-  }
-
-  watchAll(
-    offset: number,
-    size: number,
-    sortBy?: string,
-    sortDirection?: SortDirection,
-    filter?: ImageAttachmentFilter,
-    opts?: EntitiesServiceWatchOptions & { query?: any }
-  ): Observable<LoadResult<ImageAttachment>> {
-    console.debug('[gallery-testing-service] Watching images...');
-    return this.$images.pipe(
-      map((images) => {
-        let data = (images || []).map(ImageAttachment.fromObject);
-
-        data = EntityUtils.sort(data, sortBy, sortDirection);
-
-        console.debug(`[gallery-testing-service] Loaded ${data.length} images...`);
-
-        return { data, total: data.length };
-      })
-    );
-  }
-
-  async saveAll(entities: ImageAttachment[]): Promise<any[]> {
-    console.debug('[gallery-service-testing] Saving images...' + JSON.stringify(entities));
-    if (!entities) return [];
-
-    const existingImages = this.$images.value;
-    let currentId = existingImages.reduce((res, image) => Math.max(res, +image?.id || 0), 0);
-    entities
-      .filter((item) => isNil(item.id))
-      .forEach((item) => {
-        item.id = ++currentId;
-      });
-    this.$images.next(removeDuplicatesFromArray([...existingImages, ...entities], 'id'));
-  }
-
-  async deleteAll(entities: ImageAttachment[]): Promise<any> {
-    const deletedIds = (entities || []).map((item) => item.id).filter(isNotNil);
-    const filteredData = this.$images.value.filter((item) => !deletedIds.includes(item.id));
-    this.$images.next(filteredData);
-  }
-
-  asFilter(filter: any) {
-    return ImageAttachmentFilter.fromObject(filter);
-  }
-}

package/src/app/shared/image/gallery/testing/gallery.testing.html

@@ -1,27 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Image gallery</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <!-- DEBUG -->
-  <app-debug title="Galley">
-    <ion-grid>
-      <ion-row>
-        <ion-col>gallery.count: {{ gallery.rows?.length }}</ion-col>
-      </ion-row>
-    </ion-grid>
-  </app-debug>
-
-  <app-image-gallery
-    #gallery
-    [dataSource]="dataSource"
-    (onAfterAddRows)="save()"
-    (onAfterEditRow)="save()"
-  ></app-image-gallery>
-</ion-content>

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

@@ -1,39 +0,0 @@
-import { NgModule } from '@angular/core';
-import { TranslateModule } from '@ngx-translate/core';
-import { RouterModule, Routes } from '@angular/router';
-import { GalleryTestPage } from './gallery.testing';
-import { CommonModule } from '@angular/common';
-import { IonicModule } from '@ionic/angular';
-import { ImageGalleryModule } from '../image-gallery.module';
-import { SharedDebugModule } from '../../../debug/debug.module';
-
-const routes: Routes = [
-  {
-    path: 'gallery',
-    pathMatch: 'full',
-    component: GalleryTestPage,
-  },
-];
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    ImageGalleryModule,
-    TranslateModule.forChild(),
-    RouterModule.forChild(routes),
-    TranslateModule.forChild(),
-    SharedDebugModule,
-  ],
-  declarations: [
-    // Components
-    GalleryTestPage,
-  ],
-  exports: [
-    RouterModule,
-
-    // Components
-    GalleryTestPage,
-  ],
-})
-export class ImageGalleryTestingModule {}

package/src/app/shared/image/gallery/testing/gallery.testing.ts

@@ -1,34 +0,0 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ImageAttachment, ImageAttachmentService } from './gallery.service.testing';
-import { EntitiesTableDataSource } from '../../../../core/table/entities-table-datasource.class';
-import { Subscription } from 'rxjs';
-import { ImageAttachmentFilter } from './gallegry.model.testing';
-
-@Component({
-  selector: 'app-gallery-test-page',
-  templateUrl: './gallery.testing.html',
-  providers: [{ provide: ImageAttachmentService, useClass: ImageAttachmentService }],
-})
-export class GalleryTestPage implements OnInit, OnDestroy {
-  private _subscription = new Subscription();
-  readonly dataSource: EntitiesTableDataSource<ImageAttachment, ImageAttachmentFilter>;
-
-  constructor(protected dataService: ImageAttachmentService) {
-    this.dataSource = new EntitiesTableDataSource<ImageAttachment, ImageAttachmentFilter>(ImageAttachment, this.dataService, null, {
-      saveBeforeDelete: true,
-      saveOnlyDirtyRows: false,
-    });
-  }
-
-  ngOnInit() {
-    this._subscription.add(this.dataSource.watchAll(0, 100, null, null, null).subscribe());
-  }
-
-  ngOnDestroy() {
-    this._subscription.unsubscribe();
-  }
-
-  save() {
-    this.dataSource.save();
-  }
-}

package/src/app/shared/image/image.model.ts

@@ -1,8 +0,0 @@
-export interface Image {
-  dataUrl: string;
-  url: string;
-  title?: string;
-  exif?: any;
-}
-
-export type ImageSize = 'small' | 'medium' | 'large';

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

@@ -1,12 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { ImageGalleryModule } from './gallery/image-gallery.module';
-
-@NgModule({
-  imports: [CommonModule, ImageGalleryModule],
-  exports: [
-    // Sub module
-    ImageGalleryModule,
-  ],
-})
-export class ImageModule {}

package/src/app/shared/image/image.service.ts

@@ -1,111 +0,0 @@
-import { Inject, Injectable, Optional } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
-
-import { TranslateService } from '@ngx-translate/core';
-import { StartableService } from '../services/startable-service.class';
-import { ENVIRONMENT, Environment } from '../../../environments/environment.class';
-import { PlatformService } from '../../core/services/platform.service';
-import { LocalSettingsService } from '../../core/services/local-settings.service';
-import { FilesUtils } from '../file/file.utils';
-import { ImagesUtils } from '../file/images.utils';
-import { isEmptyArray } from '../functions';
-
-import { Image } from './image.model';
-import { Capacitor } from '@capacitor/core';
-import { Camera, CameraResultType, ImageOptions } from '@capacitor/camera';
-
-@Injectable({ providedIn: 'root' })
-export class ImageService extends StartableService {
-  private defaultMaxHeight = 1024;
-  private defaultMaxWidth = 1024;
-
-  constructor(
-    protected platform: PlatformService,
-    protected settings: LocalSettingsService,
-    protected translate: TranslateService,
-    protected popoverController: PopoverController,
-    @Inject(ENVIRONMENT) @Optional() protected environment?: Environment
-  ) {
-    super(platform);
-    this._debug = !environment.production;
-    if (this._debug) console.debug(`[image] Creating service`);
-  }
-
-  protected async ngOnStart(): Promise<any> {
-    try {
-      const camera = Capacitor.isPluginAvailable('Camera');
-      console.info(`[image] Starting... {camera: ${camera}}`);
-    } catch (err) {
-      console.error('Cannot check Camera plugin: ' + (err?.message || err));
-    }
-  }
-
-  async add(
-    event?: Event,
-    opts?: { maxHeight?: number; mawWidth?: number; quality?: number; multiple?: boolean; autoHideDropArea?: boolean } & Omit<
-      ImageOptions,
-      'resultType'
-    >
-  ): Promise<Image[] | undefined> {
-    if (!this.started) await this.ready();
-
-    // If desktop: open upload popover
-    if (!this.platform.isCordova()) {
-      return this.addUploadedImages(event, opts);
-    }
-
-    console.info(`[image-service] Adding image...`);
-
-    try {
-      const data = await Camera.getPhoto({
-        height: this.defaultMaxHeight,
-        width: this.defaultMaxWidth,
-        promptLabelCancel: this.translate.instant('COMMON.BTN_CANCEL'),
-        promptLabelPicture: this.translate.instant('IMAGE.BTN_CAMERA_SOURCE'),
-        resultType: CameraResultType.DataUrl,
-        ...opts,
-      });
-      if (!data) return undefined;
-
-      // DEBUG
-      if (this._debug && data.exif) {
-        console.debug(`[image-service] Image added, with exif:`, data.exif);
-      }
-
-      return [
-        <Image>{
-          dataUrl: data.dataUrl,
-          exif: data.exif,
-        },
-      ];
-    } catch (err) {
-      console.info(`[image-service] Error while adding image: ${err?.message || err} -> ${err?.originalStack || ''}`);
-      return undefined;
-    }
-  }
-
-  /* -- protected functions -- */
-
-  protected async addUploadedImages(
-    event?: Event,
-    opts?: { maxHeight?: number; mawWidth?: number; quality?: number; multiple?: boolean; autoHideDropArea?: boolean }
-  ): Promise<Image[] | undefined> {
-    const { data } = await FilesUtils.showUploadPopover(this.popoverController, event, {
-      uniqueFile: opts?.multiple !== true,
-      autoHideDropArea: opts?.autoHideDropArea !== false,
-      fileExtension: '.png, .jpg',
-      instantUpload: true,
-      uploadFn: (file) =>
-        ImagesUtils.readAsDataURL(file, {
-          maxWidth: this.defaultMaxWidth,
-          maxHeight: this.defaultMaxHeight,
-          ...opts,
-        }),
-    });
-
-    if (isEmptyArray(data)) return; // No files uploaded: skip
-    return (data || [])
-      .map((file) => file.response.body) // Get response body = data as base64
-      .map((dataUrl) => <Image>{ dataUrl });
-  }
-}

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

@@ -1,16 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { ImageModule } from './image.module';
-import { CommonModule } from '@angular/common';
-import { ImageGalleryTestingModule } from './gallery/testing/gallery.testing.module';
-
-@NgModule({
-  imports: [CommonModule, ImageModule, ImageGalleryTestingModule],
-  exports: [
-    RouterModule,
-
-    // Sub modules
-    ImageGalleryTestingModule,
-  ],
-})
-export class ImageTestingModule {}

package/src/app/shared/inputs.ts

@@ -1,330 +0,0 @@
-import { ElementRef, QueryList } from '@angular/core';
-import { FocusableElement, isFocusableElement } from './focusable';
-import { isNil, isNilOrBlank, isNotEmptyArray, isNotNil, isNotNilOrBlank, toBoolean, toNumber } from './functions';
-
-export function selectInputContentFromEvent(event: Event): boolean {
-  if (!event || event.defaultPrevented) return false;
-  return selectInputContent(event.target as HTMLInputElement);
-}
-
-export function selectInputContent(input: HTMLInputElement | HTMLTextAreaElement | any): boolean {
-  // Detect deprecated usage (before 18.2.21)
-  if (input?.target || input instanceof Event) {
-    console.warn('DEPRECATED usage since 18.2.21 - Please use selectInputContentFromEvent() instead selectInputContent()');
-    input = input.target;
-  }
-  if (!input) return true;
-
-  // Nothing to select
-  if (isNilOrBlank(input.value)) return false;
-
-  if (typeof input.selectRange === 'function') {
-    try {
-      input.selectRange(input.value.length, 0);
-      return true;
-    } catch (err) {
-      console.error('Could not select input content, using selectRange()', err);
-      return false;
-    }
-  }
-
-  if (input && typeof input.select === 'function') {
-    try {
-      input.select();
-      return true;
-    } catch (err) {
-      console.error('Could not select input content, using select()', err);
-      return false;
-    }
-  }
-  return true;
-}
-
-export function selectInputRange(
-  input: HTMLInputElement | HTMLTextAreaElement,
-  startIndex: number,
-  endIndex?: number,
-  direction?: 'backward' | 'forward' | 'none'
-) {
-  if (input && typeof input.setSelectionRange === 'function') {
-    // No content
-    if (isNilOrBlank(input.value)) return false;
-
-    try {
-      input.setSelectionRange(startIndex, endIndex ?? startIndex, direction);
-    } catch (err) {
-      console.error('Could not select input range', err);
-      return false;
-    }
-  }
-  return true;
-}
-
-export function getCaretPosition(input: any): number {
-  if (input && input.selectionStart != null) {
-    return input.selectionDirection ? (input.selectionDirection === 'backward' ? input.selectionStart : input.selectionEnd) : input.selectionStart;
-  }
-  return -1;
-}
-
-export function moveInputCaretToSeparator(event: KeyboardEvent, separator: string, forward?: boolean) {
-  if (event.defaultPrevented || !separator) return false;
-  const input = event.target as any;
-  if (!input) return true;
-
-  const caretPosition = getCaretPosition(input);
-
-  // DEBUG
-  //console.debug('caretPosition=', caretPosition);
-
-  if (caretPosition === -1) return true; // Caret pos not found: skip
-
-  // Get input value
-  const value = input.value as string;
-
-  // No content: skip
-  if (isNilOrBlank(value)) return false;
-
-  try {
-    if (value && caretPosition <= value.length) {
-      // DEBUG
-      //console.debug("Input text value: ", value);
-      //console.debug("Cursor at: ", caretPosition);
-      //console.debug("Text after cursor: ", value.substring(caretPosition));
-
-      forward = forward !== false;
-
-      const separatorIndex = forward ? value.indexOf(separator, caretPosition) : value.lastIndexOf(separator, caretPosition);
-      if (separatorIndex !== -1 && ((forward && separatorIndex + 1 < value.length) || (!forward && separatorIndex > 0))) {
-        if (input.setSelectionRange) {
-          // Move after the next separator
-          if (selectInputRange(input, separatorIndex + (forward ? 1 : -1))) {
-            // Stop the keyboard event
-            event.preventDefault();
-            event.stopPropagation();
-          }
-        }
-      }
-    }
-  } catch (err) {
-    console.error('Could not move caret to next separator', err);
-    return false;
-  }
-  return true;
-}
-
-export function filterNumberInput(event: KeyboardEvent, allowDecimals: boolean, decimalSeparator?: string) {
-  //input number entered or one of the 4 direction up, down, left and right
-  if ((event.which >= 48 && event.which <= 57) || (event.which >= 37 && event.which <= 40)) {
-    //console.debug('input number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
-    // OK
-  }
-  // Decimal separator
-  else if (
-    allowDecimals &&
-    ((!decimalSeparator && (event.key === '.' || event.key === ',')) || (decimalSeparator && event.key === decimalSeparator))
-  ) {
-    //console.debug('input decimal separator entered :' + event.code);
-    // OK
-  } else {
-    //input command entered of delete, backspace or one of the 4 direction up, down, left and right, or negative sign
-    if ((event.keyCode >= 37 && event.keyCode <= 40) || event.keyCode === 46 || event.which === 8 || event.keyCode === 9 || event.keyCode === 45) {
-      //console.debug('input command entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode);
-      // OK
-    }
-    // Cancel other keyboard events
-    else {
-      //console.debug('input not number entered :' + event.which + ' ' + event.keyCode + ' ' + event.charCode + ' ' + event.code );
-      event.preventDefault();
-    }
-  }
-}
-
-export function focusInput<T = any>(element: ElementRef<T>) {
-  const inputElement = asInputElement(element);
-  if (inputElement) inputElement.focus();
-  else {
-    console.warn('Trying to focus on this element:', element);
-  }
-}
-
-export function setTabIndex<T = any>(element: ElementRef<T>, tabIndex: number) {
-  if (isInputElement(element)) {
-    element.tabindex = tabIndex;
-  } else if (element && isInputElement(element.nativeElement)) {
-    element.nativeElement.tabIndex = tabIndex;
-  } else {
-    console.warn('Trying to change tabindex on this element:', element);
-  }
-}
-
-export interface InputElement extends FocusableElement {
-  tabindex?: number;
-  tabIndex?: number;
-  hidden?: boolean;
-  disabled?: boolean;
-  value: any;
-}
-export function isInputElement(object: any): object is InputElement {
-  return (
-    isFocusableElement(object) &&
-    ('value' in object ||
-      // has value is not always set (neither tabindex) check on 2 properties with a logical OR
-      'tabindex' in object ||
-      'tabIndex' in object)
-  );
-}
-
-export function asInputElement<T = any>(object: ElementRef<T>): InputElement | undefined {
-  if (object) {
-    if (isInputElement(object)) return object;
-    if (object.nativeElement && isInputElement(object.nativeElement)) return object.nativeElement;
-  }
-  return undefined;
-}
-
-export function tabindexComparator(a: InputElement, b: InputElement) {
-  const valueA = a.tabindex || a.tabIndex;
-  const valueB = b.tabindex || b.tabIndex;
-  return valueA === valueB ? 0 : valueA > valueB ? 1 : -1;
-}
-
-export interface CanGainFocusOptions {
-  minTabindex?: number;
-  maxTabindex?: number;
-  isEmpty?: boolean;
-  isNotEmpty?: boolean;
-}
-
-export interface GetFocusableInputOptions extends CanGainFocusOptions {
-  sortByTabIndex?: boolean;
-  debug?: boolean;
-}
-
-export function canHaveFocus(input: InputElement, opts?: CanGainFocusOptions): boolean {
-  if (!input) return false;
-  if (opts?.isEmpty && opts.isNotEmpty)
-    throw new Error('Cannot use both options onlyEmptyInput and onlyNotEmptyInput at the same time. Please use only one of them.');
-  return (
-    // Exclude disabled element
-    !toBoolean(input.disabled, false) &&
-    // Exclude hidden element
-    !toBoolean(input.hidden, false) &&
-    // Exclude minTabIndex < element.tabIndex
-    (isNil(opts?.minTabindex) || toNumber(input.tabIndex, input.tabindex) > opts.minTabindex) &&
-    // Exclude maxTabIndex > element.tabIndex
-    (isNil(opts?.maxTabindex) || toNumber(input.tabIndex, input.tabindex) < opts.maxTabindex) &&
-    // Exclude not nil input value
-    (!opts?.isEmpty || isNilOrBlank(input.value)) &&
-    // Exclude nil input value
-    (!opts?.isNotEmpty || isNotNilOrBlank(input.value))
-  );
-}
-
-export function getFocusableInputElements(elements: QueryList<ElementRef>, opts?: GetFocusableInputOptions): InputElement[] {
-  opts = { sortByTabIndex: false, ...opts };
-
-  // Focus to first input
-  const filteredElements: InputElement[] = elements
-
-    // Transform to input
-    .map(asInputElement)
-
-    .filter((input) => {
-      const included = canHaveFocus(input, opts);
-      // DEBUG
-      if (input && opts.debug)
-        console.debug(`[inputs] Focusable input {canFocus: ${included}, tabIndex: ${input.tabIndex || input.tabindex}}`, input);
-      return included;
-    });
-
-  // Sort by tabIndex
-  if (opts.sortByTabIndex) {
-    return filteredElements.sort(tabindexComparator);
-  }
-
-  return filteredElements;
-}
-
-export function focusNextInput<T = any>(event: Event | undefined, elements: QueryList<ElementRef<T>>, opts?: GetFocusableInputOptions): boolean {
-  // Cancelling event (e.g. when emitted by (keydown.tab) )
-  if (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  // Get current index
-  const minTabindex = event && isInputElement(event.target) ? event.target.tabIndex || event.target.tabindex : undefined;
-
-  // Get focusable input elements
-  const focusableInputs: InputElement[] = getFocusableInputElements(elements, { minTabindex, ...opts });
-
-  if (isNotEmptyArray(focusableInputs)) {
-    // Focus on first inputs
-    focusableInputs[0].focus();
-    return true;
-  }
-
-  return false;
-}
-
-export function focusPreviousInput<T = any>(event: Event | undefined, elements: QueryList<ElementRef<T>>, opts?: GetFocusableInputOptions): boolean {
-  // Cancelling event (e.g. when emitted by (keydown.tab) )
-  if (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }
-
-  // Get current index
-  const maxTabindex = event && isInputElement(event.target) ? event.target.tabIndex || event.target.tabindex : undefined;
-
-  // Get focusable input elements
-  const focusableInputs: InputElement[] = getFocusableInputElements(elements, { maxTabindex, ...opts });
-
-  if (isNotEmptyArray(focusableInputs)) {
-    // Focus on last inputs
-    focusableInputs[focusableInputs.length - 1].focus();
-    return true;
-  }
-
-  return false;
-}
-
-export function getInputSelectionRangesFromMask(mask: (string | RegExp)[]): number[][] {
-  const result = [];
-  let first_index: number;
-  let last_index: number;
-  for (let i = 0; i < mask.length; i++) {
-    if (i === 0 && mask[i].toString() === '/[+-]/') {
-      // DEBUG
-      //console.debug('TODO push start mask', { i, mask: mask[i].toString() });
-
-      result.push([0, 0]);
-    } else if (mask[i] instanceof RegExp) {
-      if (isNil(first_index)) {
-        first_index = i;
-      }
-    } else {
-      if (isNotNil(first_index)) {
-        last_index = i - 1;
-        result.push([first_index, last_index]);
-        first_index = null;
-        last_index = null;
-      }
-    }
-  }
-  if (mask[mask.length - 1] instanceof RegExp) {
-    last_index = mask.length - 1;
-    result.push([first_index, last_index]);
-  }
-  return result;
-}
-
-export function getInputRangeFromCaretIndex(caretIndex: number, inputRanges: number[][]): number[] {
-  for (const inputRange of inputRanges) {
-    if (caretIndex >= inputRange[0] && caretIndex <= inputRange[1] + 1) {
-      return inputRange;
-    }
-  }
-  return null;
-}