@sumaris-net/ngx-components 18.12.0 → 18.12.1

package/src/app/shared/upload-file/testing/upload-file.testing.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-import { IonicModule } from '@ionic/angular';
-import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
-import { UploadFileTestingPage } from './upload-file.testing';
-
-const routes: Routes = [
-  {
-    path: 'upload-file',
-    pathMatch: 'full',
-    component: UploadFileTestingPage,
-  },
-];
-
-@NgModule({
-  imports: [CommonModule, IonicModule, TranslateModule.forChild(), RouterModule.forChild(routes)],
-  declarations: [UploadFileTestingPage],
-  exports: [RouterModule, UploadFileTestingPage],
-})
-export class UploadFileTestingModule {}

package/src/app/shared/upload-file/testing/upload-file.testing.ts

@@ -1,65 +0,0 @@
-import { Component } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
-import { UploadFilePopoverOptions } from '../upload-file-popover.component';
-import { Observable, Subject, timer } from 'rxjs';
-import { HttpEventType, HttpResponse } from '@angular/common/http';
-import { map, takeUntil } from 'rxjs/operators';
-import { sleep } from '../../functions';
-import { FileEvent } from '../upload-file.model';
-import { FilesUtils } from '../../file/file.utils';
-
-@Component({
-  selector: 'upload-file-testing',
-  templateUrl: 'upload-file.testing.html',
-})
-export class UploadFileTestingPage {
-  constructor(private popoverController: PopoverController) {}
-
-  async showPopover(event: Event, opts?: Partial<UploadFilePopoverOptions<any>>) {
-    const { data } = await FilesUtils.showUploadPopover(this.popoverController, event, {
-      uploadFn: (file) => this.uploadFile(file),
-      deleteFn: (file) => this.deleteFile(file),
-      ...opts,
-    });
-
-    const filenames = (data || []).map((file) => file.response?.body?.finalName);
-    console.info('Popover result: ', filenames);
-  }
-
-  /**
-   * Simulate a upload function, with progression
-   *
-   * @param file
-   */
-  uploadFile(file: File): Observable<FileEvent<{ finalName: string }>> {
-    const $stop = new Subject<void>();
-    const loadStep = file.size / 10;
-    let loaded = 0;
-    return timer(0, 250).pipe(
-      takeUntil($stop),
-      map(() => {
-        // pause in middle
-        // if (loaded > 0) return { type: HttpEventType.UploadProgress, total: file.size, loaded };
-
-        loaded += loadStep;
-
-        // Return progression
-        if (loaded < file.size) {
-          return { type: HttpEventType.UploadProgress, total: file.size, loaded };
-        }
-
-        // Stop the timer
-        setTimeout(() => $stop.next(), 1000);
-
-        // Return final response
-        return new HttpResponse({ body: { finalName: file.name } });
-      })
-    );
-  }
-
-  async deleteFile(file: File): Promise<boolean> {
-    console.info('[testing] Simulate remote deletion... (waiting 2s)');
-    await sleep(2000);
-    return true;
-  }
-}

package/src/app/shared/upload-file/upload-file-popover.component.html

@@ -1,46 +0,0 @@
-<ion-content class="ion-no-padding" scrollY="false">
-  <app-upload-file
-    #uploader
-    [uploadFn]="uploadFn"
-    [deleteFn]="deleteFn"
-    [fileExtension]="fileExtension"
-    [instantUpload]="instantUpload"
-    [uniqueFile]="uniqueFile"
-    [maxParallelUpload]="maxParallelUpload"
-    [autoHideDropArea]="autoHideDropArea"
-  ></app-upload-file>
-</ion-content>
-
-<ion-footer>
-  <ion-toolbar>
-    <ion-row class="ion-no-padding" nowrap>
-      <ion-col>
-        <div *ngIf="importing" class="importing-info">
-          <ion-text color="medium"><small translate>FILE.UPLOAD.IMPORTING</small></ion-text>
-          &nbsp;
-          <ion-spinner name="dots" color="accent"></ion-spinner>
-        </div>
-        <ion-item *ngIf="error" lines="none" color="transparent">
-          <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
-          <ion-label color="danger" class="ion-text-wrap">
-            <small [innerHTML]="error | translate"></small>
-          </ion-label>
-        </ion-item>
-      </ion-col>
-      <ion-col size="auto">
-        <ion-button fill="clear" color="dark" (click)="cancel()">
-          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
-        </ion-button>
-        <ion-button
-          [fill]="disabled ? 'clear' : 'solid'"
-          (click)="onValidate($event)"
-          (keyup.enter)="onValidate($event)"
-          color="tertiary"
-          [disabled]="disabled"
-        >
-          <ion-label translate>COMMON.BTN_IMPORT</ion-label>
-        </ion-button>
-      </ion-col>
-    </ion-row>
-  </ion-toolbar>
-</ion-footer>

