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

package/src/app/social/user-event/testing/user-event.testing.html

@@ -0,0 +1,27 @@
+<ion-toolbar color="primary">
+  <ion-title>User events</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+
+  <app-user-event-notification-icon #notification [debug]="true"></app-user-event-notification-icon>
+
+  <p>
+    <ion-button (click)="addNotification()">Add notification</ion-button>
+    <ion-button (click)="addError()">Add error</ion-button>
+    <ion-button (click)="addWarning()">Add warning</ion-button>
+    <ion-button (click)="addDebug()">Add debug</ion-button>
+  </p>
+  <p>
+    <ion-button (click)="addNotificationWithLink()">Add notification with link</ion-button>
+    <ion-button (click)="addNotificationWithAction()">Add notification with action</ion-button>
+    <ion-button (click)="addNotificationWithDefaultAction()">Add notification with default action</ion-button>
+  </p>
+  <p>
+    <ion-button (click)="addMany()">Add notifications (x20)</ion-button>
+  </p>
+  <p>
+    <ion-button (click)="startTimer()" *ngIf="!timerStarted">Start timer</ion-button>
+    <ion-button (click)="stopTimer()" *ngIf="timerStarted">Stop timer</ion-button>
+  </p>
+</ion-content>

package/src/app/social/user-event/testing/user-event.testing.model.ts

@@ -0,0 +1,146 @@
+// @dynamic
+import {EntityClass} from '../../../core/services/model/entity.decorators';
+import {Entity, EntityAsObjectOptions} from '../../../core/services/model/entity.model';
+import {Moment} from 'moment';
+import {IconRef} from '../../../shared/types';
+import {fromDateISOString, toDateISOString} from '../../../shared/dates';
+import {EventLevel, IUserEvent, IUserEventFilter, IUserEventAction} from '../user-event.model';
+import {EntityFilter} from '../../../core/services/model/filter.model';
+import {FilterFn} from '../../../shared/services/entity-service.class';
+import {isNil, isNotEmptyArray, isNotNil} from '../../../shared/functions';
+import {StoreObject} from '@apollo/client/core';
+
+// @dynamic
+@EntityClass({typename: 'UserEventTestVO'})
+export class UserEventTest extends Entity<UserEventTest> implements IUserEvent<UserEventTest> {
+
+  static fromObject: (source: any, opts?: any) => UserEventTest;
+
+  type: string;
+  level: EventLevel;
+  issuer: string;
+  recipient: string;
+  updateDate: Moment;
+  creationDate: Moment;
+  readDate: Moment;
+
+  message: string | undefined;
+  content: string | any;
+  hash: string;
+  signature: string;
+  readSignature: string;
+
+  avatar?: string;
+  avatarIcon?: IconRef;
+  icon?: IconRef;
+  jobId?: number;
+
+  actions?: IUserEventAction[];
+
+  constructor() {
+    super(UserEventTest.TYPENAME);
+  }
+
+  asObject(opts?: EntityAsObjectOptions): any {
+    const target = super.asObject(opts);
+    target.creationDate = toDateISOString(this.creationDate);
+    target.readDate = toDateISOString(this.readDate);
+
+    // Serialize content
+    if (typeof target.content === 'object') {
+      target.content = JSON.stringify(target.content);
+    }
+
+    delete target.avatar;
+    delete target.avatarIcon;
+    delete target.icon;
+    delete target.actions;
+
+    return target;
+  }
+
+  fromObject(source: any) {
+    Object.assign(this, source); // Copy all properties
+    super.fromObject(source);
+    this.creationDate = fromDateISOString(source.creationDate);
+    this.readDate = fromDateISOString(source.readDate);
+
+    try {
+      // Deserialize content
+      if (typeof source.content === 'string' && source.content.startsWith('{')) {
+        this.content = JSON.parse(source.content);
+      }
+
+      // Deserialize content.context
+      if (this.content && typeof this.content.context === 'string' && this.content.context.startsWith('{')) {
+        this.content.context = JSON.parse(this.content.context);
+      }
+    } catch (err) {
+      console.error('Error during UserEvent deserialization', err);
+    }
+  }
+}
+
+// @dynamic
+@EntityClass({typename: 'UserEventTestFilterVO'})
+export class UserEventTestFilter extends EntityFilter<UserEventTestFilter, UserEventTest> implements IUserEventFilter<UserEventTest> {
+
+  static fromObject: (source: any, opts?: any) => UserEventTestFilter;
+
+  types: string[] = [];
+  levels: EventLevel[] = [];
+  issuers: string[] = [];
+  recipients: string[] = [];
+  startDate: Moment = null;
+  includedIds: number[];
+  excludeRead: boolean = false;
+  jobId: number = null;
+
+  fromObject(source: any, opts?: any) {
+    super.fromObject(source, opts);
+    this.types = source.types || [];
+    this.levels = source.levels || [];
+    this.issuers = source.issuers || [];
+    this.recipients = source.recipients || [];
+    this.startDate = fromDateISOString(source.startDate);
+    this.excludeRead = source.excludeRead || false;
+    this.includedIds = source.includedIds || [];
+    this.jobId = source.jobId;
+  }
+
+  protected buildFilter(): FilterFn<UserEventTest>[] {
+    const filterFns = super.buildFilter();
+
+    if (isNotEmptyArray(this.types)) {
+      filterFns.push(t => this.types.includes(t.type));
+    }
+    if (isNotEmptyArray(this.levels)) {
+      filterFns.push(t => this.levels.includes(t.level));
+    }
+    if (isNotEmptyArray(this.issuers)) {
+      filterFns.push(t => this.issuers.includes(t.issuer));
+    }
+    if (isNotEmptyArray(this.recipients)) {
+      filterFns.push(t => this.recipients.includes(t.recipient));
+    }
+
+    if (isNotNil(this.startDate)) {
+      filterFns.push(t => this.startDate.isSameOrBefore(t.creationDate))
+    }
+    if (isNotEmptyArray(this.includedIds)) {
+      filterFns.push((t) => this.includedIds.includes(t.id));
+    }
+    if (this.excludeRead === true) {
+      filterFns.push(t => isNil(t.readSignature)); // todo or t.signature ?
+    }
+    if (isNotNil(this.jobId)) {
+      filterFns.push(t => this.jobId === t.jobId);
+    }
+    return filterFns;
+  }
+
+  asObject(opts?: EntityAsObjectOptions): StoreObject {
+    const target = super.asObject(opts);
+    return target;
+  }
+}

