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

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

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {DebugComponent} from './debug.component';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {TranslateModule} from '@ngx-translate/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {MatIcon, MatIconModule} from '@angular/material/icon';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    MatExpansionModule,
+    MatIconModule,
+    TranslateModule.forChild(),
+    MatExpansionModule
+  ],
+  declarations: [
+    DebugComponent
+  ],
+  exports: [
+    DebugComponent,
+    TranslateModule
+  ]
+})
+export class SharedDebugModule {
+
+}

package/src/app/shared/directives/autofocus.directive.ts

@@ -0,0 +1,109 @@
+// Import the core angular services.
+import {AfterContentInit, Directive, ElementRef, OnChanges, OnDestroy, SimpleChanges} from '@angular/core';
+import {isMobile} from '../platforms';
+import {Subscription, timer} from 'rxjs';
+import {KeyboardService} from '../capacitor/keyboard';
+
+// ----------------------------------------------------------------------------------- //
+// ----------------------------------------------------------------------------------- //
+
+const BASE_TIMER_DELAY = 100;
+
+@Directive({
+  selector: '[autofocus], input[appAutofocus]',
+  inputs: [
+    'shouldFocusElement: appAutofocus',
+    'timerDelay: autofocusDelay'
+  ]
+})
+export class AutofocusDirective implements AfterContentInit, OnChanges, OnDestroy {
+
+  public shouldFocusElement: any;
+  public timerDelay: number;
+
+  private readonly _mobile: boolean;
+  private _timer: Subscription = null;
+
+  // I initialize the autofocus directive.
+  constructor(
+    private readonly _elementRef: ElementRef,
+    private readonly keyboard: KeyboardService) {
+
+    this.shouldFocusElement = '';
+    this._timer = null;
+    this.timerDelay = BASE_TIMER_DELAY;
+    this._mobile = isMobile(window);
+  }
+
+  // I get called once after the contents have been fully initialized.
+  ngAfterContentInit() {
+
+    // Because this directive can act on the stand-only "autofocus" attribute or
+    // the more specialized "appAutofocus" property, we need to check to see if the
+    // "shouldFocusElement" input property is the empty string. This will signify
+    // that the focus it not being data-driven and should be performed automatically.
+    if ( this.shouldFocusElement === '') {
+      this._startFocus();
+    }
+  }
+
+  // I get called every time the input bindings are updated.
+  ngOnChanges( changes: SimpleChanges ) {
+
+    // If the timer delay is being passed-in as a string (ie, someone is using
+    // attribute-input syntax, not property-input syntax), let's coalesce the
+    // attribute to a numeric value so that our type-annotations are consistent.
+    if ( (changes.autofocusDelay || changes.timerDelay) && ( typeof( this.timerDelay ) !== 'number' ) ) {
+
+      // If the coalesce fails, just fall-back to a sane value.
+      if ( isNaN( this.timerDelay = +this.timerDelay ) ) {
+        this.timerDelay = BASE_TIMER_DELAY;
+      }
+    }
+
+    // If the focus input is being data-driven, then we either need to start the
+    // focus workflow if focus is required; or, clear any existing workflow if focus
+    // is no longer required (so that we don't steal focus from another element).
+    if ( changes.appAutofocus || changes.shouldFocusElement ) {
+
+      ( this.shouldFocusElement )
+        ? this._startFocus()
+        : this._stop()
+      ;
+    }
+  }
+
+  // I get called once when the directive is being unmounted.
+  ngOnDestroy() {
+    this._stop();
+  }
+
+  /* --- private functions -- */
+
+  // I start the timer-based workflow that will focus the current element.
+  private _startFocus() {
+
+    // Skip focus when keyboard is visible
+    if (this.keyboard.visible) return;
+
+    // If there is already a timer running for this element, just let it play out -
+    // resetting it at this point will only push-out the time at which the focus is
+    // applied to the element.
+    if ( this._timer )  return;
+
+    this._timer = timer(this.timerDelay)
+      .subscribe(() => {
+        if (this._timer) {
+          this._stop();
+          this._elementRef.nativeElement.focus();
+        }
+      });
+  }
+
+  // I stop the timer-based workflow, preventing focus from taking place.
+  private _stop() {
+    this._timer?.unsubscribe();
+    this._timer = null;
+  }
+
+}

