@sumaris-net/ngx-components 18.13.0 → 18.14.0

package/src/app/social/user-event/notification/user-event-notification.icon.ts

@@ -0,0 +1,176 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+} from '@angular/core';
+import { Observable, of } from 'rxjs';
+import { ModalController, PopoverController } from '@ionic/angular';
+import { APP_USER_EVENT_SERVICE, IUserEventService } from '../user-event.service';
+import { UserEventNotificationList, UserEventNotificationListOptions } from './user-event-notification.list';
+import { IUserEvent, IUserEventAction, IUserEventFilter } from '../user-event.model';
+import { AccountService } from '../../../core/services/account.service';
+import { map, tap } from 'rxjs/operators';
+import { isNil, toBoolean } from '../../../shared/functions';
+import { AppColors } from '../../../shared/types';
+import { LocalSettingsService } from '../../../core/services/local-settings.service';
+import { UserEventNotificationModal } from './user-event-notification.modal';
+
+@Component({
+  selector: 'app-user-event-notification-icon',
+  templateUrl: './user-event-notification.icon.html',
+  styleUrls: ['./user-event-notification.icon.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserEventNotificationIcon implements OnInit, OnDestroy {
+  private _logPrefix = '[user-event-notification] ';
+  private _readEvent = new EventEmitter<IUserEvent<any>>();
+  private _readEvents = new EventEmitter<IUserEvent<any>[]>();
+
+  protected visible: boolean;
+  protected readonly count$: Observable<number>;
+
+  @Input() titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
+  @Input() disabled = false;
+  @Input() filter: any = null;
+  @Input() autoHide: boolean = false;
+  @Input() headerActions: IUserEventAction[];
+  @Input() footerActions: IUserEventAction[];
+  @Input() style: 'mat-button' | 'ion-button' = 'mat-button';
+  @Input() color: AppColors;
+  @Input() unreadColor: AppColors;
+  @Input() fill: 'clear' | 'outline' | 'solid';
+  @Input() mobile: boolean;
+  @Input() listStyle: 'popover' | 'modal';
+  @Input() debug = false;
+
+  @Output('showList') onShowList = new EventEmitter<Event>();
+
+  constructor(
+    @Optional() @Inject(APP_USER_EVENT_SERVICE) public userEventService: IUserEventService<IUserEvent<any>, IUserEventFilter<any>>,
+    protected accountService: AccountService,
+    protected popoverController: PopoverController,
+    protected modalController: ModalController,
+    protected settings: LocalSettingsService,
+    private cd: ChangeDetectorRef
+  ) {
+    this.mobile = settings.mobile;
+    this.listStyle = this.mobile ? 'modal' : 'popover';
+    this.count$ = !this.userEventService
+      ? of()
+      : this.userEventService.countSubject.pipe(
+          tap((value) => {
+            const visible = !this.autoHide || value > 0;
+            this.setVisible(visible);
+          }),
+          map((value) => (value === 0 ? undefined : value))
+        );
+  }
+
+  async ngOnInit() {
+    // Service is missing: fallback
+    if (isNil(this.userEventService)) {
+      console.warn(`${this._logPrefix}No service injected`);
+      this.disabled = true;
+      this.setVisible(false);
+      return;
+    }
+
+    // User event service exists
+    else {
+      this.setVisible(toBoolean(this.visible, !this.autoHide));
+
+      // Wait service
+      await this.userEventService.ready();
+
+      // Subscribe to read event
+      this._readEvent.subscribe((item) => {
+        // default: mark event as read
+        this.userEventService.markAllAsRead([item]);
+      });
+      this._readEvents.subscribe((items) => {
+        this.userEventService.markAllAsRead(items);
+      });
+    }
+  }
+
+  ngOnDestroy(): void {
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Destroying`);
+    }
+    this._readEvent.complete();
+    this._readEvents.complete();
+  }
+
+  async showList(
+    event: Event = undefined,
+    options?: UserEventNotificationListOptions & {
+      style: 'modal' | 'popover';
+    }
+  ) {
+    if (this.onShowList.observed) {
+      this.onShowList.emit(event);
+      return;
+    }
+    // Reset count (if not auto hide. else it will be hidden bellow)
+    if (!this.autoHide) {
+      this.userEventService.resetCount();
+    }
+
+    options = {
+      debug: this.debug,
+      titleI18n: this.titleI18n,
+      readEvent: this._readEvent,
+      readEvents: this._readEvents,
+      filter: this.filter,
+      headerActions: this.headerActions,
+      footerActions: this.footerActions,
+      ...options,
+    };
+
+    // Open using modal
+    const listStyle = options?.style || this.listStyle;
+    if (listStyle === 'modal') {
+      const modal = await this.modalController.create({
+        component: UserEventNotificationModal,
+        componentProps: options,
+        backdropDismiss: true,
+        keyboardClose: true,
+        cssClass: 'modal-notifications',
+      });
+      await modal.present();
+    }
+
+    // Open using popover
+    else {
+      const popover = await this.popoverController.create({
+        component: UserEventNotificationList,
+        componentProps: options,
+        backdropDismiss: true,
+        keyboardClose: true,
+        event,
+        translucent: true,
+        cssClass: 'popover-large popover-notifications',
+      });
+      await popover.present();
+    }
+
+    // Reset count (if auto hide - after list has been opened)
+    if (this.autoHide) {
+      this.userEventService.resetCount();
+    }
+  }
+
+  protected setVisible(value: boolean) {
+    if (this.visible !== value) {
+      this.visible = value;
+      this.cd.markForCheck();
+    }
+  }
+}

package/src/app/social/user-event/notification/user-event-notification.list.html

@@ -0,0 +1,151 @@
+<ion-content>
+  <ion-list class="ion-list-popover">
+
+    <!-- header -->
+    @if (showHeader) {
+      <ion-row class="ion-list-header column">
+        <ion-col>
+          @if (titleI18n) {
+            <ion-label>{{ titleI18n | translate }}</ion-label>
+          }
+        </ion-col>
+        <ion-col size="auto" class="header-action" *ngIf="$items | async | isNotEmptyArray">
+          <ion-text color="primary">
+            <a (click)="markAllAsRead($event)">{{ 'SOCIAL.USER_EVENT.NOTIFICATION.READ_ALL' | translate }}</a>
+          </ion-text>
+        </ion-col>
+        <ion-col size="auto" class="header-action">
+          <ion-text *ngFor="let action of headerActions">
+            <a (click)="executeAction($event, action, undefined)" [title]="action.title || action.name | translate">
+              {{ action.name | translate }}
+            </a>
+          </ion-text>
+        </ion-col>
+      </ion-row>
+    }
+
+    @for (item of $items | async; track item.id; let last = $last) {
+      <ion-item
+        [lines]="last ? 'none' : undefined"
+        [class.unread]="!item.readDate"
+        [class.tappable]="item.actions | arrayFilter: isDefaultAction | isNotEmptyArray"
+        (click)="click($event, item)"
+      >
+        <ion-avatar slot="start">
+          <ion-img *ngIf="item.avatar; else avatarIcon" [src]="item.avatar" />
+
+          <ng-template #avatarIcon>
+            <app-icon
+              *ngIf="item.avatarIcon; else generateIcon"
+              [ref]="item.avatarIcon"
+              height="40"
+              width="40"
+            ></app-icon>
+          </ng-template>
+
+          <ng-template #generateIcon>
+            <div class="avatar" *ngIf="item.avatarJdenticon">
+              <svg width="40" width="40" [data-jdenticon-value]="item.avatarJdenticon"></svg>
+            </div>
+          </ng-template>
+        </ion-avatar>
+
+        <ion-grid class="ion-no-margin ion-no-padding message">
+          <ion-row>
+            <ion-col size="12">
+              <ion-text class="ion-text-wrap">
+                <p [class.unread]="!item.readDate" [innerHTML]="item.message"></p>
+              </ion-text>
+            </ion-col>
+          </ion-row>
+
+          <!-- date -->
+          <ion-row>
+            <ion-col size="12">
+              <app-icon
+                *ngIf="item.icon"
+                [ref]="item.icon"
+                height="16"
+                width="16"
+                style="vertical-align: sub; margin-right: 3px"
+              ></app-icon>
+              <small>
+                <span>{{ item.creationDate | dateFromNow }}</span>
+                <span style="color: gray">{{ ' | ' + (item.creationDate | dateFormat: { time: true }) }}</span>
+              </small>
+            </ion-col>
+          </ion-row>
+
+          <!-- actions -->
+          <ion-row *ngIf="item.actions | isNotEmptyArray">
+            <ion-col></ion-col>
+            <ion-col size="auto">
+              <ng-container *ngFor="let action of item.actions">
+                <a
+                  *ngIf="!action.default"
+                  class="action"
+                  (click)="executeAction($event, action, item)"
+                  [title]="action.title || action.name | translate"
+                >
+                  <app-icon *ngIf="action.iconRef" slot="start" height="20" width="20" [ref]="action.iconRef"></app-icon>
+                  <span>{{ action.name | translate }}</span>
+                </a>
+              </ng-container>
+            </ion-col>
+          </ion-row>
+        </ion-grid>
+
+        <mat-icon slot="end" *ngIf="item.actions | arrayFilter: isDefaultAction | isNotEmptyArray">
+          chevron_right
+        </mat-icon>
+      </ion-item>
+    }
+    <!-- loading -->
+    <ng-container *ngIf="($items | async) === undefined; else notLoading">
+      <ng-container *ngTemplateOutlet="loadingItem"></ng-container>
+    </ng-container>
+
+    <ng-template #notLoading>
+      <!-- no result -->
+      <ion-item *ngIf="$items | async | isEmptyArray" lines="none">
+        <ion-text color="dark" class="text-italic">{{ 'SOCIAL.USER_EVENT.NOTIFICATION.EMPTY' | translate }}</ion-text>
+      </ion-item>
+
+      <!-- Fetching more -->
+      <ng-container *ngIf="fetchingMore; else infiniteLoop" lines="none" disabled>
+        <ng-container *ngTemplateOutlet="loadingItem"></ng-container>
+      </ng-container>
+
+      <!-- Infinite loop -->
+      <ng-template #infiniteLoop>
+        <ng-container *ngIf="canFetchMore" lines="none" disabled [ngTemplateOutlet]="loadingItem"></ng-container>
+      </ng-template>
+    </ng-template>
+
+    <!-- footer -->
+    @if (showFooter) {
+      <ion-row class="ion-list-footer column">
+        <ion-col size="auto" class="footer-action">
+          <ion-text *ngFor="let action of footerActions">
+            <a (click)="executeAction($event, action, undefined)" [title]="action.title || action.name | translate">
+              {{ action.name | translate }}
+            </a>
+          </ion-text>
+        </ion-col>
+        <ion-col>
+          <ion-text *ngIf="$itemCount | async; let count" class="ion-float-end ion-padding-end">
+            <i>{{ 'COMMON.RESULT_COUNT' | translate: { count: count } }}</i>
+          </ion-text>
+        </ion-col>
+      </ion-row>
+    }
+  </ion-list>
+</ion-content>
+
+
+<!-- loading -->
+<ng-template #loadingItem>
+  <ion-item lines="none" disabled>
+    <ion-skeleton-text [animated]="true" style="width: 100%"></ion-skeleton-text>
+  </ion-item>
+</ng-template>

package/src/app/social/user-event/notification/user-event-notification.list.scss

@@ -0,0 +1,73 @@
+@import 'ionic.globals';
+:host(.popover-viewport) {
+  ion-content {
+    overflow-y: auto;
+    user-select: none;
+    max-height: var(--max-height);
+  }
+}
+
+ion-list {
+  ion-item {
+    &.tappable {
+      cursor: pointer;
+    }
+    &.tappable:hover {
+      --ion-item-background: var(--ion-item-background-color-hover);
+    }
+  }
+}
+
+.message {
+  font-size: 0.9em;
+
+  p {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}
+
+.header-action {
+  text-align: end;
+  margin-right: 8px;
+  a {
+    cursor: pointer;
+    color: var(--ion-color-contrast);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.footer-action {
+  text-align: start;
+  margin-left: 8px;
+  a {
+    cursor: pointer;
+    color: var(--ion-color-contrast);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+a.action {
+  font-size: 0.9em;
+  margin-right: 10px;
+  cursor: pointer;
+
+  &:hover span {
+    text-decoration: underline;
+  }
+  app-icon {
+    vertical-align: middle;
+  }
+}
+
+ion-avatar img,
+ion-avatar .avatar svg {
+  border: 1px solid rgba(var(--ion-color-secondary-rgb, 0.5));
+  border-radius: 50%;
+}

package/src/app/social/user-event/notification/user-event-notification.list.ts

@@ -0,0 +1,282 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  InjectionToken,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren,
+} from '@angular/core';
+import { IUserEvent, IUserEventAction, IUserEventFilter } from '../user-event.model';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { IonContent, IonItem, PopoverController } from '@ionic/angular';
+import { APP_USER_EVENT_SERVICE, IUserEventService } from '../user-event.service';
+import { LocalSettingsService } from '../../../core/services/local-settings.service';
+import { FetchMoreFn, LoadResult } from '../../../shared/services/entity-service.class';
+import { isNotEmptyArray, removeDuplicatesFromArray } from '../../../shared/functions';
+import { fromScrollEndEvent } from '../../../shared/events';
+import { waitFor } from '../../../shared/observables';
+import { SortDirection } from '@angular/material/sort';
+import { debounceTime, distinctUntilChanged, filter, first, map, switchMap } from 'rxjs/operators';
+
+export const APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD = new InjectionToken<string>('infiniteScrollThreshold');
+
+export interface UserEventNotificationListOptions<
+  E extends IUserEvent<any> = IUserEvent<any>,
+  F extends IUserEventFilter<any> = IUserEventFilter<any>,
+> {
+  debug?: boolean;
+  titleI18n?: string;
+  readEvent?: EventEmitter<E>;
+  readEvents?: EventEmitter<E[]>;
+  filter?: Partial<F>;
+  headerActions?: IUserEventAction[];
+  footerActions?: IUserEventAction[];
+}
+
+@Component({
+  selector: 'app-user-event-notification-list',
+  templateUrl: './user-event-notification.list.html',
+  styleUrls: ['./user-event-notification.list.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UserEventNotificationList<E extends IUserEvent<any> = IUserEvent<any>, F extends IUserEventFilter<any> = IUserEventFilter<any>>
+  implements OnInit, OnDestroy, UserEventNotificationListOptions<E, F>
+{
+  protected fetchingMore = false;
+  protected $items = new BehaviorSubject<E[]>(undefined);
+  protected _subscriptions = new Subscription();
+  protected _fetchMoreFn: FetchMoreFn<LoadResult<E>>;
+  protected _fetchMoreSubscription: Subscription;
+  protected _$pageSize = new BehaviorSubject<number>(20);
+  protected _panelElement: HTMLElement = null;
+
+  @Input() titleI18n: string = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
+  @Input() sortBy = 'creationDate';
+  @Input() sortDirection: SortDirection = 'desc';
+  @Input() filter: Partial<F>;
+  @Input() enableInfiniteScroll = true;
+  @Input() infiniteScrollThreshold: string;
+  @Input() headerActions: IUserEventAction[];
+  @Input() footerActions: IUserEventAction[];
+  @Input() showHeader = true;
+  @Input() showFooter = true;
+  @Input() mobile: boolean;
+  @Input() debug = false;
+
+  @Input() set pageSize(value: number) {
+    if (value > 0 && value !== this._$pageSize.value) this._$pageSize.next(value);
+  }
+
+  $itemCount = new BehaviorSubject<number>(undefined);
+
+  get pageSize(): number {
+    return this._$pageSize.value;
+  }
+
+  get hasItem$(): Observable<boolean> {
+    return this.$items.pipe(map(isNotEmptyArray));
+  }
+
+  get itemCount$(): Observable<number> {
+    return this.$itemCount.pipe(map((value) => value ?? 0));
+  }
+
+  @Output() readEvent: EventEmitter<E>;
+  @Output() readEvents: EventEmitter<E[]>;
+  @Output() dismiss = new EventEmitter<Event>();
+
+  @ViewChild(IonContent) ionContent: IonContent;
+  @ViewChildren(IonItem) ionItems: QueryList<IonItem>;
+
+  get canFetchMore(): boolean {
+    return this.enableInfiniteScroll && !!this._fetchMoreFn;
+  }
+
+  constructor(
+    protected cd: ChangeDetectorRef,
+    protected popoverController: PopoverController,
+    @Optional() protected settings: LocalSettingsService,
+    @Optional() @Inject(APP_USER_EVENT_SERVICE) public userEventService: IUserEventService<E, IUserEventFilter<any>>,
+    @Optional() @Inject(APP_USER_EVENT_LIST_INFINITE_SCROLL_THRESHOLD) public infiniteScrollThresholdFromToken: string
+  ) {
+    this.mobile = this.settings?.mobile || false;
+    this.infiniteScrollThreshold = infiniteScrollThresholdFromToken;
+  }
+
+  ngOnInit(): void {
+    // Watch all user events
+    if (this.userEventService) {
+      this._subscriptions.add(
+        this._$pageSize
+          .pipe(
+            distinctUntilChanged(),
+            switchMap((pageSize) => this.userEventService.watchAll(0, pageSize, this.sortBy, this.sortDirection, this.filter)),
+            first()
+          )
+          .subscribe((result) => {
+            if (this.debug) console.debug(`[user-event-notification-list] Receiving ${result.total} user events`, result.data);
+            this.$items.next(result.data);
+            this.$itemCount.next(result.total ?? result.data?.length ?? 0);
+            this._fetchMoreFn = result.fetchMore;
+            this.fetchingMore = false; // Allow to refetch more
+            this.markForCheck();
+          })
+      );
+
+      // Listen changes
+      this._subscriptions.add(
+        this.userEventService
+          .listenAllChanges(this.filter)
+          .pipe(filter(isNotEmptyArray))
+          .subscribe((data) => {
+            if (this.debug) console.debug(`[user-event-notification-list] Receiving ${data.length} new user events (by WS)`, data);
+            const oldItemsCount = this.$itemCount.value || 0;
+            const items = removeDuplicatesFromArray([...data, ...(this.$items.value || [])], 'id');
+
+            // Compute delta count
+            // When an existing event is update, the delta count should be = 0
+            const deltaCount = items.length - oldItemsCount;
+
+            // Update observables
+            this.$items.next(items);
+            if (deltaCount !== 0) this.$itemCount.next(oldItemsCount + deltaCount);
+          })
+      );
+
+      if (this.enableInfiniteScroll) this.initInfiniteScroll(this.infiniteScrollThreshold);
+    }
+  }
+
+  ngOnDestroy() {
+    this._subscriptions.unsubscribe();
+    this.$items.complete();
+    this.$itemCount.complete();
+  }
+
+  async click(event: Event, userEvent: E) {
+    if (!userEvent) return; // Skip
+
+    // MarkAsRead
+    this.markAsRead(event, userEvent);
+
+    // Get the default action (if any)
+    const defaultAction = (userEvent?.actions || []).find((a) => a.default);
+
+    if (defaultAction) {
+      await this.executeAction(event, defaultAction, userEvent);
+    }
+  }
+
+  isDefaultAction(action: IUserEventAction): boolean {
+    return (action && action.default) || false;
+  }
+
+  markAsRead(event: Event, userEvent: E) {
+    if (userEvent?.readDate) return;
+    this.readEvent?.emit(userEvent);
+  }
+
+  markAllAsRead(event: Event) {
+    const unreadUserEvents = (this.$items.value || []).filter((value) => !value.readDate);
+    if (!unreadUserEvents.length) return;
+    this.readEvents?.emit(unreadUserEvents);
+  }
+
+  async executeAction(event: Event, action: IUserEventAction, userEvent: IUserEvent<any>) {
+    if (event?.defaultPrevented) return; // Skip if prevented
+
+    // Disable default action (.e.g avoid to call click() function)
+    if (event) event.preventDefault();
+
+    // Execute then close popover
+    try {
+      const res = action.executeAction(userEvent);
+      this.close();
+      if (res instanceof Promise) await res;
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  close() {
+    if (this.dismiss.observed) {
+      this.dismiss.emit();
+    } else {
+      this.popoverController.dismiss();
+    }
+
+    // Reset counter (need if event has been received while popover if open)
+    this.userEventService?.resetCount();
+  }
+
+  async fetchMore(event?: CustomEvent & { target?: EventTarget & { complete?: () => void } }) {
+    if (!this._fetchMoreFn || this.fetchingMore) return;
+
+    console.debug('[user-event-notification-list] Fetching more notifications...', event);
+    this.fetchingMore = true;
+    const fetchMoreFn = this._fetchMoreFn;
+
+    try {
+      const result = await fetchMoreFn();
+      let data = [...(this.$items.value || []), ...result.data];
+
+      // Remove duplication (e.g. when new user event was added by subscription)
+      data = removeDuplicatesFromArray(data, 'id');
+
+      // fetch more changes (e.g. if watchAll observable as been refreshed)
+      if (fetchMoreFn !== this._fetchMoreFn) return; // Skip
+
+      this.$items.next(data);
+      this.$itemCount.next(result.total ?? result.data?.length ?? 0);
+      this._fetchMoreFn = result.fetchMore;
+
+      // Update the page size, to keep same scroll height, after the next refresh
+      //this.pageSize = Math.max(this.pageSize, data.length);
+    } catch (err) {
+      console.error(err);
+      this._fetchMoreFn = undefined; // Forget the function
+    } finally {
+      this.markForCheck();
+      this.fetchingMore = false;
+    }
+  }
+
+  protected async initInfiniteScroll(threshold?: string) {
+    console.debug('[user-event-notification-list] Init infinite loop');
+    if (this._fetchMoreSubscription) this._fetchMoreSubscription.unsubscribe();
+
+    threshold = threshold || (this.mobile ? '15%' : '2%');
+    await waitFor(() => !!this.ionContent, { dueTime: 250, timeout: 1000 });
+    const panel = await this.getPanelElement();
+
+    // Trigger fetch more, end end scroll reached
+    this._fetchMoreSubscription = this.$items
+      .pipe(
+        debounceTime(250),
+        filter(() => this.canFetchMore),
+        switchMap(() => fromScrollEndEvent(panel, threshold, 250 /*force to check when no scrollbar - e.g. in large screen*/))
+      )
+      .subscribe(() => this.fetchMore());
+
+    this._subscriptions.add(this._fetchMoreSubscription);
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected async getPanelElement(): Promise<HTMLElement> {
+    if (!this._panelElement) {
+      this._panelElement = await this.ionContent.getScrollElement();
+    }
+    return this._panelElement;
+  }
+}