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

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

@@ -0,0 +1,25 @@
+<ion-toolbar color="primary">
+  <ion-title>File upload</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+
+  <p>Popover examples:</p>
+
+  <ion-button (click)="showPopover($event, {uniqueFile: true})" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(unique file)
+  </ion-button>
+
+  <ion-button (click)="showPopover($event, {uniqueFile: false})" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(many files)
+  </ion-button>
+
+  <ion-button (click)="showPopover($event, {uniqueFile: false, instantUpload: true})" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(instant upload)
+  </ion-button>
+
+  <ion-button (click)="showPopover($event, {uniqueFile: false, instantUpload: true, maxParallelUpload: 3})" color="tertiary">
+    <span translate>COMMON.BTN_IMPORT</span>&nbsp;(max parallel upload)
+  </ion-button>
+
+</ion-content>

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

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

@@ -0,0 +1,68 @@
+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(() => {
+          loaded += loadStep;
+
+          // Return progression
+          if (loaded < file.size) {
+            //return {type: HttpEventType.UploadProgress, total: file.size, loaded };
+            return {type: HttpEventType.UploadProgress, loaded: -1 };
+          }
+
+          // Stop the timer
+          setTimeout(() => $stop.next(), 100);
+
+          // 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

@@ -0,0 +1,43 @@
+
+<ion-content class="ion-no-padding" scrollY="false">
+  <app-upload-file
+    #uploader
+    [uploadFn]="uploadFn"
+    [deleteFn]="deleteFn"
+    [fileExtension]="fileExtension"
+    [instantUpload]="instantUpload"
+    [uniqueFile]="uniqueFile"
+    [maxParallelUpload]="maxParallelUpload"
+  ></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">
+          <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+          <ion-label color="danger" class="ion-text-wrap" [innerHTML]="error | translate"></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

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

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

@@ -0,0 +1,46 @@
+<div *ngIf="!uniqueFile || files.length === 0"
+     class="container"
+     appDragAndDrop (fileDropped)="onFileDropped($event)">
+  <input
+    type="file"
+    #fileDropRef
+    id="fileDropRef"
+    multiple
+    [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">
+  <div *ngFor="let file of files; index as i"
+       class="single-file"
+       [class.deleting]="file.deleting">
+    <mat-icon>description</mat-icon>
+    <div class="info">
+      <h4 class="name">
+        {{ file.name }}
+      </h4>
+      <p class="size">
+        {{ file.size | fileSize }}
+      </p>
+      <ion-progress-bar *ngIf="!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 (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 (click)="deleteFile(i)">
+      <mat-icon>clear</mat-icon>
+    </button>
+  </div>
+</div>

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

@@ -0,0 +1,130 @@
+.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 {
+  animation: shake 1s;
+  animation-iteration-count: infinite;
+}
+
+.files-list {
+  max-height: 300px;
+  overflow: auto;
+
+  .single-file {
+    display: flex;
+    flex-grow: 1;
+    padding: 0.5rem;
+    justify-content: space-between;
+    align-items: center;
+    border: dashed 1px #979797;
+    margin-bottom: 1rem;
+
+    &.deleting {
+      .name {
+        color: gray !important;
+        font-style: italic !important;
+      }
+    }
+
+    .name {
+      font-size: 14px;
+      font-weight: 500;
+      color: #353f4a;
+      margin: 0;
+    }
+
+    .size {
+      font-size: 12px;
+      font-weight: 500;
+      color: #a4a4a4;
+      margin: 0 0 0.25rem;
+    }
+
+    .info {
+      width: 100%
+    }
+  }
+}
+
+/* Shake animation */
+@keyframes shake {
+  0% {
+    transform: translate(1px, 1px) rotate(0deg);
+  }
+
+  10% {
+    transform: translate(-1px, -2px) rotate(-1deg);
+  }
+
+  20% {
+    transform: translate(-3px, 0px) rotate(1deg);
+  }
+
+  30% {
+    transform: translate(3px, 2px) rotate(0deg);
+  }
+
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+
+  50% {
+    transform: translate(-1px, 2px) rotate(-1deg);
+  }
+
+  60% {
+    transform: translate(-3px, 1px) rotate(0deg);
+  }
+
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+
+  80% {
+    transform: translate(-1px, -1px) rotate(1deg);
+  }
+
+  90% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}

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

@@ -0,0 +1,218 @@
+import {ChangeDetectorRef, Component, ElementRef, Input, ViewChild} from '@angular/core';
+import {catchError, debounceTime, filter, 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;
+
+  files: UploadFile<any>[] = [];
+
+  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 = '';
+
+    // Start upload
+    if (this.instantUpload) {
+      this.uploadFiles(items);
+    }
+  }
+
+  /**
+   * Execute upload
+   */
+  async uploadFiles(files?: File[]): Promise<UploadFile<any>[]> {
+
+    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()))
+      .toPromise();
+  }
+
+  waitIdle(opts?: WaitForOptions): Promise<void> {
+    return waitFor(() => this.processingFilesCount === 0, opts);
+  }
+}