@onemrvapublic/design-system 0.0.0

package/projects/onemrva/design-system/mat-file-upload/src/components/onemrva-mat-file-upload/onemrva-mat-file-upload.component.scss

@@ -0,0 +1,248 @@
+@use "../../../../utils";
+
+@keyframes fade {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+    text-align: left;
+    width: auto;
+    margin-left: 4px;
+    vertical-align: top;
+  }
+}
+
+@mixin fileUpload($theme) {
+  $spacer: map-get($theme, "spacer");
+
+  onemrva-mat-file-upload {
+    .mat-mdc-form-field-error {
+      &:before {
+        font-family: "Material Icons";
+        content: "\e000";
+        float: left;
+        font-size: 16px;
+        font-variation-settings: "FILL" 1;
+        margin-right: 8px;
+        vertical-align: baseline;
+        flex: 0 0 16px;
+      }
+
+      margin-bottom: 8px;
+      padding: 8px 1em;
+      background-color: #ffebe6;
+      border-bottom: 1px solid utils.palette($theme, "error");
+      color: utils.palette($theme, "error");
+      display: flex;
+      line-height: 1.125;
+    }
+    ul {
+      list-style: none;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      margin-inline-start: 0px;
+      margin-inline-end: 0px;
+      padding-inline-start: 0px;
+      li {
+        width: 100%;
+      }
+    }
+  }
+
+  .onemrva-mat-file-upload-drop-area {
+    mat-icon {
+      &.filled {
+        vertical-align: bottom;
+        font-variation-settings: "FILL" 1, "wght" 900, "GRAD" 0, "opsz" 48;
+      }
+      &.mat-error {
+        color: utils.palette($theme, "error", 500);
+      }
+      &.mat-success {
+        color: utils.palette($theme, "success", 500);
+      }
+      &.mat-warn {
+        color: utils.palette($theme, "warn", 500);
+      }
+    }
+    padding: $spacer * 3;
+    text-align: left;
+    border: dashed 2px utils.palette($theme, "grayscale", 500);
+
+    &.fu-error {
+      border: dashed 2px utils.palette($theme, "error", 500);
+    }
+
+    position: relative;
+    border-radius: 16px;
+    transition: background-color 0.3s ease-in-out, border 0.3s ease-in-out;
+    min-height: 120px;
+    mat-icon.onemrva-upload {
+      color: utils.palette($theme, "grayscale", 500);
+      width: 60px;
+      height: 40px;
+      line-height: 40px;
+      font-size: 64px;
+    }
+    input[type="file"] {
+      display: none;
+    }
+    .outer {
+      display: block;
+      width: 100%;
+      margin: 0;
+    }
+    .inner {
+      display: inline-block;
+      width: 100%;
+      text-align: center;
+      line-height: 24px;
+      margin-bottom: $spacer;
+      &:nth-child(1) {
+        margin-bottom: 16px;
+      }
+      &:nth-child(4) {
+        display: block;
+        color: utils.palette($theme, "grayscale", 500);
+        margin-bottom: 0;
+      }
+      label {
+        color: utils.palette($theme, "primary", 500);
+        text-decoration: underline;
+        font-weight: bold;
+        cursor: pointer;
+      }
+    }
+    &.filein {
+      .inner {
+        animation: fade 1s linear;
+        animation-fill-mode: forwards;
+        &:nth-child(1) {
+          margin-bottom: 0;
+        }
+
+        mat-icon {
+          width: 24px;
+          height: 24px;
+          line-height: 24px;
+          font-size: 24px;
+        }
+        &:nth-child(4) {
+          padding-left: 30px;
+        }
+      }
+    }
+    &.fileover {
+      background-color: utils.palette($theme, "primary", 50);
+      border: 2px dashed utils.palette($theme, "primary", 500);
+    }
+
+    .files-list {
+      display: flex;
+      flex-flow: row wrap;
+      gap: $spacer;
+
+      file-panel:first-child {
+        margin-top: 3 * $spacer;
+      }
+    }
+  }
+
+  $panel-border-radius: 16px;
+  $panel-border-color: utils.palette($theme, "primary", 50);
+  $panel-padding: 16px;
+
+  .clickable {
+    cursor: pointer;
+  }
+
+  file-panel {
+    // transition: all 0.5s ease-in-out;
+
+    border-radius: $panel-border-radius;
+    background-color: utils.palette($theme, "grayscale", 50);
+    padding: $panel-padding;
+    display: block;
+
+    .file-panel-content {
+      padding: 0;
+      p:last-child {
+        margin: 0;
+      }
+      .message {
+        color: utils.palette($theme, "grayscale", 900);
+      }
+    }
+    .file-panel-title {
+      font-family: "Poppins", sans-serif;
+      font-style: normal;
+      font-weight: 700;
+      font-size: 18px;
+      line-height: 27px;
+      margin-bottom: 0px;
+      .file-panel-title-action {
+        float: right;
+      }
+    }
+    &.mat-primary {
+      border: none;
+      background: utils.palette($theme, "grayscale", 50);
+
+      .file-panel-title {
+        color: utils.palette($theme, "primary", 500);
+      }
+      .mat-progress-bar-fill::after {
+        background: utils.palette($theme, "primary", 500);
+      }
+      .mat-progress-bar-buffer {
+        background-color: utils.palette($theme, "primary", 100);
+      }
+    }
+    &.mat-warn {
+      border: none;
+      background: utils.palette($theme, "warn", 50);
+
+      .file-panel-title {
+        color: utils.palette($theme, "warn", 500);
+      }
+      .mat-progress-bar-fill::after {
+        background: utils.palette($theme, "warn", 500);
+      }
+      .mat-progress-bar-buffer {
+        background-color: utils.palette($theme, "warn", 100);
+      }
+    }
+    &.mat-success {
+      border: none;
+      background: utils.palette($theme, "success", 50);
+
+      .file-panel-title {
+        color: utils.palette($theme, "success", 500);
+      }
+      .mat-progress-bar-fill::after {
+        background: utils.palette($theme, "success", 500) !important;
+      }
+      .mat-progress-bar-buffer {
+        background-color: utils.palette($theme, "success", 100) !important;
+      }
+    }
+    &.mat-error {
+      border: none;
+      background: utils.palette($theme, "error", 50);
+
+      .file-panel-title {
+        color: utils.palette($theme, "error", 500);
+      }
+      .mat-progress-bar-fill::after {
+        background: utils.palette($theme, "error", 500);
+      }
+      .mat-progress-bar-buffer {
+        background-color: utils.palette($theme, "error", 100);
+      }
+    }
+  }
+}

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

