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

package/src/app/social/job/testing/job-progression.testing.service.ts

@@ -0,0 +1,60 @@
+import {Injectable} from '@angular/core';
+import {IJobProgressionService} from '../progression/job-progression.service';
+import {FetchPolicy} from '@apollo/client/core';
+import {BehaviorSubject, interval, Observable, of} from 'rxjs';
+import {JobProgression} from '../progression/job-progression.model';
+import {map, take} from 'rxjs/operators';
+
+@Injectable()
+export class JobProgressionTestService implements IJobProgressionService {
+
+  private jobsSubject = new BehaviorSubject<JobProgression[]>([]);
+
+  addJob(id: number, job?: JobProgression) {
+    const exists = this.jobsSubject.value.some(j => j.id === id);
+    if (!exists) {
+      job = job || new JobProgression(id);
+      this.jobsSubject.next([...this.jobsSubject.value, job]);
+    }
+  }
+
+  removeJob(id: number) {
+    const jobs = this.jobsSubject.value;
+    const index = jobs.findIndex(j => j.id === id);
+    if (index !== -1) {
+      jobs.splice(index, 1);
+      this.jobsSubject.next(jobs);
+    }
+  }
+
+  watchAll(): Observable<JobProgression[]> {
+    return this.jobsSubject.asObservable();
+  }
+
+  listenChanges(id: number, options?: { interval?: number; fetchPolicy?: FetchPolicy }): Observable<JobProgression> {
+
+    return interval(100).pipe(
+      take(111),
+      map(value => {
+        if (value <= 10) {
+          return <JobProgression>{
+            id: id,
+            name: `Job #${id}`,
+            current: 0,
+            total: 0,
+            message: `Progression pending`
+          };
+        }
+        value = value - 10;
+        return <JobProgression>{
+          id: id,
+          name: `Job #${id}`,
+          current: value,
+          total: 100,
+          message: `Progression ${value}/100`
+        };
+      })
+    );
+  }
+
+}

package/src/app/social/job/testing/job-progression.testing.ts

@@ -0,0 +1,51 @@
+import {Component, Inject, ViewChild} from '@angular/core';
+import {JobProgressionIcon, JobProgressionOptions} from '../progression/job-progression.icon';
+import {JobProgression} from '../progression/job-progression.model';
+import {APP_JOB_PROGRESSION_SERVICE, IJobProgressionService} from '../progression/job-progression.service';
+
+@Component({
+  selector: 'job-progression-testing',
+  templateUrl: 'job-progression.testing.html'
+})
+export class JobProgressionTestingPage {
+
+  @ViewChild('icon') jobProgressionIcon: JobProgressionIcon;
+
+  jobId = 0;
+  job: JobProgression = null;
+  options = <JobProgressionOptions>{
+    autoHide: true
+  };
+
+  constructor(
+    @Inject(APP_JOB_PROGRESSION_SERVICE) protected jobProgressionService: IJobProgressionService) {
+  }
+
+  incrementJob(value: number) {
+    this.job = this.job || this.createJob();
+    this.job.current += value || 0;
+    this.job.message = `Fake progression (very long message very long message very long message very long message) ${this.job.current}/100`
+
+    if (this.job.current > this.job.total) {
+      this.jobProgressionService.removeJob(this.job.id);
+      this.job.current = 0;
+      this.job = null; // Forget the job
+    }
+    this.jobProgressionIcon.updateValue();
+  }
+
+  addJob() {
+    this.job = this.createJob();
+  }
+
+  private createJob(): JobProgression {
+    const job = new JobProgression();
+    job.id = ++this.jobId;
+    job.name = 'test';
+    job.current = 0;
+    job.total = 100;
+    this.jobProgressionService.addJob(job.id, job);
+    return job;
+  }
+}
+

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { JobProgressionTestingPage } from './job-progression.testing';
+import { SharedModule } from '../../../shared/shared.module';
+import { JobModule } from '../job.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    TranslateModule.forChild(),
+    SharedModule,
+    JobModule
+  ],
+  declarations: [
+    JobProgressionTestingPage
+  ],
+  exports: [
+    JobProgressionTestingPage
+  ]
+})
+export class JobTestingModule {}