package/src/app/social/user-event/testing/user-event.testing.module.ts

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../../shared/shared.module';
+import { UserEventModule } from '../user-event.module';
+import { UserEventTestingPage } from './user-event.testing';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    SharedModule,
+    UserEventModule
+  ],
+  declarations: [
+    UserEventTestingPage
+  ],
+  exports: [
+    UserEventTestingPage
+  ]
+})
+export class UserEventTestingModule {}

package/src/app/social/user-event/testing/user-event.testing.service.ts

@@ -0,0 +1,141 @@
+import {Inject, Injectable} from '@angular/core';
+import {AbstractUserEventService, UserEventLoadOptions, UserEventWatchOptions} from '../user-event.service';
+import {BehaviorSubject, Observable, Subject} from 'rxjs';
+import {GraphqlService} from '../../../core/graphql/graphql.service';
+import {AccountService} from '../../../core/services/account.service';
+import {NetworkService} from '../../../core/services/network.service';
+import {TranslateService} from '@ngx-translate/core';
+import {Environment, ENVIRONMENT} from '../../../../environments/environment.class';
+import {FetchPolicy} from '@apollo/client/core';
+import {EntityServiceLoadOptions, LoadResult} from '../../../shared/services/entity-service.class';
+import {SortDirection} from '@angular/material/sort';
+import {EntityUtils} from '../../../core/services/model/entity.model';
+import {map} from 'rxjs/operators';
+import {UserEventTest, UserEventTestFilter} from './user-event.testing.model';
+
+@Injectable()
+export class UserEventTestService extends AbstractUserEventService<UserEventTest, UserEventTestFilter> {
+
+  private $userEvents = new BehaviorSubject<UserEventTest[]>([]);
+  private $newUserEvents = new Subject<UserEventTest[]>();
+
+  constructor(
+    protected graphql: GraphqlService,
+    protected accountService: AccountService,
+    protected network: NetworkService,
+    protected translate: TranslateService,
+    @Inject(ENVIRONMENT) protected environment: Environment
+  ) {
+    super(graphql, accountService, network, translate, {
+      queries: {
+        loadAll: null,
+        loadAllWithContent: null
+      },
+      production: environment?.production
+    });
+  }
+
+
+  fromObject(source: any): UserEventTest {
+    return UserEventTest.fromObject(source);
+  }
+
+  async add(entity: UserEventTest): Promise<UserEventTest> {
+    entity = await this.processUserEvent(entity);
+    entity.id = (this.$userEvents.value?.length || 0) + 1;
+    this.$userEvents.next([
+      entity,
+      ...this.$userEvents.value
+    ]);
+    this._countSubject.next((this._countSubject.value || 0) + 1);
+    this.$newUserEvents.next([entity]);
+    return entity;
+  }
+
+  asFilter(filter: Partial<any>): any {
+    return filter;
+  }
+
+  count(filter: any, options?: { fetchPolicy?: FetchPolicy }): Promise<number> {
+    return Promise.resolve(this.$userEvents.value?.length || 0);
+  }
+
+  delete(entity: any): Promise<any> {
+    return Promise.resolve(undefined);
+  }
+
+  deleteAll(data: any[], opts?: any): Promise<any> {
+    return Promise.resolve(undefined);
+  }
+
+  listenAllChanges(filter: any, options?: UserEventWatchOptions & { interval?: number; fetchPolicy?: FetchPolicy }): Observable<any[]> {
+    return this.$newUserEvents.asObservable();
+  }
+
+  save(entity: any, options?: EntityServiceLoadOptions): Promise<any> {
+
+    const toSave = this.$userEvents.value?.find(value => value.id == entity?.id);
+    Object.assign(toSave, entity);
+
+    return entity;
+  }
+
+  async saveAll(data: any[], opts?: any): Promise<any[]> {
+
+    for (const entity of (data || [])) {
+      await this.save(entity);
+    }
+
+    return this.$userEvents.toPromise();
+  }
+
+  protected defaultRecipient(): any {
+    return this.accountService.isLogin() ? this.accountService.person.pubkey : undefined;
+  }
+
+  watchAll(offset: number, size: number, sortBy?: string, sortDirection?: SortDirection, filter?: Partial<any>, opts?: UserEventWatchOptions): Observable<LoadResult<any>> {
+    return this.$userEvents.pipe(
+      map(userEvents => {
+        let data = (userEvents || []).slice(offset||0, offset + size);
+        const total = this.$userEvents.value?.length || 0;
+
+        const res = <LoadResult<UserEventTest>>{ data, total };
+
+        // Must re-order because of listenChanges result will add new event at the end
+        data = EntityUtils.sort(data, sortBy, sortDirection);
+
+        // Add fetch more
+        const nextOffset = offset + data.length;
+        if (nextOffset < res.total) {
+          res.fetchMore =  (_) => this.loadAll(nextOffset, size, sortBy, sortDirection, filter,
+            {...opts, fetchPolicy: <FetchPolicy>'no-cache'} as unknown as UserEventLoadOptions
+          );
+        }
+
+        return res;
+      })
+    )
+
+  }
+
+  loadAll(offset: number, size: number, sortBy?: string, sortDirection?: SortDirection, filter?: Partial<any>,
+          opts?: UserEventLoadOptions): Promise<LoadResult<any>> {
+    let data = (this.$userEvents.value || []).slice(offset||0, offset + size);
+    const total = this.$userEvents.value?.length || 0;
+
+    const res = <LoadResult<UserEventTest>>{ data, total };
+
+    // Must re-order because of listenChanges result will add new event at the end
+    data = EntityUtils.sort(data, sortBy, sortDirection);
+
+    // Add fetch more
+    const nextOffset = offset + data.length;
+    if (nextOffset < res.total) {
+      res.fetchMore =  (_) => this.loadAll(nextOffset, size, sortBy, sortDirection, filter,
+        {...opts, fetchPolicy: <FetchPolicy>'no-cache'} as unknown as UserEventLoadOptions
+      );
+    }
+
+    return Promise.resolve(res);
+  }
+}

