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

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

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

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

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