package/src/app/social/message/message.form.html

@@ -0,0 +1,60 @@
+
+
+<form [formGroup]="form" class="form-container">
+
+  <!-- type -->
+  <mat-form-field *ngIf="canSelectType">
+    <mat-select formControlName="type" [placeholder]="'SOCIAL.MESSAGE.TYPE'|translate">
+      <mat-option *ngFor="let item of types" [value]="item.id">
+        <ion-icon [name]="item.icon"></ion-icon>
+        {{ item.label |translate }}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+
+  <!-- Recipients -->
+  <mat-chips-field *ngIf="(form.controls.type.valueChanges|async) !== 'FEED'"
+                   formControlName="recipients"
+                   [placeholder]="'SOCIAL.MESSAGE.RECIPIENTS'|translate"
+                   [config]="autocompleteFields.recipients"
+                   [equals]="isSamePerson">
+  </mat-chips-field>
+
+  <!-- Subject -->
+  <mat-form-field>
+    <input matInput type="text"
+           [placeholder]="'SOCIAL.MESSAGE.SUBJECT'|translate"
+           formControlName="subject"
+           autocomplete="off"
+           required>
+    <mat-error *ngIf="form.controls.subject.hasError('required')" translate>ERROR.FIELD_REQUIRED</mat-error>
+    <mat-error *ngIf="form.controls.subject.hasError('minlength')">
+      {{ 'ERROR.FIELD_MIN_LENGTH_COMPACT'|translate }}
+    </mat-error>
+    <mat-error *ngIf="form.controls.subject.hasError('maxlength')">
+      {{ 'ERROR.FIELD_MAX_LENGTH_COMPACT'|translate }}
+    </mat-error>
+    <mat-hint *ngIf="subjectMaxLength" align="end">
+      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.subject.value?.length || 0, max: subjectMaxLength } }}
+    </mat-hint>
+  </mat-form-field>
+
+  <!-- Body -->
+  <mat-form-field floatLabel="never">
+    <textarea matInput type="text"
+              [placeholder]="'SOCIAL.MESSAGE.BODY_HELP'|translate"
+              formControlName="body"
+              [class.fixed-height]="!bodyAutoHeight"
+              [cdkTextareaAutosize]="bodyAutoHeight"
+              (keydown.control.enter)="doSubmit($event)"
+    >
+    </textarea>
+    <mat-error *ngIf="form.controls.body.hasError('maxlength')">
+      {{ 'ERROR.FIELD_MAX_LENGTH' | translate: form.controls.body.errors.maxlength }}
+    </mat-error>
+    <mat-hint *ngIf="bodyMaxLength" align="end">
+      {{ 'INFO.TEXT_PROGRESS' | translate: { current: form.controls.body.value?.length || 0, max: bodyMaxLength } }}
+    </mat-hint>
+  </mat-form-field>
+
+</form>

package/src/app/social/message/message.form.scss

@@ -0,0 +1,6 @@
+textarea.fixed-height {
+  height: 11.5em; // ~ 10 lines
+}
+textarea {
+  min-height: 11.5em; // ~ 10 lines
+}

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

