@sumaris-net/ngx-components 18.10.29 → 18.12.0

package/src/app/core/peer/select-peer.modal.ts

@@ -0,0 +1,366 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  numberAttribute,
+  OnDestroy,
+  Optional,
+  ViewChild,
+} from '@angular/core';
+import { IonSearchbar, ModalController, PopoverController } from '@ionic/angular';
+import { Peer } from '../services/model/peer.model';
+import { Subscription } from 'rxjs';
+import { fadeInAnimation } from '../../shared/material/material.animations';
+import { HttpClient } from '@angular/common/http';
+import { NetworkUtils, NodeInfo } from '../services/network.utils';
+import { VersionUtils } from '../../shared/version/versions';
+import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
+import { TextPopover, TextPopoverOptions } from '../form/text-popover/text-popover.component';
+import { TranslateService } from '@ngx-translate/core';
+import { isMobile } from '../../shared/platforms';
+import { Validators } from '@angular/forms';
+import { PEER_URL_REGEXP } from '../services/network.service';
+import { APP_LOGGING_SERVICE } from '../../shared/logging/logging-service.class';
+import { ILogger, ILoggingService } from '../../shared/logging/logger.model';
+import { map } from 'rxjs/operators';
+import { EntityUtils } from '../services/model/entity.model';
+import { RxState } from '@rx-angular/state';
+import { suggestFromArray } from '../../shared/services';
+import { isNilOrBlank, isNotEmptyArray, isNotNil } from '../../shared/functions';
+import { NodeFeature } from '../services/model/node-feature.model';
+
+export interface ISelectPeerModalOptions {
+  canCancel: boolean;
+  allowSelectDownPeer: boolean;
+  onRefresh: EventEmitter<Event>;
+  showSetManuallyButton: boolean;
+  selectedPeer?: string;
+  title?: string;
+  defaultPeers: Peer[];
+  showSearchBar?: boolean;
+}
+
+export interface ISelectPeerModalState {
+  defaultPeers: Peer[];
+  peers: Peer[];
+  filteredPeers: Peer[];
+  filteredPeersByFeatures: Peer[];
+  filteredPeerCount: number;
+  filteredFeaturesCount: number;
+  searchText: string;
+  selectedTabIndex: number;
+}
+
+@Component({
+  selector: 'select-peer-modal',
+  templateUrl: 'select-peer.modal.html',
+  styleUrls: ['./select-peer.modal.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInAnimation],
+})
+export class SelectPeerModal extends RxState<ISelectPeerModalState> implements OnDestroy, ISelectPeerModalOptions {
+  private _subscription = new Subscription();
+  private readonly _logger: ILogger;
+
+  protected defaultPeers$ = this.select('defaultPeers');
+  protected peers$ = this.select('peers');
+  protected filteredPeers$ = this.select('filteredPeers');
+  protected filteredPeersByFeatures$ = this.select('filteredPeersByFeatures');
+  protected filteredPeerCount$ = this.select('filteredPeerCount');
+  protected filteredFeaturesCount$ = this.select('filteredFeaturesCount');
+
+  protected loading = true;
+  protected mobile: boolean;
+  protected peerMinVersion: string;
+  protected peerDefaultPrefix: string;
+  protected enableSelectPeerByFeature: boolean;
+  protected collapsedPeers: { [key: string]: boolean } = {};
+
+  set peers(value: Peer[]) {
+    this.set('peers', () => value);
+  }
+  get peers(): Peer[] {
+    return this.get('peers');
+  }
+  set searchText(value: string) {
+    this.set('searchText', () => value);
+  }
+  get searchText(): string {
+    return this.get('searchText');
+  }
+  set filteredPeers(value: Peer[]) {
+    this.set('filteredPeers', () => value);
+  }
+  get filteredPeers(): Peer[] {
+    return this.get('filteredPeers');
+  }
+
+  @Input({ transform: numberAttribute }) set selectedTabIndex(value: number) {
+    this.set('selectedTabIndex', () => value);
+  }
+  get selectedTabIndex(): number {
+    return this.get('selectedTabIndex');
+  }
+
+  @Input() selectedPeer: string;
+  @Input() title = 'NETWORK.PEER.SELECT_MODAL.TITLE';
+  @Input({ transform: booleanAttribute }) canCancel = true;
+  @Input({ transform: booleanAttribute }) allowSelectDownPeer = true;
+  @Input({ transform: booleanAttribute }) showSetManuallyButton = true;
+  @Input({ transform: booleanAttribute }) showSearchBar: boolean;
+  @Input() tabGroupAnimationDuration: '200ms';
+
+  @Input() onRefresh = new EventEmitter<Event>();
+
+  @Input() set defaultPeers(value: Peer[]) {
+    this.set('defaultPeers', () => value);
+  }
+
+  @ViewChild('searchbar', { static: true }) searchbar: IonSearchbar;
+
+  constructor(
+    private modalCtrl: ModalController,
+    private popoverController: PopoverController,
+    private translate: TranslateService,
+    private http: HttpClient,
+    private cd: ChangeDetectorRef,
+    @Inject(ENVIRONMENT) protected environment: Environment,
+    @Optional() @Inject(APP_LOGGING_SERVICE) protected loggingService?: ILoggingService
+  ) {
+    super();
+    this.set({ searchText: null, selectedTabIndex: 0 });
+    this.mobile = isMobile(window);
+    this._logger = loggingService?.getLogger('network-modal');
+    this.peerMinVersion = environment.peerMinVersion;
+    this.peerDefaultPrefix = environment.peerDefaultPrefix || 'https://';
+    this.enableSelectPeerByFeature = environment.enableSelectPeerByFeature || false;
+    this.showSearchBar = this.enableSelectPeerByFeature; // Show search bar by default, if two tabs
+
+    // Refreshing peers
+    this.hold(this.defaultPeers$, (res) => this.refreshPeers(res));
+
+    // Search on host
+    this.connect(
+      'filteredPeers',
+      this.select(['peers', 'searchText'], (res) => res).pipe(
+        map(({ peers, searchText }) => {
+          if (isNilOrBlank(searchText)) return peers; // All
+
+          console.debug('[select-peer-modal] Searching on hosts: ' + searchText);
+          const { data } = suggestFromArray(peers, searchText, {
+            anySearch: true,
+            searchAttributes: ['label', 'hostAndPort'],
+          });
+          return data;
+        })
+      )
+    );
+    this.connect('filteredPeerCount', this.filteredPeers$.pipe(map((peers) => peers?.length ?? 0)));
+
+    // Search on features
+    if (this.enableSelectPeerByFeature) {
+      this.connect(
+        'filteredPeersByFeatures',
+        this.select(['peers', 'searchText'], (res) => res).pipe(
+          map(({ peers, searchText }) => {
+            if (isNilOrBlank(searchText)) {
+              return (peers || []).filter((p) => isNotEmptyArray(p?.features));
+            }
+
+            console.debug('[select-peer-modal] Searching on features: ' + searchText);
+            return peers
+              .map((peer) => {
+                const { data: features } = suggestFromArray(peer.features || [], searchText, {
+                  anySearch: true,
+                  searchAttributes: ['label', 'name', 'description'],
+                });
+                if (isNotEmptyArray(features)) {
+                  const filteredPeer = peer.clone();
+                  filteredPeer.features = features;
+                  return filteredPeer;
+                }
+                return null;
+              })
+              .filter(isNotNil);
+          })
+        )
+      );
+      this.connect('filteredFeaturesCount', this.filteredPeersByFeatures$.pipe(map(Peer.countAllFeatures)));
+    }
+  }
+
+  cancel() {
+    this.modalCtrl.dismiss();
+  }
+
+  ngOnDestroy(): void {
+    this._subscription.unsubscribe();
+  }
+
+  selectPeer(peer: Peer) {
+    if (this.allowSelectDownPeer || (peer.reachable && this.isCompatible(peer))) {
+      console.debug(`[select-peer-modal] Selected peer: {url: '${peer.url}'}`);
+      this.selectedPeer = peer.url;
+      this.modalCtrl.dismiss(peer);
+    }
+  }
+
+  async toggleSearchBar() {
+    this.showSearchBar = !this.showSearchBar;
+    if (this.showSearchBar && this.searchbar) {
+      setTimeout(() => {
+        this.searchbar.setFocus();
+        this.markForCheck();
+      }, 300);
+    }
+  }
+
+  togglePeerFeatures(peerUrl: string) {
+    if (!peerUrl) return;
+    this.collapsedPeers[peerUrl] = isNotNil(this.collapsedPeers[peerUrl]) ? !this.collapsedPeers[peerUrl] : true;
+    this.markForCheck();
+  }
+
+  /**
+   *  Check the min pod version, defined by the app
+   *
+   * @param peer
+   */
+  isCompatible(peer: Peer): boolean {
+    return !this.peerMinVersion || (peer && peer.softwareVersion && VersionUtils.isCompatible(this.peerMinVersion, peer.softwareVersion));
+  }
+
+  refresh(event: Event) {
+    this.loading = true;
+    this.onRefresh.emit(event);
+  }
+
+  async clickSetManually(event?: Event) {
+    const peerUrl = await this.openPeerUrlPopover(event);
+    if (peerUrl) {
+      const peer = Peer.parseUrl(peerUrl);
+      await this.refreshPeer(peer);
+      this.selectPeer(peer);
+    }
+  }
+
+  /* -- protected methods -- */
+  protected clearLogo(peer: Peer | NodeFeature) {
+    if (peer instanceof Peer) {
+      peer.favicon = 'skip';
+    } else {
+      peer.logo = 'skip';
+    }
+  }
+  async refreshPeers(peers: Peer[]) {
+    peers = peers || [];
+
+    const data: Peer[] = [];
+    const jobs = Promise.all(
+      peers.map(async (peer) => {
+        await this.refreshPeer(peer);
+
+        if (this._subscription.closed) return; // component destroyed
+
+        data.push(peer);
+
+        // Sort (by reachable, then host)
+        data.sort((a, b) => {
+          if (a.reachable && !b.reachable) return -1;
+          if (!a.reachable && b.reachable) return 1;
+          if (a.hostAndPort < b.hostAndPort) return -1;
+          if (a.hostAndPort > b.hostAndPort) return 1;
+          return 0;
+        });
+
+        this.peers = data.slice(); // Copy to force update
+
+        return peer;
+      })
+    );
+
+    try {
+      await jobs;
+    } catch (err) {
+      if (!this._subscription.closed) console.error(err);
+    }
+    this.loading = false;
+    this.cd.markForCheck();
+  }
+
+  protected async refreshPeer(peer: Peer): Promise<Peer> {
+    try {
+      // DEBUG
+      //await sleep(Math.random() * 100);
+
+      const summary: NodeInfo = await NetworkUtils.getNodeInfo(this.http, peer.url);
+      peer.status = 'UP';
+      peer.softwareName = summary.softwareName;
+      peer.softwareVersion = summary.softwareVersion;
+      peer.label = summary.nodeLabel;
+      peer.name = summary.nodeName;
+      peer.features = summary.features?.map(NodeFeature.fromObject) || [];
+    } catch (err) {
+      // If modal was not closed (e.g. response arrived too late => ignore)
+      if (!this._subscription.closed) {
+        console.error(`[select-peer] Error while calling '${peer.url}/api/node/info': ${err?.message || err}`, err);
+        this._logger?.error('refreshPeer', `Error while calling '${peer.url}/api/node/info': ${err?.message || JSON.stringify(err)}`);
+      }
+      peer.status = 'DOWN';
+    }
+    return peer;
+  }
+
+  protected async openPeerUrlPopover(event: Event, opts?: Partial<TextPopoverOptions>) {
+    const modal = await this.popoverController.create({
+      component: TextPopover,
+      componentProps: <TextPopoverOptions>{
+        placeholder: this.translate.instant('SETTINGS.PEER_URL'),
+        multiline: false,
+        autofocus: !this.mobile,
+        autocomplete: false,
+        validator: Validators.pattern(PEER_URL_REGEXP),
+        maxLength: null,
+        text: this.selectedPeer || this.peerDefaultPrefix,
+        ...opts,
+      },
+      backdropDismiss: false,
+      keyboardClose: false,
+      event: null, // IMPORTANT: null event will center the popover, and this will fix keyboard overlap on mobile
+      translucent: true,
+      cssClass: 'popover-large',
+    });
+
+    await modal.present();
+    const { data, role } = await modal.onDidDismiss();
+
+    if (data) {
+      console.info('Popover result: ', data);
+      return data;
+    }
+  }
+
+  protected updateFilteredPeer(event: any) {
+    if (event) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    const value = event.target.value;
+
+    const test = this.filteredPeers$.pipe(
+      map((peers) => peers.filter(EntityUtils.searchTextFilter(['features.label', 'features.name', 'features.description'], value)))
+    );
+
+    console.log(test);
+    // (event.target.value);
+    this.markForCheck();
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

package/src/app/core/peer/select-peer.module.ts

@@ -0,0 +1,23 @@
+import { NgModule } from '@angular/core';
+import { SharedModule } from '../../shared/shared.module';
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { SelectPeerModal } from './select-peer.modal';
+import { TranslateModule } from '@ngx-translate/core';
+import { AppTextPopoverModule } from '../form/text-popover/text-popover.module';
+import { CorePipesModule } from '../services/pipes/pipes.module';
+import { FormsModule } from '@angular/forms';
+
+@NgModule({
+  declarations: [
+    // Network
+    SelectPeerModal,
+  ],
+  exports: [
+    TranslateModule,
+    // Components
+    SelectPeerModal,
+  ],
+  imports: [SharedModule, TranslateModule.forChild(), AppTextPopoverModule, CorePipesModule, FormsModule],
+  providers: [provideHttpClient(withInterceptorsFromDi())],
+})
+export class AppSelectPeerModule {}

package/src/app/core/register/register-confirm.page.html

@@ -0,0 +1,51 @@
+<app-toolbar [title]="'REGISTER.CONFIRMED.TITLE' | translate" color="primary"></app-toolbar>
+
+<ion-content class="bg-image-cover center ion-padding" [ngStyle]="contentStyle">
+  <p class="hidden-xs ion-padding">
+    &nbsp;
+    <br />
+    <br />
+  </p>
+  <p class="hidden-xs">&nbsp;</p>
+
+  <ion-card>
+    <ion-card-content>
+      <div>
+        <ng-container *ngIf="loading">
+          <h4 translate>REGISTER.CONFIRMED.LOADING</h4>
+          <p><ion-spinner></ion-spinner></p>
+        </ng-container>
+
+        <!-- error -->
+        <ion-item *ngIf="!loading && error">
+          <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+          <ion-label color="danger" class="error ion-text-wrap" [innerHTML]="error | translate"></ion-label>
+        </ion-item>
+      </div>
+
+      <div *ngIf="!loading && !error">
+        <h3>
+          <ion-icon name="checkmark"></ion-icon>
+          <b translate>REGISTER.CONFIRMED.SUB_TITLE</b>
+        </h3>
+
+        <ion-text>
+          <p [innerHTML]="'REGISTER.CONFIRMED.SUCCESS' | translate: { email: email }"></p>
+          <p *ngIf="!isLogin" [innerHTML]="'REGISTER.CONFIRMED.LOGIN_HELP' | translate"></p>
+        </ion-text>
+      </div>
+    </ion-card-content>
+
+    <ion-footer *ngIf="!loading">
+      <ion-button expand="full" color="primary" [routerLink]="['/account']" *ngIf="!isLogin">
+        <ion-icon name="log-in" slot="start"></ion-icon>
+        <span translate>AUTH.BTN_LOGIN</span>
+      </ion-button>
+
+      <ion-button expand="full" color="secondary" [routerLink]="['/account']" *ngIf="isLogin">
+        <ion-icon name="contact" slot="start"></ion-icon>
+        <span translate>HOME.BTN_MY_ACCOUNT</span>
+      </ion-button>
+    </ion-footer>
+  </ion-card>
+</ion-content>

package/src/app/core/register/register-confirm.page.scss

@@ -0,0 +1,56 @@
+@import 'ionic.globals';
+
+.center {
+  text-align: center;
+  display: inline-block;
+}
+
+ion-content {
+  @extend .center;
+  --ion-background-color: transparent;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+  display: inline-block;
+  padding: 15px;
+}
+
+ion-card {
+  @extend .center;
+  padding: var(--ion-padding);
+  background-color: var(--ion-card-background-color);
+  min-width: 240px;
+  max-width: 400px;
+  z-index: 9;
+
+  button {
+    margin-top: 16px;
+  }
+
+  img {
+    @extend .center;
+    max-width: 250px;
+  }
+}
+
+ion-text {
+  @extend .center;
+}
+
+
+// Extra small device: Phones (<767px)
+@media screen and (max-width: $screen-xs-max) {
+  ion-content {
+    ion-card {
+      min-width: 160px;
+      width: auto;
+      max-width: 260px;
+
+      ion-footer ion-button {
+        margin-top: 8px;
+      }
+    }
+  }
+
+}

package/src/app/core/register/register-confirm.page.ts

@@ -0,0 +1,90 @@
+import { Component, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute } from '@angular/router';
+import { AccountService } from '../services/account.service';
+import { getRandomImageWithCredit } from '../home/home';
+import { ConfigService } from '../services/config.service';
+import { PlatformService } from '../services/platform.service';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+import { isNotEmptyArray } from '../../shared/functions';
+
+@Component({
+  selector: 'app-register-confirm-page',
+  templateUrl: 'register-confirm.page.html',
+  styleUrls: ['./register-confirm.page.scss'],
+})
+export class RegisterConfirmPage implements OnDestroy {
+  subscriptions: Subscription[] = [];
+
+  isLogin: boolean;
+  loading = true;
+  error: string;
+  email: string;
+  contentStyle = {};
+
+  constructor(
+    private platform: PlatformService,
+    private accountService: AccountService,
+    private activatedRoute: ActivatedRoute,
+    private configService: ConfigService
+  ) {
+    this.platform.ready().then(() => {
+      this.isLogin = accountService.isLogin();
+
+      // Subscriptions
+      this.subscriptions.push(this.accountService.onLogin.subscribe((_) => (this.isLogin = true)));
+      this.subscriptions.push(this.accountService.onLogout.subscribe(() => (this.isLogin = false)));
+      this.subscriptions.push(this.activatedRoute.paramMap.subscribe((params) => this.doConfirm(params.get('email'), params.get('code'))));
+
+      this.configService.config.subscribe((config) => {
+        if (isNotEmptyArray(config?.backgroundImages)) {
+          const { image } = getRandomImageWithCredit(config.backgroundImages);
+          this.contentStyle = { 'background-image': `url(${image})` };
+        } else {
+          const primaryColor = config.getProperty(CORE_CONFIG_OPTIONS.COLOR_PRIMARY) || 'var(--ion-color-primary)';
+          this.contentStyle = { 'background-color': primaryColor };
+        }
+
+        this.loading = false;
+      });
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach((s) => s.unsubscribe());
+    this.subscriptions = [];
+  }
+
+  async doConfirm(email: string, code: string) {
+    this.email = email;
+
+    if (!code) {
+      this.loading = false;
+      this.error = undefined;
+      return;
+    }
+
+    try {
+      if (this.accountService.isLogin()) {
+        const account = this.accountService.account;
+        const emailAccount = account && account.email;
+        if (email !== emailAccount) {
+          // Not same email => logout, then retry
+          await this.accountService.logout();
+          return this.doConfirm(email, code);
+        }
+      }
+
+      // Send the confirmation code
+      const confirmed = await this.accountService.confirmEmail(email, code);
+      if (confirmed && this.isLogin) {
+        await this.accountService.reload();
+      }
+      this.loading = false;
+      //this.location.replaceState("/confirm/" + email + "/");
+    } catch (err) {
+      this.error = (err && err.message) || err;
+      this.loading = false;
+    }
+  }
+}