@sumaris-net/ngx-components 18.12.0 → 18.12.1

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

@@ -1,165 +0,0 @@
-import { Inject, inject, Injectable, InjectionToken, Optional } from '@angular/core';
-import { EventManager } from '@angular/platform-browser';
-import { delay, Observable } from 'rxjs';
-import { DOCUMENT } from '@angular/common';
-import { HotkeysDialogComponent } from './dialog/hotkeys-dialog.component';
-import { isNotNilOrBlank } from '../functions';
-import { ModalController, Platform, PopoverController } from '@ionic/angular';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { first } from 'rxjs/operators';
-import { isMacOS } from '../platforms';
-
-interface Options {
-  element: any;
-  elementName: string;
-  description: string | undefined;
-  keys: string;
-  preventDefault: boolean;
-}
-
-export interface HotKeysConfig {
-  /**
-   * Shortcut to open the hotkeys help modal
-   */
-  openHelpModalShortcut: string;
-
-  /**
-   * Enable the hotkeys help modal
-   */
-  enableHelpModal: boolean;
-}
-
-export const APP_HOTKEYS_CONFIG = new InjectionToken<Partial<HotKeysConfig>>('HotKeysConfig');
-
-@Injectable({
-  providedIn: 'root',
-})
-export class Hotkeys {
-  private _debug = false;
-  private _id: number = 0;
-  private _hotkeys = new Map<number, Options>();
-  private _document = inject(DOCUMENT);
-  private _defaults: Partial<Options> = {
-    element: this._document,
-    preventDefault: true,
-  };
-  private _dialogRef: MatDialogRef<any>;
-  private _config: Partial<HotKeysConfig>;
-
-  readonly defaultControlKey: string;
-  readonly defaultControlKeyName: string;
-
-  get isHelpModalOpened() {
-    return !!this._dialogRef;
-  }
-
-  constructor(
-    platform: Platform,
-    private eventManager: EventManager,
-    private dialog: MatDialog,
-    private modalController: ModalController,
-    private popoverController: PopoverController,
-    @Optional() @Inject(APP_HOTKEYS_CONFIG) config?: Partial<HotKeysConfig>
-  ) {
-    this._config = {
-      enableHelpModal: true,
-      openHelpModalShortcut: 'F1',
-      ...config,
-    };
-
-    // Add shortcut to open help modal
-    if (this._config.enableHelpModal) {
-      if (this._debug) console.debug(`[hotkeys] Starting hotkeys service... Press ${this._config.openHelpModalShortcut} to get help modal.`);
-
-      this.addShortcut({ keys: this._config.openHelpModalShortcut }).subscribe(() => this.toggleHelpModal());
-    }
-
-    const isMac = isMacOS(window);
-    this.defaultControlKey = isMac ? 'meta' : 'control';
-    this.defaultControlKeyName = isMac ? '⌘' : 'Ctrl';
-
-    // For DEV only
-    //this._debug = !environment.production;
-  }
-
-  addShortcut(options: Partial<Options>): Observable<KeyboardEvent> {
-    const merged = <Options>{ ...this._defaults, ...options };
-    if (!merged.keys) throw new Error("Missing 'keys' or 'description' attribute");
-    const event = `keydown.${merged.keys}`;
-    const id = this._id++;
-
-    this._hotkeys.set(id, merged);
-
-    if (isNotNilOrBlank(merged.description)) {
-      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}: ${merged.description}`);
-    } else {
-      if (this._debug) console.debug(`[hotkeys] Add shortcut {${options.keys}}`);
-    }
-
-    return new Observable((observer) => {
-      const handler = async (e: KeyboardEvent) => {
-        // Get top component from ModalController
-        const top = (await this.modalController.getTop()) || (await this.popoverController.getTop());
-        // If modal present, check its component name against hotkey element name (fix #181)
-        if (top && top.component['name'] !== merged.elementName) {
-          if (merged.preventDefault) e.preventDefault();
-          return;
-        }
-        if (e instanceof KeyboardEvent && e.repeat) return; // skip when repeated
-        if (merged.preventDefault) e.preventDefault();
-        if (this._debug) console.debug(`[hotkeys] Shortcut {${options.keys}} detected...`);
-        observer.next(e);
-      };
-
-      const dispose = this.eventManager.addEventListener(merged.element, event, handler);
-
-      return () => {
-        dispose();
-        this._hotkeys.delete(id);
-      };
-    });
-  }
-
-  toggleHelpModal() {
-    if (this.isHelpModalOpened) {
-      this.closeHelpModal();
-    } else {
-      this.openHelpModal();
-    }
-  }
-
-  openHelpModal() {
-    if (this.isHelpModalOpened) return; // Skip if already opened
-
-    // Get keys with a not blank description
-    const hotkeys = Array.from(this._hotkeys.values()).reduce((map, item: Options) => {
-      if (isNotNilOrBlank(item?.description)) {
-        map.set(item.keys, item.description);
-      }
-      return map;
-    }, new Map());
-
-    if (hotkeys.size === 0) return; // Nothing to display
-
-    this._dialogRef = this.dialog.open(HotkeysDialogComponent, {
-      width: '500px',
-      data: hotkeys,
-    });
-    this._dialogRef
-      .afterClosed()
-      .pipe(
-        first(),
-        // Avoid too many call (e.g. in Safari)
-        delay(250)
-      )
-      .subscribe(() => {
-        // Forget the dialog ref
-        this._dialogRef = null;
-        console.debug('[hotkeys] Closing help modal');
-      });
-  }
-
-  closeHelpModal() {
-    this._dialogRef?.close(true);
-  }
-}

package/src/app/shared/hotkeys/shared-hotkeys.module.ts

@@ -1,15 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { Hotkeys } from './hotkeys.service';
-import { HotkeysDialogComponent } from './dialog/hotkeys-dialog.component';
-import { MatCommonModule } from '@angular/material/core';
-import { MatDialogModule } from '@angular/material/dialog';
-
-@NgModule({
-  imports: [CommonModule, MatCommonModule, MatDialogModule, TranslateModule.forChild()],
-  exports: [HotkeysDialogComponent],
-  declarations: [HotkeysDialogComponent],
-  providers: [Hotkeys],
-})
-export class SharedHotkeysModule {}

package/src/app/shared/http/http.utils.ts

@@ -1,95 +0,0 @@
-import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { firstValueFrom, Observable, timeout } from 'rxjs';
-
-export class HttpUtils {
-  static async getText(
-    http: HttpClient,
-    uri: string,
-    opts?: {
-      nocache?: boolean;
-      headers?:
-        | HttpHeaders
-        | {
-            [header: string]: string | string[];
-          };
-      params?:
-        | HttpParams
-        | {
-            [param: string]: string | string[];
-          };
-      reportProgress?: boolean;
-      responseType?: 'text';
-      withCredentials?: boolean;
-    }
-  ): Promise<string> {
-    // Add headers
-    opts = opts || { responseType: 'text' };
-
-    // Force no cache
-    if (opts.nocache === true) {
-      opts.headers = opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers);
-      opts.headers.append('Cache-Control', 'no-cache').append('Pragma', 'no-cache');
-    }
-
-    // Use web http client
-    try {
-      return await firstValueFrom(http.get(uri, { ...opts, responseType: 'text' }));
-    } catch (err) {
-      if (err && err.message) {
-        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
-      } else {
-        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
-      }
-      throw { code: err.status, message: 'ERROR.UNKNOWN_NETWORK_ERROR' };
-    }
-  }
-
-  static async getJson<T>(
-    http: HttpClient,
-    uri: string,
-    opts?: {
-      nocache?: boolean;
-      timeout?: number;
-      headers?:
-        | HttpHeaders
-        | {
-            [header: string]: string | string[];
-          };
-      params?:
-        | HttpParams
-        | {
-            [param: string]: string | string[];
-          };
-      reportProgress?: boolean;
-      responseType?: 'json';
-      withCredentials?: boolean;
-    }
-  ): Promise<T> {
-    // Add headers
-    opts = opts || {};
-
-    // Force no cache
-    if (opts.nocache === true) {
-      opts.headers = opts.headers instanceof HttpHeaders ? opts.headers : new HttpHeaders(opts.headers);
-      opts.headers.append('Cache-Control', 'no-cache').append('Pragma', 'no-cache');
-    }
-
-    // Use web http client
-    try {
-      let result: Observable<T>;
-      if (opts.timeout) {
-        result = http.get<T>(uri, { ...opts, responseType: 'json' }).pipe(timeout(opts?.timeout));
-      } else {
-        result = http.get<T>(uri, { ...opts, responseType: 'json' });
-      }
-      return await firstValueFrom(result);
-    } catch (err) {
-      if (err && err.message) {
-        console.error(`[network] Error on get request ${uri}: ${err.message}`, err);
-      } else {
-        console.error(`[network] Error on get request ${uri}: ${err && err.statusText}`, err);
-      }
-      throw err;
-    }
-  }
-}

package/src/app/shared/image/gallery/image-gallery.component.html

@@ -1,282 +0,0 @@
-<ion-toolbar color="light" *ngIf="showToolbar">
-  <ng-content select="ion-buttons[slot=start]"></ng-content>
-
-  <!-- Add -->
-  @if (!readOnly && showAddToolbarButton && enabled) {
-    <button mat-icon-button [title]="'COMMON.BTN_ADD' | translate" (click)="add()">
-      <mat-icon>add</mat-icon>
-    </button>
-  }
-
-  <ng-content select="ion-buttons[slot=end]"></ng-content>
-
-  <ion-buttons slot="end">
-    <!-- Toggle view mode -->
-    <ion-segment (ionChange)="toggleViewMode($event)" color="accent" [value]="_colSize">
-      <ion-segment-button [value]="4">
-        <mat-icon>view_module</mat-icon>
-      </ion-segment-button>
-      <ion-segment-button [value]="12">
-        <mat-icon>view_list</mat-icon>
-      </ion-segment-button>
-    </ion-segment>
-  </ion-buttons>
-</ion-toolbar>
-
-<div class="gallery-container ion-padding-bottom {{ this.mode }}">
-  <div *ngIf="mobile && zoomActive" class="backdrop" [style.opacity]="zoomScale"></div>
-
-  <ion-grid class="ion-no-padding">
-    <ion-row>
-      <ion-col *rxFor="let row of _data$; index as index; trackBy: trackByFn" [size]="_colSize">
-        @let image = row | propertyGet: 'currentData';
-        @if (cardTemplate) {
-          <ng-container
-            *ngTemplateOutlet="cardTemplate; context: { $implicit: row, mode: mode, image: image }"
-          ></ng-container>
-        } @else {
-          <ion-card
-            #card
-            class="image-card"
-            [class.zoom-hover]="!mobile"
-            [color]="cardColor"
-            (click)="clickRow(row, index)"
-            tappable
-            @fadeInAnimation
-          >
-            <figure class="card-thumbnail">
-              @if (image.url) {
-                <ion-img [src]="image.url | appendQueryParams: getImageSizeQueryParams()" />
-              } @else {
-                <ion-img [src]="image.dataUrl" />
-              }
-            </figure>
-
-            <!-- toolbar for title (when not hover) -->
-            @if (showTitle && image.title) {
-              <ion-toolbar color="transparent" class="title">
-                <ion-label class="card-title">{{ image.title }}</ion-label>
-              </ion-toolbar>
-            }
-
-            <!-- action toolbar shown when hover image -->
-            @if (!readOnly && !mobile && showCardToolbar) {
-              <ion-toolbar #cardToolbar color="light" class="buttons">
-                <!-- edit title button -->
-                @if (showTitle) {
-                  <button
-                    mat-button
-                    slot="start"
-                    [disabled]="disabled"
-                    (click)="editTitle($event, row, cardToolbar)"
-                    (focusin)="focusCardToolbar(cardToolbar)"
-                  >
-                    <mat-icon>edit</mat-icon>
-                    <mat-label>
-                      <span *ngIf="row.currentData.title | isNotNilOrBlank; else editLabel" translate>
-                        IMAGE.GALLERY.BTN_EDIT_TITLE
-                      </span>
-                      <ng-template #editLabel>
-                        <span translate>IMAGE.GALLERY.BTN_ADD_TITLE</span>
-                      </ng-template>
-                    </mat-label>
-                  </button>
-                }
-
-                <div class="flex-spacer"></div>
-
-                <!-- delete button -->
-                <button
-                  mat-icon-button
-                  slot="end"
-                  class="ion-float-end"
-                  [title]="'COMMON.BTN_DELETE' | translate"
-                  [disabled]="disabled"
-                  (click)="delete($event, row)"
-                >
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </ion-toolbar>
-            }
-          </ion-card>
-        }
-      </ion-col>
-
-      <!-- add button -->
-      @if ((showAddTextButton || showAddCardButton) && !readOnly) {
-        <ion-col [size]="_colSize" @fadeInAnimation>
-          @if (showAddTextButton) {
-            <ion-button (click)="add($event)" [disabled]="disabled" [color]="addButtonColor">
-              <mat-label translate>{{ addButtonText }}</mat-label>
-              <ion-icon slot="end" name="camera"></ion-icon>
-            </ion-button>
-          } @else if (showAddCardButton) {
-            <ion-card
-              class="image-card-button"
-              color="light"
-              (click)="add($event)"
-              [disabled]="disabled"
-              [title]="addButtonText"
-              tappable
-            >
-              <ion-card-content>
-                <div class="icon-container">
-                  <ion-icon name="camera" [color]="addButtonColor"></ion-icon>
-                  <ion-icon name="add" [color]="addButtonColor" class="icon-secondary"></ion-icon>
-                </div>
-              </ion-card-content>
-            </ion-card>
-          }
-        </ion-col>
-      }
-    </ion-row>
-  </ion-grid>
-</div>
-
-<!-- FAB button: add -->
-<ion-fab
-  slot="fixed"
-  vertical="bottom"
-  horizontal="end"
-  *ngIf="showFabButton && !readOnly"
-  [class.cdk-visually-hidden]="disabled"
-  @fadeInOutAnimation
->
-  <ion-fab-button color="tertiary" (click)="add($event)">
-    <ion-icon name="camera"></ion-icon>
-    <ion-icon name="add" class="icon-secondary" style="left: 33px; top: 9px; font-size: 20px"></ion-icon>
-  </ion-fab-button>
-</ion-fab>
-
-<!-- Zoom modal -->
-<ion-modal #zoomModal class="stack-modal zoom-modal" [class.modal-fullscreen]="mobile" [class.modal-large]="!mobile">
-  <ng-template>
-    <ion-content class="ion-no-padding ion-no-margin">
-      @let count = rows?.length || 0;
-      <!-- Counter  -->
-      <div class="top-left">
-        <ion-label color="light">{{ activeSlideIndex + 1 }} / {{ count }}</ion-label>
-      </div>
-
-      <!-- zoom button -->
-      <div class="top-right">
-        @if (!mobile) {
-          <ion-fab-button size="small" (click)="zoom(modalSwiper, true)" color="light">
-            <ion-icon name="search"></ion-icon>
-            <ion-icon class="icon-secondary" name="add"></ion-icon>
-          </ion-fab-button>
-          <ion-fab-button size="small" (click)="zoom(modalSwiper, false)" color="light">
-            <ion-icon name="search"></ion-icon>
-            <ion-icon class="icon-secondary" name="remove"></ion-icon>
-          </ion-fab-button>
-        }
-      </div>
-
-      <!-- navigation side buttons next/back -->
-      <ng-container *ngIf="!mobile && (rows | isArrayLength: { greaterThan: 1 })">
-        <div class="side-buttons prev" (click)="slidePrev(modalSwiper)">
-          <ion-icon name="chevron-back"></ion-icon>
-        </div>
-        <div class="side-buttons next" (click)="slideNext(modalSwiper)">
-          <ion-icon name="chevron-forward"></ion-icon>
-        </div>
-      </ng-container>
-
-      <!-- image slides -->
-      <swiper-container
-        #modalSwiper
-        [modules]="swiperModules"
-        [zoom]="true"
-        (swiperslidechange)="onSlideChange(modalSwiper)"
-        (swiperinit)="initModalSlides(modalSwiper)"
-      >
-        @for (row of rows; track row.id; let last = $last) {
-          <swiper-slide>
-            @let image = row | propertyGet: 'currentData';
-            <div class="swiper-zoom-container">
-              @if (image.url) {
-                <ion-img [src]="image.url | appendQueryParams: getImageSizeQueryParams('modal')" />
-              } @else {
-                <img [src]="image.dataUrl" [alt]="image.title" />
-              }
-            </div>
-          </swiper-slide>
-        }
-      </swiper-container>
-    </ion-content>
-
-    <ion-footer>
-      <ion-toolbar color="light">
-        <ion-row>
-          <ion-col size="4" class="ion-text-start">
-            <ion-button
-              *ngIf="!readOnly"
-              (click)="deleteFromModal($event, modalSwiper)"
-              [disabled]="disabled"
-              fill="clear"
-              color="danger"
-            >
-              <mat-icon slot="start">delete</mat-icon>
-              {{ 'COMMON.BTN_DELETE' | translate }}
-            </ion-button>
-          </ion-col>
-          <ion-col size="4"></ion-col>
-          <ion-col size="4" class="ion-text-end">
-            <ion-button (click)="zoomModal.dismiss()" color="tertiary" fill="clear" *ngIf="mobile; else desktop">
-              <ion-icon slot="start" name="close"></ion-icon>
-              {{ 'COMMON.BTN_CLOSE' | translate }}
-            </ion-button>
-            <ng-template #desktop>
-              <ion-button (click)="zoomModal.dismiss()" color="tertiary">
-                {{ 'COMMON.BTN_CLOSE' | translate }}
-              </ion-button>
-            </ng-template>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-modal>
-
-<ion-popover #titlePopover>
-  <ng-template>
-    <ion-content class="ion-padding" cdkTrapFocus [cdkTrapFocusAutoCapture]="true">
-      <form [formGroup]="_titleForm">
-        <mat-form-field floatLabel="auto">
-          <mat-label translate>IMAGE.GALLERY.TITLE</mat-label>
-          <input
-            matInput
-            formControlName="title"
-            [readonly]="disabled"
-            [appAutofocus]="_titleAutofocus"
-            (keydown.control.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
-          />
-        </mat-form-field>
-      </form>
-    </ion-content>
-
-    <ion-footer>
-      <ion-toolbar>
-        <ion-row class="ion-no-padding" nowrap>
-          <ion-col></ion-col>
-
-          <ion-col size="auto">
-            <ion-button fill="clear" color="dark" (click)="titlePopover.dismiss(null, 'CANCEL')">
-              <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-            </ion-button>
-            <ion-button
-              [fill]="disabled ? 'clear' : 'solid'"
-              (click)="titlePopover.dismiss(_titleForm.controls.title.value)"
-              (keyup.enter)="titlePopover.dismiss(_titleForm.controls.title.value)"
-              color="tertiary"
-              [disabled]="disabled"
-              [title]="'COMMON.BTN_VALIDATE_WITH_SHORTCUT_HELP' | translate"
-            >
-              <ion-label translate>COMMON.BTN_VALIDATE</ion-label>
-            </ion-button>
-          </ion-col>
-        </ion-row>
-      </ion-toolbar>
-    </ion-footer>
-  </ng-template>
-</ion-popover>