@sumaris-net/ngx-components 18.14.0 → 18.14.1

package/src/app/core/install/install-upgrade-card.component.ts

@@ -1,445 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { AlertController, ModalController, ToastController } from '@ionic/angular';
-import { firstValueFrom, from, Observable, Subscription } from 'rxjs';
-import { Configuration } from '../services/model/config.model';
-import { ConfigService } from '../services/config.service';
-import { PlatformService } from '../services/platform.service';
-import { debounceTime, distinctUntilChanged, filter, map, switchMap } from 'rxjs/operators';
-import { NetworkService } from '../services/network.service';
-import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
-import { VersionUtils } from '../../shared/version/versions';
-import { slideUpDownAnimation } from '../../shared/material/material.animations';
-import { isNilOrBlank, isNotEmptyArray, isNotNil, isNotNilOrBlank, sleep } from '../../shared/functions';
-import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
-import { ShowToastOptions, Toasts } from '../../shared/toast/toasts';
-import { TranslateService } from '@ngx-translate/core';
-import { Peer } from '../services/model/peer.model';
-import { MimeTypes } from '../../shared/file/file.utils';
-import { UriUtils } from '../../shared/file/uri.utils';
-import { isAndroid, isIOS } from '../../shared/platforms';
-
-export declare interface InstallAppLink {
-  name: string;
-  url: string;
-  platform?: 'android' | 'ios' | 'electron';
-  version?: string;
-  filename?: string;
-  title?: string;
-  description?: string;
-  mimeType?: string;
-  downloading?: boolean;
-  location?: string;
-}
-
-@Component({
-  selector: 'app-install-upgrade-card',
-  templateUrl: 'install-upgrade-card.component.html',
-  styleUrls: ['./install-upgrade-card.component.scss'],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  animations: [slideUpDownAnimation],
-})
-export class AppInstallUpgradeCard implements OnInit, OnDestroy {
-  private _subscription = new Subscription();
-
-  loading = true;
-  hasDownloader = false;
-  downloading = false;
-  waitingNetwork = false;
-  installLinks: InstallAppLink[];
-  upgradeLinks: InstallAppLink[];
-  offline: boolean;
-
-  @Input() isLogin: boolean;
-  @Input() showUpgradeWarning = true;
-  @Input() showOfflineWarning = true;
-  @Input() showInstallButton = false;
-  @Input() debug: boolean;
-
-  constructor(
-    private configService: ConfigService,
-    private toastController: ToastController,
-    private alertController: AlertController,
-    private translate: TranslateService,
-    private cd: ChangeDetectorRef,
-    public platform: PlatformService,
-    public network: NetworkService,
-    @Inject(ENVIRONMENT) protected environment: Environment
-  ) {
-    this.debug = !environment.production;
-  }
-
-  ngOnInit() {
-    this.offline = this.network.offline;
-
-    // Listen pod config
-    this._subscription.add(
-      from(this.network.ready())
-        .pipe(
-          debounceTime(1000),
-          switchMap(() => this.configService.config),
-          filter(isNotNil)
-        )
-        .subscribe((config) => this.checkNeedInstallOrUpdate(config))
-    );
-
-    // Listen network changes
-    this._subscription.add(
-      this.network.onNetworkStatusChanges
-        .pipe(
-          //debounceTime(450),
-          //tap(() => this.waitingNetwork = false),
-          map((connectionType) => connectionType === 'none'),
-          distinctUntilChanged()
-        )
-        .subscribe((offline) => {
-          if (this.offline !== offline) {
-            this.offline = offline;
-            this.markForCheck();
-          }
-        })
-    );
-  }
-
-  ngOnDestroy() {
-    this._subscription.unsubscribe();
-    this._subscription = null;
-    this.installLinks = null;
-    this.upgradeLinks = null;
-  }
-
-  async download(event: Event, link: InstallAppLink) {
-    if (!link || !link.url) {
-      console.error("[install-upgrade-card] Missing required argument 'link.url'");
-      return; // Skip
-    }
-
-    // Mark link as downloading
-    link.downloading = true;
-    this.markForCheck();
-
-    this.listenDownloadJob(
-      link.url,
-      this.platform.download({
-        uri: link.url,
-        title: link.title,
-        filename: link.filename,
-        mimeType: link.mimeType,
-      })
-    )
-      .then((location) => {
-        if (this.platform.canOpenFile) link.location = location;
-        link.downloading = false;
-      })
-      .catch(() => (link.downloading = false))
-      .then(() => this.markForCheck());
-  }
-
-  async openFile(event: Event, link: InstallAppLink) {
-    if (!link || !link.location || !link.mimeType) {
-      console.error("[install-upgrade-card] Missing required argument 'link.location' or 'link.mimeType'");
-      return; // Skip
-    }
-    try {
-      await this.platform.open(link.location);
-    } catch (err) {
-      console.error('[install-upgrade-card] Cannot open file: ' + ((err && err.message) || err), err);
-    }
-  }
-
-  async tryOnline() {
-    this.waitingNetwork = true;
-    this.markForCheck();
-
-    try {
-      await this.network.tryOnline({
-        showLoadingToast: false,
-        showOnlineToast: true,
-        showOfflineToast: false,
-      });
-    } finally {
-      this.waitingNetwork = false;
-      this.markForCheck();
-    }
-  }
-
-  getPlatformName(platform: 'android' | 'ios' | 'electron') {
-    switch (platform) {
-      case 'android':
-        return 'Android';
-      case 'ios':
-        return 'iOS';
-      case 'electron':
-        return 'desktop';
-      default:
-        return '';
-    }
-  }
-
-  asLink(value: any): InstallAppLink {
-    return value as InstallAppLink;
-  }
-
-  /* -- private method  -- */
-
-  private async checkNeedInstallOrUpdate(config: Configuration) {
-    if (!config) return; // Skip
-
-    console.info('[install-upgrade-card] Check if need to install or upgrade...');
-
-    this.hasDownloader = this.platform.canDownload;
-
-    try {
-      const links = this.getLinks(config);
-
-      // Check for upgrade
-      this.upgradeLinks = this.getCompatibleUpgradeLinks(links, config);
-
-      if (isNotEmptyArray(this.upgradeLinks)) {
-        console.info(`[install-upgrade-card] Find upgrade links: ${this.upgradeLinks.map((l) => l.url).join(',')}`);
-        this.installLinks = null;
-        this.listenDownloadJobs();
-      } else {
-        // Check for install links
-        this.installLinks = this.getCompatibleInstallLinks(links);
-        if (isNotEmptyArray(this.installLinks)) {
-          console.info(`[install-upgrade-card] Find installation links ${this.installLinks.map((l) => l.url).join(',')}`);
-          await sleep(1000); // Add a delay, for animation
-        } else {
-          console.info(`[install-upgrade-card] No installation or upgrade links to display.`);
-        }
-      }
-    } finally {
-      this.loading = false;
-      this.markForCheck();
-    }
-  }
-
-  private getCompatibleInstallLinks(installLinks: InstallAppLink[]): InstallAppLink[] {
-    // Already an native App: not need to install
-    if (this.platform.isApp()) return undefined;
-
-    // If mobile web: return all compatible, depending on the platform
-    if (this.platform.isMobileWeb()) {
-      return installLinks.filter(
-        (link) =>
-          !link.platform ||
-          this.platform.is(link.platform) ||
-          (link.platform === 'android' && isAndroid(window)) ||
-          (link.platform === 'ios' && isIOS(window))
-      );
-    }
-
-    return undefined;
-  }
-
-  private getCompatibleUpgradeLinks(installLinks: InstallAppLink[], config: Configuration): InstallAppLink[] {
-    const appVersion = this.environment.version;
-    const appMinVersionFromPod = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
-
-    if (!appVersion) {
-      console.error("Missing value for 'environment.version': cannot check app compatibility!");
-      return undefined;
-    }
-
-    const needUpgrade = appMinVersionFromPod && !VersionUtils.isCompatible(appMinVersionFromPod, appVersion);
-    if (!needUpgrade) return undefined;
-
-    // Filter on platform, if mobile App
-    const upgradeLinks = (installLinks || []).filter((link) => link.platform && this.platform.is(link.platform));
-
-    // Use min version as default version
-    upgradeLinks.forEach((link) => {
-      link.version = link.version || appMinVersionFromPod;
-    });
-
-    return isNotEmptyArray(upgradeLinks) ? upgradeLinks : undefined;
-  }
-
-  private getLinks(config: Configuration): InstallAppLink[] {
-    const result: InstallAppLink[] = [];
-
-    // Compute App name
-    const minVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
-    const defaultAppName = this.environment.defaultAppName || 'SUMARiS';
-
-    // Android
-    {
-      // Get URL (from config, or environment)
-      let url = config.getProperty(CORE_CONFIG_OPTIONS.ANDROID_INSTALL_URL);
-      if (isNilOrBlank(url)) url = this.environment.defaultAndroidInstallUrl || null;
-
-      // Resolve relative URL
-      const peer = this.network.peer;
-      if (peer && url && (url.startsWith('./') || url.startsWith('/'))) {
-        url = Peer.path(peer, url);
-      }
-
-      // Compute App name (use config if URL is specific)
-      const name: string = isNotNilOrBlank(url) ? config.label : defaultAppName;
-
-      if (url) {
-        let title: string;
-        let mimeType: string;
-
-        // Get file name
-        let filename = UriUtils.getFilename(url);
-        let version = minVersion || 'latest';
-
-        // OK, this is a downloadable APK file (e.g. NOT a link to a playstore)
-        if (filename?.toLowerCase().endsWith('.apk')) {
-          // Define mime type
-          mimeType = MimeTypes.ANDROID_APK;
-
-          // Get the file version (if any)
-          const versionMatches = /-v([1-9][0-9]*\.[0-9]+\.(:?(:?alpha|beta|rc)?[0-9]*))/i.exec(filename);
-          version = (versionMatches && versionMatches[1]) || version;
-
-          // Compute a new file name, with the version
-          if (isNotNilOrBlank(name) && version !== 'latest') {
-            filename = `${name}-v${version}.apk`.toLowerCase();
-            title = `${name} v${version}`;
-          }
-
-          // Replace 'latest' with the app version, if present in the filename
-          else if (filename.indexOf('latest') !== -1 && version !== 'latest') {
-            filename = filename.replace('latest', version);
-          }
-        }
-
-        result.push({ name, url, platform: 'android', version, filename, title, mimeType });
-      }
-    }
-
-    // iOS
-    {
-      // Get URL (from config, or environment)
-      let url = config.getProperty(CORE_CONFIG_OPTIONS.IOS_INSTALL_URL);
-      if (isNilOrBlank(url)) url = this.environment.defaultIOSInstallUrl || null;
-
-      // Resolve relative URL
-      const peer = this.network.peer;
-      if (peer && url && (url.startsWith('./') || url.startsWith('/'))) {
-        url = Peer.path(peer, url);
-      }
-
-      // Compute App name (use config if URL is specific)
-      const name: string = isNotNilOrBlank(url) ? config.label : defaultAppName;
-
-      if (url) {
-        const version = minVersion || 'latest';
-        const title = `${name} v${version}`;
-        result.push({ name, url, platform: 'ios', version, title });
-      }
-    }
-
-    // Desktop (Electron)
-    {
-      // Get URL (from config, or environment)
-      let url = config.getProperty(CORE_CONFIG_OPTIONS.DESKTOP_INSTALL_URL);
-      if (isNilOrBlank(url)) url = this.environment.defaultDesktopInstallUrl || null;
-
-      // Resolve relative URL
-      const peer = this.network.peer;
-      if (peer && url && (url.startsWith('./') || url.startsWith('/'))) {
-        url = Peer.path(peer, url);
-      }
-
-      // Compute App name (use config if URL is specific)
-      const name: string = isNotNilOrBlank(url) ? config.label : defaultAppName;
-
-      if (url) {
-        const version = minVersion || 'latest';
-        const title = `${name} v${version}`;
-        result.push({ name, url, platform: 'electron', version, title });
-      }
-    }
-
-    return result;
-  }
-
-  private listenDownloadJobs() {
-    // Listening downloading promise, if exists
-    (this.upgradeLinks || []).forEach((link) => {
-      const job = this.platform.getDownloadingJob(link.url);
-      if (job) {
-        link.downloading = true;
-        this.listenDownloadJob(link.url, job)
-          .then((location) => {
-            link.location = location;
-            link.downloading = false;
-          })
-          .catch(() => (link.downloading = false))
-          .then(() => this.markForCheck());
-      }
-    });
-  }
-
-  private async listenDownloadJob(url: string, job: Observable<string>): Promise<string> {
-    if (!url || !job) return; // Skip
-
-    try {
-      // Mark as downloading
-      if (!this.downloading) {
-        console.info(`[install-upgrade-card] Asking platform to download '${url}'...`);
-        this.downloading = true;
-        this.markForCheck();
-      } else {
-        console.info(`[install-upgrade-card] Platform is already downloading!`);
-      }
-
-      const location = await firstValueFrom(job);
-      if (location) {
-        console.info('[install-upgrade-card] File downloaded at: ' + location);
-        this.showDownloadCompleteDialog();
-      }
-      return location;
-    } catch (err) {
-      // Failed: display a toast
-      console.error('[install-upgrade-card] Download failed: ' + ((err && err.message) || err));
-      this.showDownloadFailedToast(err);
-      throw err;
-    } finally {
-      this.downloading = false;
-      this.markForCheck();
-    }
-  }
-
-  private showDownloadFailedToast(err) {
-    return this.showToast({
-      message: 'ERROR.DOWNLOAD_FAILED',
-      messageParams: { error: err },
-      type: 'error',
-      showCloseButton: true,
-    });
-  }
-
-  private async showDownloadCompleteDialog() {
-    if (!this._subscription) return; // Skip if component has been destroyed
-
-    const translations = await this.translate.instant(['INFO.ALERT_HEADER', 'INFO.UPDATE_APP_DOWNLOADED', 'COMMON.BTN_CLOSE']);
-    const alert = await this.alertController.create({
-      header: translations['INFO.ALERT_HEADER'],
-      message: translations['INFO.UPDATE_APP_DOWNLOADED'],
-      buttons: [
-        {
-          text: translations['COMMON.BTN_CLOSE'],
-          role: 'cancel',
-          cssClass: 'secondary',
-        },
-      ],
-    });
-
-    await alert.present();
-    await alert.onDidDismiss();
-  }
-
-  private markForCheck() {
-    if (!this._subscription) return; // Skip if destroyed
-    this.cd.markForCheck();
-  }
-
-  private async showToast(opts: ShowToastOptions) {
-    if (!this._subscription) return; // Skip if component has been destroyed
-    await Toasts.show(this.toastController, this.translate, opts);
-  }
-}

