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

package/src/app/core/settings/settings.page.ts

@@ -1,365 +0,0 @@
-import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, Injector, OnDestroy, OnInit, Optional} from '@angular/core';
-import {AccountService} from '../services/account.service';
-import {EntityUtils} from '../services/model/entity.model';
-import {APP_LOCALES, LocaleConfig, LocalSettings, UsageMode} from '../services/model/settings.model';
-import {Peer} from '../services/model/peer.model';
-import {UntypedFormArray, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup} from '@angular/forms';
-import {AppForm} from '../form/form.class';
-import {AppFormUtils, FormArrayHelper} from '../form/form.utils';
-import {TranslateService} from '@ngx-translate/core';
-import {ValidatorService} from '@e-is/ngx-material-table';
-import {LocalSettingsValidatorService} from '../services/validator/local-settings.validator';
-import {PlatformService} from '../services/platform.service';
-import {NetworkService} from '../services/network.service';
-import {isNil, isNilOrBlank, toBoolean} from '../../shared/functions';
-import {LocalSettingsService} from '../services/local-settings.service';
-import {FormFieldDefinition, FormFieldDefinitionMap} from '../../shared/form/field.model';
-import {merge} from 'rxjs';
-import {AlertController, NavController} from '@ionic/angular';
-import {Alerts} from '../../shared/alerts';
-import {Property} from '../../shared/types';
-import {CanLeave} from '../../shared/guard/component-dirty.guard';
-import {ISelectPeerModalOptions} from '../peer/select-peer.modal';
-import {MenuItem} from '../menu/menu.model';
-
-export const APP_SETTINGS_MENU_ITEMS = new InjectionToken<MenuItem[]>('settingsMenuItems');
-
-@Component({
-  selector: 'page-settings',
-  templateUrl: 'settings.page.html',
-  providers: [
-    {provide: ValidatorService, useExisting: LocalSettingsValidatorService},
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class SettingsPage extends AppForm<LocalSettings> implements OnInit, OnDestroy, CanLeave {
-
-  private data: LocalSettings;
-
-  mobile: boolean;
-  saving = false;
-  usageModes: UsageMode[] = ['FIELD', 'DESK'];
-  menuItems: MenuItem[];
-
-  propertyDefinitions: FormFieldDefinition[];
-  propertyDefinitionsByKey: FormFieldDefinitionMap = {};
-  propertyDefinitionsByIndex: { [index: number]: FormFieldDefinition } = {};
-  propertiesFormHelper: FormArrayHelper<Property>;
-
-  latLongFormats = ['DDMMSS', 'DDMM', 'DD'];
-
-  get accountInheritance(): boolean {
-    return this.form.controls['accountInheritance'].value;
-  }
-
-  get isLogin(): boolean {
-    return this.accountService.isLogin();
-  }
-
-  get propertiesForm(): UntypedFormArray {
-    return this.form.get('properties') as UntypedFormArray;
-  }
-
-  constructor(
-    injector: Injector,
-    protected platform: PlatformService,
-    protected navController: NavController,
-    protected validatorService: LocalSettingsValidatorService,
-    protected alertCtrl: AlertController,
-    protected translate: TranslateService,
-    protected formBuilder: UntypedFormBuilder,
-    protected accountService: AccountService,
-    protected settings: LocalSettingsService,
-    protected cd: ChangeDetectorRef,
-    public network: NetworkService,
-    @Inject(APP_LOCALES) public locales: LocaleConfig[],
-    @Optional() @Inject(APP_SETTINGS_MENU_ITEMS) menuItems?: MenuItem[]
-  ) {
-    super(injector, validatorService.getFormGroup());
-
-    this.propertiesFormHelper = new FormArrayHelper<Property>(
-      this.form.get('properties') as UntypedFormArray,
-      (value) => this.validatorService.getPropertyFormGroup(value),
-      (v1, v2) => (!v1 && !v2) || (v1.key === v2.key),
-      (value) =>  isNil(value) || (isNil(value.key) && isNil(value.value)),
-      {
-        allowEmptyArray: true
-      }
-    );
-
-    this.menuItems = menuItems || [];
-    this.mobile = this.platform.mobile;
-
-    // By default, disable the form
-    this._enable = false;
-  }
-
-  async ngOnInit() {
-    super.ngOnInit();
-
-    // Make sure platform is ready
-    await this.platform.ready();
-
-    this.propertyDefinitions = this.settings.optionDefs.slice(); // copy options
-    this.propertyDefinitions.forEach(o => this.propertyDefinitionsByKey[o.key] = o); // fill map
-
-    // Load settings
-    await this.load();
-
-    this.registerSubscription(
-      merge(
-        this.accountService.onLogin,
-        this.accountService.onLogout
-      )
-      .subscribe(() => this.setAccountInheritance(this.accountInheritance)));
-  }
-
-  getPropertyDefinition(index: number): FormFieldDefinition {
-    let definition = this.propertyDefinitionsByIndex[index];
-    if (!definition) {
-      definition = this.updatePropertyDefinition(index);
-      this.propertyDefinitionsByIndex[index] = definition;
-    }
-    return definition;
-  }
-
-  updatePropertyDefinition(index: number): FormFieldDefinition {
-    const key = (this.propertiesForm.at(index) as UntypedFormGroup).controls.key.value;
-    const definition = key && this.propertyDefinitionsByKey[key] || null;
-    this.propertyDefinitionsByIndex[index] = definition; // update map by index
-    this.markForCheck();
-    return definition;
-  }
-
-  removePropertyAt(index: number) {
-    this.propertiesFormHelper.removeAt(index);
-    this.propertyDefinitionsByIndex = {}; // clear cache by index
-    this.markForCheck();
-  }
-
-  async load() {
-
-    this.markAsLoading();
-    console.debug('[settings] Loading settings...');
-
-    const data = this.settings.settings;
-
-    // Set defaults
-    data.accountInheritance = toBoolean(data.accountInheritance, true);
-    data.locale = data.locale || this.translate.currentLang || this.translate.defaultLang;
-    data.latLongFormat = data.latLongFormat || 'DDMMSS';
-    data.usageMode = data.usageMode || 'DESK';
-
-    // Set peer
-    if (isNilOrBlank(data.peerUrl)) {
-      await this.network.ready();
-      const peer = this.network.peer;
-      data.peerUrl = peer && peer.url;
-    }
-
-    // Remember data
-    this.updateView(data);
-  }
-
-  updateView(data: LocalSettings) {
-    if (!data) return; //skip
-    this.data = data;
-
-    const json: any = {...data};
-
-    // Transform properties map into array
-    json.properties = EntityUtils.getMapAsArray(data.properties || {});
-    this.propertiesFormHelper.resize(json.properties.length);
-
-    this.form.patchValue(json, {emitEvent: false});
-    this.markAsPristine();
-
-    this.enable({emitEvent: false});
-
-    // Apply inheritance
-    this.setAccountInheritance(data.accountInheritance, {emitEvent: false});
-
-    this.markAsLoaded();
-    this.error = null;
-    this.markForCheck();
-  }
-
-  async save(event?: Event, options?: any): Promise<boolean> {
-    if (this.saving) return; // Skip
-
-    if (event) event.preventDefault()
-
-    // Remove all empty controls
-    this.propertiesFormHelper.removeAllEmpty();
-
-    if (!this.form.valid) {
-      await AppFormUtils.waitWhilePending(this.form);
-
-      if (this.form.invalid) {
-        AppFormUtils.logFormErrors(this.form);
-        this.form.markAllAsTouched();
-        return;
-      }
-    }
-
-    console.debug('[settings] Saving local settings...');
-
-    this.saving = true;
-    this.error = undefined;
-    this.markForCheck();
-
-    const data = await this.getValue();
-
-    // Check peer alive, before saving
-    const peerChanged = this.form.get('peerUrl').dirty;
-
-    // Clean page history, when peer changed
-    if (peerChanged) data.pageHistory = [];
-
-    try {
-      this.disable();
-
-      await this.settings.apply(data);
-      this.data = data;
-      this.markAsPristine();
-
-      // If peer changed
-      if (peerChanged) {
-        // Restart the network
-        this.network.peer = Peer.parseUrl(data.peerUrl);
-      }
-
-      return true;
-    } catch (err) {
-      console.error(err);
-      this.error = err && err.message || err;
-      return false;
-    } finally {
-      this.enable({emitEvent: false});
-
-      // Apply inheritance
-      this.setAccountInheritance(data.accountInheritance, {emitEvent: false});
-
-      // Add a delay, because of option menu that is always opened after save!!
-      setTimeout(() => {
-        this.saving = false;
-        this.markForCheck();
-      }, 400);
-    }
-  }
-
-
-  setAccountInheritance(enable: boolean, opts?: { emitEvent?: boolean }) {
-    // Make sure to update the value in control
-    this.form.controls['accountInheritance'].setValue(enable, opts);
-    if (this.data.accountInheritance !== enable) {
-      this.form.controls['accountInheritance'].markAsDirty({onlySelf: false});
-    }
-
-    if (enable) {
-      if (this.isLogin) {
-        // Force using account settings
-        const account = this.accountService.account;
-
-        // Copy values
-        if (account.settings) {
-          if (account.settings.locale) this.form.get('locale').setValue(account.settings.locale, opts);
-          if (account.settings.latLongFormat) this.form.get('latLongFormat').setValue(account.settings.latLongFormat, opts);
-        }
-        // Disable fields
-        this.form.get('locale').disable(opts);
-        this.form.get('latLongFormat').disable(opts);
-      } else {
-        // Enable fields
-        this.form.get('locale').enable(opts);
-        this.form.get('latLongFormat').enable(opts);
-      }
-    } else {
-      // Restore previous values
-      this.form.get('locale').setValue(this.data.locale, opts);
-      this.form.get('latLongFormat').setValue(this.data.latLongFormat, opts);
-
-      // Enable fields
-      this.form.get('locale').enable(opts);
-      this.form.get('latLongFormat').enable(opts);
-    }
-
-    // Mark for check, if need
-    if (!opts || opts.emitEvent) {
-      this.markForCheck();
-    }
-  }
-
-  async showSelectPeerModal(opts?: Partial<ISelectPeerModalOptions>) {
-    const peer = await this.network.showSelectPeerModal({
-      showSetManuallyButton: false, // Make no sense here, because same as cancel (already inside the settings page)
-      ...opts});
-    if (peer?.url) {
-      const control = this.form.get('peerUrl') as UntypedFormControl;
-      control.setValue(peer.url, {emitEvent: true, onlySelf: false});
-      control.markAsDirty({onlySelf: false});
-      this.markAsDirty();
-    }
-  }
-
-  async cancel(event?: Event) {
-    await this.load();
-  }
-
-  async close(event?: Event) {
-    if (this.saving) return;
-
-    // Back to home
-    return this.navController.navigateRoot('/'); // back to home
-  }
-
-  async clearCache(event?: Event) {
-    const confirm = await Alerts.askActionConfirmation(this.alertCtrl, this.translate, true, event);
-    if (confirm) {
-      await this.network.clearCache();
-      this.settings.removeOfflineFeatures();
-    }
-  }
-
-  async executeAction(event: Event, item: MenuItem) {
-    if (!item) return;
-    if (event?.defaultPrevented) return;
-
-    if (item.path) {
-      await this.navController.navigateForward(item.path);
-    }
-    else {
-      console.error('[settings] Unknown item type (no path)', item);
-    }
-  }
-
-  /* -- protected functions -- */
-
-  protected async getValue(): Promise<LocalSettings> {
-    const json = await this.getJsonValueToSave();
-
-    // Override properties from account
-    if (json.accountInheritance && this.isLogin) {
-      const account = this.accountService.account;
-      const userSettings = account && account.settings;
-      console.debug(`[settings] Applying account inheritance {locale: '${userSettings.locale}', latLongFormat: '${userSettings.latLongFormat}'}...`);
-      json.locale = userSettings.locale || json.locale;
-      json.latLongFormat = userSettings.latLongFormat || json.latLongFormat;
-    }
-
-    return json;
-  }
-
-  protected getJsonValueToSave(): Promise<any> {
-    const json = this.form.value;
-    json.properties = EntityUtils.getPropertyArrayAsObject(json.properties);
-
-    return Promise.resolve(json);
-  }
-
-  protected markForCheck() {
-    this.cd.markForCheck();
-  }
-
-
-}

package/src/app/core/table/actions-column.component.html

@@ -1,91 +0,0 @@
-<ng-container matColumnDef="actions" [stickyEnd]="stickyEnd">
-  <th mat-header-cell *matHeaderCellDef [class]="classList" [class.mat-column-sticky]="stickyEnd">
-    <button mat-icon-button
-            *ngIf="optionsClick.observers | isNotEmptyArray"
-            [title]="optionsTitle | translate"
-            (click)="optionsClick.emit($event)">
-      <mat-icon>more_vert</mat-icon>
-    </button>
-    <ng-content select="[matHeader]"></ng-content>
-  </th>
-  <td mat-cell *matCellDef="let row" [class]="classList">
-    <ng-container *ngIf="row.editing; else view">
-
-      <!-- pending -->
-      <ion-spinner *ngIf="row.validator?.pending" name="dots" class="center"></ion-spinner>
-
-      <!-- Confirm button -->
-      <button mat-icon-button color="light"
-              *ngIf="canConfirm && row.editing && row.validator?.dirty && row.validator?.valid"
-              [title]="'COMMON.BTN_APPLY'|translate"
-              (click)="confirmEditCreateClick.emit({event: $event, row: row})">
-        <mat-icon>checkmark</mat-icon>
-      </button>
-
-      <!-- new row -->
-      <ng-container *ngIf="row.id === -1; else existingRow">
-
-        <!-- delete button -->
-        <button mat-icon-button color="light"
-                *ngIf="canDelete && row.validator?.invalid"
-                [title]="'COMMON.BTN_DELETE' | translate"
-                (click)="cancelOrDeleteClick.emit({event: $event, row: row})">
-          <mat-icon>delete_outline</mat-icon>
-        </button>
-
-
-        <!-- add button -->
-        <button mat-icon-button color="light"
-                *ngIf="!canForward && canConfirmAndAdd && row.validator?.valid"
-                [title]="'COMMON.BTN_ADD'|translate"
-                (click)="confirmAndAddClick.emit({event: $event, row: row})">
-          <mat-icon>add</mat-icon>
-        </button>
-
-        <!-- next button (invisible - focusable only) -->
-        <button class="mat-row-action-button"
-                style="color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;"
-                *ngIf="canForward && row.validator?.valid"
-                (focus)="this.forward.emit({event: $event, row: row})">
-        </button>
-      </ng-container>
-
-      <!-- existing row -->
-      <ng-template #existingRow>
-        <!-- cancel button -->
-        <button mat-icon-button color="light"
-                *ngIf="canCancel && row.validator?.dirty"
-                [title]="'COMMON.BTN_UNDO' | translate"
-                (click)="cancelOrDeleteClick.emit({event: $event, row: row})">
-          <mat-icon>undo</mat-icon>
-        </button>
-
-        <!-- next button (invisible - focusable only) -->
-        <button class="mat-row-action-button"
-                style="color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;"
-                *ngIf="canForward && row.validator?.valid"
-                (focus)="this.forward.emit({event: $event, row: row})">
-        </button>
-      </ng-template>
-
-    </ng-container>
-
-    <ng-template #view>
-      <!-- dirty icon -->
-      <ion-icon *ngIf="dirtyIcon && row.validator?.dirty" [name]="dirtyIcon" color="accent" class="dirty-icon"></ion-icon>
-
-      <!-- backward button (invisible - focusable only) -->
-      <button mat-icon-button class="mat-row-action-button"
-              style="color: transparent; position: absolute; top: 0; margin: 0; padding: 0; width: 0;"
-              *ngIf="canBackward"
-              (focus)="this.backward.emit({event: $event, row: row})">
-      </button>
-    </ng-template>
-
-    <ng-container *ngTemplateOutlet="cellTemplate; context: { $implicit: row  }"></ng-container>
-  </td>
-
-  <td mat-footer-cell *matFooterCellDef>
-    <ng-content select="[matFooter]"></ng-content>
-  </td>
-</ng-container>

package/src/app/core/table/actions-column.component.ts

@@ -1,70 +0,0 @@
-import {ChangeDetectorRef, Component, EventEmitter, Input, OnDestroy, OnInit, Output, TemplateRef, ViewChild} from '@angular/core';
-import {MatColumnDef, MatTable} from '@angular/material/table';
-import {TableElement} from '@e-is/ngx-material-table';
-import {MatMenuTrigger} from '@angular/material/menu';
-import {isNil, toBoolean} from '../../shared/functions';
-
-@Component({
-  selector: 'app-actions-column',
-  templateUrl: './actions-column.component.html',
-})
-export class ActionsColumnComponent implements OnInit, OnDestroy {
-
-  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
-  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;
-
-  @Input() stickyEnd = false;
-  @Input() canCancel: boolean;
-  @Input() canConfirm: boolean;
-  @Input() canDelete: boolean;
-  @Input() canBackward: boolean;
-  @Input() canForward: boolean;
-  @Input() canConfirmAndAdd: boolean;
-  @Input() dirtyIcon: boolean|string;
-  @Input() optionsTitle = 'COMMON.BTN_OPTIONS';
-  @Input('class') classList: string;
-  @Input() cellTemplate: TemplateRef<any>;
-
-  @Output() optionsClick = new EventEmitter<Event>();
-  @Output() cancelOrDeleteClick = new EventEmitter<{ event: Event; row: TableElement<any> }>();
-  @Output() confirmEditCreateClick = new EventEmitter<{ event: Event; row: TableElement<any> }>();
-  @Output() confirmAndAddClick = new EventEmitter<{ event: Event; row: TableElement<any> }>();
-  @Output() backward = new EventEmitter<{ event: Event; row: TableElement<any> }>();
-  @Output() forward = new EventEmitter<{ event: Event; row: TableElement<any> }>();
-
-  constructor(private table: MatTable<any>,
-              private cd: ChangeDetectorRef,
-              // TODO auto configure using AppTable ? (need a forwardRef() in the table component
-              //@Optional() private appTable: AppTable<any>
-  ) {
-    if (!table) throw new Error(`[actions-column] this column component must be inside a MatTable component`);
-  }
-
-  ngOnInit(): void {
-    this.cd.detectChanges();
-    this.table.addColumnDef(this.columnDef);
-    this.canCancel = toBoolean(this.canCancel, this.cancelOrDeleteClick.observers.length > 0);
-    this.canConfirm = toBoolean(this.canConfirm, this.confirmEditCreateClick.observers.length > 0);
-    this.canDelete = toBoolean(this.canDelete, this.cancelOrDeleteClick.observers.length > 0);
-    this.canConfirmAndAdd = toBoolean(this.canConfirmAndAdd, this.confirmAndAddClick.observers.length > 0);
-    this.canBackward = toBoolean(this.canBackward, this.backward.observers.length > 0);
-    this.canForward = toBoolean(this.canForward, this.forward.observers.length > 0);
-    if (isNil(this.dirtyIcon)) {
-      this.dirtyIcon = 'star';
-    }
-  }
-
-  ngOnDestroy() {
-    this.table.removeColumnDef(this.columnDef);
-    this.optionsClick.complete();
-    this.optionsClick.unsubscribe();
-    this.cancelOrDeleteClick.complete();
-    this.cancelOrDeleteClick.unsubscribe();
-    this.confirmAndAddClick.complete();
-    this.confirmAndAddClick.unsubscribe();
-    this.backward.complete();
-    this.backward.unsubscribe();
-    this.forward.complete();
-    this.forward.unsubscribe();
-  }
-}