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

package/src/app/shared/version/versions.ts

@@ -0,0 +1,91 @@
+
+const regexp = {
+  POSITIVE_INTEGER: /^\d+$/,
+  VERSION_PART_REGEXP: /^[0-9]+|alpha[0-9]+|beta[0-9]+|rc[0-9]+|[0-9]+-SNAPSHOT$/
+};
+
+
+export class VersionUtils {
+  static compare = compareVersionNumbers;
+  static isCompatible = isVersionCompatible;
+  static isSame = isSameVersion;
+}
+
+/**
+ * Compare two software version numbers (e.g. 1.7.1)
+ * Returns:
+ *
+ *  0 if they're identical
+ *  negative if v1 < v2
+ *  positive if v1 > v2
+ *  Nan if they in the wrong format
+ *
+ *  E.g.:
+ *
+ *  assert(version_number_compare("1.7.1", "1.6.10") > 0);
+ *  assert(version_number_compare("1.7.1", "1.7.10") < 0);
+ *
+ *  "Unit tests": http://jsfiddle.net/ripper234/Xv9WL/28/
+ *
+ *  Taken from http://stackoverflow.com/a/6832721/11236
+ */
+ export function compareVersionNumbers(v1, v2){
+  const v1parts = v1.split('.');
+  const v2parts = v2.split('.');
+
+  // First, validate both numbers are true version numbers
+
+  if (!validateParts(v1parts) || !validateParts(v2parts)) {
+    return NaN;
+  }
+
+  for (let i = 0; i < v1parts.length; ++i) {
+    if (v2parts.length === i) {
+      return 1;
+    }
+
+    if (v1parts[i] === v2parts[i]) {
+      continue;
+    }
+    if (v1parts[i] > v2parts[i]) {
+      return 1;
+    }
+    return -1;
+  }
+
+  if (v1parts.length != v2parts.length) {
+    return -1;
+  }
+
+  return 0;
+}
+
+function validateParts(parts) {
+  for (let i = 0; i < parts.length; i++) {
+    let isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
+    // First part MUST be an integer
+    if (i === 0 && !isNumber) return false;
+    // If not integer, should be 'alpha', 'beta', etc.
+    if (!isNumber) {
+      if (!regexp.VERSION_PART_REGEXP.test(parts[i])) return false;
+      // Remove '-SNAPSHOT', as it should never be in prod
+      parts[i] = parts[i].replace('-SNAPSHOT', '');
+      // Check again if numeric
+      isNumber = regexp.POSITIVE_INTEGER.test(parts[i]);
+    }
+
+    // Convert string to int (need by compare operators)
+    if (isNumber) parts[i] = parseInt(parts[i]);
+  }
+  return true;
+}
+
+export function isVersionCompatible(minVersion, actualVersion): boolean {
+  // DEV ONLY
+  //console.debug(`[http] Checking actual version {${actualVersion}} is compatible with min expected version {${minVersion}}`);
+  return compareVersionNumbers(minVersion, actualVersion) <= 0;
+}
+
+export function isSameVersion(v1, v2): boolean {
+  return compareVersionNumbers(v1, v2) === 0;
+}

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

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { SharedModule } from '../../shared/shared.module';
+import { JobProgressionIcon } from './progression/job-progression.icon';
+import { JobProgressionList } from './progression/job-progression.list';
+import {JobProgressionComponent} from './progression/job-progression.component';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule,
+    TranslateModule.forChild(),
+  ],
+  declarations: [
+    JobProgressionIcon,
+    JobProgressionList,
+    JobProgressionComponent
+  ],
+  exports: [
+    JobProgressionIcon,
+    JobProgressionList,
+    JobProgressionComponent
+  ]
+})
+export class JobModule {}

package/src/app/social/job/progression/job-progression.component.html

@@ -0,0 +1,22 @@
+<ion-item class="ion-item-job-progression">
+  <ion-grid *ngIf="jobProgression" class="ion-no-margin">
+    <ion-row *ngIf="showName" class="name">
+      <ion-col>
+        {{jobProgression.name}}
+      </ion-col>
+    </ion-row>
+    <ion-row class="message">
+      <ion-col>
+        {{jobProgression.message}}
+      </ion-col>
+    </ion-row>
+    <ion-row class="progress-bar">
+      <ion-col>
+        <ion-progress-bar
+          [value]="jobProgression.total > 0 ? jobProgression.current / jobProgression.total : undefined"
+          [type]="jobProgression.total > 0 ? 'determinate' : 'indeterminate'">
+        </ion-progress-bar>
+      </ion-col>
+    </ion-row>
+  </ion-grid>
+</ion-item>