package/src/app/social/user-event/testing/user-event.testing.ts

@@ -0,0 +1,253 @@
+import {Component, Inject, OnDestroy, ViewChild} from '@angular/core';
+import {APP_USER_EVENT_SERVICE} from '../user-event.service';
+import {IUserEventAction} from '../user-event.model';
+import {Router} from '@angular/router';
+import {Alerts} from '../../../shared/alerts';
+import {AlertController} from '@ionic/angular';
+import {TranslateService} from '@ngx-translate/core';
+import {UserEventTestService} from './user-event.testing.service';
+import {UserEventNotificationIcon} from '../notification/user-event-notification.icon';
+import {Subscription, timer} from 'rxjs';
+import {UserEventTest} from './user-event.testing.model';
+import {DateUtils} from '../../../shared/dates';
+
+@Component({
+  selector: 'job-progression-testing',
+  templateUrl: 'user-event.testing.html'
+})
+export class UserEventTestingPage implements OnDestroy{
+
+  private _timerSubscription: Subscription;
+
+  @ViewChild('notification') notification: UserEventNotificationIcon;
+
+  get timerStarted(): boolean {
+    return !!this._timerSubscription;
+  }
+
+  constructor(
+    @Inject(APP_USER_EVENT_SERVICE) protected userEventService: UserEventTestService,
+    protected router: Router,
+    protected alertController: AlertController,
+    protected translateService: TranslateService
+  ) {
+
+    userEventService.registerListener({
+      accept: (userEvent: UserEventTest) => { return true },
+      onReceived: (userEvent: UserEventTest) => {
+        this.customize(userEvent);
+        return userEvent
+      }
+    })
+    userEventService.registerListener({
+      accept: (userEvent: UserEventTest) => { return userEvent.level == "DEBUG" },
+      onRead: (userEvent: UserEventTest) => { this.showMessage("debug message read ")}
+    })
+  }
+
+  ngOnDestroy() {
+    this.stopTimer();
+  }
+
+  protected customize(userEvent: UserEventTest) {
+
+    // Choose avatarIcon
+    switch (userEvent.level) {
+      case 'ERROR':
+        userEvent.avatarIcon = { icon: 'close-outline', color: 'danger' };
+        break;
+      case 'WARNING':
+        userEvent.avatarIcon = { icon: 'warning-outline', color: 'warning' };
+        break;
+      case 'INFO':
+        userEvent.avatarIcon = { icon: 'information-circle-outline' };
+        break;
+      case 'DEBUG':
+        userEvent.avatarIcon = { icon: 'cog', color: "medium" };
+        break;
+    }
+
+    // Choose icon
+    switch (userEvent.type) {
+      case 'message':
+        userEvent.icon = { matIcon: 'inbox', color: 'accent' };
+        break;
+      case 'upload':
+        userEvent.icon = { matIcon: 'file_upload' };
+        break;
+      case 'download':
+        userEvent.icon = { matIcon: 'file_download' };
+        break;
+    }
+
+  }
+
+  addNotification() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'message',
+        level: 'INFO',
+        message: 'message test message test message test message test message test message test message test message test',
+        creationDate: DateUtils.moment(),
+      }
+    ));
+  }
+
+  addError() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'upload',
+        level: 'ERROR',
+        message: 'message error',
+        creationDate: DateUtils.moment(),
+      }
+    ));
+  }
+
+  addWarning() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'download',
+        level: 'WARNING',
+        message: 'message warning',
+        creationDate: DateUtils.moment(),
+      }
+    ));
+  }
+
+  addDebug() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'debug',
+        level: 'DEBUG',
+        message: 'message DEBUG',
+        creationDate: DateUtils.moment(),
+      }
+    ));
+  }
+
+  addNotificationWithLink() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'message',
+        level: 'INFO',
+        message: 'message with link',
+        creationDate: DateUtils.moment(),
+        actions: [<IUserEventAction>{
+          name: 'click here',
+          iconRef: {
+            icon: 'arrow-forward-outline'
+          },
+          executeAction: event => { this.router.navigateByUrl('/') }
+        }]
+      }
+    ));
+  }
+
+  addNotificationWithAction() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'message',
+        level: 'INFO',
+        message: 'message with action',
+        creationDate: DateUtils.moment(),
+        actions: [
+          <IUserEventAction>{
+            name: 'click here',
+            iconRef: {
+              icon: 'arrow-forward-outline',
+              color: 'warning'
+            },
+            executeAction: event => { this.showMessage('action 1') }
+          },
+          <IUserEventAction>{
+            name: 'click here 2',
+            iconRef: {
+              matIcon: 'settings_applications',
+              color: 'secondary'
+            },
+            executeAction: event => { this.showMessage('action 2') }
+        }
+        ]
+      }
+    ));
+  }
+
+  addMany(count?: number) {
+    count = count || 20;
+    for (let i=0; i < count; i++) {
+      this.addRandom(i);
+    }
+  }
+
+  startTimer(period?: number) {
+    this._timerSubscription?.unsubscribe();
+
+    period = period || 1000;
+    let counter = 0;
+
+    this._timerSubscription = timer(period, period)
+      .subscribe(() => {
+        this.addRandom(counter);
+        counter++;
+      });
+  }
+
+  stopTimer() {
+    this._timerSubscription?.unsubscribe();
+    this._timerSubscription = null;
+  }
+
+  addRandom(value: number) {
+    switch (value % 6) {
+      case 0:
+        this.addNotification();
+        break;
+      case 1:
+        this.addError()
+        break;
+      case 2:
+        this.addDebug()
+        break;
+      case 3:
+        this.addNotificationWithLink()
+        break;
+      case 4:
+        this.addNotificationWithAction()
+        break;
+      case 5:
+        this.addNotificationWithDefaultAction()
+        break;
+    }
+  }
+
+  addNotificationWithDefaultAction() {
+    this.userEventService.add(UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'message',
+        level: 'INFO',
+        message: 'message with action',
+        creationDate: DateUtils.moment(),
+        actions: [
+          <IUserEventAction>{
+            default: true,
+            name: 'default',
+            executeAction: event => { this.showMessage('default action') }
+          }
+        ]
+      }
+    ));
+  }
+
+  protected showMessage(text: string): Promise<void> {
+    return Alerts.showError(text, this.alertController, this.translateService);
+  }
+}
+

