@sumaris-net/ngx-components 18.13.0 → 18.14.0

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

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

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

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

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

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