package/src/app/shared/directives/autotitle.directive.ts

@@ -0,0 +1,24 @@
+import { AfterContentChecked, Directive, ElementRef, Inject } from '@angular/core';
+
+const compatibleTagNames = ['ion-label', 'mat-label'];
+
+@Directive({
+  selector: '[appAutoTitle]',
+})
+export class AutoTitleDirective implements AfterContentChecked {
+  private readonly element: HTMLElement;
+
+  constructor(@Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>) {
+    // Check compatible tag
+    if (compatibleTagNames.includes(elementRef.nativeElement.tagName?.toLowerCase())) {
+      this.element = elementRef.nativeElement;
+    }
+  }
+
+  ngAfterContentChecked(): void {
+    // Update title if different
+    if (this.element && this.element.title !== this.element.textContent) {
+      this.element.title = this.element.textContent;
+    }
+  }
+}

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

@@ -0,0 +1,29 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {IonicModule} from '@ionic/angular';
+import {AutofocusDirective} from './autofocus.directive';
+import {NgVarDirective} from './ng-var.directive';
+import {DragAndDropDirective} from './drag-and-drop.directive';
+import {AutoTitleDirective} from './autotitle.directive';
+
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule
+  ],
+  declarations: [
+    AutofocusDirective,
+    NgVarDirective,
+    DragAndDropDirective,
+    AutoTitleDirective
+  ],
+  exports: [
+    AutofocusDirective,
+    NgVarDirective,
+    DragAndDropDirective,
+    AutoTitleDirective
+  ]
+})
+export class SharedDirectivesModule {
+}

package/src/app/shared/directives/drag-and-drop.directive.ts

@@ -0,0 +1,47 @@
+import { Directive, EventEmitter, HostBinding, HostListener, Output } from '@angular/core';
+import {isNotEmptyArray} from '../functions';
+
+interface DropEvent extends Event {
+  dataTransfer?: {
+    files?: File[]
+  }
+}
+
+@Directive({
+  selector: '[appDragAndDrop]',
+})
+export class DragAndDropDirective {
+
+  @HostBinding('class.fileover') fileOver: boolean;
+
+  @Output() fileDropped = new EventEmitter<File[]>();
+
+  // Dragover listener
+  @HostListener('dragover', ['$event'])
+  onDragOver(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.fileOver = true;
+  }
+
+  // Dragleave listener
+  @HostListener('dragleave', ['$event'])
+  public onDragLeave(event: Event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.fileOver = false;
+  }
+
+  // Drop listener
+  @HostListener('drop', ['$event'])
+  public ondrop(event: DropEvent) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.fileOver = false;
+    const files = event.dataTransfer?.files;
+
+    if (isNotEmptyArray(files)) {
+      this.fileDropped.emit(files);
+    }
+  }
+}

package/src/app/shared/directives/ng-var.directive.ts

@@ -0,0 +1,32 @@
+import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core';
+
+@Directive({
+  selector: '[ngVar]',
+})
+export class NgVarDirective {
+
+  @Input()
+  set ngVar(context: unknown) {
+    this.context.$implicit = this.context.ngVar = context;
+
+    if (!this.hasView) {
+      this.vcRef.createEmbeddedView(this.templateRef, this.context);
+      this.hasView = true;
+    }
+  }
+
+  private context: {
+    $implicit: unknown;
+    ngVar: unknown;
+  } = {
+    $implicit: null,
+    ngVar: null,
+  };
+
+  private hasView: boolean = false;
+
+  constructor(
+    private templateRef: TemplateRef<any>,
+    private vcRef: ViewContainerRef
+  ) {}
+}