package/src/app/core/install/install-upgrade-card.module.ts

@@ -1,18 +0,0 @@
-import { NgModule } from '@angular/core';
-import { SharedModule } from '../../shared/shared.module';
-import { AppInstallUpgradeCard } from './install-upgrade-card.component';
-import { TranslateModule } from '@ngx-translate/core';
-
-@NgModule({
-  imports: [SharedModule, TranslateModule.forChild()],
-  declarations: [
-    // Components
-    AppInstallUpgradeCard,
-  ],
-  exports: [
-    TranslateModule,
-    // Components
-    AppInstallUpgradeCard,
-  ],
-})
-export class AppInstallUpgradeCardModule {}

package/src/app/core/menu/menu.component.html

@@ -1,219 +0,0 @@
-<ion-split-pane #splitPane [contentId]="contentId" (swiperight)="onSwipeRight($event)">
-  <ion-menu [id]="id" [menuId]="menuId" [contentId]="contentId">
-    <ion-header>
-      <ion-toolbar *ngIf="!loading && isLogin; else notLogin" @fadeInSlowAnimation class="user-toolbar">
-        <ion-grid>
-          <ion-row>
-            <ion-col size="4">
-              <button
-                type="button"
-                mat-flat-button
-                class="user-avatar"
-                [class.primary]="!accountAvatar"
-                [style.background-image]="'url(' + (accountAvatar || './assets/img/person.png') + ')'"
-                [routerLink]="['/account']"
-                routerDirection="root"
-                routerLinkActive="ion-color-primary"
-                (click)="close()"
-                [title]="'MENU.BTN_MY_ACCOUNT' | translate"
-              ></button>
-            </ion-col>
-            <ion-col size="8" class="user-logo">
-              <img
-                *ngIf="logo; else noLogo"
-                [attr.src]="logo"
-                [title]="'APP_NAME' | translate: { appName: appName }"
-                alt="Logo"
-                width="108px"
-              />
-              <ng-template #noLogo>
-                <span style="width: 108px">{{ appName }}</span>
-              </ng-template>
-            </ion-col>
-          </ion-row>
-          <ion-row class="ion-no-padding">
-            <ion-col>
-              <button
-                mat-button
-                type="button"
-                [routerLink]="['/account']"
-                routerDirection="root"
-                routerLinkActive="selected"
-                (click)="close()"
-                [title]="'MENU.BTN_MY_ACCOUNT' | translate"
-              >
-                <ion-label class="ion-text-wrap ion-text-start">
-                  <h3 class="no-margin username">
-                    <b>{{ accountName }}</b>
-                  </h3>
-                  <h4>{{ accountEmail }}</h4>
-                </ion-label>
-              </button>
-            </ion-col>
-
-            <!-- Insertion headerBottomRight -->
-            <ion-col size="auto">
-              <ng-container *ngTemplateOutlet="headerBottomRight"></ng-container>
-            </ion-col>
-          </ion-row>
-        </ion-grid>
-      </ion-toolbar>
-
-      <!-- User not logged -->
-      <ng-template #notLogin>
-        <mat-toolbar
-          class="ion-padding"
-          *ngIf="!loading"
-          style="height: unset; display: block; margin: auto; text-align: center"
-        >
-          <img
-            *ngIf="logo"
-            [attr.src]="logo"
-            [title]="'APP_NAME' | translate: { appName: appName }"
-            width="150px;"
-            alt="logo"
-          />
-          <span *ngIf="!logo" style="width: 150px">{{ appName }}</span>
-        </mat-toolbar>
-      </ng-template>
-    </ion-header>
-
-    <ion-content [class.has-user-header]="isLogin">
-      <!-- will close the menu, after a click, in mobile -->
-      <ion-menu-toggle auto-hide="false">
-        <ion-list lines="none" *ngIf="!loading">
-          <ng-container *rxFor="let item of menuService.dataSubject; strategy: rxStrategy; trackBy: trackByFn">
-            <ng-container *ngTemplateOutlet="menuItem; context: { $implicit: item, level: 0 }"></ng-container>
-          </ng-container>
-        </ion-list>
-      </ion-menu-toggle>
-    </ion-content>
-
-    <ion-footer class="hidden-xs hidden-sm">
-      <ion-toolbar>
-        <ion-buttons slot="start">
-          <ion-button mat-icon-button color="accent" (click)="menuService.openAboutModal()">
-            <mat-icon slot="icon-only">help_outline</mat-icon>
-          </ion-button>
-        </ion-buttons>
-
-        <ion-title (click)="menuService.openAboutModal()" color="medium">
-          {{ 'MENU.FOOTER_VERSION_ABOUT' | translate: { version: appVersion } }}
-        </ion-title>
-
-        <ion-buttons slot="end">
-          <button
-            mat-icon-button
-            color="accent"
-            (click)="toggleSplitPaneShow($event)"
-            class="hidden-xs hidden-sm hidden-md"
-            [title]="(splitPane.when ? 'COMMON.BTN_HIDE_MENU' : 'COMMON.BTN_SHOW_MENU') | translate"
-          >
-            <mat-icon>
-              <span>{{ splitPane.when ? '&#xab;' : '&#xbb;' }}</span>
-            </mat-icon>
-          </button>
-        </ion-buttons>
-      </ion-toolbar>
-    </ion-footer>
-  </ion-menu>
-
-  <ng-content></ng-content>
-</ion-split-pane>
-
-<ng-template #headerBottomRight>
-  <ng-content select="[headerBottomRight]"></ng-content>
-</ng-template>
-
-<ng-template #menuItem let-item let-level="level">
-  @if (item.divider) {
-    <!-- divider -->
-    <ion-item-divider class="{{ item.cssClass }} {{ item.color }}" @fadeInSlowAnimation>
-      <ion-icon slot="start" *ngIf="item.icon" [name]="item.icon"></ion-icon>
-      <mat-icon slot="start" *ngIf="item.matIcon">{{ item.matIcon }}</mat-icon>
-      <ion-label *ngIf="item.cssClass !== 'flex-spacer'">
-        <span *rxIf="item.$title; let title; else: skeletonText" [innerHTML]="title | translate"></span>
-      </ion-label>
-    </ion-item-divider>
-  } @else if (item.path && !item.action) {
-    <!-- tappable link -->
-    <ion-item
-      @fadeInSlowAnimation
-      class="{{ item.cssClass }} {{ item.color }}"
-      [class.menu-item-sub]="level !== 0"
-      tappable
-      [routerLink]="item.path"
-      [queryParams]="item.pathParams"
-      routerDirection="root"
-      routerLinkActive="selected"
-      [routerLinkActiveOptions]="{
-        paths: item.path === '/' || level !== 0 ? 'exact' : 'subset',
-        queryParams: item.pathParams?.tab || level === 0 ? 'subset' : 'exact',
-        matrixParams: 'exact',
-        fragment: 'ignored',
-      }"
-    >
-      @if (item.icon) {
-        <ion-icon slot="start" [name]="item.icon"></ion-icon>
-      } @else if (item.matIcon) {
-        <mat-icon slot="start">{{ item.matIcon }}</mat-icon>
-      }
-      <ion-label *rxLet="item.$title; let title">
-        <span *ngIf="title; else skeletonText" [innerHTML]="title | translate"></span>
-        <!--<span *ngIf="_debug"> {{item.id}}</span>-->
-      </ion-label>
-
-      <!-- pin button -->
-      <ng-container *ngTemplateOutlet="pinButton; context: { $implicit: item, level: level }"></ng-container>
-    </ion-item>
-  } @else if (item.action) {
-    <!-- action -->
-    <ion-item
-      @fadeInSlowAnimation
-      class="{{ item.cssClass }} {{ item.color }} text-1x"
-      [class.menu-item-sub]="level !== 0"
-      tappable
-      (click)="executeAction($event, item)"
-    >
-      <ion-icon slot="start" *ngIf="item.icon" [name]="item.icon"></ion-icon>
-      <mat-icon slot="start" *ngIf="item.matIcon">{{ item.matIcon }}</mat-icon>
-      <ion-label>
-        <span *rxIf="item.$title; let title; else: skeletonText" [innerHTML]="title | translate"></span>
-        <!--<span *ngIf="_debug"> {{item.id}}</span>-->
-      </ion-label>
-
-      <!-- pin button -->
-      <ng-container *ngTemplateOutlet="pinButton; context: { $implicit: item, level: level }"></ng-container>
-    </ion-item>
-  }
-
-  <!-- children -->
-  @if (item.$children) {
-    <div class="sub-menu-container">
-      <ng-container *rxFor="let child of item.$children; strategy: rxStrategy; trackBy: trackByFn">
-        <ng-container *ngTemplateOutlet="menuItem; context: { $implicit: child, level: level + 1 }"></ng-container>
-      </ng-container>
-    </div>
-  }
-</ng-template>
-
-<ng-template #pinButton let-item let-level="level">
-  <!-- pin button -->
-  @if (level && item.pinnable) {
-    <ion-button
-      slot="end"
-      shape="round"
-      fill="clear"
-      size="small"
-      [class.visible-hover]="!item.pinned"
-      (click)="togglePinned($event, item)"
-    >
-      <!--<mat-icon slot="icon-only" [color]="item.pinned ? 'primary' : undefined">push_pin</mat-icon>-->
-      <ion-icon slot="icon-only" [name]="item.pinned ? 'pin' : 'pin-outline'"></ion-icon>
-    </ion-button>
-  }
-</ng-template>
-
-<ng-template #skeletonText let-width let-animated>
-  <ion-skeleton-text [animated]="animated" [style.width.%]="width || 60"></ion-skeleton-text>
-</ng-template>