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

package/src/app/core/account/account.page.html

@@ -0,0 +1,241 @@
+<app-toolbar [title]="'ACCOUNT.TITLE'|translate" color="primary"
+             [hasValidate]="dirty && !saving"
+             [hasClose]="!dirty && !saving"
+             (onValidate)="save($event)"
+             [canGoBack]="false"
+             (onClose)="close($event)">
+
+  <ion-buttons slot="end">
+    <!-- loader -->
+    <ion-spinner *ngIf="loading || saving; else endButtons"></ion-spinner>
+
+    <ng-template #endButtons>
+      <!-- refresh button (if online) -->
+      <ion-button [matTooltip]="'COMMON.BTN_REFRESH'|translate"
+                  *ngIf="network.online"
+                  (click)="refresh($event)">
+        <mat-icon slot="icon-only">refresh</mat-icon>
+      </ion-button>
+    </ng-template>
+  </ion-buttons>
+</app-toolbar>
+
+<ion-content>
+
+  <!-- error -->
+  <ion-item *ngIf="error && mobile" lines="none">
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="error|translate"></ion-label>
+  </ion-item>
+
+  <form [formGroup]="form" novalidate class="form-container">
+
+    <mat-tab-group #tabGroup [(selectedIndex)]="selectedTabIndex" dynamicHeight>
+
+      <!-- TAB: user details -->
+      <mat-tab label="{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}" class="ion-padding">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="person-circle"></ion-icon>
+          </mat-icon>
+          <ion-label>{{'ACCOUNT.USER_DETAILS.TITLE'|translate}}</ion-label>
+          <ion-icon slot="end" name="alert-circle" color="danger" *ngIf="submitted && form.invalid"></ion-icon>
+        </ng-template>
+
+        <div class="ion-padding">
+
+          <p [innerHTML]="'ACCOUNT.USER_DETAILS.DESCRIPTION'|translate"></p>
+
+          <!--h1>Identité</h1-->
+
+          <!-- Email -->
+          <mat-form-field>
+            <input matInput [placeholder]="'USER.EMAIL'|translate"
+                   formControlName="email" autocomplete="section-red email">
+            <mat-error *ngIf="form.controls.email.hasError('required') && form.controls.email.dirty" translate>ERROR.FIELD_REQUIRED</mat-error>
+            <mat-error *ngIf="form.controls.email.hasError('email') && form.controls.email.dirty">
+              <span>{{'ERROR.FIELD_NOT_VALID_EMAIL' | translate }}</span>
+            </mat-error>
+          </mat-form-field>
+
+          <ion-grid *ngIf="email.notConfirmed" class="ion-no-padding ion-padding-bottom">
+            <ion-row>
+              <ion-col color="danger">
+                <ion-icon slot="start" color="danger" name="alert-circle" color="danger"></ion-icon>
+                <ion-text [innerHTML]="'ACCOUNT.EMAIL_NOT_CONFIRMED_LABEL'|translate"></ion-text>
+              </ion-col>
+            </ion-row>
+
+            <ion-row style="height: 51px;">
+              <ion-col style="text-align: right;">
+                <ion-text>
+                  <small [innerHTML]="'ACCOUNT.EMAIL_NOT_RECEIVED_QUESTION'|translate"></small>
+                </ion-text>
+              </ion-col>
+              <ion-col size="auto">
+                <ion-button fill="solid" color="secondary" *ngIf="!email.sending" (click)="sendConfirmationEmail($event)">
+                  {{'ACCOUNT.BTN_RESEND'|translate}}
+                </ion-button>
+                <ion-spinner class="ion-no-padding" *ngIf="email.sending"></ion-spinner>
+              </ion-col>
+            </ion-row>
+
+            <ion-row *ngIf="email.error && !email.sending">
+              <ion-col>
+                <span *ngIf="email.error && !email.sending" [innerHTML]="email.error|translate"></span>
+              </ion-col>
+            </ion-row>
+          </ion-grid>
+
+          <!-- Last name -->
+          <mat-form-field>
+            <input matInput [appAutofocus]="true" [autofocusDelay]="500" [placeholder]="'USER.LAST_NAME'|translate"
+                   formControlName="lastName"
+                   autocomplete="section-blue family-name"
+                   required>
+            <mat-error *ngIf="form.controls.lastName.hasError('required') && form.controls.lastName.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+            <mat-error *ngIf="form.controls.lastName.hasError('minlength') && form.controls.lastName.dirty">
+              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>
+            </mat-error>
+          </mat-form-field>
+
+          <!-- First name -->
+          <mat-form-field>
+            <input matInput [placeholder]="'USER.FIRST_NAME'|translate" formControlName="firstName" autocomplete="section-blue given-name"
+                   required>
+            <mat-error *ngIf="form.controls.firstName.hasError('required') && form.controls.firstName.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+            <mat-error *ngIf="form.controls.firstName.hasError('minlength') && form.controls.firstName.dirty">
+              <span>{{'ERROR.FIELD_MIN_LENGTH' | translate: {minLength: 2} }}</span>
+            </mat-error>
+          </mat-form-field>
+
+
+          <!-- Additional fields -->
+          <ng-container *ngFor="let definition of additionalFields">
+            <app-form-field [definition]="definition"
+                            [formControlName]="definition.key"
+                            [required]="definition.extra && definition.extra.account && definition.extra.account.required || false">
+            </app-form-field>
+          </ng-container>
+
+          <h3 translate>ACCOUNT.USER_DETAILS.TECHNICAL_DIVIDER</h3>
+
+          <!-- profile -->
+          <mat-form-field>
+            <input matInput hidden readonly="true" [placeholder]="'ACCOUNT.USER_DETAILS.PROFILE'|translate"
+                   formControlName="mainProfile" required>
+            <span>{{'USER.PROFILE_ENUM.' + form.controls.mainProfile.value | translate}}</span>
+            <mat-error *ngIf="form.controls.firstName.hasError('mainProfile') && form.controls.mainProfile.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+
+          <!-- pubkey -->
+          <mat-form-field>
+            <input matInput readonly="true" [placeholder]="'ACCOUNT.USER_DETAILS.PUBKEY'|translate" formControlName="pubkey"
+                   required>
+            <mat-error *ngIf="form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+            <mat-error *ngIf="form.controls.firstName.hasError('pubkey') && form.controls.firstName.dirty">
+              <span translate>ERROR.FIELD_NOT_VALID_PUBKEY</span>
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+      </mat-tab>
+
+      <!-- TAB: settings -->
+      <mat-tab label="{{'ACCOUNT.SETTINGS.TITLE'|translate}}" formGroupName="settings">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="settings"></ion-icon>
+          </mat-icon>
+          <ion-label translate>ACCOUNT.SETTINGS.TITLE</ion-label>
+        </ng-template>
+
+        <div class="ion-padding">
+
+          <p [innerHTML]="'ACCOUNT.SETTINGS.DESCRIPTION'|translate"></p>
+
+          <mat-form-field>
+            <mat-select [placeholder]="'ACCOUNT.SETTINGS.LOCALE'|translate" formControlName="locale" required>
+              <mat-option *ngFor="let item of locales" [value]="item.key">
+                {{item.value}}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="settingsForm?.controls.locale.hasError('required') && settingsForm?.controls.locale.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+
+          <!-- lat/long format-->
+          <mat-form-field>
+            <mat-select [placeholder]="'ACCOUNT.SETTINGS.LAT_LONG_FORMAT'|translate" formControlName="latLongFormat"
+                        required>
+              <mat-option *ngFor="let item of latLongFormats" [value]="item">
+                {{'COMMON.LAT_LONG.' + item + '_PLACEHOLDER'|translate}}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="settingsForm?.controls.latLongFormat.hasError('required') && settingsForm?.controls.latLongFormat.dirty"
+                       translate>ERROR.FIELD_REQUIRED
+            </mat-error>
+          </mat-form-field>
+
+        </div>
+
+        <!-- Options table -->
+        <div class="options-table" [class.cdk-visually-hidden]="optionDefinitions | isEmptyArray">
+          <app-properties-table
+            #propertiesTable
+            i18nColumnPrefix="ACCOUNT.SETTINGS.OPTIONS."
+            [definitions]="optionDefinitions"
+            [canEdit]="true"
+            (onDirty)="$event ? markAsDirty() : undefined"
+          ></app-properties-table>
+        </div>
+
+      </mat-tab>
+
+      <!-- TAB: tokens -->
+      <mat-tab label="{{'ACCOUNT.TOKENS.TITLE'|translate}}" formGroupName="tokens">
+        <ng-template mat-tab-label>
+          <mat-icon>
+            <ion-icon matPrefix slot="start" name="ticket"></ion-icon>
+          </mat-icon>
+          <ion-label translate>ACCOUNT.TOKENS.TITLE</ion-label>
+        </ng-template>
+
+        <div class="ion-padding">
+          <p [innerHTML]="'ACCOUNT.TOKENS.DESCRIPTION'|translate"></p>
+        </div>
+
+        <!-- Tokens table -->
+        <div class="tokens-table">
+          <app-user-token-table
+            #tokensTable
+            [canEdit]="true"
+            (onDirty)="$event ? markAsDirty() : undefined"
+          ></app-user-token-table>
+        </div>
+
+      </mat-tab>
+    </mat-tab-group>
+
+
+  </form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <app-form-buttons-bar (onCancel)="cancel()" (onSave)="save($event)" [disabled]="!form.dirty || !valid || saving">
+    <!-- error -->
+    <ion-item *ngIf="error && !mobile" lines="none">
+      <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+      <ion-label color="danger" class="error" [innerHTML]="error|translate"></ion-label>
+    </ion-item>
+  </app-form-buttons-bar>
+</ion-footer>