package/src/app/shared/directives/resizable/resizable.component.ts

@@ -0,0 +1,47 @@
+import { Component, EventEmitter, HostBinding, Input, Optional, Output } from '@angular/core';
+import { MatColumnDef } from '@angular/material/table';
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'th[resizable]',
+  templateUrl: './resizable.template.html',
+  styleUrls: ['./resizable.style.scss'],
+})
+export class ResizableComponent {
+  @Input() resizable: boolean;
+  @Output() sizeChanged = new EventEmitter<number>();
+
+  @HostBinding('style.width')
+  width: string | null = null;
+
+  @HostBinding('style.min-width')
+  minWidth: string | null = null;
+
+  @HostBinding('style.max-width')
+  maxWidth: string | null = null;
+
+  private debug = false;
+
+  constructor(@Optional() public readonly columnDef: MatColumnDef) {}
+
+  onResize(width: number, opts?: { emitEvent: boolean }) {
+    if (!this.resizable) return;
+    if (this.debug) console.info(`resize:${width}`);
+    this.minWidth = width + 'px';
+    this.maxWidth = width + 'px';
+    if (!opts || opts.emitEvent) {
+      this.sizeChanged.emit(width);
+    }
+  }
+
+  onFit(opts?: { emitEvent: boolean }) {
+    if (!this.resizable) return;
+    if (this.debug) console.info('fit');
+    this.width = 'auto';
+    this.minWidth = null;
+    this.maxWidth = null;
+    if (!opts || opts.emitEvent) {
+      this.sizeChanged.emit(undefined);
+    }
+  }
+}

package/src/app/shared/directives/resizable/resizable.directive.ts

@@ -0,0 +1,43 @@
+import { DOCUMENT } from '@angular/common';
+import { Directive, ElementRef, Inject, Output } from '@angular/core';
+import { bufferWhen, distinctUntilChanged, filter, map, switchMap, takeUntil, tap } from 'rxjs/operators';
+import {fromEvent, interval, Observable} from 'rxjs';
+
+@Directive({
+  selector: '[resizable]',
+})
+export class ResizableDirective {
+
+  @Output()
+  readonly resizable: Observable<number>;
+
+  // fit: doubleclick
+  @Output()
+  readonly fit: Observable<MouseEvent[]>
+
+  constructor(@Inject(DOCUMENT) private readonly document: any,
+              @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>) {
+
+    // resize: mousedown -> mousemove -> mouseup
+    this.resizable = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'mousedown').pipe(
+      tap((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }),
+      switchMap(() => {
+        const { width, right } = this.elementRef.nativeElement.closest('th').getBoundingClientRect();
+        return fromEvent<MouseEvent>(this.document, 'mousemove').pipe(
+          map(({ clientX }) => width + clientX - right),
+          distinctUntilChanged(),
+          takeUntil(fromEvent(this.document, 'mouseup'))
+        );
+      })
+    );
+
+    // fit: doubleclick
+    this.fit = fromEvent<MouseEvent>(this.elementRef.nativeElement, 'click').pipe(
+      bufferWhen(() => interval(500)),
+      filter((ar) => ar.length === 2)
+    );
+  }
+}

package/src/app/shared/directives/resizable/resizable.module.ts

@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { ResizableComponent } from './resizable.component';
+import { ResizableDirective } from './resizable.directive';
+
+@NgModule({
+  declarations: [ResizableComponent, ResizableDirective],
+  exports: [ResizableComponent, ResizableDirective],
+})
+export class ResizableModule {}

package/src/app/shared/directives/resizable/resizable.style.scss

