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

package/src/app/core/auth/auth.form.ts

@@ -0,0 +1,145 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Injector, OnInit, Optional, Output} from '@angular/core';
+import {UntypedFormBuilder, Validators} from '@angular/forms';
+import {ModalController} from '@ionic/angular';
+import {RegisterModal} from '../register/register.modal';
+import {AuthData} from '../services/account.service';
+import {NetworkService} from '../services/network.service';
+import {AuthTokenType} from '../services/network.types';
+import {LocalSettingsService} from '../services/local-settings.service';
+import {slideUpDownAnimation} from '../../shared/material/material.animations';
+import {PlatformService} from '../services/platform.service';
+import {AppForm} from '../form/form.class';
+import {ENVIRONMENT} from '../../../environments/environment.class';
+import {CORE_CONFIG_OPTIONS} from '../services/config/core.config';
+import {ConfigService} from '../services/config.service';
+import {AppFormUtils} from '../form/form.utils';
+
+
+@Component({
+  selector: 'app-auth-form',
+  templateUrl: 'auth.form.html',
+  styleUrls: ['./auth.form.scss'],
+  animations: [slideUpDownAnimation],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppAuthForm extends AppForm<AuthData> implements OnInit {
+
+  readonly mobile: boolean;
+  canWorkOffline = false;
+  showPwd = false;
+  canRegister: boolean;
+  usernamePlaceholder: string;
+
+  @Output() onCancel = new EventEmitter<any>();
+  @Output() onSubmit = new EventEmitter<AuthData>();
+
+  disable(opts?: { onlySelf?: boolean; emitEvent?: boolean }) {
+    super.disable(opts);
+    this.showPwd = false; // Hide pwd when disable (e.g. when submitted)
+  }
+
+  constructor(
+    injector: Injector,
+    platform: PlatformService,
+    formBuilder: UntypedFormBuilder,
+    settings: LocalSettingsService,
+    private configService: ConfigService,
+    private modalCtrl: ModalController,
+    public network: NetworkService,
+    private cd: ChangeDetectorRef,
+    @Optional() @Inject(ENVIRONMENT) protected environment
+  ) {
+    super(injector,
+      formBuilder.group({
+      username: [null, Validators.required],
+      password: [null, Validators.required],
+      offline: [network.offline]
+    }));
+
+    this.mobile = settings.mobile;
+    this.canWorkOffline = this.settings.hasOfflineFeature();
+    this._enable = true;
+
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+
+    // Load config, to set username's label and validator
+    this.registerSubscription(
+      this.configService.config.subscribe(config => {
+        // Set the username placeholder, with email or username
+        const tokenType = config.getProperty(CORE_CONFIG_OPTIONS.AUTH_TOKEN_TYPE) as AuthTokenType;
+        if (tokenType === 'token') {
+          this.usernamePlaceholder = 'USER.EMAIL';
+          this.form.get('username').setValidators(Validators.compose([Validators.required, Validators.email]));
+        }
+        else {
+          this.usernamePlaceholder = 'USER.USERNAME';
+          this.form.get('username').setValidators(Validators.required);
+        }
+
+        // Enable/disable registration link
+        this.canRegister = config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
+
+        this.markForCheck();
+      })
+    );
+
+    // For DEV only
+    if (this.environment && this.environment.production === false && this.environment.defaultAuthValues) {
+      // Set the default user, for testing.
+      // Override using environment, if any
+      this.form.patchValue(this.environment.defaultAuthValues);
+    }
+  }
+
+  async cancel() {
+    this.onCancel.emit();
+  }
+
+  async doSubmit(event?: Event) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+
+    if (this.loading) return;
+
+    if (!this.form.valid) {
+      await AppFormUtils.waitWhilePending(this.form);
+      if (this.form.invalid) {
+        AppFormUtils.logFormErrors(this.form);
+        return; // Skip if invalid
+      }
+    }
+
+    this.markAsLoading();
+    const data = this.form.value;
+    this.showPwd = false; // Hide password
+    this.error = null; // Reset error
+
+    setTimeout(() => this.onSubmit.emit({
+      username: data.username,
+      password: data.password,
+      offline: data.offline
+    }));
+  }
+
+  register() {
+    this.onCancel.emit();
+    setTimeout(async () => {
+      const modal = await this.modalCtrl.create({
+        component: RegisterModal,
+        backdropDismiss: false
+      });
+      return modal.present();
+    }, 200);
+  }
+
+  /* -- protected functions -- */
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

package/src/app/core/auth/auth.modal.html

@@ -0,0 +1,57 @@
+<ion-header>
+  <ion-toolbar color="accent">
+    <ion-buttons slot="start">
+      <ion-button (click)="cancel()" visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>
+      {{'AUTH.TITLE'|translate}}
+    </ion-title>
+
+    <ion-buttons slot="end">
+      <ion-spinner *ngIf="loading"></ion-spinner>
+
+      <ion-button
+        (click)="doSubmit()" *ngIf="!loading"
+        visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="checkmark"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+<ion-content>
+  <app-auth-form #form
+                 (onSubmit)="doSubmit()"
+                 (onCancel)="cancel()">
+  </app-auth-form>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+
+  <ion-toolbar>
+
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+
+      <!-- buttons -->
+      <ion-col size="auto">
+        <ion-button fill="clear" color="dark" (click)="cancel()">
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+
+        <ion-button [fill]="form.invalid ? 'clear' : 'solid'"
+                    [disabled]="loading || form.invalid"
+                    (click)="doSubmit()"
+                    (keyup.enter)="doSubmit()"
+                    color="tertiary">
+          <ion-label translate>AUTH.BTN_LOGIN</ion-label>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+
+
+  </ion-toolbar>
+</ion-footer>

package/src/app/core/auth/auth.modal.scss

@@ -0,0 +1 @@
+

package/src/app/core/auth/auth.modal.ts

@@ -0,0 +1,80 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+import {AccountService} from '../services/account.service';
+import {firstNotNilPromise} from '../../shared/observables';
+import {AppAuthForm} from './auth.form';
+
+@Component({
+  templateUrl: 'auth.modal.html',
+  styleUrls: ['./auth.modal.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class AppAuthModal implements OnInit {
+
+  get loading() {
+    return this.form?.loading;
+  }
+
+  @ViewChild('form', { static: true }) private form: AppAuthForm;
+
+  constructor(private accountService: AccountService,
+              private viewCtrl: ModalController,
+              private cd: ChangeDetectorRef
+              ) {
+  }
+
+  ngOnInit() {
+    this.form.markAsReady({emitEvent: false});
+    this.form.markAsLoaded();
+  }
+
+  cancel() {
+    this.viewCtrl.dismiss();
+  }
+
+  async doSubmit(): Promise<any> {
+    if (this.form.disabled) return;
+    if (!this.form.valid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    this.markAsLoading();
+
+    try {
+      const data = this.form.value;
+
+      // Disable the form
+      this.form.disable();
+
+      const account = await this.accountService.login(data);
+      return this.viewCtrl.dismiss(account);
+    }
+    catch (err) {
+      this.form.error = err && err.message || err;
+      this.markAsLoaded();
+
+      // Enable the form
+      this.form.enable();
+
+      // Reset form error on next changes
+      firstNotNilPromise(this.form.form.valueChanges).then(() => {
+        this.form.error = null;
+        this.markForCheck();
+      });
+
+      return;
+    }
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected markAsLoading(opts?: {emitEvent?: boolean}) {
+    this.form.markAsLoading(opts);
+  }
+
+  protected markAsLoaded(opts?: {emitEvent?: boolean}) {
+    this.form.markAsLoaded(opts);
+  }
+}

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

@@ -0,0 +1,33 @@
+import {NgModule} from '@angular/core';
+import {AppAuthForm} from './auth.form';
+import {AppAuthModal} from './auth.modal';
+import {SharedModule} from '../../shared/shared.module';
+import {IonicModule} from '@ionic/angular';
+import {TranslateModule} from '@ngx-translate/core';
+import {AppRegisterModule} from '../register/register.module';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TranslateModule.forChild(),
+
+    // App modules
+    AppRegisterModule
+  ],
+
+  declarations: [
+    // Components
+    AppAuthForm,
+    AppAuthModal
+  ],
+  exports: [
+    TranslateModule,
+
+    // Components
+    AppAuthForm,
+    AppAuthModal
+  ]
+})
+export class AppAuthModule {
+
+}

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

@@ -0,0 +1,100 @@
+import {ModuleWithProviders, NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {SharedModule} from '../shared/shared.module';
+import {IonicStorageModule} from '@ionic/storage-angular';
+import {AppGraphQLModule} from './graphql/graphql.module';
+import {HttpClientModule} from '@angular/common/http';
+import {CacheModule} from 'ionic-cache';
+import {PlatformService} from './services/platform.service';
+import {IsOnDeskPipe, IsOnFieldPipe} from './services/pipes/usage-mode.pipes';
+import {PersonToStringPipe} from './services/pipes/person-to-string.pipe';
+import {AccountToStringPipe, IsLoginAccountPipe} from './services/pipes/account.pipes';
+import {DepartmentToStringPipe} from './services/pipes/department-to-string.pipe';
+import {AppMenuModule} from './menu/menu.module';
+import {AppIconModule} from './icon/icon.module';
+import {AppSelectPeerModule} from './peer/select-peer.module';
+import {AppInstallUpgradeCardModule} from './install/install-upgrade-card.module';
+import {AppRegisterModule} from './register/register.module';
+import {AppAuthModule} from './auth/auth.module';
+import {AppHomePageModule} from './home/home.module';
+import {AppAboutModalModule} from './about/about.module';
+import {AppSettingsPageModule} from './settings/settings.module';
+import {AppFormModule} from './form/form.module';
+import {AppTableModule} from './table/table.module';
+import {AppUpdateOfflineModeCardModule} from './offline/update-offline-mode-card.module';
+import {AppAccountModule} from './account/account.module';
+
+@NgModule({
+  declarations: [
+    // Pipes
+    IsOnFieldPipe,
+    IsOnDeskPipe,
+    PersonToStringPipe,
+    IsLoginAccountPipe,
+    AccountToStringPipe,
+    DepartmentToStringPipe,
+  ],
+
+  imports: [
+    SharedModule,
+    RouterModule,
+    HttpClientModule,
+    CacheModule,
+    IonicStorageModule,
+
+    // Sub modules
+    AppGraphQLModule,
+    AppMenuModule,
+    AppIconModule,
+    AppAccountModule,
+    AppRegisterModule,
+    AppAuthModule,
+    AppHomePageModule,
+    AppAboutModalModule,
+    AppSettingsPageModule,
+    AppSelectPeerModule,
+    AppFormModule,
+    AppTableModule,
+    AppInstallUpgradeCardModule,
+    AppUpdateOfflineModeCardModule,
+  ],
+  exports: [
+    SharedModule,
+    RouterModule,
+
+    // Sub modules
+    AppGraphQLModule,
+    AppMenuModule,
+    AppRegisterModule,
+    AppAuthModule,
+    AppHomePageModule,
+    AppAboutModalModule,
+    AppSettingsPageModule,
+    AppIconModule,
+    AppSelectPeerModule,
+    AppFormModule,
+    AppTableModule,
+    AppInstallUpgradeCardModule,
+    AppUpdateOfflineModeCardModule,
+
+    // Pipes
+    IsOnFieldPipe,
+    IsOnDeskPipe,
+    PersonToStringPipe,
+    IsLoginAccountPipe,
+    AccountToStringPipe,
+    DepartmentToStringPipe,
+  ]
+})
+export class CoreModule {
+
+  static forRoot(): ModuleWithProviders<CoreModule> {
+    console.info('[core] Creating module (root)');
+    return {
+      ngModule: CoreModule,
+      providers: [
+        PlatformService
+      ]
+    };
+  }
+}

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

@@ -0,0 +1,64 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {TranslateModule} from '@ngx-translate/core';
+import {RouterModule, Routes} from '@angular/router';
+import {TableTestingModule} from './table/testing/table.testing.module';
+import {TableTestPage} from './table/testing/table.testing';
+import {TextPopoverTestingModule} from './form/text-popover/testing/text-popover.testing.module';
+import {TextPopoverTestingPage} from './form/text-popover/testing/text-popover.testing';
+import {TestingPage} from '../shared/testing/tests.page';
+import {PropertiesFormTestingModule} from './form/properties/testing/properties-form.testing.module';
+import {PropertiesFormTestPage} from './form/properties/testing/properties-form.test';
+
+export const CORE_TESTING_PAGES: TestingPage[] = [
+  {label: 'Core components', divider: true},
+  {label: 'Table', page: '/testing/core/table'},
+  {label: 'Text popover', page: '/testing/core/text-popover'},
+  {label: 'Properties form', page: '/testing/core/properties-form'}
+];
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'table'
+  },
+  {
+    path: 'table',
+    pathMatch: 'full',
+    component: TableTestPage
+  },
+  {
+    path: 'text-popover',
+    pathMatch: 'full',
+    component: TextPopoverTestingPage
+  },
+  {
+    path: 'properties-form',
+    pathMatch: 'full',
+    component: PropertiesFormTestPage
+  }
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    RouterModule.forChild(routes),
+
+    // Sub modules
+    TableTestingModule,
+    TextPopoverTestingModule,
+    PropertiesFormTestingModule
+  ],
+  exports: [
+    RouterModule,
+
+    // Sub modules
+    TableTestingModule,
+    TextPopoverTestingModule,
+    PropertiesFormTestingModule
+  ]
+})
+export class CoreTestingModule {
+}

