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

package/src/app/core/table/table.model.ts

@@ -0,0 +1,35 @@
+import { Subject, Subscription } from 'rxjs';
+
+export const SETTINGS_DISPLAY_COLUMNS = 'displayColumns';
+export const SETTINGS_SORTED_COLUMN = 'sortedColumn';
+export const SETTINGS_FILTER = 'filter';
+export const SETTINGS_PAGE_SIZE = 'pageSize';
+export const DEFAULT_PAGE_SIZE = 20;
+export const DEFAULT_PAGE_SIZE_OPTIONS = [20, 50, 100, 200, 500];
+export const RESERVED_START_COLUMNS = ['select', 'id'];
+export const RESERVED_END_COLUMNS = ['actions'];
+export const DEFAULT_REQUIRED_COLUMNS = ['id'];
+
+export class CellValueChangeListener {
+  subject: Subject<any>;
+  subscription: Subscription; // The row start editing subscription
+  formPath: string;
+  emitInitialValue: boolean;
+}
+
+
+export interface IModalDetailOptions<T = any> {
+  // Data
+  isNew: boolean;
+  data: T;
+  disabled: boolean;
+
+  // Callback functions
+  onDelete?: (event: Event, data: T) => Promise<boolean>;
+}
+
+export type SaveActionType = 'delete' | 'sort' | 'filter';
+
+export interface IEntitiesTableDataSource<R> {
+  getRows(): R[];
+}

package/src/app/core/table/table.module.ts

@@ -0,0 +1,26 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../shared/shared.module';
+import {TableSelectColumnsComponent} from './table-select-columns.component';
+import {ActionsColumnComponent} from './actions-column.component';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TranslateModule.forChild()
+  ],
+
+  declarations: [
+    // Components
+    TableSelectColumnsComponent,
+    ActionsColumnComponent,
+  ],
+  exports: [
+    TranslateModule,
+    // Components
+    TableSelectColumnsComponent,
+    ActionsColumnComponent
+  ]
+})
+export class AppTableModule {
+}

package/src/app/core/table/table.utils.ts

@@ -0,0 +1,38 @@
+import {AppTable} from './table.class';
+import {TableElement} from '@e-is/ngx-material-table';
+import {AppFormUtils} from '../form/form.utils';
+import {AsyncTableElement} from '@e-is/ngx-material-table/src/app/ngx-material-table/async/async-table-element';
+import {EntityUtils, IEntity} from '../services/model/entity.model';
+import {isNotNil, isNotNilOrNaN} from '../../shared/functions';
+
+export class AppTableUtils {
+
+  static waitIdle(table: AppTable<any, any, any>): Promise<any> {
+    if (!table || !table.dataSource) {
+      throw new Error('Invalid table. Missing table or table.dataSource');
+    }
+    return table.dataSource.waitIdle();
+  }
+
+  static logRowErrors(row: TableElement<any>|AsyncTableElement<any>, logPrefix?: string): void {
+    AppFormUtils.logFormErrors(row.validator, logPrefix);
+  }
+
+  static getEntityId<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(row: TableElement<T> | AsyncTableElement<T>): ID {
+    return EntityUtils.getId(row.currentData);
+  }
+
+  static getEntityIds<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(rows: TableElement<T>[] | AsyncTableElement<T>[]): ID[] {
+    return (rows || [])
+      .map((row) => row.currentData)
+      .filter(isNotNil)
+      .map(EntityUtils.getId)
+      .filter(isNotNilOrNaN);
+  }
+
+  static getEntities<T extends IEntity<T, ID> = IEntity<any, any>, ID = any>(rows: TableElement<T>[] | AsyncTableElement<T>[]): T[] {
+    return (rows || [])
+      .map((row) => row.currentData)
+      .filter(isNotNil);
+  }
+}

package/src/app/core/table/testing/multi-table.testing.ts

