@sumaris-net/ngx-components 18.12.0 → 18.12.2

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

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

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

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