@@ -0,0 +1,44 @@
+:host {
+  &:last-child .bar {
+    display: none;
+  }
+}
+
+.wrapper {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.content {
+  flex: 1;
+}
+
+.bar {
+  // absolute
+  //position: absolute;
+  //top: 0;
+  //bottom: 0;
+
+  // or relative
+  height: var(--app-table-header-height, 55px);
+
+  width: 10px;
+  justify-self: flex-end;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  background: var(--ion-color-secondary);
+  background-clip: content-box;
+  cursor: ew-resize;
+  opacity: 0;
+  transition: opacity 0.3s;
+
+  &:hover,
+  &:active {
+    opacity: 1;
+  }
+}
+
+:host-context(.mat-table-sticky) .bar {
+  width: 12px !important;
+}

package/src/app/shared/directives/resizable/resizable.template.html

@@ -0,0 +1,6 @@
+<div class="wrapper">
+  <div class="content">
+    <ng-content></ng-content>
+  </div>
+  <div class="bar" [class.cdk-visually-hidden]="!resizable" (resizable)="onResize($event)" (fit)="onFit()"></div>
+</div>

package/src/app/shared/events.ts

@@ -0,0 +1,96 @@
+import { EventEmitter } from '@angular/core';
+import { fromEvent, merge, Observable, timer } from 'rxjs';
+import { filter } from 'rxjs/operators';
+
+export interface PromiseEventPayload<R = any> {
+  success: (value?: R) => void;
+  error: (reason?: any) => void;
+}
+
+export type PromiseEvent<R = any, D = void> = CustomEvent<PromiseEventPayload<R> & D>;
+
+export function createPromiseEventEmitter<R = any, D = void>(): EventEmitter<PromiseEvent<R, D>> {
+  return new EventEmitter<PromiseEvent<R, D>>(true);
+}
+
+export function createPromiseEvent<T = void, D = void>(eventType: string,
+                                                      promise: PromiseEventPayload<T>,
+                                                      initArg?: CustomEventInit<D>
+  ): PromiseEvent<T, D> {
+
+  const detail = <PromiseEventPayload & D>{
+    ...(initArg?.detail || {}),
+    ...promise
+  };
+  return new CustomEvent<PromiseEventPayload<T> & D>(eventType, {detail});
+}
+
+export function emitPromiseEvent<T = any, D = void>(emitter: EventEmitter<PromiseEvent<T, D>>,
+                                                   eventType: string,
+                                                   initArg?: CustomEventInit<D>): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const event = createPromiseEvent(eventType, {
+      success: resolve,
+      error: reject
+    }, initArg);
+    emitter.emit(event);
+  });
+}
+
+export interface CompletableEvent extends Event {
+  target: EventTarget & { complete?: () => void };
+}
+
+/**
+ * Listen end of scroll.
+ * <p>
+ *   The threshold distance from the bottom of the content to call the infinite output event when scrolled.
+ *   The threshold value can be either a percent, or in pixels.
+ *   For example, use the value of 10% for the infinite output event to get called when the user has scrolled
+ *   10% from the bottom of the page. Use the value 100px when the scroll is within 100 pixels from the bottom of the page.
+ * </p>
+ * @param element
+ * @param threshold default to '15%'
+ */
+export function fromScrollEndEvent(element: HTMLElement, threshold?: string, dueTime?: number): Observable<any> {
+
+  threshold = threshold || '15%';
+  let isEnd: () => boolean;
+
+  // Listen using percentage
+  if (threshold.endsWith('%')) {
+    const thresholdRatio = parseInt(threshold.slice(0, threshold.length - 1)) / 100;
+    isEnd = () => {
+      const endPosRatio = 1 - (element.scrollTop + element.offsetHeight) / element.scrollHeight;
+      return endPosRatio < thresholdRatio;
+    };
+  }
+
+  // Listen using pixels
+  else if (threshold.endsWith('px')) {
+    const thresholdPx = parseInt(threshold.slice(0, threshold.length - 2));
+    isEnd = () => {
+      const endPosPx = element.scrollHeight - (element.scrollTop + element.offsetHeight);
+      return endPosPx < thresholdPx;
+    };
+  }
+  else {
+    throw new Error('Invalid argument \'threshold\'. Expected value unit: \'px\' or \'%\' ')
+  }
+
+  // Check bottom reach, even if NO scroll event (e.g. when already reach the bottom)
+  if (dueTime > 0) {
+    return merge(
+      fromEvent(element, 'scroll'),
+      timer(dueTime)
+    )
+      .pipe(
+        filter(() => isEnd())
+      );
+  }
+
+  return fromEvent(element, 'scroll')
+    .pipe(
+      filter(() => isEnd())
+    );
+}

