@sumaris-net/ngx-components 18.14.0 → 18.14.2

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

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

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

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

@@ -1,282 +0,0 @@
-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;
-  }
-}