package/src/app/shared/upload-file/upload-file-popover.component.scss

@@ -1,6 +0,0 @@
-.importing-info {
-  padding-inline-start: var(--ion-padding);
-  display: inline-flex;
-  flex-wrap: nowrap;
-  padding-top: 8px;
-}

package/src/app/shared/upload-file/upload-file-popover.component.ts

@@ -1,115 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
-import { PopoverController } from '@ionic/angular';
-import { UploadFileComponent } from './upload-file.component';
-import { FileDeleteFn, FileUploadFn, UploadFile } from './upload-file.model';
-import { isEmptyArray, isNotEmptyArray, isNotNilOrBlank } from '../functions';
-import { TranslateService } from '@ngx-translate/core';
-
-export interface UploadFilePopoverOptions<T> {
-  title?: string;
-
-  uploadFn: FileUploadFn<T>;
-  deleteFn?: FileDeleteFn<any>;
-
-  instantUpload?: boolean;
-  uniqueFile?: boolean;
-  fileExtension?: string;
-  maxParallelUpload?: number;
-  autoHideDropArea?: boolean;
-}
-
-@Component({
-  selector: 'app-upload-file-popover',
-  templateUrl: './upload-file-popover.component.html',
-  styleUrls: ['./upload-file-popover.component.scss'],
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class UploadFilePopover implements UploadFilePopoverOptions<any> {
-  @ViewChild('uploader', { static: true }) uploader: UploadFileComponent;
-
-  @Input() fileExtension: string;
-  @Input() title: string;
-  @Input() uniqueFile = false;
-  @Input() instantUpload = false;
-  @Input() uploadFn: FileUploadFn<any>;
-  @Input() deleteFn: FileDeleteFn<any>;
-  @Input() maxParallelUpload: number;
-  @Input() autoHideDropArea = false;
-
-  importing = false;
-  error: string;
-
-  get files(): UploadFile<any>[] {
-    return this.uploader.files;
-  }
-
-  get disabled() {
-    return this.importing || isEmptyArray(this.files);
-  }
-
-  get valid() {
-    return isNotEmptyArray(this.files);
-  }
-
-  constructor(
-    protected popoverController: PopoverController,
-    protected translate: TranslateService,
-    protected cd: ChangeDetectorRef
-  ) {}
-
-  async onValidate(event: any): Promise<any> {
-    event?.stopPropagation();
-
-    // Avoid multiple call
-    if (this.importing) return;
-
-    console.debug('[upload-file-popover] Validate form: will upload all files...');
-
-    try {
-      this.importing = true;
-      this.resetError();
-
-      try {
-        // Wait processing files finished
-        await this.uploader.waitIdle();
-
-        // upload all files
-        await this.uploader.uploadFiles();
-
-        const files: UploadFile<any>[] = (this.uploader.processedFiles || []).filter((file) => !file.deleting); // Remove deleting file (deletion in progress)
-
-        // Nothing to upload: close popover
-        if (isEmptyArray(files)) return this.cancel();
-
-        // check errors
-        const errors = files.map((file) => file.error).filter(isNotNilOrBlank);
-
-        // If error: stop
-        if (errors.length) {
-          errors.forEach((error) => console.error(error));
-          throw { message: 'FILE.UPLOAD.ERROR' };
-        }
-
-        // return files
-        await this.popoverController.dismiss(files);
-      } catch (err) {
-        this.error = (err && err.message) || err;
-      }
-    } finally {
-      this.importing = false;
-      this.cd.markForCheck();
-    }
-  }
-
-  cancel() {
-    return this.popoverController.dismiss();
-  }
-
-  protected resetError() {
-    if (this.error) {
-      this.error = null;
-      this.cd.markForCheck();
-    }
-  }
-}

package/src/app/shared/upload-file/upload-file.component.html

@@ -1,57 +0,0 @@
-@if ((!uniqueFile && !autoHideDropArea) || files.length === 0) {
-  <div class="container" appDragAndDrop (fileDropped)="onFileDropped($event)">
-    <input
-      type="file"
-      #fileDropRef
-      id="fileDropRef"
-      [multiple]="!uniqueFile"
-      [accept]="fileExtension"
-      (change)="fileBrowseHandler($any($event.target).files)"
-    />
-    <mat-icon style="font-size: xx-large" color="accent" class="text-size">upload</mat-icon>
-    <ion-label
-      [innerHTML]="
-        'FILE.UPLOAD.DRAG_AND_DROP' | translate: { extension: !fileExtension ? '' : ' (' + fileExtension + ')' }
-      "
-    ></ion-label>
-    <ion-button>{{ 'FILE.UPLOAD.BROWSE' | translate }}</ion-button>
-  </div>
-}
-<div class="files-list">
-  <ion-list>
-    @for (file of files; track file; let i = $index) {
-      <ion-item>
-        <mat-icon slot="start">description</mat-icon>
-        <div class="single-file">
-          <ion-label>
-            <h4 class="name" [class.deleting]="file.deleting">
-              {{ file.name }}
-            </h4>
-            <p>
-              {{ file.size | fileSize }}
-            </p>
-          </ion-label>
-          <ion-progress-bar
-            *ngIf="uploading && !file.error"
-            [value]="file.progress || 0"
-            [type]="file.deleting || file.progress === -1 ? 'indeterminate' : 'determinate'"
-          ></ion-progress-bar>
-          <ion-label *ngIf="file.error" color="danger" [innerHTML]="file.error | translate"></ion-label>
-        </div>
-        <!-- remote from list (before importation) -->
-        <button *ngIf="!file.progress || file.error" mat-icon-button slot="end" (click)="deleteFile(i)">
-          <mat-icon>clear</mat-icon>
-        </button>
-        <!-- delete file (remotely - after importation) -->
-        <button
-          *ngIf="file.progress === 1 && !!deleteFn && !file.deleting"
-          mat-icon-button
-          slot="end"
-          (click)="deleteFile(i)"
-        >
-          <mat-icon>clear</mat-icon>
-        </button>
-      </ion-item>
-    }
-  </ion-list>
-</div>

package/src/app/shared/upload-file/upload-file.component.scss

@@ -1,60 +0,0 @@
-.container {
-  width: calc(100% - 3rem);
-  min-height: 200px;
-  padding: 2rem;
-  text-align: center;
-  border: dashed 1px #979797;
-  position: relative;
-  margin: 1.5rem;
-
-  input {
-    opacity: 0;
-    position: absolute;
-    z-index: 2;
-    width: 100%;
-    height: 100%;
-    top: 0;
-    left: 0;
-    cursor: pointer;
-  }
-
-  ion-label {
-    display: block;
-    font-size: 20px;
-    font-weight: 600;
-    color: #38424c;
-  }
-
-  label {
-    display: inline-block;
-    color: white;
-    width: 183px;
-    height: 44px;
-    border-radius: 21.5px;
-    background-color: #db202f;
-    padding: 8px 16px;
-  }
-}
-
-.fileover {
-  border: solid 1px var(--ion-color-accent);
-}
-
-.files-list {
-  max-height: 300px;
-  overflow: auto;
-
-  .single-file {
-    display: flex;
-    flex-direction: column;
-
-    .name {
-      word-break: break-all;
-
-      &.deleting {
-        color: gray !important;
-        font-style: italic !important;
-      }
-    }
-  }
-}

package/src/app/shared/upload-file/upload-file.component.ts

@@ -1,222 +0,0 @@
-import { ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { catchError, debounceTime, filter, finalize, first, map, switchMap, tap } from 'rxjs/operators';
-import { BehaviorSubject, forkJoin, Observable, of, Subject } from 'rxjs';
-import { TranslateService } from '@ngx-translate/core';
-import { FileDeleteFn, FileUploadFn, isProgressEvent, isResponseEvent, UploadFile } from './upload-file.model';
-import { isNil, isNotNil } from '../functions';
-import { waitFor, WaitForOptions } from '../observables';
-
-@Component({
-  selector: 'app-upload-file',
-  templateUrl: './upload-file.component.html',
-  styleUrls: ['./upload-file.component.scss'],
-})
-export class UploadFileComponent {
-  @ViewChild('fileDropRef', { static: false }) fileDropEl: ElementRef;
-
-  @Input() fileExtension: string;
-  @Input() uniqueFile = false;
-  @Input() instantUpload = false;
-  @Input() uploadFn: FileUploadFn<any>;
-  @Input() deleteFn: FileDeleteFn<any>;
-  @Input() maxParallelUpload: number;
-  @Input() autoHideDropArea = false;
-
-  files: UploadFile<any>[] = [];
-  uploading = false;
-
-  get processingFiles(): UploadFile<any>[] {
-    return this.files.filter((f) => !f.deleting && isNotNil(f.progress) && f.progress < 1);
-  }
-
-  get processedFiles(): UploadFile<any>[] {
-    return this.files.filter((f) => !f.deleting && f.progress === 1);
-  }
-
-  get processingFilesCount(): number {
-    return this.processingFiles.length;
-  }
-
-  constructor(
-    protected cd: ChangeDetectorRef,
-    protected translate: TranslateService
-  ) {}
-
-  /**
-   * on file drop handler
-   */
-  onFileDropped(event) {
-    this.prepareFilesList(event);
-  }
-
-  /**
-   * handle file from browsing
-   */
-  fileBrowseHandler(files) {
-    this.prepareFilesList(files);
-  }
-
-  /**
-   * Delete file from files list
-   *
-   * @param index (File index)
-   */
-  async deleteFile(index: number) {
-    const file = this.files[index];
-
-    if (file.progress === 1 && this.deleteFn) {
-      if (file.deleting) {
-        console.warn(`[upload-file] This file already deleting`);
-        return;
-      }
-      try {
-        file.deleting = true;
-        const deleted = await this.deleteFn(file);
-        if (!deleted) return;
-      } catch (err) {
-        console.error((err && err.message) || err);
-        return;
-      } finally {
-        file.deleting = false;
-      }
-
-      // Make sure index not changed
-      index = this.files.indexOf(file);
-      if (index === -1) return; // Not found (already removed ?)
-    } else if (file.progress > 0) {
-      console.warn(`[upload-file] Cannot remove this file while uploading`);
-      return;
-    }
-
-    this.files.splice(index, 1);
-    this.cd.markForCheck();
-  }
-
-  /**
-   * Convert Files list to normal array list
-   *
-   * @param files (Files List)
-   */
-  prepareFilesList(files: FileList | File[]) {
-    let items: File[];
-    if (files instanceof FileList) {
-      items = [];
-      for (let i = 0; i < files.length; i++) {
-        const item = files.item(i);
-        items.push(item);
-      }
-    } else {
-      items = files;
-    }
-    this.files.push(...items);
-
-    this.fileDropEl.nativeElement.value = '';
-    this.cd.markForCheck();
-
-    // Start upload
-    if (this.instantUpload) {
-      this.uploadFiles(items);
-    }
-  }
-
-  /**
-   * Execute upload
-   */
-  async uploadFiles(files?: File[]): Promise<UploadFile<any>[]> {
-    this.uploading = true;
-    if (!files) {
-      console.info('[upload-file] Uploading all files...');
-      files = this.files;
-    }
-
-    const $processingFileCountChange = new BehaviorSubject(this.processingFilesCount);
-    const $changes = new Subject<void>();
-    $changes.subscribe((_) => {
-      this.cd.markForCheck();
-      $processingFileCountChange.next(this.processingFilesCount);
-    });
-
-    const jobs: Observable<UploadFile<any>>[] = files
-      .map((f) => f as UploadFile<any>)
-      .filter((file) => file && isNil(file.progress) && !file.error) // Skip if already started or in error
-      .map((file, i) => {
-        // Wait if need
-        if (isNotNil(this.maxParallelUpload)) {
-          return $processingFileCountChange.pipe(
-            debounceTime(i), // call of filter() must be different for waiting job
-            filter((count) => count < this.maxParallelUpload),
-            map((_) => {
-              // Start uploading
-              if (isNil(file.progress)) file.progress = 0;
-              $changes.next();
-              return file;
-            }),
-            first()
-          );
-        }
-        // Start uploading
-        if (isNil(file.progress)) file.progress = 0;
-        return of(file);
-      })
-
-      .map((file$) =>
-        file$.pipe(
-          filter(isNotNil),
-          // Log
-          tap((file) => console.debug(`[upload-file] ${file.name}: uploading...`)),
-
-          // Start uploading
-          switchMap((file) =>
-            this.uploadFn(file).pipe(
-              filter(isNotNil),
-              map((event) => {
-                // Progress event
-                if (isProgressEvent(event)) {
-                  if (isNotNil(event.loaded) && event.loaded >= 0) {
-                    file.progress = Math.min(1, event.loaded / (event.total || 1));
-                  } else {
-                    file.progress = -1; // Indeterminate progression
-                  }
-                }
-
-                // Response event
-                else if (isResponseEvent(event)) {
-                  file.progress = 1;
-                  file.response = event;
-                  console.debug(`[upload-file] ${file.name}: ${event.statusText || 'OK'}`, file.response);
-                }
-
-                // Other events: ignore
-                else {
-                  // DEBUG
-                  console.debug('[upload-file] Ignoring a file event: ', event);
-                }
-                return file;
-              }),
-              catchError((err) => {
-                console.error(err);
-                file.error = (err && (err.message || err.error?.message)) || 'FILE.UPLOAD.ERROR';
-                return of(file);
-              }),
-              tap(() => {
-                $changes.next();
-                this.cd.markForCheck();
-              })
-            )
-          )
-        )
-      );
-
-    // Wait jobs to finish
-    return forkJoin(jobs)
-      .pipe(
-        tap((_) => $changes.complete()),
-        finalize(() => (this.uploading = false))
-      )
-      .toPromise();
-  }
-
-  waitIdle(opts?: WaitForOptions): Promise<void> {
-    return waitFor(() => this.processingFilesCount === 0, opts);
-  }
-}

package/src/app/shared/upload-file/upload-file.model.ts

@@ -1,40 +0,0 @@
-import { Observable } from 'rxjs';
-import { HttpEvent, HttpEventType, HttpProgressEvent, HttpResponse } from '@angular/common/http';
-import { isNotNil } from '../functions';
-
-export class UploadFile<T> extends File {
-  progress?: number;
-  deleting?: boolean;
-  error?: string;
-
-  response?: FileResponse<T> | HttpResponse<T>;
-}
-
-export type FileUploadFn<T> = (file: File) => Observable<FileEvent<T> | HttpEvent<T>>;
-export type FileDeleteFn<T> = (file: UploadFile<T>) => Promise<boolean>;
-export interface FileProgressEvent {
-  type: HttpEventType.DownloadProgress | HttpEventType.UploadProgress;
-  loaded: number;
-  total?: number;
-  statusText?: string;
-}
-export class FileResponse<T> {
-  readonly body: T | null;
-  readonly type = HttpEventType.Response;
-  readonly status: number;
-  readonly statusText: string;
-  constructor(init?: { body?: T | null; statusText?: string; status?: number }) {
-    this.body = isNotNil(init?.body) ? init.body : null;
-    this.status = init?.status || 0;
-    this.statusText = init?.statusText || 'OK';
-  }
-}
-
-export declare type FileEvent<T> = HttpProgressEvent | HttpResponse<T> | FileProgressEvent | FileResponse<T>;
-
-export function isProgressEvent(event: HttpEvent<any> | FileEvent<any>): event is HttpProgressEvent | FileProgressEvent {
-  return event && (event.type === HttpEventType.UploadProgress || event.type === HttpEventType.DownloadProgress);
-}
-export function isResponseEvent<T>(event: HttpEvent<T> | FileEvent<T>): event is HttpResponse<T> | FileResponse<T> {
-  return event && event.type === HttpEventType.Response;
-}