@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-file-upload/src/onemrva-mat-file-upload.service.ts

@@ -0,0 +1,68 @@
+import {
+  HttpEvent,
+  HttpEventType,
+  HttpProgressEvent,
+  HttpResponse,
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { catchError, interval, map, Observable, of, take } from 'rxjs';
+import { ProgressFile } from './models/progress-file.model';
+
+export interface OnemrvaMatFileUploadInterface {
+  listUploadedFiles: (inputs: any) => Observable<ProgressFile[]>;
+  upload: (file: ProgressFile) => Observable<HttpEvent<any>>;
+  deleteFile: (id: any) => Observable<any>;
+  retry: (file: any) => Observable<any>;
+  downloadFile?: (id: any) => Observable<any>;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class OnemrvaMatFileUploadService
+  implements OnemrvaMatFileUploadInterface
+{
+  constructor() {
+    alert(
+      "Don't forget to add a provider in your component with your own implementation of OnemrvaMatFileUploadInterface. Check out the demo to have an example of how to do it"
+    );
+  }
+
+  listUploadedFiles(inputs: any): Observable<ProgressFile[]> {
+    return of([]);
+  }
+
+  upload(file: ProgressFile): Observable<HttpEvent<any>> {
+    return interval(50).pipe(
+      take(101),
+      map((i) => {
+        if (i < 100) {
+          return {
+            type: HttpEventType.UploadProgress,
+            loaded: i,
+            total: 100,
+          } as HttpProgressEvent;
+        } else {
+          if (i >= 100 && Math.random() > 0.5) {
+            throw 'Fake error thrown';
+          }
+          return new HttpResponse<any>();
+        }
+      }),
+      catchError(() => of(new HttpResponse<any>({ body: {}, status: 500 })))
+    );
+  }
+
+  deleteFile(id: any): Observable<any> {
+    return of('F = m.a');
+  }
+
+  retry(file: any): Observable<any> {
+    return of(file);
+  }
+
+  downloadFile(id: any): Observable<any> {
+    alert(`Missing download implementation for file ID ${id}`);
+    return of(true);
+  }
+}

package/projects/onemrva/design-system/mat-file-upload/src/onemrva-mat-file-upload.store.ts

@@ -0,0 +1,473 @@
+import { Inject, Injectable, InjectionToken, Optional } from '@angular/core';
+import { ComponentStore } from '@ngrx/component-store';
+import { TranslateService } from '@ngx-translate/core';
+import {
+  catchError,
+  filter,
+  forkJoin,
+  interval,
+  map,
+  merge,
+  mergeMap,
+  Observable,
+  of,
+  Subject,
+  switchMap,
+  take,
+  takeWhile,
+  tap,
+  throttle,
+  withLatestFrom,
+} from 'rxjs';
+import { OnemrvaMatFileUploadService } from './onemrva-mat-file-upload.service';
+import {
+  formattedSize,
+  ProgressFile,
+  ReferencedProgressFile,
+} from './models/progress-file.model';
+import { HttpEvent, HttpEventType } from '@angular/common/http';
+import { OnemrvaMatFileUploadStoreItf } from './onemrva-mat-file-upload-itf.store';
+
+export interface FileUploadStoreEvent {
+  type: string;
+  payload?: any;
+}
+
+export interface UploadState {
+  upload: ReferencedProgressFile[];
+  accept: string[];
+  maxFileSize: number;
+  fileUploadError: string;
+  event: FileUploadStoreEvent;
+}
+
+const INIT_STATE: UploadState = {
+  upload: [],
+  accept: [],
+  maxFileSize: 0,
+  fileUploadError: '',
+  event: {
+    type: 'INIT',
+  },
+};
+
+export type CustomValidationFn = (
+  input: [ReferencedProgressFile, ReferencedProgressFile[]]
+) => ReferencedProgressFile;
+
+export const CUSTOM_VALIDATION_FN = new InjectionToken<CustomValidationFn>(
+  'x1, x2 = (-b -+ sqrt(rho))/2a'
+);
+
+@Injectable()
+export class OnemrvaMatFileUploadStore
+  extends ComponentStore<UploadState>
+  implements OnemrvaMatFileUploadStoreItf
+{
+  private fn: CustomValidationFn = (
+    x: [ReferencedProgressFile, ReferencedProgressFile[]]
+  ) => {
+    return x[0];
+  };
+
+  constructor(
+    private fileUploadService: OnemrvaMatFileUploadService,
+    private translateService: TranslateService,
+    @Optional()
+    @Inject(CUSTOM_VALIDATION_FN)
+    public customValidationFn: CustomValidationFn
+  ) {
+    super(INIT_STATE);
+    if (!!customValidationFn) this.fn = customValidationFn;
+  }
+
+  /*
+   * U P D A T E R S
+   */
+  public readonly setAccept = this.updater((state, accept: string[]) => ({
+    ...state,
+    accept,
+    event: {
+      type: 'setAccept',
+      payload: accept,
+    },
+  }));
+
+  public readonly setMaxFileSize = this.updater(
+    (state, maxFileSize: number) => ({
+      ...state,
+      maxFileSize,
+      event: {
+        type: 'setMaxFileSize',
+        payload: maxFileSize,
+      },
+    })
+  );
+
+  private readonly emptyList = this.updater((state) => {
+    return {
+      ...state,
+      upload: [],
+      event: {
+        type: 'emptyList',
+      },
+    };
+  });
+
+  private readonly pushFile = this.updater(
+    (state, payload: ReferencedProgressFile) => {
+      return {
+        ...state,
+        upload: [...state.upload, { ...payload }],
+        event: {
+          type: 'pushFile',
+          payload,
+        },
+      };
+    }
+  );
+
+  public readonly setData = this.updater(
+    (state, payload: { ref: symbol; data: any }) => {
+      return {
+        ...state,
+        upload: state.upload.map((file: ReferencedProgressFile) =>
+          file.ref === payload.ref ? { ...file, data: payload.data } : file
+        ),
+        event: {
+          type: 'setData',
+          payload,
+        },
+      };
+    }
+  );
+
+  private readonly setSuccess = this.updater(
+    (state, payload: { ref: symbol; body: any }) => {
+      const newFile = {
+        ...state.upload.find((f) => f.ref === payload.ref),
+        ...payload.body,
+        color: 'success',
+        progress: 100,
+      };
+
+      return {
+        ...state,
+        upload: state.upload.map((file) =>
+          file.ref === payload.ref ? newFile : file
+        ),
+        event: {
+          type: 'setData',
+          payload: newFile,
+        },
+      };
+    }
+  );
+
+  private readonly setFail = this.updater(
+    (state, payload: { ref: symbol; message: string }) => ({
+      ...state,
+      upload: state.upload.map((file) =>
+        file.ref === payload.ref
+          ? { ...file, color: 'warn', message: payload.message }
+          : file
+      ),
+      event: {
+        type: 'setFail',
+        payload,
+      },
+    })
+  );
+
+  private readonly setProgress = this.updater(
+    (state, payload: { ref: symbol; progress: number }) => ({
+      ...state,
+      upload: state.upload.map((file) =>
+        file.ref === payload.ref
+          ? { ...file, progress: payload.progress }
+          : file
+      ),
+      event: {
+        type: 'setProgress',
+        payload,
+      },
+    })
+  );
+
+  private readonly reset = this.updater((state, ref: symbol) => ({
+    ...state,
+    upload: state.upload.map((file) =>
+      file.ref === ref ? { ...file, progress: 0, message: '', color: '' } : file
+    ),
+    event: {
+      type: 'reset',
+      payload: ref,
+    },
+  }));
+
+  private readonly remove = this.updater(
+    (state, payload: ReferencedProgressFile) => ({
+      ...state,
+      upload: state.upload.filter((f) => f.ref !== payload.ref),
+      event: {
+        type: 'remove',
+        payload,
+      },
+    })
+  );
+
+  private readonly enableProgressBar = this.updater((state) => ({
+    ...state,
+    upload: state.upload.map((file) => ({ ...file, enableProgressBar: true })),
+    event: {
+      type: 'enableProgressBar',
+    },
+  }));
+
+  public readonly setFileUploadError = this.updater(
+    (state, fileUploadError: string) => ({
+      ...state,
+      fileUploadError,
+      event: {
+        type: 'setFileUploadError',
+        payload: fileUploadError,
+      },
+    })
+  );
+
+  public readonly clearFileUploadError = this.updater((state) => ({
+    ...state,
+    fileUploadError: '',
+    event: {
+      type: 'clearFileUploadError',
+    },
+  }));
+
+  /*
+   * S E L E C T O R S
+   */
+  readonly files$ = this.select((state) => state.upload);
+  readonly accept$ = this.select((state) => state.accept);
+  readonly event$ = this.select((state) => state.event);
+  readonly maxFileSize$ = this.select((state) => state.maxFileSize);
+  readonly fileUploadError$ = this.select((state) => state.fileUploadError);
+
+  /*
+   * A C T I O N S   /   E F F E C T S
+   */
+  readonly listUploadedFiles = this.effect((inputs$: Observable<any>) => {
+    return inputs$.pipe(
+      tap(() => {
+        this.emptyList();
+      }),
+      mergeMap((inputs: any) => {
+        return this.fileUploadService.listUploadedFiles(inputs).pipe(
+          take(1),
+          withLatestFrom(this.files$),
+          tap(([newfiles, registeredFiles]) => {
+            newfiles.forEach((file) => {
+              if (
+                registeredFiles.findIndex((rfile) => rfile.id === file.id) < 0
+              ) {
+                this.pushFile({
+                  ...file,
+                  color: 'success',
+                  progress: 100,
+                  ref: Symbol('H.psi = E.psi'),
+                  name: file!.name,
+                  lastModified: file!.lastModified,
+                  size: file!.size,
+                  type: file!.type,
+                });
+              }
+            });
+          }),
+          catchError(() => of([]))
+        );
+      })
+    );
+  });
+
+  readonly deleteFile = this.effect(
+    (file$: Observable<ReferencedProgressFile>) => {
+      return file$.pipe(
+        tap(() => {
+          this.clearFileUploadError();
+        }),
+        withLatestFrom(this.files$),
+        map(this.fn),
+        mergeMap((file: any) =>
+          this.fileUploadService.deleteFile(file.id).pipe(
+            take(1),
+            tap(() => {
+              this.remove(file);
+            }),
+            catchError(() => {
+              this.setFail({
+                ref: file.ref,
+                message: 'file.upload.delete.error',
+              });
+              return of(null);
+            })
+          )
+        )
+      );
+    }
+  );
+
+  readonly removeFile = this.effect(
+    (file$: Observable<ReferencedProgressFile>) => {
+      return file$.pipe(
+        tap(() => {
+          this.clearFileUploadError();
+        }),
+        withLatestFrom(this.files$),
+        map(this.fn),
+        tap((file) => {
+          this.remove(file);
+        })
+      );
+    }
+  );
+
+  private progressFileChecker = (file$: Observable<any>) => {
+    return file$.pipe(
+      withLatestFrom(this.accept$),
+      map(([file, accept]) => {
+        // Step 1 - Add a new file in the view
+        let f: ReferencedProgressFile = { ...file };
+        if (file.ref === undefined) {
+          f = {
+            ...f,
+            ref: Symbol('v_sound = sqrt(gamma.P / rho)'),
+            name: file!.name,
+            lastModified: file!.lastModified,
+            size: file!.size,
+            type: file!.type,
+          };
+          this.pushFile(f);
+        }
+
+        // Step 2 - Check file extension
+        if (!accept.includes(file.file!.type)) {
+          this.setFail({
+            ref: f.ref,
+            message: this.translateService.instant(
+              'file.upload.type.not.supported'
+            ),
+          });
+          // This trick coupled with the next filter is used to avoid catchError, which would break the effect
+          return { ...f, message: 'ERROR' };
+        }
+        return f;
+      }),
+      filter((x) => x.message !== 'ERROR'),
+      withLatestFrom(this.maxFileSize$),
+      map(([refFile, maxFileSize]) => {
+        // Step 3 - Check file size
+        if (maxFileSize !== 0 && refFile.size > maxFileSize) {
+          this.setFail({
+            ref: refFile.ref,
+            message:
+              this.translateService.instant('file.upload.too.big') +
+              ' ' +
+              formattedSize(refFile.size),
+          });
+          // Same trick for error management
+          return { ...refFile, message: 'ERROR' };
+        }
+        return refFile;
+      }),
+      filter((x) => x.message !== 'ERROR'),
+      withLatestFrom(this.files$),
+      map(this.fn), // For custom validations
+      tap((x) => {
+        if (!!x.message && x.message.startsWith('ERROR:'))
+          this.setFileUploadError(x.message.replace('ERROR:', '').trim());
+        else this.clearFileUploadError();
+      }),
+      filter((x) => !x.message.startsWith('ERROR')),
+      take(1)
+    );
+  };
+
+  private loadStep = (file: any) => {
+    if (file.color === 'warn') this.reset(file.ref);
+
+    this.enableProgressBar();
+
+    return this.fileUploadService.upload(file).pipe(
+      throttle(() => interval(200), { leading: true, trailing: true }),
+      tap((event: HttpEvent<any>) => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.setProgress({
+            ref: file.ref,
+            progress: Math.round((100 * event.loaded) / event.total!),
+          });
+        }
+
+        if (event.type === HttpEventType.Response) {
+          this.setSuccess({ ref: file.ref, body: event.body });
+        }
+      }),
+      takeWhile(
+        (event: HttpEvent<any>) => event.type === HttpEventType.UploadProgress
+      ),
+      catchError(() => {
+        this.setFail({
+          ref: file.ref,
+          message: 'file.upload.retry.error',
+        });
+        return of(null);
+      })
+    );
+  };
+
+  /**
+   * For adding one file panel (creation of file panel reference skipped if already created) at a time.
+   * Upload to BE not triggered
+   */
+  readonly addForPotentialUpload = this.effect(
+    (file$: Observable<ProgressFile>) => this.progressFileChecker(file$)
+  );
+
+  /**
+   * For adding an array of file panels (creation of file panels reference skipped if already created).
+   * Uploads to BE not triggered
+   */
+  readonly addSeveralForPotentialUpload = this.effect(
+    (files$: Observable<ProgressFile[]>) =>
+      files$.pipe(
+        switchMap((files) =>
+          forkJoin(files.map((file) => this.progressFileChecker(of(file))))
+        )
+      )
+  );
+
+  /**
+   * For adding a file panel (creation of file panels reference skipped if already created) then uploading it
+   */
+  readonly uploadFile = this.effect((file$: Observable<ProgressFile>) => {
+    return this.progressFileChecker(file$).pipe(mergeMap(this.loadStep));
+  });
+
+  readonly retryFile = this.effect(
+    (file$: Observable<ReferencedProgressFile>) =>
+      this.progressFileChecker(file$).pipe(mergeMap(this.loadStep))
+  );
+
+  /**
+   * For adding several file panels (creation of file panels reference skipped if already created) then uploading them
+   */
+  readonly uploadFiles = this.effect((files$: Observable<ProgressFile[]>) =>
+    files$.pipe(
+      switchMap((files) =>
+        merge(
+          ...files.map((file) =>
+            this.progressFileChecker(of(file)).pipe(switchMap(this.loadStep))
+          )
+        )
+      )
+    )
+  );
+}