@@ -0,0 +1,185 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnInit,
+  TemplateRef,
+  ViewChild,
+} from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { Observable } from 'rxjs';
+import { mimeTypes } from 'mime-wrapper';
+import {
+  state,
+  keyframes,
+  style,
+  animate,
+  trigger,
+  transition,
+} from '@angular/animations';
+import {
+  formatBytes,
+  ProgressFile,
+  ReferencedProgressFile,
+} from '../../models/progress-file.model';
+import { OnemrvaMatFileUploadStore } from '../../onemrva-mat-file-upload.store';
+
+let NEXT_ID = 0;
+
+@Component({
+  selector: 'onemrva-mat-file-upload',
+  templateUrl: 'onemrva-mat-file-upload.component.html',
+  animations: [
+    trigger('inOutAnimation', [
+      state('in', style({ opacity: 1 })),
+      transition(':enter', [
+        animate(
+          300,
+          keyframes([
+            style({ opacity: 0, offset: 0 }),
+            style({ opacity: 0.25, offset: 0.25 }),
+            style({ opacity: 0.5, offset: 0.5 }),
+            style({ opacity: 0.75, offset: 0.75 }),
+            style({ opacity: 1, offset: 1 }),
+          ])
+        ),
+      ]),
+      transition(':leave', [
+        animate(
+          300,
+          keyframes([
+            style({ opacity: 1, offset: 0 }),
+            style({ opacity: 0.75, offset: 0.25 }),
+            style({ opacity: 0.5, offset: 0.5 }),
+            style({ opacity: 0.25, offset: 0.75 }),
+            style({ opacity: 0, offset: 1 }),
+          ])
+        ),
+      ]),
+    ]),
+  ],
+})
+export class OnemrvaMatFileUploadComponent implements OnInit {
+  @Input()
+  accept: Array<string> = [];
+  acceptString = '';
+
+  @Input()
+  maxFileSize: number = 0;
+
+  @Input()
+  uploadOnDrop: boolean = true;
+
+  @Input()
+  initialFiles: ProgressFile[] = [];
+
+  @Input()
+  errorMessage: string = '';
+
+  fileUploadErrorMessage$: Observable<string>;
+
+  files$: Observable<ReferencedProgressFile[]>;
+
+  @Input() filePanelTemplate!: TemplateRef<any>;
+
+  retryFile = new EventEmitter<{ index: number; cmpRef: symbol }>();
+
+  /**
+   * Sets the `data-cy` of the element. If not set, the first component instance will have `data-cy` = `"onemrva-mat-multi-select-0"`.
+   *
+   * @example
+   * ```html
+   * <onemrva-mat-multi-select id="my-first-multi-select"></onemrva-mat-multi-select>
+   * ```
+   */
+  @HostBinding('attr.data-cy')
+  @Input()
+  public dataCy = `onemrva-mat-multi-select-${NEXT_ID++}`;
+
+  @ViewChild(`fileDropRef`)
+  fileDropRef!: ElementRef;
+
+  inputId = `fileDropRef-${NEXT_ID}`;
+  maxFileSizeFormatted: string = '';
+
+  constructor(
+    public dialog: MatDialog,
+    private fileUploadStore: OnemrvaMatFileUploadStore
+  ) {
+    this.files$ = fileUploadStore.files$;
+
+    this.fileUploadErrorMessage$ = this.fileUploadStore.fileUploadError$;
+  }
+
+  ngOnInit(): void {
+    if (this.accept.length > 0) {
+      this.acceptString = this.accept
+        .map((val) => {
+          const t = mimeTypes.getExtension(val);
+          return `.${t}`;
+        })
+        .filter((val) => {
+          return val.length > 1;
+        })
+        .join(', ');
+
+      this.fileUploadStore.setAccept(this.accept);
+    }
+
+    this.maxFileSizeFormatted = formatBytes(this.maxFileSize);
+    this.fileUploadStore.setMaxFileSize(this.maxFileSize);
+  }
+
+  /**
+   * on file drop handler
+   */
+  onFileDropped($event: FileList) {
+    this.prepareFilesList($event);
+  }
+
+  /**
+   * handle file from browsing
+   */
+  fileBrowseHandler($event: Event) {
+    let elm = $event.target as HTMLInputElement,
+      files = elm.files as FileList;
+
+    this.prepareFilesList(files);
+  }
+
+  /**
+   * Convert Files list to normal array list
+   * @param files (Files List)
+   */
+  prepareFilesList(files: FileList) {
+    setTimeout(() => {
+      const fs: ProgressFile[] = [];
+      for (let i = 0; i < files.length; i++) {
+        let file = files.item(i);
+        if (file === null) continue;
+
+        let item: ProgressFile = {
+          file,
+          progress: 0,
+          message: '',
+          color: 'primary',
+          url: null,
+          id: null,
+          enableProgressBar: this.uploadOnDrop,
+
+          name: file!.name,
+          lastModified: file!.lastModified,
+          size: file!.size,
+          type: file!.type,
+        };
+
+        fs.push(item);
+      }
+
+      if (this.uploadOnDrop) this.fileUploadStore.uploadFiles(fs);
+      else this.fileUploadStore.addSeveralForPotentialUpload(fs);
+    }, 400);
+  }
+}

