@sumaris-net/ngx-components 18.10.29 → 18.12.0

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,330 @@
+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;
+}