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

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

@@ -0,0 +1,412 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, Input, OnDestroy, OnInit} from '@angular/core';
+import {AlertController, ModalController, ToastController} from '@ionic/angular';
+import {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} 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';
+
+
+export declare interface InstallAppLink {
+  name: string;
+  url: string;
+  platform?: 'android' | 'ios';
+  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;
+  upgradeVersion: string;
+
+  @Input() isLogin: boolean;
+  @Input() showUpgradeWarning = true;
+  @Input() showOfflineWarning = true;
+  @Input() showInstallButton = false;
+
+  constructor(
+    private modalCtrl: ModalController,
+    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
+  ) {
+
+  }
+
+  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') {
+    switch (platform) {
+      case 'android':
+        return 'Android';
+      case 'ios':
+        return 'iOS';
+      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
+    if (this.platform.isMobileWeb()) {
+      return installLinks;
+    }
+
+    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;
+
+    const upgradeLinks = this.platform.is('mobileweb')
+      // All link if mobile web
+      ? installLinks
+      // Filter on platform, if mobile App
+      : 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[] = [];
+
+    // 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.startsWith('./') || url.startsWith('/'))) {
+        url = Peer.path(peer, url);
+      }
+
+      const minVersion = config.getProperty(CORE_CONFIG_OPTIONS.APP_MIN_VERSION);
+
+      // Compute App name
+      const name: string = isNotNilOrBlank(url) && config.label || this.environment.defaultAppName || 'SUMARiS';
+
+      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 - TODO
+    //{
+    //  (...)
+    //}
+
+    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 job.toPromise();
+      if (location) {
+        console.info('[install-upgrade-card] File downloaded at: ' + location);
+        this.showDownloadCompleteDialog();
+      }
+      return location;
+    }
+    // Failed: display a toast
+    catch (err) {
+      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

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

@@ -0,0 +1,135 @@
+<ion-split-pane #splitPane [contentId]="contentId" (swiperight)="onSwipeRight($event)">
+
+  <ion-menu [id]="id" [menuId]="menuId" [contentId]="contentId">
+    <ion-header>
+
+      <ion-toolbar @fadeInAnimation *ngIf="isLogin; else notLogin" class="ion-toolbar-top">
+        <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" src="{{logo}}" [title]="'APP_NAME'|translate: {appName: appName}" width="108px"/>
+              <span *ngIf="!logo" style="width: 108px;">{{appName}}</span>
+            </ion-col>
+          </ion-row>
+          <ion-row class="ion-no-padding">
+            <ion-col>
+              <button mat-button type="button"
+                      [routerLink]="['/account']"
+                      routerDirection="root"
+                      routerLinkActive="ion-color-primary"
+                      (click)="close()"
+                      [title]="'MENU.BTN_MY_ACCOUNT'|translate">
+                <ion-label color="primary" 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" @fadeInAnimation
+                     style="height: unset; display: block; margin: auto; text-align: center;">
+          <img *ngIf="logo" src="{{logo}}" [title]="'APP_NAME'|translate: {appName: appName}" width="150px;">
+          <span *ngIf="!logo" style="width: 150px">{{appName}}</span>
+        </mat-toolbar>
+      </ng-template>
+    </ion-header>
+
+    <ion-content [class.has-user-header]="isLogin">
+
+      <ion-list lines="none">
+        <ion-menu-toggle auto-hide="false"
+                         [class.flex-spacer]="item.cssClass == 'flex-spacer'"
+                         *ngFor="let item of $items | async">
+
+          <!-- link -->
+          <ion-item *ngIf="!loading && item.path"
+                    @fadeInAnimation
+                    class="{{item.cssClass}} {{item.color}} text-1x"
+                    tappable
+                    [routerLink]="item.path"
+                    routerDirection="root"
+                    routerLinkActive="selected"
+                    [routerLinkActiveOptions]="{exact: (item.path === '/')}">
+            <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 translate>{{item.title}}</ion-label>
+          </ion-item>
+
+          <!-- action -->
+          <ion-item *ngIf="!loading && item.action"
+                    @fadeInAnimation
+                    class="{{item.cssClass}} {{item.color}} text-1x"
+                    tappable
+                    (click)="doAction(item.action, $event)">
+            <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 translate>{{item.title}}</ion-label>
+          </ion-item>
+
+          <!-- divider -->
+          <ion-item-divider @fadeInAnimation
+                            class="{{item.cssClass}} {{item.color}}"
+                            *ngIf="!loading && !item.path && !item.action">
+            <ion-label translate>{{item.title}}</ion-label>
+          </ion-item-divider>
+
+        </ion-menu-toggle>
+      </ion-list>
+    </ion-content>
+
+    <ion-footer class="hidden-xs hidden-sm">
+      <ion-toolbar>
+
+        <ion-buttons slot="start">
+          <ion-button mat-icon-button color="accent" (click)="openAboutModal($event)">
+            <mat-icon slot="icon-only">help_outline</mat-icon>
+          </ion-button>
+        </ion-buttons>
+
+        <ion-title (click)="openAboutModal($event)" 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>