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

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

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

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

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

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

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

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