package/src/app/core/form/buttons/form-buttons-bar.component.html

@@ -0,0 +1,59 @@
+
+<ion-toolbar [class]="classList">
+  <ion-row class="ion-no-padding" nowrap>
+    <!-- show menu button -->
+    <ion-col size="auto" class="hidden-xs hidden-sm">
+      <ion-menu-toggle>
+        <button
+          mat-icon-button
+          color="accent"
+          [title]="'COMMON.BTN_SHOW_MENU' | translate"
+          (click)="menu.toggleSplitPaneWhen()">
+          <mat-icon><span>&#xbb;</span></mat-icon>
+        </button>
+      </ion-menu-toggle>
+    </ion-col>
+
+    <ion-col class="app-form-buttons-bar-content">
+      <ng-content></ng-content>
+    </ion-col>
+
+    <ion-col size="auto" class="app-form-buttons-bar-buttons">
+
+      <ng-content select="[slot=end]"></ng-content>
+
+      <!-- close (go back) -->
+      <ion-button fill="clear" color="dark" (click)="onBack.emit($event)"
+                  (keyup.enter)="onBack.emit($event)"
+                  *ngIf="onBack.observers | isNotEmptyArray"
+                  class="back">
+        <ion-label translate>COMMON.BTN_CLOSE</ion-label>
+      </ion-button>
+
+      <!-- reload -->
+      <ion-button fill="clear" color="dark" (click)="onCancel.emit($event)"
+                  (keyup.enter)="onCancel.emit($event)"
+                  [disabled]="disabledCancel"
+                  class="cancel">
+        <ion-icon slot="start" name="refresh"></ion-icon>
+        <ion-label translate>COMMON.BTN_RESET</ion-label>
+      </ion-button>
+
+      <!-- next -->
+      <ion-button fill="solid" (click)="onNext.emit($event)" (keyup.enter)="onNext.emit($event)" *ngIf="onNext.observers | isNotEmptyArray"
+                  class="next">
+        <ion-label translate>COMMON.BTN_NEXT</ion-label>
+        <ion-icon slot="end" name="arrow-forward"></ion-icon>
+      </ion-button>
+
+      <!-- save -->
+      <ion-button [fill]="disabled ? 'clear' : 'solid'"
+                  (click)="onSave.emit($event)"
+                  (keyup.enter)="onSave.emit($event)" color="danger"
+                  [disabled]="disabled"
+                  class="save">
+        <ion-label [innerHTML]="'COMMON.BTN_SAVE_WITH_SHORTCUT'|translate" [title]="'COMMON.BTN_SAVE_WITH_SHORTCUT_HELP'|translate"></ion-label>
+      </ion-button>
+    </ion-col>
+  </ion-row>
+</ion-toolbar>

