@sumaris-net/ngx-components 18.12.0 → 18.12.2

package/src/app/social/message/message.service.ts

@@ -1,104 +0,0 @@
-import { Inject, Injectable, Optional } from '@angular/core';
-import { gql } from 'apollo-angular';
-import { SocialErrorCodes } from '../social.errors';
-import { GraphqlService } from '../../core/graphql/graphql.service';
-import { ModalController, ToastController } from '@ionic/angular';
-import { TranslateService } from '@ngx-translate/core';
-import { BaseGraphqlService } from '../../core/services/base-graphql-service.class';
-import { Environment, ENVIRONMENT } from '../../../environments/environment.class';
-import { Message, MessageFilter } from './message.model';
-import { MINIFY_ENTITY_FOR_POD } from '../../core/services/model/referential.model';
-import { ShowToastOptions, Toasts } from '../../shared/toast/toasts';
-import { MessageModal, MessageModalOptions } from './message.modal';
-
-const Mutations = {
-  send: gql`
-    mutation SendMessage($data: MessageVOInput) {
-      done: sendMessage(message: $data)
-    }
-  `,
-};
-
-@Injectable({ providedIn: 'root' })
-export class MessageService extends BaseGraphqlService<Message, MessageFilter> {
-  constructor(
-    protected graphql: GraphqlService,
-    protected translate: TranslateService,
-    protected modalCtrl: ModalController,
-    protected toastController: ToastController,
-    @Optional() @Inject(ENVIRONMENT) protected environment: Environment
-  ) {
-    super(graphql, environment);
-
-    // For DEV only
-    this._debug = !environment.production;
-  }
-
-  /**
-   * Send a message to recipient(s)
-   *
-   * @param entity
-   * @param opts
-   */
-  async send(entity: Message, opts?: { showToast?: boolean }): Promise<boolean> {
-    // Transform into json
-    const data = entity.asObject(MINIFY_ENTITY_FOR_POD);
-
-    const now = Date.now();
-    if (this._debug) console.debug(`[message-service] Sending message...`);
-
-    try {
-      const { done } = await this.graphql.mutate<{ done: boolean }>({
-        mutation: Mutations.send,
-        variables: { data },
-        error: { code: SocialErrorCodes.SEND_MESSAGE_ERROR, message: 'SOCIAL.ERROR.SEND_MESSAGE_ERROR' },
-      });
-
-      if (this._debug) console.debug(`[message-service] Send message [OK] in ${Date.now() - now}ms`);
-
-      if (done && (!opts || opts.showToast !== false)) {
-        await this.showToast({ type: 'info', message: 'SOCIAL.INFO.MESSAGE_SENT' });
-      }
-      return done;
-    } catch (err) {
-      const error = (err && err.message) || err;
-      console.error(error);
-
-      // Show error
-      if (!opts || opts.showToast !== false) {
-        const message = error || 'SOCIAL.ERROR.SEND_MESSAGE_ERROR';
-        await this.showToast({ type: 'error', message });
-      }
-      return false;
-    }
-  }
-
-  async openComposeModal(options: MessageModalOptions & { showToast?: boolean }): Promise<any> {
-    const hasTopModal = !!(await this.modalCtrl.getTop());
-    const modal = await this.modalCtrl.create({
-      component: MessageModal,
-      componentProps: options,
-      cssClass: hasTopModal && 'stack-modal',
-    });
-
-    // Open the modal
-    await modal.present();
-
-    // On dismiss
-    const { data } = await modal.onDidDismiss();
-    if (!data || !(data instanceof Message)) return true; // CANCELLED
-
-    // Send message
-    return await this.send(data, { showToast: options?.showToast });
-  }
-
-  /* -- protected methods -- */
-
-  protected async showToast(opts: ShowToastOptions) {
-    return Toasts.show(this.toastController, this.translate, {
-      type: 'info',
-      message: 'SOCIAL.INFO.MESSAGE_SENT',
-      ...opts,
-    });
-  }
-}

package/src/app/social/social.errors.ts

@@ -1,10 +0,0 @@
-export const SocialErrorCodes = {
-  LOAD_USER_EVENTS_ERROR: 50000,
-  SAVE_USER_EVENT_ERROR: 50001,
-  COUNT_USER_EVENT_ERROR: 50002,
-  SEND_MESSAGE_ERROR: 50003,
-  SUBSCRIBE_USER_EVENTS_ERROR: 50005,
-
-  SUBSCRIBE_JOB_PROGRESSION_ERROR: 50010,
-  LOAD_JOB_PROGRESSIONS_ERROR: 50011,
-};

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

@@ -1,23 +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,33 +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,17 +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"
-    aria-hidden="false"
-  >
-    notifications
-  </mat-icon>
-</button>

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

@@ -1,112 +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 { 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';
-
-@Component({
-  selector: 'app-user-event-notification-icon',
-  templateUrl: './user-event-notification.icon.html',
-  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>[]>();
-
-  @Input() debug = false;
-  @Input() titleI18n = 'SOCIAL.USER_EVENT.NOTIFICATION.TITLE';
-  @Input() disabled = false;
-  @Input() filter: any = null;
-  @Input() autoHide: boolean = false;
-  @Input() headerActions: IUserEventAction[];
-  @Input() footerActions: IUserEventAction[];
-
-  protected visible: boolean;
-  protected readonly countChanges$: Observable<number>;
-
-  constructor(
-    @Optional() @Inject(APP_USER_EVENT_SERVICE) public userEventService: IUserEventService<IUserEvent<any>, IUserEventFilter<any>>,
-    protected accountService: AccountService,
-    protected popoverController: PopoverController,
-    private cd: ChangeDetectorRef
-  ) {
-    this.countChanges$ = !this.userEventService
-      ? of()
-      : this.userEventService.countSubject.pipe(
-          tap((value) => {
-            const visible = !this.autoHide || value > 0;
-            this.setVisible(visible);
-          }),
-          map((value) => (value === 0 ? undefined : value))
-          // FIXME: enable if zone lesse in timer
-          //tap(_ => this.cd.detectChanges())
-        );
-  }
-
-  async ngOnInit() {
-    if (isNil(this.userEventService)) {
-      console.warn(`${this._logPrefix}No service injected`);
-      this.disabled = true;
-      this.setVisible(false);
-      return;
-    }
-
-    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) {
-    // 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();
-  }
-
-  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,142 +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">
-        <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 -->
-    <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%;
-}