package/src/app/social/job/progression/job-progression.component.scss

@@ -0,0 +1,15 @@
+.ion-item-job-progression {
+  font-size: 0.9em;
+
+  .name {
+  }
+
+  .message {
+    font-style: italic;
+  }
+
+  .progress-bar {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+}

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

@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+import {JobProgression} from './job-progression.model';
+
+@Component({
+  selector: 'app-job-progression-component',
+  templateUrl: './job-progression.component.html',
+  styleUrls: ['./job-progression.component.scss'],
+})
+export class JobProgressionComponent {
+
+  @Input() jobProgression: JobProgression;
+  @Input() showName = true;
+
+  constructor() {
+  }
+
+}

package/src/app/social/job/progression/job-progression.icon.html

@@ -0,0 +1,28 @@
+<button
+  #button
+  mat-icon-button
+  [title]="titleI18n | translate"
+  [disabled]="disabled"
+  *ngIf="visible"
+  (click)="showList($event)"
+>
+  <mat-icon
+    [matBadge]="jobProgressions?.length"
+    [matBadgeHidden]="!jobProgressions?.length"
+    matBadgeColor="accent"
+    matBadgeSize="small"
+    matBadgePosition="above after"
+  >{{ disabled || jobProgressions?.length ? 'schedule' : 'task_alt' }}
+  </mat-icon>
+  <mat-spinner
+    #spinner
+    *ngIf="jobProgressions?.length"
+    class="floating-spinner"
+    [color]="color"
+    [mode]="mode"
+    [value]="value"
+    diameter="30"
+    strokeWidth="3"
+  ></mat-spinner>
+</button>
+

package/src/app/social/job/progression/job-progression.icon.scss

@@ -0,0 +1,5 @@
+.floating-spinner {
+  position: absolute;
+  top: 5px;
+  left: 5px;
+}

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

@@ -0,0 +1,238 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Inject, Input, OnDestroy, OnInit, Optional, Output } from '@angular/core';
+import { ThemePalette } from '@angular/material/core';
+import { ProgressSpinnerMode } from '@angular/material/progress-spinner';
+import { APP_JOB_PROGRESSION_SERVICE, IJobProgressionService } from './job-progression.service';
+import { JobProgression } from './job-progression.model';
+import { Subscription } from 'rxjs';
+import { ObjectMap } from '../../../shared/types';
+import { arraySize, isNil, toBoolean, toNumber } from '../../../shared/functions';
+import { filter, map } from 'rxjs/operators';
+import { PopoverController } from '@ionic/angular';
+import { JobProgressionList, JobProgressionListOptions } from './job-progression.list';
+import {IUserEventAction} from '../../user-event/user-event.model';
+
+export interface JobProgressionOptions {
+  autoHide: boolean;
+  autoHideDelay: number;
+  autoRemove: boolean;
+  autoRemoveDelay: number;
+}
+
+@Component({
+  selector: 'app-job-progression-icon',
+  templateUrl: './job-progression.icon.html',
+  styleUrls: ['./job-progression.icon.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class JobProgressionIcon implements OnInit, OnDestroy {
+
+  @Input() debug = false;
+  @Input() titleI18n = 'SOCIAL.JOB.PROGRESSION.TITLE';
+  @Input() options: JobProgressionOptions;
+  @Input() autoHide: boolean;
+  @Input() headerActions: IUserEventAction[];
+  @Output() jobFinished = new EventEmitter<number>();
+
+  visible: boolean;
+  disabled = true;
+  color: ThemePalette = 'accent';
+  mode: ProgressSpinnerMode = 'determinate';
+  value = 0;
+  jobProgressions: JobProgression[] = [];
+
+  protected autoHideDelay: number;
+  protected autoRemove: boolean;
+  protected autoRemoveDelay: number;
+
+  private _listPopover: HTMLIonPopoverElement;
+  private _subscriptions = new Subscription();
+  private _subscriptionsById: ObjectMap<Subscription> = {};
+  private _logPrefix = '[job-progression] ';
+
+  constructor(
+    @Optional() @Inject(APP_JOB_PROGRESSION_SERVICE) protected jobProgressionService: IJobProgressionService,
+    protected popoverController: PopoverController,
+    protected cd: ChangeDetectorRef
+  ) {
+
+  }
+
+  ngOnInit() {
+    if (isNil(this.jobProgressionService)) {
+      console.warn(`${this._logPrefix}No service injected`);
+    }
+    // parse options
+    this.autoHide = toBoolean(this.autoHide, this.options?.autoHide || false);
+    this.visible = !this.autoHide;
+    this.autoHideDelay = toNumber(this.options?.autoHideDelay, 1000);
+    this.autoRemove = toBoolean(this.options?.autoRemove, true);
+    this.autoRemoveDelay = toNumber(this.options?.autoRemoveDelay, 1000);
+
+    if (this.jobProgressionService) {
+      this._subscriptions.add(
+        this.jobProgressionService.watchAll()
+          .subscribe(items => {
+            (items || []).forEach(item => this.addJob(item.id, item));
+          })
+      );
+    }
+  }
+
+  addJob(id: number, job?: JobProgression) {
+    if (isNil(this.jobProgressionService)) {
+      console.warn(`${this._logPrefix}No service injected. Can't add a job`);
+      return;
+    }
+
+    if (!!this.getProgression(id)) {
+      console.warn(`${this._logPrefix}Job (id=${id}) already present`);
+      return;
+    }
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Add job id=${id}`);
+    }
+    // Adding empty job progression
+    let progression = this.getProgression(id);
+    if (!progression) {
+      progression = job || new JobProgression(id);
+      this.jobProgressions.push(progression);
+    }
+
+    this.disabled = false;
+
+    const sub = this.jobProgressionService.listenChanges(id)
+      .pipe(
+        filter(progression => {
+          if (id !== progression.id) {
+            console.error(`${this._logPrefix}Job progression (id=${progression.id}) doesn't match expected job (id=${id})`);
+            return false;
+          }
+          return true;
+        }),
+        map(progression => {
+          // Ensure visible
+          this.visible = true;
+          // Get current progression object
+          const currentProgression = this.getProgression(id);
+          if (!currentProgression) {
+            // add it if absent
+            this.jobProgressions.push(progression);
+            if (this.debug) {
+              console.debug(`${this._logPrefix}Progression added id=${id}`, progression);
+            }
+          } else {
+            // update current
+            Object.assign(currentProgression, progression);
+            if (this.debug) {
+              console.debug(`${this._logPrefix}Progression updated id=${id}`, progression);
+            }
+          }
+          return progression;
+        })
+      )
+      .subscribe(progression => {
+        // update value
+        this.updateValue();
+
+        // job finished
+        if (progression.total > 0 && progression.current == progression.total) {
+          if (this.debug) {
+            console.debug(`${this._logPrefix}Finished job id=${progression.id}`);
+          }
+          // emit event
+          this.jobFinished.emit(progression.id);
+          if (this.autoRemove) {
+            setTimeout(() => {
+              this.removeJob(progression.id);
+              // If last job
+              if (this.autoHide && !this.jobProgressions?.length) {
+                setTimeout(async () => {
+                  if (this._listPopover) await this._listPopover.dismiss();
+                  this.visible = false;
+                  this.markForCheck();
+                }, this.autoHideDelay);
+              }
+            }, this.autoRemoveDelay);
+          }
+        }
+      });
+
+    this._subscriptionsById[id] = sub;
+    this._subscriptions.add(sub);
+  }
+
+  removeJob(id: number) {
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Remove job id=${id}`);
+    }
+    const sub = this._subscriptionsById[id];
+    if (sub) {
+      this._subscriptions.remove(sub);
+      sub.unsubscribe();
+    }
+    const progression = this.getProgression(id);
+    if (progression) {
+      this.jobProgressions.splice(this.jobProgressions.indexOf(progression), 1);
+    }
+    this.updateValue();
+  }
+
+  getProgression(id: number): JobProgression | undefined {
+    return this.jobProgressions.find(progression => progression.id === id);
+  }
+
+  updateValue() {
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Updating value`);
+    }
+    let value = 0;
+    const nbProgression = arraySize(this.jobProgressions);
+    let allIndeterminate = nbProgression > 0;
+
+    this.jobProgressions.forEach(progression => {
+      const indeterminate = progression.total === 0;
+      allIndeterminate = allIndeterminate && indeterminate;
+      if (!indeterminate) {
+        value = value + progression.current * 100 / progression.total;
+      }
+    });
+
+    this.value = nbProgression > 0 ? value / nbProgression : 0;
+    this.mode = allIndeterminate ? 'indeterminate' : 'determinate';
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Setting value=${this.value}, mode=${this.mode}`);
+    }
+
+    this.markForCheck();
+  }
+
+  async showList(event: Event) {
+    this._listPopover = await this.popoverController.create({
+      component: JobProgressionList,
+      componentProps: <JobProgressionListOptions>{
+        titleI18n: this.titleI18n,
+        jobProgressions: this.jobProgressions,
+        headerActions: this.headerActions,
+      },
+      backdropDismiss: true,
+      keyboardClose: true,
+      event,
+      translucent: true,
+      cssClass: 'popover-large'
+    });
+    await this._listPopover.present();
+    await this._listPopover.onDidDismiss();
+    this._listPopover = undefined;
+  }
+
+  protected markForCheck() {
+    this.cd.markForCheck();
+  }
+
+  ngOnDestroy(): void {
+    if (this.debug) {
+      console.debug(`${this._logPrefix}Destroying`);
+    }
+    this._subscriptions.unsubscribe();
+  }
+}

package/src/app/social/job/progression/job-progression.list.html

@@ -0,0 +1,21 @@
+<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">
+      <ion-text *ngFor="let action of headerActions">
+        <a (click)="executeAction($event, action)" [title]="(action.title || action.name) |translate">{{ action.name | translate }}</a>
+      </ion-text>
+    </ion-col>
+  </ion-row>
+
+  <ion-item *ngIf="!jobProgressions?.length">
+    {{'SOCIAL.JOB.PROGRESSION.EMPTY' | translate}}
+  </ion-item>
+  <ng-container *ngFor="let jobProgression of jobProgressions">
+    <app-job-progression-component [jobProgression]="jobProgression"></app-job-progression-component>
+  </ng-container>
+
+</ion-list>

package/src/app/social/job/progression/job-progression.list.scss

@@ -0,0 +1,17 @@
+:host(.popover-viewport) {
+  overflow-y: auto;
+  user-select: none;
+}
+
+.header-action {
+  text-align: end;
+  margin-right: 8px;
+  a {
+    cursor: pointer;
+    color: var(--ion-color-contrast);
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

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

@@ -0,0 +1,49 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {JobProgression} from './job-progression.model';
+import {IUserEventAction} from '../../user-event/user-event.model';
+import {PopoverController} from '@ionic/angular';
+
+export interface JobProgressionListOptions {
+  titleI18n?: string;
+  jobProgressions?: JobProgression[];
+  headerActions?: IUserEventAction[];
+}
+
+@Component({
+  selector: 'app-job-progression-list',
+  templateUrl: './job-progression.list.html',
+  styleUrls: ['./job-progression.list.scss'],
+})
+export class JobProgressionList implements OnInit, JobProgressionListOptions {
+
+  @Input() titleI18n: string;
+  @Input() jobProgressions: JobProgression[];
+  @Input() headerActions: IUserEventAction[];
+
+  constructor(protected popoverController: PopoverController) {
+  }
+
+  ngOnInit(): void {
+  }
+
+  async executeAction(
+    event: Event,
+    action: IUserEventAction) {
+
+    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
+    this.popoverController.dismiss();
+    try {
+      const res = action.executeAction(undefined);
+      if (res instanceof Promise) await res;
+    }
+    catch(err) {
+      console.error(err);
+    }
+  }
+
+}

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

@@ -0,0 +1,28 @@
+import {EntityClass} from '../../../core/services/model/entity.decorators';
+import {Entity} from '../../../core/services/model/entity.model';
+
+// @dynamic
+@EntityClass({typename: 'JobProgressionVO'})
+export class JobProgression extends Entity<JobProgression> {
+
+  static fromObject: (source: any, opts?: any) => JobProgression;
+
+  id: number;
+  name: string;
+  message: string;
+  current: number;
+  total: number;
+
+  constructor(id?: number) {
+    super(JobProgression.TYPENAME);
+    this.id = id;
+  }
+
+  fromObject(source: any) {
+    super.fromObject(source);
+    this.name = source.name;
+    this.message = source.message;
+    this.current = source.current;
+    this.total = source.total;
+  }
+}

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

@@ -0,0 +1,86 @@
+import {Inject, Injectable, InjectionToken, Optional} from '@angular/core';
+import {JobProgression} from './job-progression.model';
+import {BaseGraphqlService} from '../../../core/services/base-graphql-service.class';
+import {GraphqlService} from '../../../core/graphql/graphql.service';
+import {Environment, ENVIRONMENT} from '../../../../environments/environment.class';
+import {Observable, of} from 'rxjs';
+import {FetchPolicy, gql, WatchQueryFetchPolicy} from '@apollo/client/core';
+import {isNil, toNumber} from '../../../shared/functions';
+import {map} from 'rxjs/operators';
+import {SocialErrorCodes} from '../../social.errors';
+
+export const APP_JOB_PROGRESSION_SERVICE = new InjectionToken<IJobProgressionService>('JobProgressionService');
+
+
+export interface IJobProgressionService {
+  watchAll(): Observable<JobProgression[]>;
+  addJob(id: number, job?: JobProgression);
+  removeJob(id: number);
+  listenChanges(id: number, options?: { interval?: number; fetchPolicy?: FetchPolicy }): Observable<JobProgression>;
+}
+
+
+const JobProgressionSubscription = {
+  listenChanges: gql`subscription UpdateJobProgression($id: Int!, $interval: Int){
+    data: updateJobProgression(id: $id, interval: $interval) {
+      id
+      name
+      message
+      current
+      total
+    }
+  }`
+}
+
+@Injectable()
+export class JobProgressionService
+  extends BaseGraphqlService<JobProgression>
+  implements IJobProgressionService {
+
+  constructor(
+    protected graphql: GraphqlService,
+    @Optional() @Inject(ENVIRONMENT) protected environment: Environment
+  ) {
+    super(graphql, environment);
+    this._logPrefix = '[job-progression-service] ';
+    // For DEV only
+    this._debug = environment && !environment.production;
+  }
+
+  watchAll(options?: {
+    fetchPolicy?: WatchQueryFetchPolicy
+  }): Observable<JobProgression[]> {
+    return of([]); // TODO
+  }
+
+  addJob(id: number, job?: JobProgression) {
+    throw new Error('no implemented');
+  }
+
+  removeJob(id: number) {
+    throw new Error('no implemented');
+  }
+
+  listenChanges(id: number, options?: {
+    interval?: number;
+    fetchPolicy?: FetchPolicy
+  }): Observable<JobProgression> {
+
+    if (isNil(id)) throw new Error(`${this._logPrefix}Missing argument 'id'`);
+    if (this._debug) console.debug(`${this._logPrefix}[WS] Listening changes for job progression {${id}}...`);
+
+    return this.graphql.subscribe<{ data: any }>({
+      query: JobProgressionSubscription.listenChanges,
+      fetchPolicy: options?.fetchPolicy,
+      variables: { id, interval: toNumber(options?.interval, 10)},
+      error: {code: SocialErrorCodes.SUBSCRIBE_JOB_PROGRESSION_ERROR, message: 'SOCIAL.ERROR.SUBSCRIBE_JOB_PROGRESSION_ERROR'}
+    }).pipe(
+      map(({data}) => {
+        const progression = data && JobProgression.fromObject(data);
+        if (progression && this._debug) console.debug(`${this._logPrefix}Job progression ${id} updated on server`, progression);
+        return progression;
+      })
+    );
+
+  }
+}

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

@@ -0,0 +1,20 @@
+<ion-toolbar color="primary">
+  <ion-title>Job progression</ion-title>
+</ion-toolbar>
+
+<ion-content class="ion-padding">
+
+  <app-job-progression-icon #icon [debug]="true" [options]="options" ></app-job-progression-icon>
+
+  <p>
+    <ion-button (click)="incrementJob(10)">
+      +10
+    </ion-button>
+    <ion-button (click)="incrementJob(-10)">
+      -10
+    </ion-button>
+  </p>
+  <p>
+    <ion-button (click)="addJob()">Add Job</ion-button>
+  </p>
+</ion-content>