@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/shared/markdown/markdown.component.ts

@@ -0,0 +1,350 @@
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Inject,
+  inject,
+  Input,
+  OnDestroy,
+  Optional,
+  Output,
+} from '@angular/core';
+import { LocalSettingsService } from '../../core/services/local-settings.service';
+import { TranslateService } from '@ngx-translate/core';
+import { NetworkService } from '../../core/services/network.service';
+import { HttpErrorResponse } from '@angular/common/http';
+import { slideDownAnimation } from '../material/material.animations';
+import { MarkdownService } from './markdown.service';
+import { Subscription } from 'rxjs';
+import { UrlUtils } from '../file/url.utils';
+import { isNotEmptyArray, isNotNilOrBlank } from '../functions';
+import { NavController, ToastController } from '@ionic/angular';
+import { MarkdownUtils } from './markdown.utils';
+import { ActivatedRoute } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { PrintService } from '../print/print.service';
+
+export interface AppMarkdownOptions {
+  data?: string;
+  src?: string;
+  showError?: boolean;
+}
+
+@Component({
+  selector: 'app-markdown-content',
+  templateUrl: './markdown.component.html',
+  styleUrls: ['./markdown.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  animations: [slideDownAnimation],
+})
+export class AppMarkdownContent implements AppMarkdownOptions, OnDestroy {
+  private _printId: number;
+  private _clickSubscription: Subscription;
+
+  protected navController = inject(NavController);
+  protected settings = inject(LocalSettingsService);
+  protected translate = inject(TranslateService);
+  protected network = inject(NetworkService);
+  protected markdownService = inject(MarkdownService);
+  protected toastController = inject(ToastController);
+  protected printService = inject(PrintService);
+
+  protected loading = true;
+  protected error: string = undefined;
+
+  protected baseUrl: string;
+
+  protected _data: string;
+  protected _src: string;
+  protected _fallbackSrc: string;
+  protected _anchor: string;
+
+  protected _navHistory: { src?: string; fallbackSrc?: string; data?: string; anchor?: string }[] = [];
+
+  @Input() set data(value: string) {
+    this.setData(value);
+  }
+  get data() {
+    return this._data;
+  }
+
+  @Input() set src(value: string) {
+    this.setSrc(value);
+  }
+  get src() {
+    return this._src;
+  }
+
+  @Input() set anchor(value: string) {
+    this._anchor = value;
+  }
+  get anchor() {
+    return this._anchor;
+  }
+
+  @Input({ transform: booleanAttribute }) debug: boolean;
+  @Input({ transform: booleanAttribute }) showError = true;
+  @Input({ transform: booleanAttribute }) animated = true;
+  @Input({ transform: booleanAttribute }) enableNavigationHistory = true;
+  @Input({ transform: booleanAttribute }) updateRouteLocation = false;
+
+  @Output() markdownUrlChange = new EventEmitter<string>();
+
+  constructor(
+    protected cd: ChangeDetectorRef,
+    protected element: ElementRef<HTMLElement>,
+    @Inject(DOCUMENT) private _document: Document,
+    @Optional() protected route: ActivatedRoute // Modal editor give 'null'
+  ) {
+    this._printId = this.printService.nextJobId();
+    this.markAsLoading({ emitEvent: false });
+
+    // TODO: for DEV only
+    //this.debug = !environment.production;
+  }
+
+  ngOnDestroy() {
+    this._clickSubscription?.unsubscribe();
+    this.markdownService.resetBaseUrl();
+  }
+
+  goBack(event?: Event) {
+    console.debug('[markdown] Going back');
+    if (isNotEmptyArray(this._navHistory)) {
+      const { src, fallbackSrc, data, anchor } = this._navHistory.pop();
+      if (src) this.setSrc(src, { fallbackSrc, anchor });
+      else this.setData(data);
+    } else {
+      this.navController.back();
+    }
+  }
+
+  get canGoBack() {
+    return isNotEmptyArray(this._navHistory);
+  }
+
+  async print() {
+    if (this.loading) return; // skip
+    console.debug('[markdown] Print...');
+
+    if (!this.element) {
+      console.error('Element to print not found. Please check the HTML template.');
+      return;
+    }
+
+    this.markAsLoading({ emitEvent: false });
+
+    try {
+      // Print
+      await this.printService.printElement(this.element.nativeElement, {
+        id: this._printId,
+
+        // Print as portrait, by default
+        style: `@media print {
+          @page {
+            size: portrait;
+            margin: 1.1cm;
+          }
+          markdown hr {
+            page-break-before: always;
+            border: none;
+            margin: 0;
+            padding: 0;
+          }
+          markdown img {
+            max-width: 100%;
+            height: auto;
+            page-break-inside: avoid;
+          }
+        }`,
+      });
+    } finally {
+      this.markAsLoaded({ emitEvent: false });
+    }
+  }
+
+  markAsLoaded(opts?: { emitEvent?: boolean }) {
+    this.loading = false;
+
+    if (opts?.emitEvent !== false) {
+      this.printService.markAsLoaded(this._printId);
+      this.cd.markForCheck();
+    }
+  }
+
+  markAsLoading(opts?: { emitEvent?: boolean }) {
+    this.loading = true;
+
+    if (opts?.emitEvent !== false) {
+      this.printService.markAsLoading(this._printId);
+
+      this.cd.markForCheck();
+    }
+  }
+
+  setError(error: string | Error) {
+    this.error = error?.['message'] || error || null;
+    this.cd.markForCheck();
+  }
+
+  resetError() {
+    this.error = null;
+    this.cd.markForCheck();
+  }
+
+  /* -- protected functions -- */
+
+  protected setData(value: string, opts?: { anchor?: string; addToNavigationHistory?: boolean }) {
+    const anchor = opts?.anchor || null;
+
+    if (this._data !== value || this._anchor !== anchor) {
+      if (value) {
+        // Save current state to navigation history
+        if (opts?.addToNavigationHistory) {
+          this._navHistory.push({
+            src: this._src,
+            fallbackSrc: this._fallbackSrc,
+            data: this._data,
+            anchor: this._anchor,
+          });
+        }
+
+        this._data = value;
+        this._anchor = anchor;
+
+        // Clear src
+        this._src = null;
+        this._fallbackSrc = null;
+
+        this.resetError();
+        this.markAsLoaded();
+      } else {
+        this._data = null;
+      }
+      this.cd.markForCheck();
+    }
+  }
+
+  protected setSrc(src: string, opts?: { fallbackSrc?: string; anchor?: string; addToNavigationHistory?: boolean }) {
+    // Clean URL (remove fragment and query)
+    const anchor = opts?.anchor || UrlUtils.getFragment(src);
+    src = UrlUtils.stripFragmentAndQuery(src);
+    src = MarkdownUtils.isGitlabUrl(src) ? MarkdownUtils.fixGitlabUrlToRaw(src) : src;
+
+    let fallbackSrc = opts?.fallbackSrc ? UrlUtils.stripFragmentAndQuery(opts.fallbackSrc) : null;
+    fallbackSrc = MarkdownUtils.isGitlabUrl(fallbackSrc) ? MarkdownUtils.fixGitlabUrlToRaw(fallbackSrc) : fallbackSrc;
+
+    if (this._src !== src || this._fallbackSrc !== fallbackSrc || this._anchor !== anchor) {
+      const url = src ? src + (isNotNilOrBlank(anchor) ? `#${anchor}` : '') : null;
+      if (url) console.debug(`[markdown] Loading ${url}...`);
+
+      // Give baseUrl to the service, to be able to resolve relative path - e.g. images)
+      if (src && UrlUtils.isExternalUrl(src)) {
+        this.baseUrl = UrlUtils.getParent(src);
+        this.markdownService.setBaseUrl(this.baseUrl);
+      }
+
+      if (src) {
+        // Save current state to navigation history
+        if (opts?.addToNavigationHistory) {
+          this._navHistory.push({
+            src: this._src,
+            fallbackSrc: this._fallbackSrc,
+            data: this._data,
+            anchor: this._anchor,
+          });
+        }
+
+        this._src = src;
+        this._fallbackSrc = fallbackSrc;
+        this._anchor = anchor;
+
+        // Clear data
+        this._data = null;
+
+        // Reset error
+        this.resetError();
+        this.markAsLoading();
+      } else {
+        this._src = null;
+        this._fallbackSrc = null;
+        this._anchor = null;
+        this.cd.markForCheck();
+      }
+    }
+  }
+
+  protected onReady() {
+    const url = this._src ? this._src + (isNotNilOrBlank(this._anchor) ? `#${this._anchor}` : '') : null;
+
+    if (url) {
+      console.debug(`[markdown] Ready - ${url}`);
+      // Clear fallback (no more need)
+      if (this._fallbackSrc) this._fallbackSrc = null;
+
+      // Emit change
+      this.markdownUrlChange.emit(url);
+    }
+
+    this.startListenClickEvents();
+
+    this.markAsLoaded();
+
+    // Scroll to anchor
+    if (isNotNilOrBlank(this._anchor)) {
+      this.markdownService.scrollToAnchor(this.element.nativeElement, this._anchor);
+    }
+  }
+
+  protected onLoadError(error?: string | Error) {
+    // Translate error
+    if (error instanceof HttpErrorResponse && this.network.offline) {
+      console.error(`[markdown] Error loading markdown URL {${this.src}} (offline: true): `, error);
+      this.setError('NETWORK.INFO.OFFLINE');
+    } else {
+      // Retry with fallback URL
+      if (this._fallbackSrc) {
+        console.debug(`[markdown] Error loading markdown URL {${this.src}} - fallback to URL ${this._fallbackSrc}`);
+        this.setSrc(this._fallbackSrc, { anchor: this._anchor });
+        return;
+      }
+
+      console.error(`[markdown] Error loading markdown URL {${this.src}} (offline: true): `, error);
+      this.setError('ERROR.LOAD_DATA_ERROR');
+    }
+
+    this.markAsLoaded();
+  }
+
+  protected startListenClickEvents() {
+    this._clickSubscription?.unsubscribe();
+    this._clickSubscription = new Subscription();
+
+    // Listen for click link to Markdown URL
+    this._clickSubscription.add(
+      this.markdownService.onClickMarkdownUrl.subscribe((href) => {
+        console.debug('[markdown] Received click event, on a markdown URL', href);
+
+        let fragment = UrlUtils.getFragment(href);
+        let url = UrlUtils.stripFragmentAndQuery(href);
+        let fallbackUrl = null;
+
+        // Resolve relative path
+        if (UrlUtils.isRelativeUrl(href) && this.baseUrl) {
+          // Get absolute url
+          url = MarkdownUtils.resolveRelativeUrl(this.baseUrl, href);
+
+          // Create a fallback url, in relative path was wrong
+          fallbackUrl = MarkdownUtils.resolveRelativeUrl(this.baseUrl, href, { absoluteByDefault: true });
+          fallbackUrl = url === fallbackUrl ? null : fallbackUrl;
+        }
+
+        // Opening the new URL
+        this.setSrc(url, { fallbackSrc: fallbackUrl, anchor: fragment, addToNavigationHistory: this.enableNavigationHistory });
+      })
+    );
+  }
+}

package/src/app/shared/markdown/markdown.directive.ts

@@ -0,0 +1,28 @@
+import { Directive, ElementRef, HostListener, OnDestroy } from '@angular/core';
+import { MarkdownService } from './markdown.service';
+import { Subscription } from 'rxjs';
+
+@Directive({
+  selector: 'markdown,[markdown]',
+})
+export class MarkdownDirective implements OnDestroy {
+  private _subscription = new Subscription();
+
+  constructor(
+    private service: MarkdownService,
+    private element: ElementRef<HTMLElement>
+  ) {
+    // DEBUG
+    //console.debug('[markdown] Creating markdown directive');
+  }
+
+  @HostListener('ready')
+  public processAnchors() {
+    // Listening click events
+    this._subscription.add(this.service.listenClickEvents(this.element.nativeElement));
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+}

package/src/app/shared/markdown/markdown.modal.html

@@ -0,0 +1,42 @@
+<app-modal-toolbar color="light" [title]="title | translate">
+  @if (content.canGoBack) {
+    <ion-button slot="start" class="back-button" (click)="goBack($event, content)" routerDirection="back">
+      <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+    </ion-button>
+  }
+
+  <ion-buttons slot="end">
+    @if (canPrint) {
+      <ion-button slot="end" (click)="content.print()">
+        <ion-icon slot="icon-only" name="print"></ion-icon>
+      </ion-button>
+    }
+
+    <ion-button (click)="close()" visible-xs visible-sm visible-mobile>
+      {{ 'COMMON.BTN_CLOSE' | translate }}
+    </ion-button>
+  </ion-buttons>
+</app-modal-toolbar>
+
+<ion-content class="ion-padding">
+  <app-markdown-content
+    #content
+    [src]="src"
+    [data]="data"
+    [showError]="showError"
+    [debug]="debug"
+    [enableNavigationHistory]="enableNavigationHistory"
+    [updateRouteLocation]="false"
+  ></app-markdown-content>
+</ion-content>
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+  <ion-toolbar>
+    <ion-row class="ion-no-padding">
+      <ion-col></ion-col>
+      <ion-col size="auto">
+        <ion-button fill="solid" color="tertiary" (click)="close()">{{ 'COMMON.BTN_CLOSE' | translate }}</ion-button>
+      </ion-col>
+    </ion-row>
+  </ion-toolbar>
+</ion-footer>

package/src/app/shared/markdown/markdown.modal.ts

@@ -0,0 +1,91 @@
+import { booleanAttribute, ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, ViewChild } from '@angular/core';
+import { ModalController } from '@ionic/angular';
+import { PlatformService } from '../../core/services/platform.service';
+import { LocalSettingsService } from '../../core/services/local-settings.service';
+import { TranslateService } from '@ngx-translate/core';
+import { NetworkService } from '../../core/services/network.service';
+import { AppMarkdownContent } from './markdown.component';
+
+export interface AppMarkdownModalOptions {
+  title?: string;
+  data?: string;
+  src?: string;
+  showError?: boolean;
+  cssClass?: string;
+  canPrint?: boolean;
+  enableNavigationHistory?: boolean;
+
+  debug?: boolean;
+}
+
+@Component({
+  selector: 'app-markdown-modal',
+  templateUrl: './markdown.modal.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppMarkdownModal implements AppMarkdownModalOptions {
+  @Input() title: string;
+  @Input({ transform: booleanAttribute }) showError = true;
+  @Input({ transform: booleanAttribute }) canPrint = false;
+  @Input() data: string;
+  @Input() src: string;
+  @Input({ transform: booleanAttribute }) enableNavigationHistory = true;
+  @Input({ transform: booleanAttribute }) debug: boolean;
+
+  @ViewChild('content') content: AppMarkdownContent;
+
+  static async show(modalCtrl: ModalController, options: AppMarkdownModalOptions) {
+    const modal = await modalCtrl.create({
+      component: AppMarkdownModal,
+      componentProps: options,
+      keyboardClose: true,
+      cssClass: options?.cssClass || 'modal-large',
+    });
+
+    await modal.present();
+
+    return modal.onWillDismiss();
+  }
+
+  constructor(
+    protected injector: Injector,
+    protected viewCtrl: ModalController,
+    protected platform: PlatformService,
+    protected settings: LocalSettingsService,
+    protected translate: TranslateService,
+    protected network: NetworkService,
+    protected cd: ChangeDetectorRef
+  ) {
+    // TODO: for DEV only
+    //this.debug = !environment.production;
+  }
+
+  close(_?: Event) {
+    return this.viewCtrl.dismiss();
+  }
+
+  goBack(event: Event, content: AppMarkdownContent) {
+    if (content?.canGoBack) {
+      content.goBack(event);
+      this.cd.markForCheck();
+    } else {
+      this.close(event);
+    }
+  }
+
+  protected markAsLoaded() {
+    this.content?.markAsLoaded();
+  }
+
+  protected markAsLoading() {
+    this.content?.markAsLoading();
+  }
+
+  protected setError(err: string | Error) {
+    this.content?.setError(err);
+  }
+
+  protected resetError() {
+    this.content?.resetError();
+  }
+}

package/src/app/shared/markdown/markdown.module.ts

@@ -0,0 +1,65 @@
+// function that returns `MarkedOptions` with renderer override
+import { MarkdownModule, MARKED_OPTIONS, MarkedOptions } from 'ngx-markdown';
+import { ModuleWithProviders, NgModule, SecurityContext } from '@angular/core';
+import { MarkdownService } from './markdown.service';
+import { MarkdownDirective } from './markdown.directive';
+import { HttpClient } from '@angular/common/http';
+import { AppMarkdownModal } from './markdown.modal';
+import { IonicModule } from '@ionic/angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedToolbarModule } from '../toolbar/toolbar.module';
+import { CommonModule } from '@angular/common';
+import { AppMarkdownContent } from './markdown.component';
+import { SharedDebugModule } from '../debug/debug.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    IonicModule,
+    TranslateModule.forChild(),
+    MarkdownModule.forChild(),
+
+    // App module
+    SharedToolbarModule,
+    SharedDebugModule,
+  ],
+  declarations: [
+    // Component
+    AppMarkdownContent,
+    AppMarkdownModal,
+    // Directive
+    MarkdownDirective,
+  ],
+  exports: [TranslateModule, MarkdownModule, AppMarkdownContent, MarkdownDirective],
+})
+export class SharedMarkdownModule {
+  static forRoot(): ModuleWithProviders<SharedMarkdownModule> {
+    console.debug('[markdown] Creating module (root)');
+
+    return {
+      ngModule: SharedMarkdownModule,
+      providers: [
+        MarkdownService,
+        MarkdownModule.forRoot({
+          loader: HttpClient, // Allow to load using [src]
+          sanitize: SecurityContext.NONE,
+          markedOptions: {
+            provide: MARKED_OPTIONS,
+            deps: [MarkdownService],
+            useFactory: (markdownService: MarkdownService) => {
+              console.debug('[markdown] Creating marked options');
+              return <MarkedOptions>{
+                renderer: markdownService.renderer,
+                gfm: true,
+                breaks: false,
+                pedantic: false,
+                smartLists: true,
+                smartypants: false,
+              };
+            },
+          },
+        }).providers,
+      ],
+    };
+  }
+}