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

package/src/app/shared/image/gallery/image-gallery.component.ts

@@ -1,389 +0,0 @@
-import {AfterContentChecked, ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, Inject, Input, OnDestroy, OnInit, Optional, Output, ViewChild} from '@angular/core';
-import {BehaviorSubject, finalize, fromEventPattern, Observable, Subject, Subscription} from 'rxjs';
-import {TableDataSource, TableElement} from '@e-is/ngx-material-table';
-import {ENVIRONMENT, Environment} from '../../../../environments/environment.class';
-import {ImageService} from '../image.service';
-import {Image} from '../image.model';
-import {AlertController, IonicSlides, IonModal, IonPopover, Platform, PopoverController} from '@ionic/angular';
-import {isMobile} from '../../platforms';
-import {fadeInAnimation, fadeInOutAnimation} from '../../material/material.animations';
-import {isEmptyArray, toBoolean} from '../../functions';
-import {CollectionViewer, isDataSource, ListRange} from '@angular/cdk/collections';
-import {takeUntil} from 'rxjs/operators';
-import {Alerts} from '../../alerts';
-import {TranslateService} from '@ngx-translate/core';
-import {AppColors} from '../../types';
-import {FormControl, FormGroup, Validators} from '@angular/forms';
-import {createPromiseEventEmitter, emitPromiseEvent} from '../../events';
-import {PredefinedColors} from '@ionic/core';
-import {Swiper} from 'swiper/types';
-
-export declare type GalleryMode = 'mosaic' | 'list';
-
-const GalleryModeColSize = Object.freeze({
-  'mosaic': 4,
-  'list': 12
-});
-
-export interface ISwiper extends Swiper {
-  activeIndex: number;
-  imagesLoaded: number;
-}
-
-@Component({
-  selector: 'app-image-gallery',
-  templateUrl: './image-gallery.component.html',
-  styleUrls: ['./image-gallery.component.scss'],
-  animations: [fadeInAnimation, fadeInOutAnimation],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class AppImageGalleryComponent<T extends Image>
-  implements OnInit, OnDestroy, CollectionViewer, AfterContentChecked
-{
-
-  protected _destroySubject = new Subject<void>();
-  protected _renderChangeSubscription: Subscription;
-  protected _subscription = new Subscription();
-  protected _dataSource: TableDataSource<T>;
-
-  protected _data: TableElement<T>[];
-  protected _colSize: number;
-  protected _selectedRowIndex: number;
-  protected _presentingElement: Element = null;
-  protected _titleForm: FormGroup;
-  protected _titleAutofocus = false;
-  protected _slidesSubscription: Subscription;
-  protected swiperModules = [IonicSlides];
-  protected _swiper: Swiper;
-
-  zoomActive = false;
-  zoomScale = 1;
-
-  viewChange: BehaviorSubject<ListRange>;
-
-  @Input() cardColor: string | PredefinedColors;
-  @Input() debug: boolean = null;
-  @Input() disabled: boolean = false;
-  @Input() readOnly: boolean = false;
-  @Input() mobile: boolean = null;
-  @Input() mode: GalleryMode = null;
-  @Input() confirmBeforeDelete = true;
-  @Input() showToolbar: boolean = true;
-  @Input() showFabButton: boolean;
-  @Input() showTitle: boolean = true;
-  @Input() showAddCardButton: boolean = true;
-  @Input() addButtonColor: AppColors = 'tertiary';
-
-  @Input() set dataSource(dataSource: TableDataSource<T>) {
-    if (this._dataSource !== dataSource) {
-      this._switchDataSource(dataSource);
-    }
-  }
-  get dataSource(): TableDataSource<T> {
-    return this._dataSource;
-  }
-  get enabled() {
-    return !this.disabled;
-  }
-
-  get rows(): TableElement<T>[] {
-    return this._data;
-  }
-
-  get rowCount() {
-    return this._data?.length || 0;
-  }
-
-  get activeIndex(): number {
-    return this.getSwiper()?.activeIndex || 0;
-  }
-
-  @ViewChild('zoomModal') zoomModal: IonModal;
-  @ViewChild('titlePopover') titlePopover: IonPopover;
-  @ViewChild('modalSwiper') swiperRef: ElementRef;
-
-  @Output() onBeforeDeleteRows = createPromiseEventEmitter<boolean, {rows: TableElement<T>[]}>();
-  @Output() onAfterAddRows = new EventEmitter<TableElement<T>[]>();
-
-  constructor(protected image: ImageService,
-              protected platform: Platform,
-              protected alterCtrl: AlertController,
-              protected popoverCtrl: PopoverController,
-              protected translate: TranslateService,
-              protected cd: ChangeDetectorRef,
-              @Optional() @Inject(ENVIRONMENT) environment?: Environment
-  ) {
-
-    this.viewChange = new BehaviorSubject({ start: 0, end: Number.MAX_VALUE });
-
-    // DEV log
-    this.debug = environment && !environment.production;
-  }
-
-  ngOnInit() {
-    this.mobile = toBoolean(this.mobile, isMobile(window));
-    this.mode = this.mobile ? 'list': 'mosaic';
-    this._colSize = GalleryModeColSize[this.mode];
-    this.showToolbar = toBoolean(this.showToolbar, !this.mobile);
-    this.showAddCardButton = toBoolean(this.showAddCardButton, this.mobile);
-    this.showFabButton = toBoolean(this.showFabButton, this.mobile && !this.showAddCardButton);
-
-    // Get modal presenting element (iOS only)
-    this._presentingElement = this.mobile ? document.querySelector('.ion-page') : null;
-  }
-
-  ngAfterContentChecked() {
-    if (this.dataSource && !this._renderChangeSubscription) {
-      this._observeRenderChanges();
-    }
-  }
-
-  ngOnDestroy() {
-    this._destroySubject.next();
-    this._destroySubject.complete();
-
-    this._subscription.unsubscribe();
-    this._slidesSubscription?.unsubscribe();
-
-    if (isDataSource(this.dataSource)) {
-      this.dataSource.disconnect(this);
-    }
-  }
-
-  async add(event?: Event): Promise<void> {
-
-    const images = await this.image.add(event);
-
-    if (isEmptyArray(images)) return;
-
-    console.info(`[image-gallery] Adding new ${images.length} image(s)`, images);
-
-    const rows: TableElement<T>[] = [];
-    for (let image of images) {
-      const row = await this._dataSource.createNew();
-      row.currentData = image as unknown as T;
-      rows.push(row);
-      const added = await row.confirmEditCreate();
-      if (!added) {
-        console.warn('[image-gallery] Cannot confirm new image!');
-        break;
-      }
-    }
-
-    this.onAfterAddRows.emit(rows);
-  }
-
-  async delete(event: Event, row: TableElement<T>, opts?: {interactive?: boolean;}): Promise<boolean> {
-    if (event?.defaultPrevented || this.readOnly) return false;
-    event?.preventDefault();
-    event?.stopPropagation();
-
-    // Check using emitter
-    const confirmed = await this.canDeleteRows([row]);
-    if (!confirmed) return false;
-
-    let deleted: boolean;
-    if (row.id === -1) {
-      console.info('[image-gallery] Removing new image');
-      deleted = await row.cancelOrDelete();
-    }
-    else {
-      console.info('[image-gallery] Removing image (at #' + row.id + ')');
-      deleted = await row.delete();
-    }
-
-    return deleted;
-  }
-
-
-
-  toggleViewMode(event?: Event) {
-    switch (this.mode) {
-      case 'list':
-        this.mode = 'mosaic';
-        break;
-      default:
-        this.mode = 'list';
-    }
-    this._colSize = GalleryModeColSize[this.mode];
-    this.markForCheck();
-  }
-
-  trackByFn(index: number, row: TableElement<T>) {
-    return row.id;
-  }
-
-  async editTitle(event: MouseEvent, row: TableElement<T>, cardToolbar: any) {
-    if (event?.defaultPrevented) return;
-    event?.preventDefault();
-    event?.stopPropagation();
-    event?.stopImmediatePropagation();
-
-    this.showCardToolbar(cardToolbar);
-
-    const titleControl = new FormControl(row.currentData.title, Validators.compose([Validators.required, Validators.maxLength(255)]));
-    this._titleForm = new FormGroup({title: titleControl});
-    this._titleAutofocus = this.mobile && this.enabled && !this.readOnly;
-    this.cd.detectChanges();
-
-    await this.titlePopover.present();
-
-    const {data, role} = await this.titlePopover.onDidDismiss();
-
-    if (!role || role !== 'CANCEL') {
-      console.debug('[image-gallery] User set title: ' + data);
-      row.currentData.title = data;
-      this.markForCheck();
-    }
-
-    // Hide the toolbar, because the focus have been given to the event's origin (the edit button)
-    setTimeout(() => this.hideCardToolbar(cardToolbar), 750);
-  }
-
-  protected showCardToolbar(cardToolbar: any) {
-    const el = cardToolbar['el'] as HTMLElement;
-    el.classList.add('focused');
-  }
-
-  protected hideCardToolbar(cardToolbar: any) {
-    const el = cardToolbar['el'] as HTMLElement;
-    el.classList.remove('focused');
-  }
-
-  protected _switchDataSource(dataSource: TableDataSource<T>) {
-    if (isDataSource(this._dataSource)) {
-      this._dataSource.disconnect(this);
-    }
-    this._dataSource = dataSource;
-  }
-
-  protected _observeRenderChanges() {
-    // If no data source has been set, there is nothing to observe for changes.
-    if (!this.dataSource) {
-      return;
-    }
-    let dataStream: Observable<TableElement<T>[] | ReadonlyArray<TableElement<T>>>;
-    if (isDataSource(this.dataSource)) {
-      dataStream = this.dataSource.connect(this);
-    }
-    if (dataStream === undefined) {
-      throw this.getTableUnknownDataSourceError();
-    }
-    this._renderChangeSubscription = dataStream
-      .pipe(takeUntil(this._destroySubject))
-      .subscribe(data => {
-        this._data = (data || []).slice();
-        this.cd.markForCheck();
-      });
-  }
-
-  protected getTableUnknownDataSourceError() {
-    return Error(`Provided data source did not match an array, Observable, or DataSource`);
-  }
-
-  protected async clickRow(row: TableElement<T>, index: number) {
-
-    this._selectedRowIndex = index;
-    await this.zoomModal.present();
-    await this.zoomModal.onDidDismiss();
-  }
-
-  protected activeSlideIndex = 0;
-
-  protected getSwiper(swiperElement?: any): Swiper {
-    this._swiper = (swiperElement || this.swiperRef?.nativeElement)?.swiper || this._swiper;
-    return this._swiper;
-  }
-
-  protected async initModalSlides(swiperElement: any) {
-    const swiper = this.getSwiper(swiperElement);
-    console.log('TODO _selectedRowIndex=' + this._selectedRowIndex)
-    if (this._selectedRowIndex > 0) {
-      await swiper.slideTo(this._selectedRowIndex, 0);
-    }
-    this._slidesSubscription?.unsubscribe();
-    this._slidesSubscription = fromEventPattern((handler) => swiper.on('slideChangeTransitionStart', handler))
-      .subscribe((arg) => {
-        console.log('TODO received event slideChangeTransitionStart', arg)
-        this.activeSlideIndex = swiper.activeIndex;
-        this.markForCheck();
-      })
-  }
-
-  protected async zoom(swiperElement: any, zoomIn: boolean) {
-    const swiper = this.getSwiper(swiperElement);
-    const zoom = swiper.zoom;
-    zoomIn ? zoom.in() : zoom.out();
-  }
-
-  protected async deleteFromModal(event, swiperElement: any): Promise<boolean> {
-    const swiper = this.getSwiper(swiperElement);
-    const currentRow = this.rows.find((row, index) => index === swiper.activeIndex);
-    if (!currentRow) return false; // Row not found
-
-    const deleted = await this.delete(event, currentRow);
-
-    if (this.rows.length === 0) {
-      await this.zoomModal.dismiss();
-    }
-    else {
-      // Reset the zoom
-      swiper.zoom.out();
-      swiper.update();
-      this.markForCheck();
-    }
-    return deleted
-  }
-
-  protected async slidePrev(swiperElement: any) {
-    const swiper = this.getSwiper(swiperElement);
-    const activeIndex = swiper.activeIndex;
-    if (activeIndex === 0) {
-      // Loop to last
-      await swiper.slideTo(this.rows.length - 1, 0/*no transition, to avoid a "revert" effect*/);
-    }
-    else {
-      await swiper.slidePrev();
-    }
-  }
-
-  protected async slideNext(swiperElement: any) {
-    const swiper = this.getSwiper(swiperElement);
-    const activeIndex = swiper.activeIndex;
-    if (activeIndex === this.rows.length - 1) {
-      // Loop to first
-      await swiper.slideTo(0, 0/*no transition, to avoid a "revert" effect*/);
-    }
-    else {
-      await swiper.slideNext();
-    }
-  }
-
-  protected async canDeleteRows(rows: TableElement<T>[], opts?: { interactive?: boolean; }): Promise<boolean> {
-    // Check using emitter
-    if (this.onBeforeDeleteRows.observers.length > 0) {
-      try {
-        const canDelete = await emitPromiseEvent(this.onBeforeDeleteRows, 'canDelete', {
-          detail: {rows}
-        });
-        if (!canDelete) return false;
-      }
-      catch (err) {
-        if (err === 'CANCELLED') return false; // User cancel
-        console.error('Error while checking if can delete rows', err);
-        throw err;
-      }
-    }
-
-    if (this.confirmBeforeDelete) {
-      const confirmed = await Alerts.askDeleteConfirmation(this.alterCtrl, this.translate, event);
-      if (!confirmed) return false; // Cancelled
-    }
-
-    return true;
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-}

package/src/app/shared/image/gallery/image-gallery.module.ts

@@ -1,34 +0,0 @@
-import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
-import {TranslateModule} from '@ngx-translate/core';
-import {AppImageGalleryComponent} from './image-gallery.component';
-import {IonicModule} from '@ionic/angular';
-import {CommonModule} from '@angular/common';
-import {SharedPipesModule} from '../../pipes/pipes.module';
-import {SharedMaterialModule} from '../../material/material.module';
-import {SharedDirectivesModule} from '../../directives/directives.module';
-import {ReactiveFormsModule} from '@angular/forms';
-
-@NgModule({
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  imports: [
-    CommonModule,
-    IonicModule,
-    ReactiveFormsModule,
-    SharedMaterialModule,
-    SharedPipesModule,
-    SharedDirectivesModule,
-    TranslateModule.forChild(),
-  ],
-  declarations: [
-    // Components
-    AppImageGalleryComponent
-  ],
-  exports: [
-    IonicModule,
-    TranslateModule,
-    // Components
-    AppImageGalleryComponent
-  ]
-})
-export class ImageGalleryModule {
-}

package/src/app/shared/image/gallery/testing/gallegry.model.testing.ts

@@ -1,27 +0,0 @@
-import {EntityClass} from '../../../../core/services/model/entity.decorators';
-import {Entity} from '../../../../core/services/model/entity.model';
-import {EntityFilter} from '../../../../core/services/model/filter.model';
-import {Image} from '../../image.model';
-
-
-@EntityClass({ typename: 'ImageAttachmentVO' })
-export class ImageAttachment extends Entity<ImageAttachment> implements Image {
-
-  static fromObject: (source: any, opts?: any) => ImageAttachment;
-
-  dataUrl: string = null;
-  url: string = null;
-
-  fromObject(source: any, opts?: any) {
-    super.fromObject(source, opts);
-    this.url = source.url;
-    this.dataUrl = source.dataUrl;
-  }
-}
-
-@EntityClass({ typename: 'ImageAttachmentFilterVO' })
-export class ImageAttachmentFilter extends EntityFilter<ImageAttachmentFilter, ImageAttachment> {
-
-  static fromObject: (source: any, opts?: any) => ImageAttachmentFilter;
-
-}

package/src/app/shared/image/gallery/testing/gallery.service.testing.ts

@@ -1,102 +0,0 @@
-import {Injectable} from '@angular/core';
-
-import {SortDirection} from '@angular/material/sort';
-import {map} from 'rxjs/operators';
-import {BehaviorSubject, Observable} from 'rxjs';
-import {StartableService} from '../../../services/startable-service.class';
-import {EntitiesServiceWatchOptions, IEntitiesService, LoadResult} from '../../../services/entity-service.class';
-import {Platform} from '@ionic/angular';
-import {isNil, isNotNil, removeDuplicatesFromArray} from '../../../functions';
-import {Entity, EntityUtils} from '../../../../core/services/model/entity.model';
-import {EntityClass} from '../../../../core/services/model/entity.decorators';
-import {Image} from '../../image.model';
-import {EntityFilter} from '../../../../core/services/model/filter.model';
-
-
-// @dynamic
-@EntityClass({ typename: 'ImageAttachmentVO' })
-export class ImageAttachment extends Entity<ImageAttachment> implements Image {
-
-  static fromObject: (source: any, opts?: any) => ImageAttachment;
-
-  dataUrl: string = null;
-  url: string = null;
-  title: string = null;
-
-  fromObject(source: any, opts?: any) {
-    super.fromObject(source, opts);
-    this.url = source.url;
-    this.dataUrl = source.dataUrl;
-    this.title = source.title;
-  }
-}
-
-// @dynamic
-@EntityClass({ typename: 'ImageAttachmentFilterVO' })
-export class ImageAttachmentFilter extends EntityFilter<ImageAttachmentFilter, ImageAttachment> {
-
-  static fromObject: (source: any, opts?: any) => ImageAttachmentFilter;
-
-}
-
-@Injectable()
-export class ImageAttachmentService extends StartableService
-  implements IEntitiesService<ImageAttachment, ImageAttachmentFilter> {
-
-  $images = new BehaviorSubject<Partial<ImageAttachment>[]>([
-    ImageAttachment.fromObject({id: 0, url: 'https://test.sumaris.net/assets/img/bg/ray-1.jpg', title: 'ray #1'}),
-    ImageAttachment.fromObject({id: 1, url: 'https://test.sumaris.net/assets/img/bg/ray-2.jpg', title: 'ray #2'})
-  ]);
-
-  constructor(protected platform: Platform
-  ) {
-    super(platform);
-    console.debug('[gallery-testing-service] Create service');
-  }
-
-  protected ngOnStart(): Promise<any> {
-    return Promise.resolve(undefined);
-  }
-
-  watchAll(offset: number, size: number, sortBy?: string, sortDirection?: SortDirection, filter?: ImageAttachmentFilter, opts?: EntitiesServiceWatchOptions & { query?: any }): Observable<LoadResult<ImageAttachment>> {
-    console.debug('[gallery-testing-service] Watching images...');
-    return this.$images
-      .pipe(
-        map(images => {
-          let data = (images || []).map(ImageAttachment.fromObject);
-
-          data = EntityUtils.sort(data, sortBy, sortDirection);
-
-          console.debug(`[gallery-testing-service] Loaded ${data.length} images...`);
-
-          return {data, total: data.length};
-        })
-      );
-  }
-
-  async saveAll(entities: ImageAttachment[], opts?: any): Promise<any[]> {
-    console.debug('[gallery-service-testing] Saving images...' + JSON.stringify(entities));
-    if (!entities) return [];
-
-    const existingImages = this.$images.value;
-    let currentId = existingImages.reduce((res, image) => Math.max(res, +image?.id || 0), 0);
-    entities.filter(item => isNil(item.id))
-      .forEach(item => {
-        item.id = ++currentId;
-    });
-    this.$images.next(removeDuplicatesFromArray([
-      ...existingImages,
-      ...entities
-    ], 'id'));
-  }
-
-  async deleteAll(entities: ImageAttachment[], opts?: any): Promise<any> {
-    const deletedIds = (entities||[]).map(item => item.id).filter(isNotNil);
-    const filteredData = (this.$images.value).filter(item => !deletedIds.includes(item.id));
-    this.$images.next(filteredData);
-  }
-
-  asFilter(filter: any) {
-    return ImageAttachmentFilter.fromObject(filter);
-  }
-}

package/src/app/shared/image/gallery/testing/gallery.testing.html

@@ -1,15 +0,0 @@
-<ion-header>
-  <ion-toolbar color="primary">
-
-    <ion-buttons slot="start">
-      <ion-back-button></ion-back-button>
-    </ion-buttons>
-
-    <ion-title>Image gallery</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content>
-  <app-image-gallery [dataSource]="dataSource" (onAfterAddRows)="save()">
-  </app-image-gallery>
-</ion-content>

package/src/app/shared/image/gallery/testing/gallery.testing.module.ts

@@ -1,39 +0,0 @@
-import {NgModule} from '@angular/core';
-import {TranslateModule} from '@ngx-translate/core';
-import {RouterModule, Routes} from '@angular/router';
-import {GalleryTestPage} from './gallery.testing';
-import {CommonModule} from '@angular/common';
-import {IonicModule} from '@ionic/angular';
-import {ImageGalleryModule} from '../image-gallery.module';
-
-const routes: Routes = [
-  {
-    path: 'gallery',
-    pathMatch: 'full',
-    component: GalleryTestPage
-  },
-]
-
-@NgModule({
-  imports: [
-    CommonModule,
-    IonicModule,
-    ImageGalleryModule,
-    TranslateModule.forChild(),
-    RouterModule.forChild(routes),
-    TranslateModule.forChild(),
-  ],
-  declarations: [
-    // Components
-    GalleryTestPage
-  ],
-  exports: [
-    RouterModule,
-
-    // Components
-    GalleryTestPage
-  ]
-})
-export class ImageGalleryTestingModule {
-
-}

package/src/app/shared/image/gallery/testing/gallery.testing.ts

@@ -1,38 +0,0 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {ImageAttachment, ImageAttachmentService,} from './gallery.service.testing';
-import {EntitiesTableDataSource} from '../../../../core/table/entities-table-datasource.class';
-import {Subscription} from 'rxjs';
-import {ImageAttachmentFilter} from './gallegry.model.testing';
-
-@Component({
-  selector: 'app-gallery-test-page',
-  templateUrl: './gallery.testing.html',
-  providers: [
-    {provide: ImageAttachmentService, useClass: ImageAttachmentService}
-  ]
-})
-export class GalleryTestPage implements OnInit, OnDestroy {
-
-  private _subscription = new Subscription();
-  readonly dataSource = new EntitiesTableDataSource<ImageAttachment, ImageAttachmentFilter>(ImageAttachment, this.dataService, null, {
-    saveBeforeDelete: true,
-    saveOnlyDirtyRows: false
-  });
-
-  constructor(protected dataService: ImageAttachmentService) {
-  }
-
-  ngOnInit() {
-    this._subscription.add(this.dataSource.watchAll(0,100, null, null, null)
-      .subscribe())
-  }
-
-  ngOnDestroy() {
-    this._subscription.unsubscribe();
-  }
-
-  save() {
-    this.dataSource.save();
-  }
-
-}

package/src/app/shared/image/image.model.ts

@@ -1,6 +0,0 @@
-export interface Image {
-  dataUrl: string;
-  url: string;
-  title?: string;
-}
-

package/src/app/shared/image/image.module.ts

@@ -1,16 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {ImageGalleryModule} from './gallery/image-gallery.module';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    ImageGalleryModule
-  ],
-  exports: [
-    // Sub module
-    ImageGalleryModule
-  ]
-})
-export class ImageModule {
-}