package/src/app/core/account/account.page.scss

@@ -0,0 +1,21 @@
+
+mat-tab-group .mat-tab-body-content {
+  padding: var(--ion-grid-padding);
+  display: grid;
+}
+
+form {
+  width: 100%;
+
+  mat-form-field {
+    width: 100%;
+  }
+}
+
+div.options-table {
+  height: calc(100vh - 380px)
+}
+
+div.tokens-table {
+  height: calc(100vh - 250px)
+}

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

@@ -0,0 +1,366 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Injector, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {combineLatest, Subscription} from 'rxjs';
+import {AccountService} from '../services/account.service';
+import {Account} from '../services/model/account.model';
+import {UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
+import {AccountValidatorService} from '../services/validator/account.validator';
+import {AppForm} from '../form/form.class';
+import {AppFormUtils} from '../form/form.utils';
+import {FormFieldDefinition} from '../../shared/form/field.model';
+import {LAT_LONG_PATTERNS} from '../../shared/material/latlong/latlong.utils';
+import {StatusIds} from '../services/model/model.enum';
+import {APP_LOCALES, LocaleConfig, LocalSettings} from '../services/model/settings.model';
+import {Router} from '@angular/router';
+import {CanLeave} from '../../shared/guard/component-dirty.guard';
+import {NetworkService} from '../services/network.service';
+import {filter, map} from 'rxjs/operators';
+import {MatTabGroup} from '@angular/material/tabs';
+import {ConfigService} from '../services/config.service';
+import {CORE_CONFIG_OPTIONS} from '../services/config/core.config';
+import {AppPropertiesTable, PropertyEntity} from '../form/properties/properties.table';
+import {PropertiesMap} from '../../shared/types';
+import {isNotNil} from '../../shared/functions';
+import {UserTokenTable} from './token.table';
+import {NavController} from '@ionic/angular';
+
+@Component({
+  selector: 'app-account-page',
+  templateUrl: 'account.page.html',
+  styleUrls: ['./account.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AccountPage extends AppForm<Account> implements OnInit, OnDestroy, CanLeave {
+  @ViewChild('tabGroup', {static: true}) tabGroup: MatTabGroup;
+  @ViewChild('propertiesTable', {static: true}) propertiesTable: AppPropertiesTable;
+  @ViewChild('tokensTable', {static: true}) tokensTable: UserTokenTable;
+
+  selectedTabIndex = 0;
+  isLogin: boolean;
+  changesSubscription: Subscription;
+  networkSubscription: Subscription;
+  email: any = {
+    confirmed: false,
+    notConfirmed: false,
+    sending: false,
+    error: undefined
+  };
+  additionalFields: FormFieldDefinition[];
+  optionDefinitions: FormFieldDefinition[];
+
+  get settingsForm(): UntypedFormGroup {
+    return this.form.get('settings') as UntypedFormGroup;
+  }
+
+  // settingsContentForm: UntypedFormGroup;
+  locales: LocaleConfig[];
+  latLongFormats = LAT_LONG_PATTERNS;
+  saving = false;
+  submitted = false;
+  accountReadOnly = false;
+  readonly mobile: boolean;
+
+  get valid(): boolean {
+    return super.valid && (this.propertiesTable?.valid || true);
+  }
+
+  constructor(
+    injector: Injector,
+    public formBuilder: UntypedFormBuilder,
+    public accountService: AccountService,
+    public network: NetworkService,
+    protected navController: NavController,
+    protected validatorService: AccountValidatorService,
+    // protected settingsValidatorService: UserSettingsValidatorService,
+    protected configService: ConfigService,
+    protected cd: ChangeDetectorRef,
+    @Inject(APP_LOCALES) locales
+  ) {
+    super(injector, validatorService.getFormGroup(accountService.account));
+
+    this.locales = locales;
+
+    // Add settings fo form
+    // this.settingsForm = settingsValidatorService.getFormGroup(accountService.account && accountService.account.settings);
+    // this.settingsContentForm = (this.settingsForm.controls['content'] as UntypedFormGroup);
+    // this.form.addControl('settings', this.settingsForm);
+
+    this.mobile = this.settings.mobile;
+
+    // By default, disable the form
+    this.disable();
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Get user options
+    this.optionDefinitions = this.accountService.optionDefs.slice()
+      .filter(definition => !definition.minProfile || this.accountService.hasMinProfile(definition.minProfile));
+
+    // Observed some events
+    this.registerSubscription(this.accountService.onLogin.pipe(filter(() => !this.saving)).subscribe(account => this.onLogin(account)));
+    this.registerSubscription(this.accountService.onLogout.subscribe(() => this.onLogout()));
+    this.registerSubscription(this.onCancel.subscribe(() => {
+      this.setValue(this.accountService.account);
+      this.markAsPristine();
+    }));
+
+    this.registerSubscription(this.accountService.$additionalFields
+      .subscribe((additionalFields) => {
+        this.additionalFields = additionalFields.slice(); // Copy
+        if (this.accountService.isLogin()) {
+          this.onLogin(this.accountService.account);
+        } else {
+          this.markAsLoaded();
+        }
+      }));
+
+    this.registerSubscription(
+      this.configService.config.subscribe(value => {
+        this.accountReadOnly = value.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.ACCOUNT_READONLY);
+      })
+    );
+
+    // Realign tab, after a delay because the tab can be disabled when component is created
+    setTimeout(() => this.tabGroup.realignInkBar(), 500);
+  }
+
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.stopListenChanges();
+    this.networkSubscription?.unsubscribe();
+  }
+
+  onLogin(account: Account) {
+    console.debug('[account] Logged account: ', account);
+    this.isLogin = true;
+
+    this.setValue(account);
+
+    this.email.confirmed = account && account.email && (account.statusId !== StatusIds.TEMPORARY);
+    this.email.notConfirmed = account && account.email && (!account.statusId || account.statusId === StatusIds.TEMPORARY);
+
+    this.networkSubscription?.unsubscribe();
+    this.networkSubscription =combineLatest([
+      this.configService.config,
+      this.network.onNetworkStatusChanges
+        .pipe(
+          map(connectionType => connectionType !== 'none'),
+        )
+    ]).subscribe(([config, online]) => {
+      if (online) {
+        const accountReadOnly = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.ACCOUNT_READONLY);
+        this.enable({ accountReadOnly });
+        this.markAsPristine();
+        this.startListenChanges();
+      } else {
+        this.disable();
+        this.markAsPristine();
+        this.stopListenChanges();
+      }
+      this.markAsLoaded();
+    });
+
+    this.markForCheck();
+  }
+
+  onLogout() {
+    this.isLogin = false;
+    this.email.confirmed = false;
+    this.email.notConfirmed = false;
+    this.email.sending = false;
+    this.email.error = undefined;
+    this.form.reset();
+    this.disable();
+
+    this.networkSubscription?.unsubscribe();
+
+    this.stopListenChanges();
+
+    // Back to home
+    this.navController.navigateRoot('/');
+
+  }
+
+  async setValue(data: Account, opts?: { emitEvent?: boolean; onlySelf?: boolean }): Promise<void> {
+    super.setValue(data, opts);
+
+    // Set options
+    const properties = data?.settings?.asLocalSettings()?.properties || {};
+    const propertiesEntities: PropertyEntity[] = [];
+    this.optionDefinitions
+      .filter(definition => !definition.minProfile || this.accountService.hasMinProfile(definition.minProfile))
+      .map(definition => definition.key).forEach(key => {
+      if (isNotNil(properties[key])) {
+        propertiesEntities.push(PropertyEntity.fromObject({id: key, value: properties[key]}));
+      }
+    });
+
+    if (this.propertiesTable) {
+      await this.propertiesTable.ready();
+      this.propertiesTable.value = propertiesEntities;
+    }
+
+    if (this.tokensTable) {
+      await this.tokensTable.ready();
+      this.tokensTable.value = data.tokens;
+    }
+
+  }
+
+  async refresh(event?: Event) {
+
+    this.disable();
+    this.markAsLoading();
+
+    return this.accountService.reload();
+  }
+
+  startListenChanges() {
+    if (this.changesSubscription) return; // already started
+    this.changesSubscription = this.accountService.listenChanges();
+  }
+
+  stopListenChanges() {
+    if (!this.changesSubscription) return;
+    this.changesSubscription.unsubscribe();
+    this.changesSubscription = undefined;
+  }
+
+  async sendConfirmationEmail(event: MouseEvent) {
+    const json = this.form.value;
+    json.email = this.form.controls['email'].value;
+    if (!json.email || !this.email.notConfirmed) {
+      event.preventDefault();
+      return false;
+    }
+
+    this.email.sending = true;
+    console.debug('[account] Sending confirmation email...');
+    try {
+      await this.accountService.sendConfirmationEmail(
+        json.email,
+        json.settings && json.settings.locale || this.translate.currentLang
+      );
+      console.debug('[account] Confirmation email sent.');
+      this.email.sending = false;
+    } catch (err) {
+      this.email.sending = false;
+      this.email.error = err && err.message || err;
+    }
+  }
+
+  async save(event): Promise<boolean> {
+    if (this.saving) return false;
+
+    if (!this.form.valid) {
+      await AppFormUtils.waitWhilePending(this.form);
+
+      if (this.form.invalid) {
+        AppFormUtils.logFormErrors(this.form);
+        this.form.markAllAsTouched();
+        return false;
+      }
+    }
+
+    this.submitted = true;
+    this.saving = true;
+    this.error = undefined;
+
+    const newAccount = Account.fromObject({
+      ...(this.accountService.account.asObject()),
+      ...(this.form.value)
+    });
+
+    if (this.propertiesTable) {
+      // merge properties
+      await this.propertiesTable.save();
+      const propertyEntities = this.propertiesTable.value || [];
+      const properties: PropertiesMap = propertyEntities.reduce((res, item) => {
+        res[item.id] = item.value;
+        return res;
+      }, {});
+      newAccount.settings.merge(<LocalSettings>{properties}, ['properties']);
+    }
+
+    if (this.tokensTable) {
+      await this.tokensTable.save();
+      newAccount.tokens = this.tokensTable.value;
+    }
+
+    console.debug('[account] Saving account...', newAccount);
+    try {
+      this.disable();
+
+      await this.accountService.save(newAccount);
+
+      // Reload
+      setTimeout(() => this.onLogin(this.accountService.account), 100);
+
+      this.markAsPristine();
+      return true;
+    } catch (err) {
+      console.error(err);
+      this.error = err && err.message || err;
+      return false;
+    } finally {
+      this.saving = false;
+      this.enable();
+    }
+  }
+
+  enable(opts?: {
+    accountReadOnly?: boolean;
+    onlySelf?: boolean;
+    emitEvent?: boolean;
+  }) {
+    super.enable();
+
+    // Some fields are always disable
+    this.form.controls.email.disable();
+    this.form.controls.mainProfile.disable();
+    this.form.controls.pubkey.disable();
+
+    // Disable account fields if readonly by configuration
+    if (opts?.accountReadOnly) {
+      this.form.controls.lastName.disable();
+      this.form.controls.firstName.disable();
+    }
+
+    // Always disable some additional fields
+    this.additionalFields
+      .forEach(field => {
+        const control = this.form.controls[field.key];
+        if (!control) return; // Skip
+
+        const disabled = field.extra?.account && field.extra.account.disabled || false;
+        if (disabled && control.enabled) {
+          control.disable();
+        }
+        const required = field.extra?.account && field.extra.account.required || false;
+        if (!field.required && required) {
+          control.setValidators(control.validator
+            ? Validators.compose([control.validator, Validators.required])
+            : Validators.required);
+        }
+
+      });
+    this.markForCheck();
+  }
+
+  async cancel() {
+    await super.cancel();
+  }
+
+  async close(event?: Event) {
+    if (this.saving) return;
+
+    // Back to home
+    return this.navController.navigateRoot('/'); // back to home
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+}