@sumaris-net/ngx-components 18.14.0 → 18.14.2

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

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

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

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

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

@@ -1,90 +0,0 @@
-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;
-    }
-  }
-}