@sumaris-net/ngx-components 18.13.0 → 18.14.0

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

@@ -0,0 +1,300 @@
+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';
+import { LocalSettingsService } from '../../../core/services/local-settings.service';
+
+@Component({
+  selector: 'job-progression-testing',
+  templateUrl: 'user-event.testing.html',
+})
+export class UserEventTestingPage implements OnDestroy {
+  private _timerSubscription: Subscription;
+
+  protected mobile: boolean;
+  protected popoverHeaderActions: IUserEventAction[] = [];
+  protected modalHeaderActions: IUserEventAction[] = [];
+  protected footerActions: IUserEventAction[] = [];
+
+  @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 settings: LocalSettingsService,
+    protected translateService: TranslateService
+  ) {
+    this.mobile = settings.mobile;
+    this.popoverHeaderActions = [{ name: 'SOCIAL.USER_EVENT.NOTIFICATION.SHOW_ALL', executeAction: () => this.showNotificationModal() }];
+    this.footerActions = [{ name: 'MENU.LOCAL_SETTINGS', executeAction: () => this.openSettings() }];
+    userEventService.registerListener({
+      accept: (_: UserEventTest) => true,
+      onReceived: (userEvent: UserEventTest) => {
+        this.customize(userEvent);
+        return userEvent;
+      },
+    });
+    userEventService.registerListener({
+      accept: (userEvent: UserEventTest) => userEvent.level === 'DEBUG',
+      onRead: (_: 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: (_) => {
+              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: (_) => {
+              this.showMessage('action 1');
+            },
+          },
+          <IUserEventAction>{
+            name: 'click here 2',
+            iconRef: {
+              matIcon: 'settings_applications',
+              color: 'secondary',
+            },
+            executeAction: (_) => {
+              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 % 7) {
+      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;
+      case 6:
+        this.replaceLastEvent();
+        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: (_) => {
+              this.showMessage('default action');
+            },
+          },
+        ],
+      })
+    );
+  }
+
+  protected showMessage(text: string): Promise<void> {
+    return Alerts.showError(text, this.alertController, this.translateService);
+  }
+
+  protected showNotificationModal() {
+    this.notification.showList(null, { style: 'modal', headerActions: [] });
+  }
+
+  protected openSettings() {
+    this.router.navigateByUrl('/settings');
+  }
+
+  protected replaceLastEvent() {
+    this.userEventService.replaceLast(
+      UserEventTest.fromObject({
+        issuer: 'system',
+        recipient: 'me',
+        type: 'message',
+        level: 'INFO',
+        message: 'REPLACED',
+        creationDate: DateUtils.moment(),
+      })
+    );
+  }
+}

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

@@ -0,0 +1,55 @@
+import { Moment } from 'moment';
+import { 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 IEntity<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 type UserEventAction = IUserEventAction;

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

@@ -0,0 +1,16 @@
+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';
+import { RxStateModule } from '../../shared/rx-state/rx-state.module';
+import { UserEventNotificationModal } from './notification/user-event-notification.modal';
+
+@NgModule({
+  imports: [CommonModule, SharedModule, AppIconModule, RxStateModule, NgxJdenticonModule],
+  declarations: [UserEventNotificationIcon, UserEventNotificationList, UserEventNotificationModal],
+  exports: [UserEventNotificationIcon, UserEventNotificationModal],
+})
+export class UserEventModule {}