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

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

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

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

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