@sumaris-net/ngx-components 18.11.0 → 18.12.0

package/src/app/core/home/home.scss

@@ -0,0 +1,279 @@
+@import 'ionic.globals';
+
+:host {
+  --ion-card-background-color: rgba(var(--ion-background-color-rgb), 0.7);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+  white-space: normal;
+}
+
+.center {
+  text-align: center;
+  display: inline-block;
+}
+
+ion-content {
+  --background: transparent;
+  background-size: cover;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-color: var(--ion-background-color);
+  display: inline-block;
+  padding: 15px;
+
+  .loading-page {
+    display: block;
+    height: 100%;
+    width: 100%;
+    position: absolute;
+    background-color: transparent;
+    z-index: 5;
+    transition: background 0.5s linear;
+    -webkit-transition: background 1.5s linear;
+  }
+
+  .loading-page.hidden {
+    background-color: rgba(var(--ion-color-primary), 0);
+  }
+
+  ion-card {
+    z-index: 9;
+    ion-card-header {
+      display: block;
+
+      ion-card-subtitle,
+      ion-card-title {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+
+  ion-card.main {
+    min-width: 240px;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  ion-card.welcome {
+    background-color: var(--ion-card-background-color);
+
+    button {
+      margin-top: 16px;
+    }
+
+    img {
+      @extend .center;
+      max-width: 250px;
+    }
+  }
+
+  .history-container {
+    margin-left: auto;
+    margin-right: auto;
+
+    ion-card {
+      display: inline-block;
+      box-sizing: border-box;
+      z-index: 8;
+      min-width: 240px;
+      max-width: 400px;
+      width: 100%;
+      margin-left: auto;
+      margin-right: auto;
+      background-color: var(--ion-card-background-color);
+
+      ion-card-header {
+        ion-card-subtitle {
+          height: 40px;
+
+          button[float-start] {
+            --mdc-icon-button-state-layer-size: 40px;
+            padding: 8px;
+            z-index: 99;
+            margin: 0;
+          }
+          ion-label {
+            line-height: 40px;
+          }
+          ion-label[float-end] {
+            padding-right: 16px;
+            font-weight: normal;
+          }
+        }
+
+        ion-card-title {
+          ion-item {
+            width: 100%;
+            --ion-item-background: $transparent;
+            --ion-item-icon-color: var(--ion-color-primary);
+            --ion-item-text-color: var(--ion-color-primary);
+
+            ion-icon[slot='start'],
+            mat-icon[slot='start'] {
+              margin-right: unset;
+              margin-inline-end: 16px !important;
+              color: var(--ion-item-icon-color) !important;
+              fill: currentColor;
+              stroke: currentColor;
+            }
+
+            ion-text,
+            ion-label {
+              color: var(--ion-item-text-color) !important;
+              // Maximize the font size
+              -webkit-text-size-adjust: 100%;
+              -moz-text-size-adjust: 100%;
+              -ms-text-size-adjust: 100%;
+              text-size-adjust: 100%;
+            }
+          }
+        }
+      }
+
+      ion-card-content {
+        ion-list {
+          --ion-item-background: var(--ion-color-transparent);
+          ion-item {
+            --ion-item-icon-color: var(--ion-color-dark);
+            --ion-item-text-color: var(--ion-color-dark);
+
+            ion-icon[slot='start'],
+            mat-icon[slot='start'] {
+              color: var(--ion-item-icon-color) !important;
+              fill: currentColor;
+              stroke: currentColor;
+
+              // Reduce space after icon
+              margin-right: unset;
+              margin-inline-end: 16px !important;
+            }
+
+            ion-text,
+            ion-label {
+              color: var(--ion-item-text-color) !important;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .bottom-banner {
+    background-color: var(--ion-card-background-color);
+    min-width: 240px;
+    z-index: 0;
+
+    &.floating {
+      position: absolute;
+      left: 16px;
+      right: 16px;
+      bottom: 16px;
+    }
+
+    img.logo {
+      max-height: 50px;
+      margin-left: 8px;
+    }
+  }
+
+  ion-text {
+    text-align: center;
+  }
+}
+
+// Extra small device: Phones (<767px)
+@media screen and (max-width: $screen-xs-max) {
+  ion-content {
+    ion-card {
+      min-width: 160px;
+      width: calc(100% - 20px);
+      max-width: 100%;
+      margin-left: 10px;
+      margin-right: 10px;
+
+      h1 {
+        margin-top: 0;
+        font-size: 20px;
+      }
+
+      ion-card-content ion-button {
+        margin-top: 8px;
+      }
+    }
+
+    .bottom-banner {
+
+      &.floating {
+        display: block;
+        position: unset;
+      }
+
+      img.logo {
+        max-height: 30px;
+      }
+    }
+  }
+}
+
+// Small devices: Tablets (≥768px)
+@media screen and (max-width: $screen-sm-max) and (min-width: $screen-sm) {
+  ion-content {
+    // Avoid bottom-banner to override main-content
+    min-height: 555px;
+
+    .bottom-banner {
+      img.logo {
+        max-height: 40px;
+      }
+    }
+  }
+}
+
+// Desktop or wide screen
+@media screen and (min-width: $screen-md) {
+  ion-content {
+    // Avoid bottom-banner to override main-content
+    min-height: calc(100% - 100px);
+  }
+}
+
+.content-credits {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  ion-text {
+    padding-inline-start: 4px;
+    padding-inline-end: 4px;
+    font-size: 0.8rem;
+    background-color: var(--ion-background-color, white);
+    color: var(--ion-text-color);
+    opacity: 0.65;
+  }
+}
+
+@media screen and (min-width: $screen-lg) {
+  .left-border {
+    border-left: 1px solid var(--ion-color-medium);
+  }
+}
+
+.bottom-banner {
+  ion-list-header {
+    min-height: 30px;
+  }
+
+  ion-item {
+    --min-height: 28px;
+    ion-label {
+      margin-top: 3px !important;
+      margin-bottom: 3px !important;
+    }
+  }
+}

package/src/app/core/home/home.ts

@@ -0,0 +1,422 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Inject, InjectionToken, OnDestroy, Optional } from '@angular/core';
+import { ModalController, ToastController } from '@ionic/angular';
+import { RegisterModal } from '../register/register.modal';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { AccountService } from '../services/account.service';
+import { Account, accountToString } from '../services/model/account.model';
+import { Configuration } from '../services/model/config.model';
+import { Department } from '../services/model/department.model';
+import { APP_LOCALES, LocaleConfig, LocalSettings } from '../services/model/settings.model';
+import { TranslateService } from '@ngx-translate/core';
+import { ConfigService } from '../services/config.service';
+import { PlatformService } from '../services/platform.service';
+import { LocalSettingsService } from '../services/local-settings.service';
+import { debounceTime, distinctUntilChanged, map, startWith } from 'rxjs/operators';
+import { AppAuthModal } from '../auth/auth.modal';
+import { NetworkService } from '../services/network.service';
+import { IMenuItem, MenuItems } from '../menu/menu.model';
+import { ShowToastOptions, Toasts } from '../../shared/toast/toasts';
+import { fadeInAnimation, slideUpDownAnimation } from '../../shared/material/material.animations';
+import { isNilOrBlank, isNotEmptyArray, isNotNil, isNotNilOrBlank } from '../../shared/functions';
+import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
+import { HistoryPageReference } from '../services/model/history.model';
+import { CORE_CONFIG_OPTIONS } from '../services/config/core.config';
+import { RxState } from '@rx-angular/state';
+import { ImagesUtils } from '../../shared/file/images.utils';
+import { UriUtils } from '../../shared/file/uri.utils';
+import { Peer } from '../services/model/peer.model';
+import { AppMarkdownModal } from '../../shared/markdown/markdown.modal';
+
+/**
+ * @param files
+ * @deprecated use `getRandomImageWithCredit()` instead
+ **/
+export const getRandomImage = ImagesUtils.getRandomImage;
+export const getRandomImageWithCredit = ImagesUtils.getRandomImageWithCredit;
+
+export const APP_HOME_BUTTONS = new InjectionToken<IMenuItem[]>('homeButton');
+export interface HomePageState {
+  loading: boolean;
+  showSpinner: boolean;
+  showPartnerBanner: boolean;
+  showLegalInformation: boolean;
+  showInstallLinks: boolean;
+  pageHistory: HistoryPageReference[];
+  darkMode: boolean;
+}
+
+@Component({
+  selector: 'app-page-home',
+  templateUrl: 'home.html',
+  styleUrls: ['./home.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [fadeInAnimation, slideUpDownAnimation],
+})
+export class HomePage extends RxState<HomePageState> implements OnDestroy {
+  private readonly _debug: boolean;
+  private _subscription = new Subscription();
+  private _config: Configuration;
+
+  protected darkMode$ = this.select('darkMode');
+  protected pageHistory$ = this.select('pageHistory');
+  protected loading$ = this.select('loading');
+  protected readonly mobile: boolean;
+
+  waitingNetwork = false;
+  accountName = '';
+  isLogin: boolean;
+  $partners = new BehaviorSubject<Department[]>(null);
+  logo: string;
+  description: string;
+  appName: string;
+  isWeb: boolean;
+  canRegister: boolean;
+  contentStyle: any;
+  contentCredits: string;
+  legalInformation: IMenuItem[];
+  offline: boolean;
+  $filteredButtons = new BehaviorSubject<IMenuItem[]>(undefined);
+  readonly showAccountButton: boolean;
+
+  set pageHistory(value: HistoryPageReference[]) {
+    this.set('pageHistory', () => value);
+  }
+
+  get pageHistory(): HistoryPageReference[] {
+    return this.get('pageHistory');
+  }
+
+  set loading(value: boolean) {
+    this.set('loading', () => value);
+  }
+
+  get loading(): boolean {
+    return this.get('loading');
+  }
+
+  set showSpinner(value: boolean) {
+    this.set('showSpinner', () => value);
+  }
+  get showSpinner(): boolean {
+    return this.get('showSpinner');
+  }
+
+  set showPartnerBanner(value: boolean) {
+    this.set('showPartnerBanner', () => value);
+  }
+  get showPartnerBanner(): boolean {
+    return this.get('showPartnerBanner');
+  }
+
+  set showLegalInformation(value: boolean) {
+    this.set('showLegalInformation', () => value);
+  }
+  get showLegalInformation(): boolean {
+    return this.get('showLegalInformation');
+  }
+
+  set showInstallLinks(value: boolean) {
+    this.set('showInstallLinks', () => value);
+  }
+  get showInstallLinks(): boolean {
+    return this.get('showInstallLinks');
+  }
+
+  set darkMode(value: boolean) {
+    this.set('darkMode', () => value);
+  }
+  get darkMode(): boolean {
+    return this.get('darkMode');
+  }
+
+  get currentLocaleCode(): string {
+    return this.loading ? '' : (this.translate.currentLang || this.translate.defaultLang || this.environment.defaultLocale)?.substring(0, 2);
+  }
+
+  get partnerBannerSize(): number {
+    return this.showLegalInformation ? 9 : 12;
+  }
+
+  constructor(
+    private accountService: AccountService,
+    private modalCtrl: ModalController,
+    private translate: TranslateService,
+    private toastController: ToastController,
+    private configService: ConfigService,
+    private platform: PlatformService,
+    private cd: ChangeDetectorRef,
+    public network: NetworkService,
+    public settings: LocalSettingsService,
+    @Inject(ENVIRONMENT) protected environment: Environment,
+    @Inject(APP_LOCALES) public locales: LocaleConfig[],
+    @Optional() @Inject(APP_HOME_BUTTONS) public buttons: IMenuItem[]
+  ) {
+    super();
+    this.set(<Partial<HomePageState>>{
+      loading: true,
+      showPartnerBanner: false,
+      showSpinner: !this.platform.started,
+      darkMode: this.settings.isDarkMode,
+    });
+
+    this.mobile = this.platform.is('mobile');
+    this.platform.ready().then(() => this.start());
+    this.showAccountButton = environment.account?.showAccountButton ?? true;
+
+    this.connect('darkMode', this.settings.darkMode$);
+
+    // DEV
+    this._debug = !environment.production;
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  async login() {
+    const modal = await this.modalCtrl.create({
+      component: AppAuthModal,
+    });
+    return modal.present();
+  }
+
+  async register() {
+    const modal = await this.modalCtrl.create({
+      component: RegisterModal,
+      backdropDismiss: false,
+    });
+    return modal.present();
+  }
+
+  async logout(event: any) {
+    await this.accountService.logout();
+
+    // If was offline, try to reconnect (because can be a forced offline mode)
+    if (this.offline) {
+      await this.tryOnline();
+    }
+  }
+
+  changeLanguage(locale: string) {
+    this.settings.apply({ locale }).then(() => {
+      this.markForCheck();
+    });
+  }
+
+  getPagePath(index: number, page: HistoryPageReference): string {
+    return page?.path;
+  }
+
+  tryOnline() {
+    this.waitingNetwork = true;
+    this.markForCheck();
+
+    this.network
+      .tryOnline({
+        showLoadingToast: false,
+        showOnlineToast: true,
+        showOfflineToast: false,
+      })
+      .then(() => {
+        this.waitingNetwork = false;
+        this.markForCheck();
+      });
+  }
+
+  /* -- protected method  -- */
+
+  protected async start() {
+    await this.accountService.ready();
+
+    this.isLogin = this.accountService.isLogin();
+    if (this.isLogin) {
+      this.onLogin(this.accountService.account);
+    }
+
+    this.offline = this.network.offline;
+
+    // Listen login/logout events
+    this._subscription.add(this.accountService.onLogin.subscribe((account) => this.onLogin(account)));
+    this._subscription.add(this.accountService.onLogout.subscribe(() => this.onLogout()));
+
+    // Listen pod config
+    this._subscription.add(this.configService.config.subscribe((config) => this.onConfigLoaded(config)));
+
+    // Listen settings changes
+    this._subscription.add(
+      this.settings.onChange
+        .pipe(
+          // Add a delay, to avoid to apply changes to often
+          debounceTime(250),
+          // Start with current settings
+          startWith(await this.settings.ready())
+        )
+        .subscribe((res) => this.onSettingsChanged(res))
+    );
+
+    // Listen network changes
+    this._subscription.add(
+      this.network.onNetworkStatusChanges
+        .pipe(
+          //debounceTime(450),
+          //tap(() => this.waitingNetwork = false),
+          map((connectionType) => connectionType === 'none'),
+          distinctUntilChanged()
+        )
+        .subscribe((offline) => {
+          this.offline = offline;
+          this.markForCheck();
+        })
+    );
+  }
+
+  protected async showToast(opts: ShowToastOptions) {
+    await Toasts.show(this.toastController, this.translate, opts);
+  }
+
+  protected onConfigLoaded(config: Configuration) {
+    console.debug('[home] Applying configuration', config);
+    this._config = config;
+
+    this.appName = this._config.label || this.environment.defaultAppName || 'SUMARiS';
+    this.logo = this._config.largeLogo || this._config.smallLogo || undefined;
+    this.description = config.name;
+    this.isWeb = this.platform.isWeb();
+    this.canRegister = this._config.getPropertyAsBoolean(CORE_CONFIG_OPTIONS.REGISTRATION_ENABLE);
+    this.legalInformation = [
+      {
+        title: 'HOME.PRIVACY_POLICY',
+        path: this._config.getProperty(CORE_CONFIG_OPTIONS.PRIVACY_POLICY_URL) ?? (this.environment.privacyPolicyUrl as string),
+      },
+      {
+        title: 'HOME.TERMS_OF_USE',
+        path: this._config.getProperty(CORE_CONFIG_OPTIONS.TERMS_OF_USE_URL) ?? (this.environment.termsOfUseUrl as string),
+      },
+    ].filter((item) => isNotNilOrBlank(item.path));
+    this.showLegalInformation = isNotEmptyArray(this.legalInformation);
+
+    const partners = (this._config.partners || []).filter((p) => p && p.logo);
+    this.$partners.next(partners);
+    this.showPartnerBanner = partners.length > 0;
+    // TODO load install links
+
+    // If not already set, compute the background image
+    if (!this.contentStyle) {
+      const backgroundImages = (config.backgroundImages || [])
+        // Filter on not nil, because can occur if detected has not exists (see config-service.js)
+        .filter(
+          (img) =>
+            isNotNil(img) &&
+            // If offline, filter on local dataURL image
+            (!this.offline || !img.startsWith('http'))
+        );
+
+      // Background image found: select one randomly
+      if (backgroundImages.length) {
+        const { image, credits } = getRandomImageWithCredit(backgroundImages);
+        this.contentStyle = image ? { 'background-image': `url(${image})` } : {};
+        this.contentCredits = credits || '';
+      }
+
+      // Use background color
+      else {
+        const primaryColor = config.getProperty(CORE_CONFIG_OPTIONS.COLOR_PRIMARY) || 'var(--ion-color-primary)';
+        this.contentStyle = (primaryColor && { 'background-color': primaryColor }) || {};
+      }
+    }
+
+    this.refreshButtons();
+    this.markForCheck();
+
+    // If first load, hide the loading indicator
+    this.loading = false;
+  }
+
+  protected onSettingsChanged(settings: LocalSettings) {
+    if (settings.pageHistory !== this.pageHistory) {
+      console.debug('[home] Page history loaded');
+      this.pageHistory = settings.pageHistory || [];
+    }
+  }
+
+  protected onLogin(account: Account) {
+    if (!account) return; // Skip
+    //console.debug('[home] Logged account: ', account);
+    this.isLogin = true;
+    this.accountName = accountToString(account);
+    this.refreshButtons(account);
+    this.markForCheck();
+  }
+
+  protected onLogout() {
+    this.isLogin = false;
+    this.accountName = '';
+    this.pageHistory = [];
+    this.refreshButtons();
+    this.markForCheck();
+  }
+
+  protected refreshButtons(account?: Account) {
+    if (!this._config) return; // Skip (waiting config to be loaded)
+    if (this._debug) console.debug('[home] Refreshing buttons...');
+
+    account = account || this.accountService.account;
+    const filteredButtons = (this.buttons || [])
+      .filter((item) =>
+        MenuItems.checkIfVisible(item, account, this._config, {
+          isLogin: this.isLogin,
+          debug: this._debug,
+          logPrefix: '[home]',
+        })
+      )
+      .map((item) => {
+        // Replace title using properties
+        if (isNotNilOrBlank(item.titleProperty) && this._config) {
+          const title = this._config.properties[item.titleProperty];
+          if (title) return { ...item, title }; // Create a copy, to keep the original item.title
+        }
+        return item;
+      });
+
+    this.$filteredButtons.next(filteredButtons);
+  }
+
+  async openMarkdownModal(event?: Event, item: IMenuItem = null) {
+    if (isNilOrBlank(item?.path)) return;
+
+    // Resolve relative path
+    let url = item.path;
+    if (this.network.peer && (url.startsWith('./') || url.startsWith('/'))) {
+      url = Peer.path(this.network.peer, url);
+    }
+
+    const pathFilename = UriUtils.getFilename(url);
+    const isMarkdownFile = pathFilename.endsWith('.md');
+
+    // Open as markdown
+    if (isMarkdownFile) {
+      await AppMarkdownModal.show(this.modalCtrl, {
+        title: this.translate.instant(item.title, item.titleArgs),
+        src: url,
+        enableNavigationHistory: false,
+        canPrint: !this.mobile,
+      });
+    } else {
+      // Open as external link
+      await this.platform.open(url);
+    }
+  }
+
+  protected async toggleDarkMode() {
+    const enable = !this.settings.isDarkMode;
+    await this.settings.apply({ darkMode: enable, autoDarkMode: false });
+  }
+
+  protected async removePageHistory(path: string) {
+    await this.settings.removePageHistory(path);
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}

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

@@ -0,0 +1,19 @@
+<ion-icon
+  *ngIf="icon; else matIconTemplate"
+  slot="icon-only"
+  [color]="color"
+  [name]="icon"
+  [style.height.px]="height"
+  [style.width.px]="width"
+></ion-icon>
+<ng-template #matIconTemplate>
+  <mat-icon
+    [svgIcon]="matSvgIcon"
+    [style.color]="'var(--ion-color-' + color + ')'"
+    [style.height.px]="height"
+    [style.width.px]="width"
+    [style.font-size.px]="height || width"
+  >
+    {{ matIcon }}
+  </mat-icon>
+</ng-template>