@sumaris-net/ngx-components 2.6.4-alpha4 → 2.6.4-alpha5

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

@@ -0,0 +1,36 @@
+import {InjectionToken, NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CoreModule} from '../core/core.module';
+import {SharedModule} from '../shared/shared.module';
+import {UserEventModule} from './user-event/user-event.module';
+import {MessageModule} from './message/message.module';
+import {JobModule} from './job/job.module';
+import {JobProgressionOptions} from './job/progression/job-progression.icon';
+
+export interface SocialModuleOptions {
+  showUserEventNotification: boolean;
+  // todo : userEventNotificationOptions
+  showJobProgression: boolean;
+  jobProgressionOptions: JobProgressionOptions;
+}
+
+export const SocialModuleOptionsToken = new InjectionToken<SocialModuleOptions>("SocialModuleOptions");
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule,
+    SharedModule,
+
+    UserEventModule,
+    JobModule,
+    MessageModule
+  ],
+  exports: [
+    UserEventModule,
+    JobModule,
+    MessageModule
+  ]
+})
+export class SocialModule {
+}

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

@@ -0,0 +1,40 @@
+import { TestingPage } from '../shared/testing/tests.page';
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { JobTestingModule } from './job/testing/job.testing.module';
+import { JobProgressionTestingPage } from './job/testing/job-progression.testing';
+import { UserEventTestingModule } from './user-event/testing/user-event.testing.module';
+import { UserEventTestingPage } from './user-event/testing/user-event.testing';
+
+export const SOCIAL_TESTING_PAGES: TestingPage[] = [
+  {label: 'Social components', divider: true},
+  {label: 'User event', page: '/testing/social/user-event'},
+  {label: 'Job progression', page: '/testing/social/job-progression'}
+];
+
+const routes: Routes = [
+  {
+    path: 'job-progression',
+    pathMatch: 'full',
+    component: JobProgressionTestingPage
+  },
+  {
+    path: 'user-event',
+    pathMatch: 'full',
+    component: UserEventTestingPage
+  },
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    RouterModule.forChild(routes),
+
+    JobTestingModule,
+    UserEventTestingModule
+  ],
+})
+export class SocialTestingModule {}

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

@@ -0,0 +1,16 @@
+<button
+  mat-icon-button
+  [title]="titleI18n | translate"
+  [disabled]="disabled"
+  *ngIf="visible"
+  (click)="showList($event)"
+>
+  <mat-icon
+    [matBadge]="countChanges | async"
+    matBadgeColor="accent"
+    matBadgeSize="small"
+    matBadgePosition="above after"
+  >notifications
+  </mat-icon>
+</button>
+

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