@@ -0,0 +1,79 @@
+import {ChangeDetectionStrategy, ChangeDetectorRef, Component, Injector, Input, OnInit} from '@angular/core';
+import {UntypedFormBuilder, Validators} from '@angular/forms';
+import {Message, MessageTypeList, MessageTypes} from './message.model';
+import {AppForm} from '../../core/form/form.class';
+import {StatusIds} from '../../core/services/model/model.enum';
+import {Person, PersonUtils} from '../../core/services/model/person.model';
+import {SuggestFn} from '../../shared/services/entity-service.class';
+import {PersonFilter} from '../../admin/services/filter/person.filter';
+import {EntityUtils} from '../../core/services/model/entity.model';
+import {IStatus} from '../../core/services/model/referential.model';
+
+@Component({
+  selector: 'app-message-form',
+  templateUrl: './message.form.html',
+  styleUrls: ['./message.form.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MessageForm extends AppForm<Message> implements OnInit {
+
+  readonly mobile: boolean;
+
+  @Input() suggestFn: SuggestFn<Person, PersonFilter>;
+  @Input() subjectMinLength = 5;
+  @Input() subjectMaxLength = 255;
+  @Input() bodyMaxLength = 2000;
+  @Input() bodyAutoHeight = true;
+  @Input() canSelectType: boolean = false;
+
+  types = MessageTypeList;
+
+  constructor(
+    injector: Injector,
+    private formBuilder: UntypedFormBuilder,
+    private readonly cd: ChangeDetectorRef
+  ) {
+    super(injector);
+    this.mobile = this.settings.mobile;
+  }
+
+
+  ngOnInit() {
+
+    this.setForm(
+      this.formBuilder.group({
+        type: [MessageTypes.INBOX_MESSAGE, Validators.required],
+        recipients: [null, Validators.required],
+        subject: [null, this.subjectMaxLength
+          ? Validators.compose([Validators.required, Validators.minLength(this.subjectMinLength), Validators.maxLength(this.subjectMaxLength)])
+          : Validators.required],
+        body: [null, this.bodyMaxLength
+          ? Validators.compose([Validators.maxLength(this.bodyMaxLength)])
+          : Validators.required]
+      })
+    );
+
+    const personAttributes = this.settings.getFieldDisplayAttributes('person', ['lastName', 'firstName', 'department.name'])
+    this.registerAutocompleteField('recipients', {
+      showAllOnFocus: false,
+      suggestFn: this.suggestFn,
+      filter: {
+        statusIds: [StatusIds.TEMPORARY, StatusIds.ENABLE]
+      },
+      attributes: personAttributes,
+      displayWith: PersonUtils.personToString,
+      multiple: true,
+      mobile: this.mobile
+    });
+  }
+
+
+  isSamePerson(o1: Person, o2: Person): boolean {
+    return EntityUtils.equals(o1, o2, 'id');
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+}
+

package/src/app/social/message/message.modal.html

@@ -0,0 +1,65 @@
+<ion-header>
+  <ion-toolbar color="secondary">
+    <ion-buttons slot="start">
+      <ion-button class="back-button" (click)="cancel($event)" visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="arrow-back"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+
+    <ion-title>
+      {{'SOCIAL.MESSAGE.NEW.TITLE' | translate}}
+    </ion-title>
+
+    <ion-buttons slot="end">
+
+      <ion-button class="back-button" (click)="doSubmit($event)"
+                  [disabled]="!form.valid"
+                  visible-xs visible-sm visible-mobile>
+        <ion-icon slot="icon-only" name="checkmark"></ion-icon>
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+</ion-header>
+
+
+<ion-content class="ion-padding" >
+
+  <ion-item *ngIf="form.error" visible-xs visible-sm visible-mobile lines="none">
+    <ion-icon color="danger" slot="start" name="alert-circle"></ion-icon>
+    <ion-label color="danger" class="error" [innerHTML]="form.error|translate"></ion-label>
+  </ion-item>
+
+  <app-message-form #form (onSubmit)="doSubmit($event)"
+                    (onCancel)="cancel($event)"
+                    [canSelectType]="canSelectType"
+                    [suggestFn]="suggestFn">
+  </app-message-form>
+
+</ion-content>
+
+
+<ion-footer hidden-xs hidden-sm hidden-mobile>
+
+  <ion-toolbar>
+
+    <ion-row class="ion-no-padding" nowrap>
+      <ion-col></ion-col>
+
+      <!-- buttons -->
+      <ion-col size="auto">
+        <ion-button fill="clear" color="dark" (click)="cancel($event)">
+          <ion-label translate>COMMON.BTN_CANCEL</ion-label>
+        </ion-button>
+
+        <ion-button [fill]="form.invalid ? 'clear' : 'solid'"
+                    [disabled]="form.loading || form.invalid"
+                    (keyup.enter)="doSubmit($event)"
+                    (click)="doSubmit($event)" color="tertiary">
+          <ion-label translate>COMMON.BTN_SEND</ion-label>
+        </ion-button>
+      </ion-col>
+    </ion-row>
+
+
+  </ion-toolbar>
+</ion-footer>

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

@@ -0,0 +1,118 @@
+import {AfterViewInit, ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnInit, ViewChild} from '@angular/core';
+
+import {ModalController} from '@ionic/angular';
+import {Message, MessageTypes} from './message.model';
+import {Person} from '../../core/services/model/person.model';
+import {SuggestFn} from '../../shared/services/entity-service.class';
+import {PersonFilter} from '../../admin/services/filter/person.filter';
+import {LocalSettingsService} from '../../core/services/local-settings.service';
+import {MessageForm} from './message.form';
+import {firstNotNilPromise} from '../../shared/observables';
+import {AppFormUtils} from '../../core/form/form.utils';
+import {toBoolean} from '../../shared/functions';
+import {AccountService} from '../../core/services/account.service';
+
+export interface MessageModalOptions {
+  suggestFn: SuggestFn<Person, PersonFilter>;
+  data?: Message;
+  canSelectType?: boolean;
+}
+
+@Component({
+  selector: 'app-message-modal',
+  templateUrl: './message.modal.html',
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class MessageModal implements OnInit, AfterViewInit, MessageModalOptions {
+
+  readonly mobile: boolean;
+
+  @Input() suggestFn: SuggestFn<Person, PersonFilter>;
+
+  @Input() data: Message;
+
+  @Input() canSelectType: boolean;
+
+  @ViewChild('form', { static: true }) private form: MessageForm;
+
+  constructor(
+    protected settings: LocalSettingsService,
+    protected viewCtrl: ModalController,
+    protected accountService: AccountService,
+    protected cd: ChangeDetectorRef
+  ) {
+    this.mobile = this.settings.mobile;
+  }
+
+  ngOnInit() {
+    this.canSelectType = toBoolean(this.canSelectType, this.accountService.isAdmin());
+  }
+
+  ngAfterViewInit() {
+    this.form.markAsReady({emitEvent: false});
+    if (this.data) {
+      this.data.type = this.data.type || MessageTypes.INBOX_MESSAGE;
+      this.form.setValue(this.data);
+    }
+    this.form.markAsLoaded();
+    this.form.enable();
+  }
+
+  cancel(event?: Event) {
+    this.viewCtrl.dismiss();
+  }
+
+  async doSubmit(event?: Event): Promise<any> {
+    if (this.form.disabled) return;
+    if (!this.form.valid) {
+
+      await AppFormUtils.waitWhilePending(this.form);
+
+      if (this.form.invalid) {
+        AppFormUtils.logFormErrors(this.form.form, '[message-modal] ');
+        this.form.markAllAsTouched();
+        return;
+      }
+    }
+    this.markAsLoading();
+
+    try {
+      const data = this.form.value;
+
+      // Disable the form
+      this.form.disable();
+
+      const entity = Message.fromObject(data)
+
+      return this.viewCtrl.dismiss(entity);
+    }
+    catch (err) {
+      this.form.error = err && err.message || err;
+      this.markAsLoaded();
+
+      // Enable the form
+      this.form.enable();
+
+      // Reset form error on next changes
+      firstNotNilPromise(this.form.form.valueChanges).then(() => {
+        this.form.error = null;
+        this.markForCheck();
+      });
+
+      return;
+    }
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  protected markAsLoading(opts?: {emitEvent?: boolean}) {
+    this.form.markAsLoading(opts);
+  }
+
+  protected markAsLoaded(opts?: {emitEvent?: boolean}) {
+    this.form.markAsLoaded(opts);
+  }
+}
+

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

@@ -0,0 +1,81 @@
+import {EntityClass} from '../../core/services/model/entity.decorators';
+import {Entity, EntityAsObjectOptions} from '../../core/services/model/entity.model';
+import {StoreObject} from '@apollo/client/core';
+import {EntityFilter} from '../../core/services/model/filter.model';
+import {FilterFn} from '../../shared/services/entity-service.class';
+import {Person} from '../../core/services/model/person.model';
+import {IReferentialRef, IStatus} from '../../core/services/model/referential.model';
+
+export const MessageTypes = {
+  INBOX_MESSAGE: 'INBOX_MESSAGE',
+  EMAIL: 'EMAIL',
+  FEED: 'FEED',
+}
+export const MessageTypeList = Object.freeze([
+  {
+    id: MessageTypes.INBOX_MESSAGE,
+    icon: 'notifications',
+    label: 'SOCIAL.MESSAGE.TYPE_ENUM.INBOX_MESSAGE'
+  },
+  {
+    id: MessageTypes.EMAIL,
+    icon: 'mail',
+    label: 'SOCIAL.MESSAGE.TYPE_ENUM.EMAIL'
+  },
+  {
+    id: MessageTypes.FEED,
+    icon: 'paper',
+    label: 'SOCIAL.MESSAGE.TYPE_ENUM.FEED'
+  }
+]);
+
+// @dynamic
+@EntityClass({typename: 'MessageVO'})
+export class Message extends Entity<Message>{
+
+  static fromObject: (source: any, opts?: any) => Message;
+
+  type: string;
+  issuer: Person;
+  recipients: Person[];
+  subject: string;
+  body: string;
+
+  constructor() {
+    super();
+  }
+
+  fromObject(source: any, opts?: any) {
+    super.fromObject(source, opts);
+    this.type = source.type;
+    this.issuer = source.issuer && Person.fromObject(source.issuer);
+    this.recipients = source.recipients && source.recipients.map(Person.fromObject);
+    this.subject = source.subject;
+    this.body = source.body;
+  }
+
+  asObject(opts?: EntityAsObjectOptions): StoreObject {
+    const target = super.asObject(opts);
+    target.recipients = this.recipients && this.recipients.map(p => p.asObject(opts));
+    return target;
+  }
+}
+
+
+// @dynamic
+@EntityClass({typename: 'MessageFilterVO'})
+export class MessageFilter extends EntityFilter<MessageFilter, Message> {
+
+  static fromObject: (source: any, opts?: any) => MessageFilter;
+
+
+  fromObject(source: any, opts?: any) {
+    super.fromObject(source, opts);
+  }
+
+  protected buildFilter(): FilterFn<Message>[] {
+    const filterFns = super.buildFilter();
+
+    return filterFns;
+  }
+}

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

@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CoreModule } from '../../core/core.module';
+import { SharedModule } from '../../shared/shared.module';
+import { MessageModal } from './message.modal';
+import { MessageForm } from './message.form';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CoreModule,
+    SharedModule
+  ],
+  declarations: [
+    MessageModal,
+    MessageForm
+  ],
+  exports: [
+    MessageModal
+  ]
+})
+export class MessageModule {}

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

@@ -0,0 +1,88 @@
+import {Inject, Injectable, Optional} from '@angular/core';
+import {gql} from '@apollo/client/core';
+import {SocialErrorCodes} from '../social.errors';
+import {GraphqlService} from '../../core/graphql/graphql.service';
+import {EntityServiceLoadOptions} from '../../shared/services/entity-service.class';
+import {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 {isNotNilOrBlank} from '../../shared/functions';
+
+
+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 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] Send message...`, data);
+
+    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) {
+        let message = error || 'SOCIAL.ERROR.SEND_MESSAGE_ERROR';
+        await this.showToast({type: 'error', message});
+      }
+      return false;
+    }
+  }
+
+  /* -- 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

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