@sumaris-net/ngx-components 18.12.0 → 18.12.2

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

@@ -1,123 +0,0 @@
-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 { getPropertyByPath, isNil, isNotEmptyArray, isNotNil } from '../functions';
-import { TranslateService } from '@ngx-translate/core';
-import { DisplayFn } from '../form/field.model';
-
-//@dynamic
-export class CsvUtils {
-  static DEFAULT_SEPARATOR = ',';
-  static DEFAULT_ENCODING = 'UTF-8';
-
-  static exportToFile(
-    rows: object[],
-    opts?: {
-      filename?: string;
-      headers?: string[];
-      includedProperties?: string[];
-      excludedProperties?: string[];
-      formatters?: { [key: string]: DisplayFn };
-      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 includedProperties = opts?.includedProperties || Object.keys(rows[0]);
-    const filteredProperties = isNotEmptyArray(opts?.excludedProperties)
-      ? includedProperties.filter((k) => !opts?.excludedProperties.includes(k))
-      : includedProperties;
-    const headers = opts?.headers || includedProperties;
-    const textContent =
-      // Header row
-      headers.join(separator) +
-      '\n' +
-      // Data rows
-      rows
-        .map((row) =>
-          filteredProperties
-            .map((k) => {
-              const value = getPropertyByPath(row, k);
-              const cell = isNil(value) ? '' : value;
-              const formatter = opts?.formatters?.[k];
-              let cellStr: string = formatter ? formatter(cell) : 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;
-      });
-  }
-
-  static getLocalizedSeparator(translate?: TranslateService, defaultSeparator = CsvUtils.DEFAULT_SEPARATOR): string {
-    const key = 'FILE.CSV.SEPARATOR';
-    const separator = translate?.instant(key);
-    if (separator && separator !== key) return separator;
-    return defaultSeparator;
-  }
-
-  static getLocalizedEncoding(translate: TranslateService, defaultEncoding = CsvUtils.DEFAULT_ENCODING): string {
-    const key = 'FILE.CSV.ENCODING';
-    const encoding = translate?.instant(key);
-    if (encoding && encoding !== key) return encoding;
-    return defaultEncoding;
-  }
-}

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

@@ -1,129 +0,0 @@
-import { Inject, Injectable } from '@angular/core';
-import { Platform } from '@ionic/angular';
-import { ImagesUtils, ImageResizeOptions } from './images.utils';
-import { chainPromises, firstNotNilPromise } from '../observables';
-import { HttpClient } from '@angular/common/http';
-import { ENVIRONMENT } from '../../../environments/environment.class';
-import { v4 as uuidv4 } from 'uuid';
-
-@Injectable({
-  providedIn: 'root',
-  deps: [Platform, HttpClient, ENVIRONMENT],
-})
-export class FileService {
-  private readonly _debug: boolean;
-  private _started = false;
-
-  private _imageDirectory: string;
-
-  get canUseFileSystem(): boolean {
-    return false;
-    // FIXME: seems not working well
-    //return !!this.file.dataDirectory;
-  }
-
-  constructor(
-    private platform: Platform,
-    //private transfer: FileTransfer,
-    //@Optional() private file: File,
-    private http: HttpClient,
-    @Inject(ENVIRONMENT) protected environment
-  ) {
-    this._debug = !environment.production;
-
-    platform.ready().then(() => this.start());
-  }
-
-  getImages(
-    sources: string[],
-    opts?: ImageResizeOptions & {
-      outputType?: 'fileUrl' | 'dataUrl';
-    }
-  ): Promise<string[]> {
-    if (!this._started) throw new Error('Platform must be started first!');
-
-    //const fileTransfer = this.canUseFileSystem ? this.transfer.create() : undefined;
-    //const jobsFactories = (sources || []).map(source => () => this.getImage(source, {...opts, fileTransfer}));
-
-    const jobsFactories = (sources || []).map((source) => () => this.getImage(source, { ...opts }));
-    return chainPromises<string>(jobsFactories);
-  }
-
-  async getImage(
-    fileUrl: string,
-    opts?: ImageResizeOptions & {
-      outputType?: 'fileUrl' | 'dataUrl';
-    }
-  ): Promise<string> {
-    let outputType = (opts && opts.outputType) || (this.canUseFileSystem ? 'fileUrl' : 'dataUrl');
-
-    const debug = this._debug; /*&& (!opts || !opts.fileTransfer)*/
-    const now = debug && Date.now();
-    if (debug) console.debug(`[file] Fetching image {${fileUrl}} into ${outputType}...`);
-
-    // Read the filename
-    const lastSlashIndex = fileUrl.lastIndexOf('/');
-    if (lastSlashIndex === -1) throw new Error('Invalid URL: ' + fileUrl);
-    const fileName = (lastSlashIndex < fileUrl.length - 1 && fileUrl.substring(lastSlashIndex + 1)) || uuidv4();
-
-    // Download into the file system
-    if (outputType === 'fileUrl' && this.canUseFileSystem) {
-      console.warn(`WARN: [file] Downloading image {${fileUrl}} in local filesystem...`);
-      const targetFilePath = this._imageDirectory + fileName;
-      try {
-        const blob: Blob = await firstNotNilPromise(
-          this.http.get(fileUrl, {
-            observe: 'body',
-            responseType: 'blob',
-            reportProgress: false,
-          })
-        );
-        console.debug('[file] Getting blob :' + blob.type);
-
-        //await this.file.writeFile(this._imageDirectory, fileName, blob, {replace: true});
-
-        //const fileTransfer = (opts && opts.fileTransfer) || this.transfer.create();
-        //await fileTransfer.download(source, targetFilePath);
-        if (debug) console.debug(`[file] Fetching image {${fileUrl}} into ${outputType} [OK] in ${Date.now() - now}ms`);
-        return targetFilePath;
-      } catch (err) {
-        console.error(`[file] Error while download ${fileUrl}: ${(err && err.message) || err}`);
-
-        // Continue (fallback to data Url)
-        outputType = 'dataUrl';
-      }
-    }
-
-    if (outputType === 'dataUrl') {
-      // Get as data url (e.g. 'data:image/png:...')
-      const dataUrl = await ImagesUtils.readAndResizeFromUrl(fileUrl, opts);
-      if (debug) console.debug(`[file] Fetching image {${fileUrl}} into ${outputType} [OK] in ${Date.now() - now}ms`);
-      return dataUrl;
-    }
-
-    // Keep original URL
-    return fileUrl;
-  }
-
-  /* -- protected methods -- */
-
-  protected start() {
-    // File system exists
-    if (this.canUseFileSystem) {
-      //console.info("[file] Application directory: ", this.file.applicationDirectory);
-      //console.info("[file] Application storage directory: ", this.file.applicationStorageDirectory);
-      //console.info("[file] Data directory: ", this.file.dataDirectory);
-      // this.file.createDir(this.file.dataDirectory, 'images', false)
-      //   .then((dir) => {
-      //     this._imageDirectory = this.file.dataDirectory + 'images/';
-      //     console.info("[file] Images directory: ", dir.fullPath);
-      //   })
-      //   .catch(err => {
-      //     console.error("[file] Cannot create the images directory: " + (this.file.dataDirectory + 'images/ : ' + (err && err.message || err)));
-      //     this._imageDirectory = this.file.dataDirectory;
-      //   });
-    }
-
-    this._started = true;
-  }
-}

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

@@ -1,142 +0,0 @@
-import { FileEvent, FileResponse, UploadFile } from '../upload-file/upload-file.model';
-import { UploadFilePopover, UploadFilePopoverOptions } from '../upload-file/upload-file-popover.component';
-
-import { PopoverController } from '@ionic/angular';
-import { Observable, Subject } from 'rxjs';
-import { HttpEventType } from '@angular/common/http';
-import { OverlayEventDetail } from '@ionic/core';
-import { isNilOrBlank } from '../functions';
-
-export const MimeTypes = Object.freeze({
-  ANDROID_APK: 'application/vnd.android.package-archive',
-});
-
-export class FilesUtils {
-  static UTF8_BOM_CHAR = new Uint8Array([0xef, 0xbb, 0xbf]); // UTF-8 BOM
-
-  static async showUploadPopover<T>(
-    popoverController: PopoverController,
-    event: Event,
-    opts: UploadFilePopoverOptions<T>
-  ): Promise<OverlayEventDetail<UploadFile<T>[]>> {
-    const modal = await popoverController.create({
-      component: UploadFilePopover,
-      componentProps: opts,
-      backdropDismiss: false,
-      keyboardClose: false,
-      event,
-      translucent: true,
-      cssClass: 'popover-large',
-    });
-
-    await modal.present();
-    const { data, role } = await modal.onDidDismiss();
-    return {
-      role,
-      data: data ? (data as UploadFile<T>[]) : undefined,
-    };
-  }
-
-  static readAsText(file: File, encoding?: string): Observable<FileEvent<string>> {
-    const $progress = new Subject<FileEvent<string>>();
-    const reader = new FileReader();
-    encoding = (encoding || 'UTF-8').toLowerCase();
-
-    // Listen progress
-    reader.onprogress = (e: ProgressEvent) => {
-      const total = e.total || 1;
-      const loaded = e.total || 0;
-      if (loaded < total) $progress.next({ type: HttpEventType.UploadProgress, loaded, total });
-    };
-
-    // Listen end
-    reader.onloadend = (_) => {
-      const body = reader.result;
-      if (typeof body === 'string') {
-        $progress.next(new FileResponse({ body }));
-        $progress.complete();
-      } else {
-        console.error(`Cannot read file '${file.name}' as text`);
-        $progress.error(`Cannot read file as text`);
-      }
-    };
-
-    // Listen error
-    reader.onerror = (event: ProgressEvent) => {
-      console.error('[files] Error while reading file:', event);
-      $progress.error(event);
-    };
-
-    // Start reading the file
-    reader.readAsText(file, encoding);
-
-    return $progress.asObservable();
-  }
-
-  static writeTextToFile(
-    content: string,
-    opts?: {
-      filename?: string;
-      encoding?: string;
-      type?: string;
-    }
-  ) {
-    if (isNilOrBlank(content)) return; // Skip if empty
-
-    const filename = opts?.filename || 'export.txt';
-    const charset = (opts?.encoding || 'utf-8').toLowerCase();
-    const type = opts?.type || 'text/plain';
-    const blob = new Blob(
-      charset === 'utf-8'
-        ? // Add UTF-8 BOM character
-          [FilesUtils.UTF8_BOM_CHAR, content]
-        : // Non UTF-8 charset
-          [content],
-      { type: `${type};charset=${charset};` }
-    );
-    blob['lastModifiedDate'] = new Date().toISOString();
-    blob['name'] = filename;
-
-    if ((navigator as any).msSaveBlob) {
-      // IE 10+
-      (navigator as any).msSaveBlob(blob, filename);
-    } else {
-      const link = document.createElement('a');
-      if (link.download !== undefined) {
-        // Browsers that support HTML5 download attribute
-        const url = URL.createObjectURL(blob);
-        link.setAttribute('href', url);
-        link.setAttribute('download', filename);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      }
-    }
-  }
-
-  static downloadUri(uri: string, filename?: string) {
-    if ((navigator as any).msLaunchUri) {
-      // IE 10+
-      (navigator as any).msLaunchUri(uri);
-    } else {
-      filename = filename || this.getFilenameFromUri(uri);
-      const link = document.createElement('a');
-      if (link.download !== undefined) {
-        // Browsers that support HTML5 download attribute
-        link.setAttribute('href', uri);
-        link.setAttribute('download', filename);
-        link.style.visibility = 'hidden';
-        document.body.appendChild(link);
-        link.click();
-        document.body.removeChild(link);
-      }
-    }
-  }
-
-  static getFilenameFromUri(uri: string): string {
-    const lastSlashIndex = uri?.lastIndexOf('/');
-    if (lastSlashIndex === -1 || lastSlashIndex === uri.length - 1) throw new Error('Invalid URI format. No slash found');
-    return uri.substring(lastSlashIndex + 1);
-  }
-}

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

@@ -1,214 +0,0 @@
-import { isNilOrBlank } from '../functions';
-import { Observable, Subject } from 'rxjs';
-import { FileEvent, FileResponse } from '../upload-file/upload-file.model';
-import { HttpEventType } from '@angular/common/http';
-import { mergeMap } from 'rxjs/operators';
-
-export const IMAGE_DEFAULTS = {
-  MAX_HEIGHT: 480,
-  MAX_WIDTH: 640,
-  THUMB_MAX_HEIGHT: 200,
-  THUMB_MAX_WIDTH: 200,
-};
-
-export declare interface ImageResizeOptions {
-  maxWidth?: number;
-  maxHeight?: number;
-  thumbnail?: boolean;
-}
-
-// @dynamic
-export class ImagesUtils {
-  /**
-   * Parse a string like `<path>|<credit>` into an object `{image, credit}`
-   * @param file
-   **/
-  static getImageAndCredit(file: string): { image: string; credits: string } {
-    const parts = file?.split('|');
-    return parts
-      ? {
-          image: parts[0],
-          credits: parts[1],
-        }
-      : null;
-  }
-
-  /**
-   * @param files
-   * @deprecated Use getRandomImageWithCredit() instead
-   **/
-  static getRandomImage(files: string[]): string | undefined {
-    const imgIndex = Math.floor(Math.random() * files.length);
-    return files[imgIndex];
-  }
-
-  static getRandomImageWithCredit(files: string[]): { image: string; credits: string } {
-    const imgIndex = Math.floor(Math.random() * files.length);
-    return ImagesUtils.getImageAndCredit(files[imgIndex]);
-  }
-
-  static readAsDataURL(file: File, opts?: ImageResizeOptions): Observable<FileEvent<string>> {
-    const $progress = new Subject<FileEvent<string>>();
-    const reader = new FileReader();
-
-    // Listen progress
-    reader.onprogress = (e: ProgressEvent) => {
-      const total = e.total || 1;
-      const loaded = e.total || 0;
-      if (loaded < total) $progress.next({ type: HttpEventType.UploadProgress, loaded, total });
-    };
-
-    // Listen end
-    reader.onloadend = (_: ProgressEvent) => {
-      const body = reader.result;
-      if (typeof body === 'string') {
-        $progress.next(new FileResponse({ body }));
-        $progress.complete();
-      } else {
-        console.error(`[image-utils] Cannot read file '${file.name}' as text`);
-        $progress.error(`Cannot read file as text`);
-      }
-    };
-
-    // Listen error
-    reader.onerror = (event: ProgressEvent) => {
-      console.error('[image-utils] Error while reading file:', event);
-      $progress.error(event);
-    };
-
-    // Start reading the file
-    reader.readAsDataURL(file);
-
-    // Resize image, if need
-    if (opts) {
-      return $progress.pipe(
-        mergeMap(async (event) => {
-          if (event instanceof FileResponse) {
-            const body = await ImagesUtils.resizeBase64(event.body, opts);
-            return new FileResponse({ body });
-          }
-          return event;
-        })
-      );
-    }
-
-    return $progress.asObservable();
-  }
-
-  static async readAndResizeFromUrl(fileUrl: string, opts?: ImageResizeOptions): Promise<string> {
-    if (isNilOrBlank(fileUrl)) throw new Error('Illegal argument: missing fileUrl');
-
-    // Create the temporary image element
-    const img = document.createElement('img');
-
-    // Need to avoid CORS error
-    // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
-    img.crossOrigin = 'anonymous';
-
-    try {
-      return await new Promise<string>((resolve, reject) => {
-        img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
-        img.addEventListener('error', reject);
-        img.src = fileUrl;
-      });
-    } catch (err) {
-      throw new Error(`Failed to load and resize image {${fileUrl}}`);
-    } finally {
-      img.remove();
-    }
-  }
-
-  static async resizeBase64(dataUrl: string, opts?: ImageResizeOptions): Promise<string> {
-    // Create the temporary image element
-    const img = document.createElement('img');
-
-    // Need to avoid CORS error
-    // (see https://stackoverflow.com/questions/22710627/tainted-canvases-may-not-be-exported)
-    img.crossOrigin = 'anonymous';
-
-    try {
-      return await new Promise<string>((resolve, reject) => {
-        img.addEventListener('load', ImagesUtils.createImageOnLoadResizeFn(resolve, reject, opts), false);
-        img.addEventListener('error', reject);
-        img.src = dataUrl;
-      });
-    } finally {
-      img.remove();
-    }
-  }
-
-  protected static createImageOnLoadResizeFn(resolve, reject, opts?: ImageResizeOptions) {
-    return function (event) {
-      const maxWidth = opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_WIDTH : (opts && opts.maxWidth) || IMAGE_DEFAULTS.MAX_WIDTH;
-      const maxHeight = opts && opts.thumbnail ? IMAGE_DEFAULTS.THUMB_MAX_HEIGHT : (opts && opts.maxHeight) || IMAGE_DEFAULTS.MAX_HEIGHT;
-      let width = event.target.width;
-      let height = event.target.height;
-
-      const canvas = document.createElement('canvas');
-      let ctx;
-
-      try {
-        // Thumbnail: resize and crop (to the expected size)
-        if (opts && opts.thumbnail) {
-          // landscape
-          if (width > height) {
-            width *= maxHeight / height;
-            height = maxHeight;
-          }
-
-          // portrait
-          else {
-            height *= maxWidth / width;
-            width = maxWidth;
-          }
-          canvas.width = maxWidth;
-          canvas.height = maxHeight;
-          ctx = canvas.getContext('2d');
-          const xoffset = Math.trunc((maxWidth - width) / 2 + 0.5);
-          const yoffset = Math.trunc((maxHeight - height) / 2 + 0.5);
-          ctx.drawImage(
-            event.target,
-            xoffset, // x1
-            yoffset, // y1
-            maxWidth + -2 * xoffset, // x2
-            maxHeight + -2 * yoffset // y2
-          );
-        }
-
-        // Resize, but keep the full image
-        else {
-          // landscape
-          if (width > height) {
-            if (width > maxWidth) {
-              height *= maxWidth / width;
-              width = maxWidth;
-            }
-          }
-
-          // portrait
-          else {
-            if (height > maxHeight) {
-              width *= maxHeight / height;
-              height = maxHeight;
-            }
-          }
-
-          canvas.width = width;
-          canvas.height = height;
-          ctx = canvas.getContext('2d');
-
-          // Resize the whole image
-          ctx.drawImage(event.target, 0, 0, canvas.width, canvas.height);
-        }
-
-        // Get image content as data URL
-        const base64 = canvas.toDataURL();
-        resolve(base64);
-      } catch (err) {
-        reject(err);
-      } finally {
-        canvas.remove();
-      }
-    };
-  }
-}

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

@@ -1,82 +0,0 @@
-import { FilesUtils } from './file.utils';
-import { Observable } from 'rxjs';
-import { FileEvent, FileResponse } from '../upload-file/upload-file.model';
-import { filter, map } from 'rxjs/operators';
-import { HttpEventType } from '@angular/common/http';
-import { isNil, isNotNil } from '../functions';
-import { stringToU8a } from '@polkadot/util';
-import { TranslateService } from '@ngx-translate/core';
-
-//@dynamic
-export class JsonUtils {
-  static DEFAULT_ENCODING = 'UTF-8';
-
-  static exportToFile(
-    content: any,
-    opts?: {
-      filename?: string;
-      encoding?: string;
-      type?: string;
-    }
-  ) {
-    if (isNil(content)) return; // Skip if empty
-
-    // Create text content
-    const textContent = content === 'string' ? content : JSON.stringify(content);
-
-    // Write to file
-    FilesUtils.writeTextToFile(textContent, {
-      type: 'application/json',
-      filename: 'export.json',
-      ...opts,
-    });
-  }
-
-  static writeToFile(
-    content: any,
-    opts?: {
-      filename?: string;
-      type?: string;
-    }
-  ) {
-    if (!content || typeof content !== 'object') return; // Skip if empty
-
-    opts = {
-      type: 'application/json',
-      filename: 'export.json',
-      ...opts,
-    };
-
-    // Create text content
-    const arrayUt8 = stringToU8a(JSON.stringify(content));
-
-    const blob = new Blob([arrayUt8], { type: opts.type });
-    blob['lastModifiedDate'] = new Date().toISOString();
-    blob['name'] = opts.filename;
-
-    return <File>blob;
-  }
-
-  static parseFile<T = any>(file: File, opts?: { encoding?: string }): Observable<FileEvent<T>> {
-    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 = JSON.parse(body) as T;
-          return new FileResponse<T>({ body: data });
-        }
-      }),
-      filter(isNotNil)
-    );
-  }
-
-  static getLocalizedEncoding(translate: TranslateService, defaultEncoding = JsonUtils.DEFAULT_ENCODING): string {
-    const key = 'FILE.JSON.ENCODING';
-    const encoding = translate?.instant(key);
-    if (encoding && encoding !== key) return encoding;
-    return defaultEncoding;
-  }
-}