package/src/app/core/form/buttons/form-buttons-bar.component.scss

@@ -0,0 +1,14 @@
+:host {
+  width: 100%;
+  ion-toolbar {
+    height: var(--app-form-buttons-bar-height);
+    padding: 0 6px; // Add a left/right padding
+  }
+  ion-col {
+    padding: 0;
+  }
+}
+
+ion-menu-toggle button {
+  top: 4px;
+}

package/src/app/core/form/buttons/form-buttons-bar.component.ts

@@ -0,0 +1,70 @@
+import {Component, EventEmitter, Input, OnDestroy, Output} from '@angular/core';
+import {Hotkeys} from '../../../shared/hotkeys/hotkeys.service';
+import {Subscription} from 'rxjs';
+import {filter, tap} from 'rxjs/operators';
+import {MenuService} from '../../menu/menu.service';
+
+export abstract class FormButtonsBarToken {
+  abstract onCancel: EventEmitter<Event>;
+  abstract onSave: EventEmitter<Event>;
+  abstract onNext: EventEmitter<Event>;
+  abstract onBack: EventEmitter<Event>;
+}
+
+@Component({
+  selector: 'app-form-buttons-bar',
+  templateUrl: './form-buttons-bar.component.html',
+  styleUrls: ['./form-buttons-bar.component.scss'],
+  providers: [
+    {provide: FormButtonsBarToken, useExisting: FormButtonsBarComponent}
+  ],
+})
+export class FormButtonsBarComponent implements FormButtonsBarToken, OnDestroy {
+
+  private _subscription = new Subscription();
+
+  @Input() disabled = false;
+  @Input() disabledCancel = false;
+  @Input() classList: string;
+
+  @Output() onCancel = new EventEmitter<Event>();
+  @Output() onSave = new EventEmitter<Event>();
+  @Output() onNext = new EventEmitter<Event>();
+  @Output() onBack = new EventEmitter<Event>();
+
+  constructor(private hotkeys: Hotkeys,
+    public menu: MenuService
+    ) {
+
+    // Ctrl+S
+    this._subscription.add(
+      hotkeys.addShortcut({keys: 'control.s', description: 'COMMON.BTN_SAVE'})
+        .pipe(filter(e => !this.disabled))
+        .subscribe((event) => this.onSave.emit(event)));
+
+    // Ctrl+Z
+    this._subscription.add(
+      hotkeys.addShortcut({keys: 'control.z', description: 'COMMON.BTN_RESET'})
+        .pipe(filter(e => !this.disabled && !this.disabledCancel))
+        .subscribe((event) => this.onCancel.emit(event))
+    );
+
+    // Escape
+    this._subscription.add(
+      hotkeys.addShortcut({keys: 'escape', description: 'COMMON.BTN_CLOSE', preventDefault: false})
+        .pipe(
+          filter(e => !e.defaultPrevented),
+          //tap(() => console.debug('[form-buttons-bar] Emit back event (keydown.escape)'))
+        )
+        .subscribe((event) => this.onBack.emit(event)));
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+    this.onCancel.complete();
+    this.onSave.complete();
+    this.onNext.complete();
+    this.onBack.complete();
+  }
+
+}

package/src/app/core/form/buttons/form-buttons-bar.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from '@angular/core';
+import {SharedModule} from '../../../shared/shared.module';
+import {FormButtonsBarComponent} from './form-buttons-bar.component';
+import {TranslateModule} from '@ngx-translate/core';
+
+@NgModule({
+  imports: [
+    SharedModule,
+    TranslateModule.forChild()
+  ],
+
+  declarations: [
+    // Components
+    FormButtonsBarComponent
+  ],
+  exports: [
+    TranslateModule,
+
+    // Components
+    FormButtonsBarComponent
+  ]
+})
+export class AppFormButtonsBarModule {
+}