@@ -0,0 +1,108 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Optional} from '@angular/core';
+import {Observable, of} from 'rxjs';
+import { PopoverController } from '@ionic/angular';
+import { IUserEventService, APP_USER_EVENT_SERVICE } 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';
+
+@Component({
+  selector: 'app-user-event-notification-icon',
+  templateUrl: './user-event-notification.icon.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UserEventNotificationIcon implements OnInit, OnDestroy {
+
+  @Input() debug = false;
+  @Input() titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
+  @Input() disabled = false;
+  @Input() filter: any = null;
+  @Input() autoHide: boolean;
+  @Input() headerActions: IUserEventAction[];
+  @Input() footerActions: IUserEventAction[];
+
+  visible: boolean;
+
+  get countChanges(): Observable<number> {
+    if (!this.userEventService) return of();
+    return this.userEventService
+      .countSubject
+      .pipe(
+        tap(value => {
+          const visible = !this.autoHide || value > 0;
+          if (this.visible !== visible) {
+            this.visible = visible;
+            this.cd.markForCheck();
+          }
+        }),
+        map(value => value === 0 ? undefined : value)
+      );
+  }
+
+  private _logPrefix = '[user-event-notification] ';
+  private _readEvent = new EventEmitter<IUserEvent<any>>();
+  private _readEvents = new EventEmitter<IUserEvent<any>[]>();
+
+  constructor(
+    @Optional() @Inject(APP_USER_EVENT_SERVICE) public userEventService: IUserEventService<IUserEvent<any>, IUserEventFilter<any>>,
+    protected accountService: AccountService,
+    protected popoverController: PopoverController,
+    private cd: ChangeDetectorRef
+  ) { }
+
+  async ngOnInit() {
+
+    if (isNil(this.userEventService)) {
+      console.warn(`${this._logPrefix}No service injected`);
+      this.disabled = true;
+      this.visible = false;
+      return;
+    }
+
+    this.visible = 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);
+    });
+  }
+
+  async showList(event: Event) {
+    // Reset count
+    this.userEventService.resetCount();
+
+    const popover = await this.popoverController.create({
+      component: UserEventNotificationList,
+      componentProps: <UserEventNotificationListOptions>{
+        debug: this.debug,
+        titleI18n: this.titleI18n,
+        readEvent: this._readEvent,
+        readEvents: this._readEvents,
+        filter: this.filter,
+        headerActions: this.headerActions,
+        footerActions: this.footerActions,
+      },
+      backdropDismiss: true,
+      keyboardClose: true,
+      event,
+      translucent: true,
+      cssClass: 'popover-large popover-notifications'
+    });
+    await popover.present();
+  }
+
+  ngOnDestroy(): void {
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Destroying`);
+    }
+  }
+}

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

@@ -0,0 +1,135 @@
+<ion-content>
+  <ion-list class="ion-list-popover">
+
+    <ion-row class="ion-list-header column">
+      <ion-col>
+        <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>
+
+    <ion-item
+      *ngFor="let item of $items | async; trackBy: trackByFn; last as last"
+      [lines]="last ? 'none' : undefined"
+      [class.unread]="!item.readDate"
+      [class.tappable]="item.actions|arrayFilter:isDefaultAction|isNotEmptyArray"
+      (click)="click($event, item)">
+
+      <ion-avatar slot="start">
+
+        <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">
+            <p [class.unread]="!item.readDate" [innerHTML]="item.message"></p>
+          </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 -->
+    <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,287 @@
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Inject,
+  InjectionToken,
+  Input,
+  OnDestroy,
+  OnInit,
+  Optional,
+  Output,
+  QueryList,
+  ViewChild,
+  ViewChildren
+} from '@angular/core';
+import {IUserEvent, IUserEventFilter, IUserEventAction} from '../user-event.model';
+import {BehaviorSubject, Subscription} from 'rxjs';
+import {IonContent, IonItem, PopoverController} from '@ionic/angular';
+import {IUserEventService, APP_USER_EVENT_SERVICE} 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, 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> {
+
+  @Input() debug = false;
+  @Input() mobile: boolean;
+  @Input() titleI18n: string;
+  @Input() sortBy = 'creationDate';
+  @Input() sortDirection: SortDirection = 'desc';
+  @Input() filter: Partial<F>;
+  @Input() enableInfiniteScroll = true;
+  @Input() infiniteScrollThreshold: string;
+  @Input() headerActions: IUserEventAction[];
+  @Input() footerActions: IUserEventAction[];
+
+  @Input() set pageSize(value: number) {
+    if (value > 0 && value !== this._$pageSize.value) this._$pageSize.next(value);
+  }
+
+  get pageSize(): number {
+    return this._$pageSize.value;
+  }
+
+  @Output() readEvent: EventEmitter<E>;
+  @Output() readEvents: EventEmitter<E[]>;
+
+  @ViewChild(IonContent) ionContent: IonContent;
+  @ViewChildren(IonItem) ionItems: QueryList<IonItem>;
+
+
+  get canFetchMore(): boolean {
+    return this.enableInfiniteScroll && !!this._fetchMoreFn;
+  }
+
+  fetchingMore = false;
+  $items = new BehaviorSubject<E[]>(undefined);
+  $itemCount = new BehaviorSubject<number>(undefined);
+
+  protected _subscriptions = new Subscription();
+  protected _fetchMoreFn: FetchMoreFn<LoadResult<E>>;
+  protected _fetchMoreSubscription: Subscription;
+  protected _$pageSize = new BehaviorSubject<number>(20);
+  protected _panelElement: HTMLElement = null;
+
+  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 || [])
+            ]);
+
+            // 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();
+  }
+
+  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) {
+       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.dismiss();
+      if (res instanceof Promise) await res;
+    }
+    catch(err) {
+      console.error(err);
+    }
+  }
+
+  dismiss() {
+    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;
+    }
+  }
+
+  trackByFn(index: number, item: E) {
+    return item.id;
+  }
+
+  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;
+  }
+}