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

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

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

@@ -1,32 +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,68 +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(() => {
-          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

@@ -1,43 +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"
-  ></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

@@ -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;
-}
-
-@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

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

@@ -1,130 +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 {
-  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

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