package/projects/onemrva/design-system/mat-file-upload/src/directives/dnd.directive.ts

@@ -0,0 +1,43 @@
+import {
+    Directive,
+    Output,
+    Input,
+    EventEmitter,
+    HostBinding,
+    HostListener
+} from '@angular/core';
+
+@Directive({
+    selector: '[appDnd]'
+})
+export class DndDirective {
+
+    @HostBinding('class.fileover') fileOver: boolean = false;
+
+    @Output() fileDropped = new EventEmitter<any>();
+
+    // Dragover listener
+    @HostListener('dragover', ['$event']) onDragOver(evt: Event) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = true;
+    }
+
+    // Dragleave listener
+    @HostListener('dragleave', ['$event']) public onDragLeave(evt: Event) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = false;
+    }
+
+    // Drop listener
+    @HostListener('drop', ['$event']) public ondrop(evt: any) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        this.fileOver = false;
+        let files = evt.dataTransfer.files;
+        if (files.length > 0) {
+            this.fileDropped.emit(files);
+        }
+    }
+}

package/projects/onemrva/design-system/mat-file-upload/src/models/action-config.model.ts

@@ -0,0 +1,10 @@
+import { ReferencedProgressFile } from './progress-file.model';
+
+export interface ActionConfig {
+  iconName: string; // angular material name
+  dataCy?: string;
+  tooltipCode: string;
+  ariaCode: string;
+  clickHandler: (file: ReferencedProgressFile) => void;
+  showAction: (file: ReferencedProgressFile) => boolean;
+}

package/projects/onemrva/design-system/mat-file-upload/src/models/progress-file.model.ts