package/src/app/social/user-event/user-event.model.ts

@@ -0,0 +1,73 @@
+import {Moment} from 'moment';
+import {Entity, IEntity} from '../../core/services/model/entity.model';
+import {IEntityFilter} from '../../core/services/model/filter.model';
+import {AppColors, IconRef} from '../../shared/types';
+
+
+export type EventLevel = 'ERROR' | 'WARNING' | 'INFO' | 'DEBUG';
+
+export interface IUserEvent<
+  E extends Entity<E, ID>,
+  ID = number,
+  U = string,
+  L = EventLevel
+  >
+  extends IEntity<E, ID> {
+
+  issuer: U;
+  recipient: U;
+  type: string;
+  level: L;
+
+  updateDate: Moment;
+  creationDate: Moment;
+  readDate?: Moment;
+
+  message?: string;
+  content?: string | any;
+
+  avatar?: string;
+  avatarIcon?: IconRef;
+  avatarJdenticon?: any;
+  icon?: IconRef;
+
+  jobId?: number;
+
+  actions?: IUserEventAction[];
+}
+
+export interface IUserEventFilter<E extends IUserEvent<E, ID, U, L>,
+  ID = number,
+  U = string,
+  L = EventLevel
+  >
+  extends IEntityFilter<any, E> {
+
+  types: string[];
+  levels: L[];
+  issuers: U[];
+  recipients: U[];
+  startDate: Moment;
+  includedIds: ID[];
+  excludeRead: boolean;
+  jobId?: number;
+}
+
+export interface IUserEventAction {
+
+  name: string | any;
+  title?: string;
+  color?: AppColors;
+  iconRef?: IconRef;
+  default?: boolean;
+
+  executeAction: (event: IUserEvent<any>) => any | Promise<any>;
+
+}
+
+/**
+ * @deprecated use IUserEventAction instead
+ */
+export interface UserEventAction extends IUserEventAction {
+
+}

package/src/app/social/user-event/user-event.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {SharedModule} from '../../shared/shared.module';
+import {UserEventNotificationIcon} from './notification/user-event-notification.icon';
+import {UserEventNotificationList} from './notification/user-event-notification.list';
+import {AppIconModule} from '../../core/icon/icon.module';
+import {NgxJdenticonModule} from 'ngx-jdenticon';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    AppIconModule,
+    NgxJdenticonModule
+  ],
+  declarations: [
+    UserEventNotificationIcon,
+    UserEventNotificationList
+  ],
+  exports: [
+    UserEventNotificationIcon
+  ]
+})
+export class UserEventModule {
+}