@@ -0,0 +1,261 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {AppTable, DEFAULT_PAGE_SIZE, RESERVED_END_COLUMNS, RESERVED_START_COLUMNS} from '../table.class';
+import {Referential} from '../../services/model/referential.model';
+import {ActivatedRoute, Router} from '@angular/router';
+import {IonInfiniteScroll, ModalController, Platform} from '@ionic/angular';
+import {Location} from '@angular/common';
+import {LocalSettingsService} from '../../services/local-settings.service';
+import {EntitiesTableDataSource} from '../entities-table-datasource.class';
+import {InMemoryEntitiesService} from '../../../shared/services/memory-entity-service.class';
+import {AppValidatorService} from '../../services/validator/base.validator.class';
+import {AbstractControl, FormBuilder, FormGroup} from '@angular/forms';
+import {isNil, isNotNil} from '../../../shared/functions';
+import {fromUnixMsTimestamp} from '../../../shared/dates';
+import {debounceTime, filter, tap} from 'rxjs/operators';
+import {MatExpansionPanel} from '@angular/material/expansion';
+import {ReferentialFilter} from '../../services/testing/referential-filter.model';
+import {ReferentialValidatorService} from '../../services/testing/referential.validator';
+import Timeout = NodeJS.Timeout;
+import {TableTestPage} from './table.testing';
+
+
+@Component({
+  selector: 'app-multi-table-testing',
+  templateUrl: 'multi-table.testing.html',
+  providers: [
+    {
+      provide: InMemoryEntitiesService,
+      useFactory: () => new InMemoryEntitiesService(Referential, ReferentialFilter, {
+        sortByReplacement: {id: 'id'}
+      })
+    },
+    {
+      provide: AppValidatorService,
+      useClass: ReferentialValidatorService
+    }
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MultiTableTestingPage extends AppTable<Referential, ReferentialFilter>
+  implements OnInit, OnDestroy {
+
+  static maxRowCount = 100;
+
+  timer: Timeout;
+
+  canEdit = true;
+  data: Referential[];
+  filterForm: FormGroup;
+  filterCriteriaCount = 0;
+
+  @Input() enableInfiniteScroll: boolean;
+
+  constructor(injector: Injector,
+              protected dataService: InMemoryEntitiesService<Referential, ReferentialFilter>,
+              protected validatorService: AppValidatorService,
+              protected formBuilder: FormBuilder,
+              protected cd: ChangeDetectorRef,
+              ) {
+    super(injector, [
+      ...RESERVED_START_COLUMNS,
+      'label',
+      'name',
+      'updateDate',
+      'comments',
+      ...RESERVED_END_COLUMNS
+    ],
+      new EntitiesTableDataSource(Referential, dataService, validatorService, {
+        suppressErrors: false
+      }),
+      null);
+
+    // Works with true and false
+    this.enableInfiniteScroll = this.mobile;
+
+    this.autoLoad = false;
+    this.inlineEdition = true;
+    this.i18nColumnPrefix = 'REFERENTIAL.';
+
+    this.confirmBeforeDelete = false;
+    this.saveBeforeDelete = false;
+
+    this.saveBeforeSort = true;
+    this.saveBeforeFilter = true;
+
+    this.filterForm = formBuilder.group({
+      searchText: [null]
+    });
+  }
+
+  get hasMoreData(): boolean {
+    return this.data.length < 100;
+  }
+
+  @ViewChild(MatExpansionPanel, {static: true}) filterExpansionPanel: MatExpansionPanel;
+  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Update filter when changes
+    this.registerSubscription(
+      this.filterForm.valueChanges
+        .pipe(
+          debounceTime(250),
+          filter(() => this.filterForm.valid),
+          tap(value => {
+            const filter = ReferentialFilter.fromObject(value);
+            this.filterCriteriaCount = filter.countNotEmptyCriteria();
+            this.markForCheck();
+            // Applying the filter
+            this.setFilter(filter, {emitEvent: false});
+          }),
+          // Save filter in settings (after a debounce time)
+          debounceTime(500),
+          tap(json => this.settings.savePageSetting(this.settingsId, json, 'filter'))
+        )
+        .subscribe()
+    );
+
+    this.registerSubscription(
+      this.onRefresh.subscribe(() => {
+        this.filterForm.markAsUntouched();
+        this.filterForm.markAsPristine();
+      }));
+
+  }
+
+  ngAfterViewInit() {
+    super.ngAfterViewInit();
+
+    // Restore filter from settings
+    this.restoreFilter();
+
+    // Load data
+    this.load();
+  }
+
+  ngOnDestroy() {
+    console.debug('[test-table] Destroying table...');
+    super.ngOnDestroy();
+    this.stopTimer();
+    this.dataService.stop();
+  }
+
+  protected restoreFilter() {
+    const json = this.settings.getPageSettings(this.settingsId, 'filter');
+    console.debug('[table-test] Restoring filter from settings...', json);
+
+    if (json) {
+      const filter = ReferentialFilter.fromObject(json);
+      this.filterForm.patchValue(json, {emitEvent: false});
+      this.filterCriteriaCount = filter.countNotEmptyCriteria();
+      this.setFilter(filter, {emitEvent: false});
+      this.markForCheck();
+    }
+  }
+
+  toggleTimer() {
+    if (isNotNil(this.timer)) this.stopTimer();
+    else this.startTimer();
+  }
+
+  load() {
+    console.debug('[test-table] Updating data...');
+    this.markAsLoading();
+
+    if (isNil(this.data)) {
+      this.data = this.generateData(0, this.enableInfiniteScroll ? this.defaultPageSize : TableTestPage.maxRowCount);
+    }
+    this.dataService.setValue(this.data, {emitEvent: false});
+    this.onRefresh.emit();
+
+    if (this.infiniteScroll) {
+      this.infiniteScroll.disabled = !this.infiniteScroll || this.data.length >= TableTestPage.maxRowCount;
+    }
+  }
+
+  loadMore(event?: CustomEvent & { target?: EventTarget & { complete?: () => void }}) {
+    console.debug('[table-test] Loading more...', event);
+
+    setTimeout(() => {
+      this.data = [
+        ...this.data,
+        ...this.generateData(this.data.length,20)
+      ];
+      this.dataService.setValue(this.data, {emitEvent: false});
+
+      this.defaultPageSize = this.data.length;
+      this.infiniteScroll.disabled = this.data.length >= 100;
+      this.doRefresh(event);
+
+    }, 500);
+  }
+
+  async save(): Promise<boolean> {
+    const saved = await super.save();
+    if (saved) {
+      // Update source data
+      this.data = this.dataService.value;
+    }
+    return saved;
+  }
+
+  clearControlValue(event: Event, formControl: AbstractControl): boolean {
+    if (event) event.stopPropagation(); // Avoid to enter input the field
+    formControl.setValue(null);
+    return false;
+  }
+
+  applyFilterAndClosePanel(event?: Event) {
+    this.defaultPageSize = DEFAULT_PAGE_SIZE;
+    this.onRefresh.emit(event);
+    this.filterExpansionPanel.close();
+  }
+
+  resetFilter(event?: Event) {
+    this.filterForm.reset({}, {emitEvent: true});
+    this.setFilter(ReferentialFilter.fromObject({}), {emitEvent: true});
+    this.filterExpansionPanel.close();
+  }
+
+  startTimer() {
+    this.stopTimer();
+    this.timer = setInterval(() => {
+      this.data = null; // Reset
+      this.load();
+    }, 500);
+  }
+
+  stopTimer() {
+    if (isNotNil(this.timer)) {
+      clearInterval(this.timer);
+      this.timer = null;
+    }
+  }
+
+  protected generateData(offset?: number, size?: number, ): Referential[] {
+    offset = offset || 0;
+    size = size || 100;
+
+    const result = new Array<Referential>();
+    for (let i = 0; i < size; i++) {
+      const id = i + 1 + offset;
+      const item = Referential.fromObject({
+        id,
+        label: 'CODE-' + id,
+        name: 'Name #' + id,
+        comments: 'My comment #' + id,
+        creationDate: fromUnixMsTimestamp(Date.now() - i * 60 * 1000),
+        updateDate: fromUnixMsTimestamp(Date.now() - i * 60 * 1000)
+      });
+      result.push(item);
+    }
+
+    return result;
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

package/src/app/core/table/testing/table-validator.service.ts

@@ -0,0 +1,25 @@
+import {Injectable} from '@angular/core';
+import {ReferentialValidatorService} from '../../services/testing/referential.validator';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
+import {Referential} from '../../services/model/referential.model';
+
+@Injectable()
+export class TableValidatorService extends ReferentialValidatorService {
+  constructor(protected formBuilder: UntypedFormBuilder) {
+    super(formBuilder);
+  }
+
+  getFormGroup(data?: Referential, opts?: { withDescription?: boolean; withComments?: boolean }): UntypedFormGroup {
+    const form = super.getFormGroup(data, opts);
+
+    form.addControl('properties', this.getPropertiesForm(data?.properties));
+
+    return form;
+  }
+
+  getPropertiesForm(data: {[key: string]: any}, opts?: any): UntypedFormGroup {
+    return this.formBuilder.group({
+      values: [data?.['values'], Validators.required]
+    });
+  }
+}