package/projects/onemrva/design-system/mat-input-bank-account/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Public API Surface of mat-bank-account-input
+ */
+
+export * from './src/onemrva-mat-input-bank-account.component';

package/projects/onemrva/design-system/mat-input-bank-account/ng-package.json

@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "index.ts"
+    }
+}

package/projects/onemrva/design-system/mat-input-bank-account/src/onemrva-mat-input-bank-account.component.html

@@ -0,0 +1,32 @@
+<ng-container [formGroup]="accountNumber">
+  <mat-form-field class="onemrva-bank-account-input">
+    <mat-label>{{ key | translate }}</mat-label>
+    <mat-select
+      matPrefix
+      formControlName="countryCode"
+      [placeholder]="'bankAccountInput.countryCode' | translate"
+      class="country-code"
+      style="padding: 0 0px 0 8px"
+      class="onemrva-bank-account-select"
+    >
+      <mat-option
+        *ngFor="let countryCode of countryCodes"
+        [value]="countryCode"
+        >{{ countryCode }}</mat-option
+      >
+      <mat-option value="">{{ "otherCountryCode" | translate }}</mat-option>
+    </mat-select>
+    <input
+      (click)="handleClick($event)"
+      type="tel"
+      matInput
+      [placeholder]="placeholder | translate"
+      formControlName="bankNumber"
+      class="onemrva-bank-account-text"
+      [mask]="mask$ | async"
+    />
+  </mat-form-field>
+</ng-container>
+
+{{ accountNumber.value | json }}
+{{ accountNumber.errors | json }}

package/projects/onemrva/design-system/mat-input-bank-account/src/onemrva-mat-input-bank-account.component.scss

@@ -0,0 +1,9 @@
+.onemrva-bank-account-input {
+  .mat-mdc-form-field-infix {
+    min-width: 320px !important;
+    .onemrva-bank-account-text {
+      padding-left: 16px !important;
+      vertical-align: middle;
+    }
+  }
+}