@@ -0,0 +1,94 @@
+import { OnemrvaMatColor } from '@onemrvapublic/design-system/utils';
+
+export interface ProgressFile {
+  file?: File;
+  message: string;
+  progress: number;
+  color: OnemrvaMatColor; // color 1 - 1 with status
+  url: string | null;
+  id: string | null; // backend identifier
+  enableProgressBar: boolean;
+  data?: any;
+
+  name: string;
+  lastModified?: number;
+  size: number;
+  type: string;
+}
+
+export interface ReferencedProgressFile extends ProgressFile {
+  ref: symbol; // ref is a frontend identifier
+}
+
+/**
+ * format bytes
+ * @param bytes (File size in bytes)
+ * @param decimals (Decimals point)
+ */
+export function formatBytes(bytes: number, decimals: number = 2) {
+  if (bytes === 0) {
+    return '0 Bytes';
+  }
+  const k = 1024;
+  const dm = decimals <= 0 ? 0 : decimals || 2;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+}
+
+export function formattedSize(size: number, decimals: number = 2) {
+  return formatBytes(size, decimals);
+}
+
+export function convertToProgressFile(
+  id: string,
+  name: string,
+  message: string = '',
+  progress = 100,
+  color = OnemrvaMatColor.PRIMARY,
+  url: string | null = null,
+  enableProgressBar: boolean = false,
+  data: string | null = null,
+  size = 0,
+  type = ''
+): ProgressFile {
+  return {
+    id: id!,
+    name: name!,
+    message: message,
+    progress: progress,
+    color: color,
+    url: url,
+    enableProgressBar: enableProgressBar,
+    data: data,
+    size: size,
+    type: type,
+  };
+}
+
+export function convertToReferencedProgressFile(
+  id: string,
+  name: string,
+  message: string = '',
+  progress = 100,
+  color = OnemrvaMatColor.PRIMARY,
+  url: string | null = null,
+  enableProgressBar: boolean = false,
+  data: string | null = null,
+  size = 0,
+  type = ''
+): ReferencedProgressFile {
+  return {
+    id: id!,
+    ref: Symbol(name),
+    name: name!,
+    message: message,
+    progress: progress,
+    color: color,
+    url: url,
+    enableProgressBar: enableProgressBar,
+    data: data,
+    size: size,
+    type: type,
+  };
+}

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

@@ -0,0 +1,79 @@
+import { Observable, Subscription } from 'rxjs';
+import {
+  ProgressFile,
+  ReferencedProgressFile,
+} from './models/progress-file.model';
+
+export interface OnemrvaMatFileUploadStoreItf {
+  /**
+   * Updater to set accepted format is made public
+   */
+  readonly setAccept: any;
+
+  /**
+   * Updater to set file max size is made public
+   */
+  readonly setMaxFileSize: any;
+
+  /**
+   * Updater to set data for a given file
+   *
+   * input:
+   *  payload: {
+   *    ref: symbol,
+   *    data: any
+   *  }
+   */
+  readonly setData: any;
+
+  /**
+   * Selector on list of files
+   */
+  readonly files$: Observable<ReferencedProgressFile[]>;
+
+  /**
+   * Selector on accepted formats for file upload
+   */
+  readonly accept$: Observable<string[]>;
+
+  /**
+   * Selector on max file size
+   */
+  readonly maxFileSize$: Observable<number>;
+
+  readonly listUploadedFiles: (inputs$: Observable<any>) => Subscription;
+  readonly deleteFile: (
+    file$: Observable<ReferencedProgressFile>
+  ) => Subscription;
+  readonly removeFile: (
+    file$: Observable<ReferencedProgressFile>
+  ) => Subscription;
+
+  /**
+   * Action - For adding one file panel (creation of file panel reference skipped if already created) at a time.
+   * Upload to BE not triggered
+   */
+  readonly addForPotentialUpload: (
+    file$: Observable<ProgressFile>
+  ) => Subscription;
+
+  /**
+   * Action - For adding an array of file panels (creation of file panels reference skipped if already created).
+   * Uploads to BE not triggered
+   */
+  readonly addSeveralForPotentialUpload: (
+    files$: Observable<ProgressFile[]>
+  ) => Subscription;
+
+  /**
+   * Action - For adding a file panel (creation of file panels reference skipped if already created) then uploading it
+   */
+  readonly uploadFile: (Observable$: Observable<ProgressFile>) => Subscription;
+
+  /**
+   * Action - For adding several file panels (creation of file panels reference skipped if already created) then uploading them
+   */
+  readonly uploadFiles: (
+    Observable$: Observable<ProgressFile[]>
+  ) => Subscription;
+}

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

@@ -0,0 +1,28 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DndDirective } from './directives/dnd.directive';
+import { MatIconModule } from '@angular/material/icon';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
+import { ReactiveFormsModule } from '@angular/forms';
+
+import { components } from './components';
+import { MatInputModule } from '@angular/material/input';
+
+@NgModule({
+  declarations: [components, DndDirective],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatTooltipModule,
+    MatDialogModule,
+    TranslateModule,
+    MatIconModule,
+    MatInputModule,
+  ],
+  exports: [components],
+})
+export class OnemrvaMatFileUploadModule {}