package/src/app/shared/file/csv.utils.ts

@@ -0,0 +1,94 @@
+import {Observable} from 'rxjs';
+import {filter, map} from 'rxjs/operators';
+import {HttpEventType} from '@angular/common/http';
+import {FileEvent, FileResponse} from '../upload-file/upload-file.model';
+import {FilesUtils} from './file.utils';
+import {isNotNil} from '../functions';
+
+//@dynamic
+export class CsvUtils {
+
+  static exportToFile(rows: object[],
+                      opts?: {
+                        filename?: string;
+                        headers?: string[];
+                        separator?: string;
+                        encoding?: string;
+                        type?: string;
+                      }) {
+    if (!rows || !rows.length) return; // Skip if empty
+
+    // Create text content
+    const separator = opts?.separator || ',';
+    const protectCellRegexp = new RegExp("/(\"|"+ separator +"|\n)/g");
+    const keys = Object.keys(rows[0]);
+    const headers = opts?.headers || keys;
+    const textContent =
+      // Header row
+      headers.join(separator) + '\n' +
+      // Data rows
+      rows.map(row => {
+        return keys.map(k => {
+          const cell = row[k] === null || row[k] === undefined ? '' : row[k];
+          let cellStr: string = cell instanceof Date
+            ? cell.toLocaleString()
+            : cell.toString().replace(/"/g, '""');
+          if (protectCellRegexp.test(cellStr)) {
+            cellStr = `"${cellStr}"`;
+          }
+          return cellStr;
+        }).join(separator);
+      }).join('\n');
+
+    // Write to file
+    FilesUtils.writeTextToFile(
+      textContent, {
+        type: 'text/csv',
+        filename: 'export.csv',
+        ...opts,
+      }
+    );
+  }
+
+  static parseFile(file: File, opts?: {separator?: string; encoding?: string;}): Observable<FileEvent<string[][]>> {
+    return FilesUtils.readAsText(file, opts?.encoding)
+      .pipe(
+        map(e => {
+          if (e.type === HttpEventType.UploadProgress) {
+            const loaded = Math.round(e.loaded * 0.8);
+            return {...e, loaded};
+          }
+          else if (e instanceof FileResponse){
+            const body = e.body;
+            const data = CsvUtils.parseCSV(body, opts);
+            return new FileResponse<string[][]>({body: data});
+          }
+        }),
+        filter(isNotNil)
+      );
+  }
+
+  static parseCSV(body: string, opts?: {separator?: string; skipEmptyLine?: boolean}): string[][] {
+    const separator = opts?.separator || ',';
+    const skipEmptyLine = !opts || opts.skipEmptyLine !== false;
+
+    // Protect special characters (quote and /n)
+    body = body.replace('""', '<quote>') // Protect double quote
+      .replace(/("[^\n"]+)\n\r?/gm, '"$1<br>') // Protect \n inside a quoted expression
+      .replace(/\n\r/gm, '\n') // Windows CR
+
+    const headerAndRows = body.split('\n', 2);
+    const headers = headerAndRows[0].split(separator);
+
+    return body.split('\n') // split into rows
+      .filter(line => !skipEmptyLine || line.trim().length > 0) // Skip empty line
+      .map(line => {
+        const cells = line.split(separator, headers.length) // split into cells
+          .map(cell => cell.replace(/^"([^"]*)"$/, '$1')) // Clean trailing quotes
+          .map(cell => cell.replace('<quote>', '"')) // restore protected quote
+          .map(cell => cell.replace('<br>', '\n')) // restore protected br
+        ;
+        return cells;
+      });
+  }
+}