@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/social/feed/feed.component.spec.ts

@@ -0,0 +1,24 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { IonicModule } from '@ionic/angular';
+
+import { FeedsComponent } from './feed.component';
+
+describe('AboutModalComponent', () => {
+  let component: FeedsComponent;
+  let fixture: ComponentFixture<FeedsComponent>;
+
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      declarations: [FeedsComponent],
+      imports: [IonicModule.forRoot()],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(FeedsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/src/app/social/feed/feed.component.ts

@@ -0,0 +1,115 @@
+import { Component, Inject, inject, Input, Optional } from '@angular/core';
+import { RxState } from '@rx-angular/state';
+import { TranslateService } from '@ngx-translate/core';
+import { Router } from '@angular/router';
+import { arrayDistinct, isNotEmptyArray } from '../../shared/functions';
+import { JsonFeed, JsonFeedUtils } from './feed.model';
+import { DiscourseUtils } from './discourse/discourse.utils';
+import { map, switchMap } from 'rxjs/operators';
+import { Observable } from 'rxjs';
+import { PlatformService } from '../../core/services/platform.service';
+import { RxStateProperty, RxStateSelect } from '../../shared/rx-state/rx-state.decorators';
+import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
+import { AppColors } from '../../shared/types';
+import { APP_FEED_SERVICE, IFeedService } from './feed.service';
+
+export interface FeedState {
+  maxAgeInMonths: number;
+  maxContentLength: number;
+  feeds: JsonFeed[];
+  hasFeeds: boolean;
+}
+
+@Component({
+  selector: 'app-feeds',
+  templateUrl: './feed.component.html',
+  styleUrls: ['./feed.component.scss'],
+  providers: [RxState],
+})
+export class FeedsComponent<T extends JsonFeed = JsonFeed> {
+  protected _debug = false;
+  protected _state = new RxState<FeedState>();
+  protected translate = inject(TranslateService);
+  protected platform = inject(PlatformService);
+  protected router = inject(Router);
+  protected version: string;
+
+  @RxStateSelect() feeds$: Observable<T[]>;
+
+  @RxStateSelect() hasFeeds$: Observable<boolean>;
+
+  @RxStateProperty() @Input() feeds: T[];
+
+  @RxStateProperty() hasFeeds: boolean;
+
+  @Input() showHeader = true;
+  @Input() headerTextColor: AppColors = 'light';
+
+  constructor(
+    @Inject(ENVIRONMENT) protected environment: Environment,
+    @Optional() @Inject(APP_FEED_SERVICE) public feedService: IFeedService<T>
+  ) {
+    this._state.connect('hasFeeds', this.feeds$.pipe(map(isNotEmptyArray)));
+
+    if (this.feedService) {
+      this._state.connect(
+        'feeds',
+        this._state.select(['maxAgeInMonths', 'maxContentLength']).pipe(
+          switchMap(({ maxAgeInMonths, maxContentLength }) =>
+            this.feedService.watchAll({
+              maxAgeInMonths,
+              maxContentLength,
+            })
+          ),
+          map(({ data }) => data)
+        )
+      );
+    }
+
+    // Initial state
+    this._state.set({
+      maxAgeInMonths: this.environment.feed?.maxAgeInMonths ?? -1 /* all */,
+      maxContentLength: this.environment.feed?.maxContentLength ?? -1 /* no max */,
+    });
+
+    // DEBUG
+    this._debug = !environment.production;
+  }
+
+  openFeedHome(feed?: T) {
+    if (!feed) {
+      this.feeds?.forEach((f) => this.openFeedHome(f));
+      return;
+    }
+
+    const url = feed.home_page_url ?? DiscourseUtils.removeJsonExtension(feed.feed_url) ?? this.feedService.getHomeUrl();
+    if (!url) return;
+    return this.platform.open(url);
+  }
+
+  openUrl(url: string) {
+    if (!url) return;
+    const fixedUrl = DiscourseUtils.removeJsonExtension(url);
+    return this.platform.open(fixedUrl);
+  }
+
+  openTag(feed: T, tag: string) {
+    const url = this.feedService.getTagUrl(feed, tag);
+    return this.openUrl(url);
+  }
+
+  getTags(feedOrItem?: T | T['items'][0]) {
+    if (JsonFeedUtils.isJsonFeed(feedOrItem)) {
+      return arrayDistinct(
+        (feedOrItem.items || [])
+          .map((item) => item.tags)
+          .filter(isNotEmptyArray)
+          .flat()
+      );
+    }
+    if (JsonFeedUtils.isJsonFeedItem(feedOrItem)) {
+      return arrayDistinct((feedOrItem.tags || []).flat());
+    }
+    return [];
+  }
+}

package/src/app/social/feed/feed.directive.ts

@@ -0,0 +1,164 @@
+import { AfterViewInit, Directive, ElementRef, inject, Input, OnDestroy } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { ActivatedRoute, Router, UrlTree } from '@angular/router';
+import { UrlUtils } from '../../shared/file/url.utils';
+import { LocationStrategy } from '@angular/common';
+import { isNotNilOrBlank } from '../../shared/functions';
+import { NavController } from '@ionic/angular';
+import { DiscourseUtils } from './discourse/discourse.utils';
+import { PlatformService } from '../../core/services/platform.service';
+
+@Directive({
+  selector: 'feed,[feed]',
+})
+export class FeedDirective implements AfterViewInit, OnDestroy {
+  private _subscription = new Subscription();
+  private platform = inject(PlatformService);
+  private locationStrategy = inject(LocationStrategy);
+  private navController = inject(NavController);
+  private router = inject(Router);
+  private route = inject(ActivatedRoute);
+
+  private _feedUrl: string;
+  private _baseUrl: string;
+
+  @Input('feed') set feedUrl(value: string) {
+    this._feedUrl = value;
+    this._baseUrl = value && DiscourseUtils.removeJsonExtension(value);
+  }
+
+  get feedUrl(): string {
+    return this._feedUrl;
+  }
+
+  constructor(private element: ElementRef<HTMLElement>) {
+    // DEBUG
+    //console.debug('[feed-directive] Creating feed directive');
+  }
+
+  public ngAfterViewInit() {
+    console.debug('[feed-directive] Processing anchors');
+    // Listening click events
+    this._subscription.add(this.listenClickEvents(this.element.nativeElement));
+  }
+
+  ngOnDestroy() {
+    this._subscription.unsubscribe();
+  }
+
+  protected listenClickEvents(nativeElement: HTMLElement): Subscription {
+    console.debug('[feed-directive] Start listening click events...');
+    const subscription = new Subscription();
+    const listener = (event: Event) => this.click(event, nativeElement);
+    const links = nativeElement.querySelectorAll('a');
+    links.forEach((link) => {
+      // DEBUG
+      //console.debug('[feed-directive] Adding click listener to', link);
+      link.addEventListener('click', listener);
+      subscription.add(() => link.removeEventListener('click', listener));
+    });
+
+    // DEBUG
+    subscription.add(() => console.debug('[feed-directive] Stop listening click events'));
+
+    return subscription;
+  }
+
+  protected async click(event: Event, containerElement: HTMLElement): Promise<boolean> {
+    console.debug('[feed-directive] Processing click event...', event);
+
+    if (!(event.target instanceof HTMLAnchorElement) && !(event.target?.['tagName'] === 'A')) {
+      console.warn('[feed-directive] Invalid click event target. Should an anchor <a>', event.target);
+      return;
+    }
+
+    const element = event.target as HTMLAnchorElement;
+
+    let href = element.getAttribute('href');
+    const fragment = UrlUtils.getFragment(href);
+
+    // Fragment
+    if (href?.startsWith('#') && isNotNilOrBlank(fragment)) {
+      event.preventDefault();
+      this.scrollToAnchor(containerElement, fragment);
+      return true;
+    }
+
+    const routerLink = element.getAttribute('routerLink');
+    if (isNotNilOrBlank(routerLink)) {
+      event.preventDefault();
+      return this.navController.navigateForward(routerLink);
+    }
+
+    // Resolve relative URL, if baseUrl has been set
+    if (this._baseUrl && UrlUtils.isRelativeUrl(href)) {
+      // Resolve URL, then open using the platform
+      href = UrlUtils.resolveRelativeUrl(this._baseUrl, href);
+    }
+
+    // Resolve internal URL as an app route
+    if (UrlUtils.isInternalUrl(href)) {
+      const routePath = this.normalizeUrl(href.startsWith('/') ? href : `/${href}`);
+      const urlTree = this.getUrlTree(routePath);
+      event.preventDefault();
+      this.router.navigated = false;
+      // Opening route
+      return this.navController.navigateForward(urlTree);
+    }
+
+    // External URL: open using the platform
+    event.preventDefault();
+    await this.platform.open(href);
+    return true;
+  }
+
+  scrollToAnchor(containerElement: HTMLElement, anchorId: string) {
+    if (!containerElement || !anchorId) {
+      console.warn("Missing 'containerElement' or 'fragment' argument.");
+      return;
+    }
+
+    console.debug('[feed-directive-anchor] Scrolling to anchor #' + anchorId);
+
+    // Find the target element with the specified fragment ID
+    const targetElement = containerElement.querySelector(`#${anchorId}`);
+
+    if (targetElement) {
+      // Scroll smoothly to the target element
+      // eslint-disable-next-line @rx-angular/prefer-no-layout-sensitive-apis
+      targetElement.scrollIntoView({
+        behavior: 'smooth', // Smooth scrolling behavior
+        block: 'start', // Align the target element to the top of the container
+      });
+    } else {
+      console.warn(`No element found with the ID "${anchorId}" inside the container.`);
+    }
+  }
+
+  /**
+   * Transform a relative URL to its absolute representation according to current router state.
+   * @param url Relative URL path.
+   * @return Absolute URL based on the current route.
+   */
+  normalizeUrl(url: string): string {
+    if (UrlUtils.isExternalUrl(url)) {
+      return url;
+    }
+    if (this._baseUrl && UrlUtils.isRelativeUrl(url)) {
+      return UrlUtils.resolveRelativeUrl(this._baseUrl, url);
+    }
+
+    const urlTree = this.getUrlTree(url);
+    const serializedUrl = this.router.serializeUrl(urlTree);
+    return this.locationStrategy.prepareExternalUrl(serializedUrl);
+  }
+
+  getUrlTree(url: string): UrlTree {
+    url = UrlUtils.normalizeUrl(url);
+    const urlPath = UrlUtils.stripFragmentAndQuery(url) || UrlUtils.stripFragmentAndQuery(this.router.url);
+    const parsedUrl = this.router.parseUrl(url);
+    const fragment = parsedUrl.fragment;
+    const queryParams = parsedUrl.queryParams;
+    return this.router.createUrlTree([urlPath], { relativeTo: this.route, fragment, queryParams });
+  }
+}

package/src/app/social/feed/feed.model.ts

@@ -0,0 +1,139 @@
+import { isNotEmptyArray, isNotNilOrBlank } from '../../shared/functions';
+
+export interface JsonFeed {
+  version: string;
+  title: string;
+  home_page_url?: string;
+  feed_url?: string;
+  description?: string;
+  user_comment?: string;
+  next_url?: string;
+  icon?: string;
+  favicon?: string;
+  authors: JsonFeedAuthor[];
+  language?: string;
+  expired?: boolean;
+
+  items: JsonFeedItem[];
+
+  hubs?: {
+    type?: string;
+    url: string;
+  }[];
+
+  // Custom property
+  tag_template?: string;
+
+  /**
+   * @deprecated since version 1.1
+   */
+  author: JsonFeedAuthor;
+}
+
+export interface JsonFeedItem {
+  id: string;
+  url?: string;
+  external_url?: string;
+  title?: string;
+
+  content_html?: string;
+  content_text?: string;
+
+  summary?: string;
+  banner_image?: string;
+  date_published?: string;
+  date_modified?: string;
+  authors: JsonFeedAuthor[];
+  tags: string[];
+  language: string;
+
+  /**
+   * @deprecated since version 1.1
+   */
+  author: JsonFeedAuthor;
+
+  // Custom property
+  truncated: boolean;
+}
+
+export interface JsonFeedAuthor {
+  name?: string;
+  url?: string;
+  avatar?: string;
+}
+
+export class JsonFeedUtils {
+  static DEFAULT_MAX_POST_AGE_IN_MONTHS = 3;
+
+  static VERSION_1 = 'https://jsonfeed.org/version/1';
+  static VERSION_1_1 = 'https://jsonfeed.org/version/1.1';
+
+  static ACCEPTED_VERSIONS = [this.VERSION_1, this.VERSION_1_1];
+
+  static removeJsonExtension(url: string) {
+    if (!url) return url;
+    return url.replace(/\.json$/, '');
+  }
+
+  static isJsonFeed(json: any): json is JsonFeed {
+    return (json && this.ACCEPTED_VERSIONS.includes(json.version) && isNotEmptyArray(json.items)) || isNotNilOrBlank(json.next_url);
+  }
+
+  static isJsonFeedItem(json: any): json is JsonFeedItem {
+    return json && isNotEmptyArray(json.id) && (isNotNilOrBlank(json.content_text) || isNotNilOrBlank(json.content_html));
+  }
+
+  static truncateFeedItemsHtml(feed: JsonFeed, opts?: { maxContentLength?: number }): JsonFeed {
+    if (!feed?.items) return feed;
+
+    feed.items.forEach((item) => {
+      // Truncate items html
+      if (item.content_html) {
+        const html = this.truncateHtml(item.content_html, opts);
+        item.truncated = html.length !== item.content_html.length;
+        item.content_html = html;
+      }
+    });
+
+    return feed;
+  }
+
+  static truncateHtml(html: string, opts?: { maxContentLength?: number }): string {
+    if (!html) return html;
+    const maxContentLength = opts?.maxContentLength ?? 0;
+    if (maxContentLength > 0 && html?.length > maxContentLength) {
+      const endIndex = Math.max(html.lastIndexOf(' ', maxContentLength), html.lastIndexOf('<', maxContentLength));
+      return html.substring(0, endIndex) + ' (...)';
+    }
+    return html;
+  }
+
+  /**
+   * Migrate from old version 1.0 to 1.1
+   * @param feed
+   */
+  static migrateFeed(feed: JsonFeed): JsonFeed {
+    if (!feed) return feed;
+
+    // Migrate from old version 1.0 to 1.1
+    if (feed.version === JsonFeedUtils.VERSION_1) {
+      // Migrate feed author
+      if (feed.author && !feed.authors) {
+        feed.authors = [feed.author];
+        delete feed.author;
+      }
+
+      // Migrate items author
+      feed.items?.forEach((item) => {
+        if (item.author && !item.authors) {
+          item.authors = [item.author];
+          delete item.author;
+        }
+      });
+
+      // Change version
+      feed.version = JsonFeedUtils.VERSION_1_1;
+    }
+    return feed;
+  }
+}

package/src/app/social/feed/feed.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+import { FeedsComponent } from './feed.component';
+import { FeedDirective } from './feed.directive';
+import { NgOptimizedImage } from '@angular/common';
+
+@NgModule({
+  imports: [SharedModule, TranslateModule.forChild(), NgOptimizedImage],
+  declarations: [FeedsComponent, FeedDirective],
+  exports: [TranslateModule, FeedsComponent, FeedDirective],
+})
+export class FeedModule {}

package/src/app/social/feed/feed.service.ts

@@ -0,0 +1,14 @@
+import { Observable } from 'rxjs';
+import { LoadResult } from '../../shared/services/entity-service.class';
+import { JsonFeed } from './feed.model';
+import { InjectionToken } from '@angular/core';
+
+export const APP_FEED_SERVICE = new InjectionToken<IFeedService<any>>('FeeService');
+
+export interface IFeedService<T extends JsonFeed = JsonFeed> {
+  watchAll(opts?: { maxAgeInMonths?: number; maxContentLength?: number }): Observable<LoadResult<T>>;
+
+  getHomeUrl(feed?: T): string;
+
+  getTagUrl(feed: T, tag: string): string;
+}

package/src/app/social/job/job.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+import { JobProgressionIcon } from './progression/job-progression.icon';
+import { JobProgressionList } from './progression/job-progression.list';
+import { JobProgressionComponent } from './progression/job-progression.component';
+
+@NgModule({
+  imports: [CommonModule, SharedModule, TranslateModule.forChild()],
+  declarations: [JobProgressionIcon, JobProgressionList, JobProgressionComponent],
+  exports: [JobProgressionIcon, JobProgressionList, JobProgressionComponent],
+})
+export class JobModule {}

package/src/app/social/job/progression/job-progression.component.html

@@ -0,0 +1,19 @@
+<ion-item class="ion-item-job-progression">
+  <ion-grid class="ion-no-margin">
+    <ion-row *ngIf="showName" class="name">
+      <ion-col>
+        {{ name$ | push }}
+      </ion-col>
+    </ion-row>
+    <ion-row class="message">
+      <ion-col>
+        {{ message$ | push }}
+      </ion-col>
+    </ion-row>
+    <ion-row class="progress-bar">
+      <ion-col>
+        <ion-progress-bar [value]="value$ | push" [type]="type$ | push"></ion-progress-bar>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-item>

package/src/app/social/job/progression/job-progression.component.scss

@@ -0,0 +1,15 @@
+.ion-item-job-progression {
+  font-size: 0.9em;
+
+  .name {
+  }
+
+  .message {
+    font-style: italic;
+  }
+
+  .progress-bar {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}

package/src/app/social/job/progression/job-progression.component.ts

@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { JobProgression } from './job-progression.model';
+import { RxState } from '@rx-angular/state';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+export interface JobProgressionState {
+  name: string;
+  message: string;
+  value: number;
+  type: 'determinate' | 'indeterminate';
+}
+
+@Component({
+  selector: 'app-job-progression-component',
+  templateUrl: './job-progression.component.html',
+  styleUrls: ['./job-progression.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class JobProgressionComponent extends RxState<JobProgressionState> implements OnInit {
+  @Input() showName = true;
+  @Input() jobProgression$: Observable<JobProgression>;
+
+  name$ = this.select('name');
+  message$ = this.select('message');
+  value$ = this.select('value');
+  type$ = this.select('type');
+
+  constructor() {
+    super();
+  }
+
+  ngOnInit() {
+    this.connect('name', this.jobProgression$.pipe(map((value) => value.name)));
+    this.connect('message', this.jobProgression$.pipe(map((value) => value.message)));
+    this.connect('value', this.jobProgression$.pipe(map((value) => (value.total > 0 ? value.current / value.total : undefined))));
+    this.connect('type', this.jobProgression$.pipe(map((value) => (value.total > 0 ? 'determinate' : 'indeterminate'))));
+  }
+}

package/src/app/social/job/progression/job-progression.icon.html

@@ -0,0 +1,32 @@
+@let count = (jobCount$ | async);
+@if (visible$ | async) {
+  <button
+    #button
+    mat-icon-button
+    [title]="titleI18n | translate"
+    [disabled]="disabled"
+    (click)="showList($event)"
+  >
+    <mat-icon
+      [matBadge]="count | badgeNumber"
+      [matBadgeHidden]="!count"
+      matBadgeColor="accent"
+      matBadgeSize="small"
+      matBadgePosition="above after"
+      aria-hidden="false"
+    >
+      {{ disabled || count ? 'schedule' : 'task_alt' }}
+    </mat-icon>
+    @if (count) {
+      <mat-spinner
+        #spinner
+        class="floating-spinner"
+        [color]="color"
+        [mode]="mode$ | push"
+        [value]="value$ | push"
+        diameter="30"
+        strokeWidth="3"
+      ></mat-spinner>
+    }
+  </button>
+}

package/src/app/social/job/progression/job-progression.icon.scss

@@ -0,0 +1,7 @@
+.floating-spinner {
+  position: absolute;
+  height: 24px !important;
+  width: 24px !important;
+  top: 12px;
+  left: 12px;
+}