@genesislcap/pbc-documents-ui 0.0.1

package/src/components/foundation-document-manager/component/document-tile/document-tile.template.ts

@@ -0,0 +1,71 @@
+import { html, ref, repeat } from '@microsoft/fast-element';
+import { DocumentTile } from './document-tile';
+import { IFileStorage } from '../../../../utils/types';
+import {
+  formatBytes,
+  formatDateLong,
+  getFileColor,
+  getFileType,
+} from '../../../../utils/formatting';
+import { downloadIcon, optionsIcon } from '../../utils/icons';
+
+const tileTemplate = (hidden = false) => html<IFileStorage>`
+  <div class="tile" id="id-${(x) => x.FILE_STORAGE_ID}${() => (hidden ? '-temp' : '')}">
+    <div class="top-section">
+      <div
+        class="file-type"
+        style="background-color: ${(x) => getFileColor(getFileType(x.FILE_NAME))}"
+      >
+        ${(x) => getFileType(x.FILE_NAME)}
+      </div>
+      <span
+        class="options-icon"
+        title="Options"
+        @click=${(x, c) => c.parent.$emit('remove-document', x.FILE_STORAGE_ID)}
+      >
+        ${optionsIcon}
+      </span>
+    </div>
+    <div class="file-icon">${(x, c) => c.parent.getFileIcon(getFileType(x.FILE_NAME))}</div>
+    <a class="file-name">${(x) => x.FILE_NAME}</a>
+    <div class="footer">
+      <div class="footer-left">
+        <a>${(x) => x.CREATED_BY}</a>
+        <a>${(x) => formatDateLong(x.CREATED_AT)}</a>
+        <a>${(x) => formatBytes(x.FILE_SIZE, 0)}</a>
+      </div>
+      <div class="footer-actions">
+        <span
+          title="Download"
+          @click=${(x, c) => c.parent.$emit('download-document', x.FILE_STORAGE_ID)}
+        >
+          ${downloadIcon}
+        </span>
+      </div>
+    </div>
+  </div>
+`;
+
+export const DocumentTileTemplate = html<DocumentTile>`
+  <div ${ref('tileContainer')} class="tile-container">
+    ${repeat(
+      (x) => x.dataAfterTransition,
+      html<IFileStorage>`
+        ${tileTemplate()}
+      `,
+      { recycle: false },
+    )}
+  </div>
+  <div ${ref('tileContainerTemp')} class="tile-container-temp">
+    ${repeat(
+      (x) => x.tempData,
+      html<IFileStorage>`
+        ${tileTemplate(true)}
+      `,
+      { recycle: true },
+    )}
+  </div>
+  <zero-anchored-region vertical-positioning-mode="right" vertical-default-position="top">
+    <zero-button>Click me</zero-button>
+  </zero-anchored-region>
+`;

package/src/components/foundation-document-manager/component/document-tile/document-tile.ts

@@ -0,0 +1,119 @@
+import { FASTElement, attr, customElement, observable } from '@microsoft/fast-element';
+import { DocumentTileTemplate } from './document-tile.template';
+import { DocumentTileStyles } from './document-tile.styles';
+import { IFileStorage } from '../../../../utils/types';
+import { csvIcon, jpgIcon, pdfIcon } from '../../utils/icons';
+
+@customElement({
+  name: 'document-tile',
+  template: DocumentTileTemplate,
+  styles: DocumentTileStyles,
+})
+export class DocumentTile extends FASTElement {
+  public tileContainer: HTMLElement;
+  public tileContainerTemp: HTMLElement;
+
+  @attr data: IFileStorage[] = [];
+  @observable tempData: IFileStorage[] = [];
+  @observable dataAfterTransition: IFileStorage[] = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+
+  public dataChanged(old: IFileStorage[], newData: IFileStorage[]) {
+    if (old && old.length > 0) {
+      this.tempData = newData;
+      const animationTime = 500;
+
+      const tempnewData = newData.filter(
+        (x) => old.findIndex((y) => y.FILE_STORAGE_ID === x.FILE_STORAGE_ID) == -1,
+      );
+
+      setTimeout(() => {
+        const map = new Map<string, any>();
+        Array.from(this.tileContainer.children).forEach((x: HTMLElement) =>
+          map.set(x.id, { left: x.offsetLeft, top: x.offsetTop }),
+        );
+        Array.from(this.tileContainer.children).forEach(async (x: HTMLElement) => {
+          const position = map.get(x.id);
+          x.setAttribute(
+            'style',
+            `position: absolute; left: ${position.left}px; top: ${position.top}px`,
+          );
+        });
+
+        old.forEach((doc, index) => {
+          const newIndex = newData.findIndex((x) => x.FILE_STORAGE_ID === doc.FILE_STORAGE_ID);
+          const element: HTMLElement = this.tileContainer.querySelector(
+            `#id-${doc.FILE_STORAGE_ID}`,
+          );
+          const newEle: HTMLElement = this.tileContainerTemp.querySelector(
+            `#id-${doc.FILE_STORAGE_ID}-temp`,
+          );
+
+          if (newIndex === -1) {
+            const animation = element.animate({ opacity: [1, 0] }, { duration: animationTime });
+            if (index === old.length - 1 && tempnewData.length === 0) {
+              animation.onfinish = () => {
+                this.animationFinish(newData);
+              };
+            }
+          } else if (index != newIndex) {
+            const animation = element.animate(
+              [
+                {
+                  left: `${element.offsetLeft}px`,
+                  top: `${element.offsetTop}px`,
+                },
+                {
+                  left: `${newEle.offsetLeft}px`,
+                  top: `${newEle.offsetTop}px`,
+                },
+              ],
+              { duration: animationTime },
+            );
+            if (index === old.length - 1 && tempnewData.length === 0) {
+              animation.onfinish = () => {
+                this.animationFinish(newData);
+              };
+            }
+          }
+        });
+
+        tempnewData.forEach((doc, index) => {
+          const newEle: HTMLElement = this.tileContainerTemp.querySelector(
+            `#id-${doc.FILE_STORAGE_ID}-temp`,
+          );
+          const animation = newEle.animate({ opacity: [0, 1] }, { duration: animationTime });
+          if (index === tempnewData.length - 1) {
+            animation.onfinish = () => {
+              this.animationFinish(newData);
+            };
+          }
+        });
+      }, 0);
+    } else {
+      this.dataAfterTransition = newData;
+      this.tempData = [];
+    }
+  }
+
+  private animationFinish(newData) {
+    this.dataAfterTransition = newData;
+    this.tempData = [];
+  }
+
+  public getFileIcon(fileType: string) {
+    switch (fileType) {
+      case 'CSV':
+        return csvIcon;
+      case 'JPG':
+        return jpgIcon;
+      case 'PDF':
+        return pdfIcon;
+      default:
+        return '';
+    }
+  }
+}

package/src/components/foundation-document-manager/component/document-upload/document-upload.styles.ts

@@ -0,0 +1,157 @@
+import { ElementStyles, css } from '@microsoft/fast-element';
+
+export const DocumentUploadStyles: ElementStyles = css`
+  :host {
+    height: 100%;
+    width: 100%;
+    padding: calc(var(--design-unit) * 3px);
+    position: absolute;
+    background-color: var(--neutral-layer-4);
+    box-sizing: border-box;
+  }
+
+  .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    border: calc(var(--stroke-width) * 1px) dashed var(--accent-fill-rest);
+    background-color: var(--neutral-layer-3);
+    box-sizing: border-box;
+  }
+
+  .clickable {
+    cursor: pointer;
+  }
+
+  .dialog {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .document-name {
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-stroke-hover);
+    text-align: center;
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .document-size {
+    color: var(--neutral-foreground-hint);
+    font-size: var(--type-ramp-minus-1-font-size);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .drag-prompt {
+    font-size: var(--type-ramp-minus-1-font-size);;
+    color: var(--neutral-foreground-rest);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .drag-prompt > span {
+    color: var(--accent-fill-rest);
+  }
+
+  .progress {
+    width: 261px;
+    height: calc(var(--design-unit) * 1px);
+  }
+
+  .error-progress::part(determinate) {
+    background-color: var(--error-color);
+  }
+
+  .type-prompt {
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+    text-align: center;
+    line-height: normal;
+  }
+
+  .upload-icon,
+  .error-icon {
+    fill: var(--neutral-foreground-rest);
+    -webkit-animation: animation-upload-icon 3s infinite;
+    -moz-animation: animation-upload-icon 3s infinite;
+    -o-animation: animation-upload-icon 3s infinite;
+    animation: animation-upload-icon 3s infinite;
+  }
+
+  .upload-successfull::part(determinate) {
+    background-color: var(--success-color);
+  }
+
+  .uploading-prompt {
+    width: 134px;
+    margin-left: 75px;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-rest);
+    line-height: normal;
+  }
+
+  .uploading-prompt:after {
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: bottom;
+    -webkit-animation: ellipsis steps(4, end) 2s infinite;
+    animation: ellipsis steps(4, end) 2s infinite;
+    content: '...';
+    width: 0px;
+  }
+
+  .success-icon {
+    position: relative;
+    height: calc(var(--base-height-multiplier) * 5px);
+  }
+
+  .success-icon > svg {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @keyframes ellipsis {
+    to {
+      width: 14px;
+    }
+  }
+
+  @-webkit-keyframes ellipsis {
+    to {
+      width: 14px;
+    }
+  }
+
+  .error-icon {
+    fill: var(--error-color);
+  }
+
+  @-webkit-keyframes animation-upload-icon {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes animation-upload-icon {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+`;

package/src/components/foundation-document-manager/component/document-upload/document-upload.template.ts

@@ -0,0 +1,82 @@
+import { html, ref, when } from '@microsoft/fast-element';
+import { DocumentUpload, UploadState } from './document-upload';
+import {
+  checkmark,
+  checkmarkBackground,
+  checkmarkCircle,
+  uploadIcon,
+  uploadIconLarge,
+} from '../../utils/icons';
+import { formatBytes } from '../../../../utils/formatting';
+
+export const DocumentUploadTemplate = html<DocumentUpload>`
+  <div class="container" ${ref('dropArea')}>
+    ${when(
+      (x) => x.currentState === UploadState.START,
+      html<DocumentUpload>`
+        <div class="dialog">
+          <span class="upload-icon">${uploadIconLarge}</span>
+          <a class="drag-prompt clickable" @click=${(x) => x.fileClick()}>
+            Drag and drop or
+            <span>select</span>
+            a file to upload.
+          </a>
+          <a class="type-prompt">Allows file type: PDF, CSV, JPG, PNG</a>
+        </div>
+      `,
+    )}
+    ${when(
+      (x) =>
+        x.currentState === UploadState.UPLOADING ||
+        x.currentState === UploadState.UPLOADING_UPLOADED,
+      html<DocumentUpload>`
+        <div class="dialog">
+          <span class="upload-icon">${uploadIconLarge}</span>
+          <a
+            class="${(x) =>
+              x.currentState === UploadState.UPLOADING ? 'uploading-prompt' : 'drag-prompt'}"
+          >
+            ${(x) => (x.currentState === UploadState.UPLOADING ? 'Uploading' : 'File Uploaded')}
+          </a>
+          <a class="document-name">${(x) => x.fileName}</a>
+          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
+          <zero-progress
+            class="progress ${(x) =>
+              x.currentState === UploadState.UPLOADING_UPLOADED || x.fileUploadProgress >= 100
+                ? 'upload-successfull'
+                : ''}"
+            min="0"
+            max="100"
+            value=${(x) => x.fileUploadProgress}
+          ></zero-progress>
+        </div>
+      `,
+    )}
+    ${when(
+      (x) => x.currentState === UploadState.UPLOADED,
+      html<DocumentUpload>`
+        <div class="dialog">
+          <span class="success-icon">${checkmarkBackground} ${checkmarkCircle} ${checkmark}</span>
+          <a class="drag-prompt">Document successfully uploaded</a>
+        </div>
+      `,
+    )}
+    ${when(
+      (x) => x.currentState === UploadState.ERROR,
+      html<DocumentUpload>`
+        <div class="dialog">
+          <span class="error-icon">${uploadIconLarge}</span>
+          <a class="drag-prompt">Error uploading file. Please try again.</a>
+          <a class="document-name">${(x) => x.fileName}</a>
+          <a class="document-size">${(x) => formatBytes(x.fileSize, 2)}</a>
+          <zero-progress
+            class="progress error-progress"
+            min="0"
+            max="100"
+            value="100"
+          ></zero-progress>
+        </div>
+      `,
+    )}
+  </div>
+`;

package/src/components/foundation-document-manager/component/document-upload/document-upload.ts

@@ -0,0 +1,146 @@
+import { DOM, FASTElement, customElement, observable } from '@microsoft/fast-element';
+import { DocumentUploadTemplate } from './document-upload.template';
+import { DocumentUploadStyles } from './document-upload.styles';
+import { IDocumentService } from '../../../../services/document.service';
+import { logger } from '../../../../utils';
+
+export enum UploadState {
+  START = 'START',
+  ERROR = 'ERROR',
+  UPLOADING = 'UPLOADING',
+  UPLOADING_UPLOADED = 'UPLOADING_UPLOADED',
+  UPLOADED = 'UPLOADED',
+}
+
+@customElement({
+  name: 'document-upload',
+  template: DocumentUploadTemplate,
+  styles: DocumentUploadStyles,
+})
+export class DocumentUpload extends FASTElement {
+  @IDocumentService docService: IDocumentService;
+
+  @observable currentState: UploadState = UploadState.START;
+  @observable fileName: string;
+  @observable fileSize: number;
+  @observable fileUploadProgress: number = 0;
+
+  public dropArea: HTMLDivElement;
+  public fileSelect: HTMLInputElement;
+  public endpoint: string = '';
+
+  private readonly errorViewTime: number = 7000;
+  private readonly uploadingUploadedViewTime: number = 3000;
+  private readonly uploadedViewTime: number = 3000;
+
+  private file: any;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    DOM.queueUpdate(() => {
+      this.createFileUploadInput();
+
+      ['dragenter', 'dragover', 'dragleave', 'drop'].forEach((eventName) => {
+        this.dropArea.addEventListener(eventName, this.preventDefaults, false);
+      });
+      this.dropArea.addEventListener('drop', this.handleDrop.bind(this), false);
+    });
+  }
+
+  public fileClick() {
+    this.fileSelect.click();
+  }
+
+  private handleDrop(e) {
+    if (this.currentState === UploadState.START) {
+      const dt = e.dataTransfer;
+      const files = dt.files;
+      const contentTypes = [
+        'text/csv',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'application/pdf',
+        'image/jpg',
+        'image/png',
+      ];
+
+      const firstElement = 0;
+
+      if (files[firstElement] && contentTypes.includes(files[firstElement].type)) {
+        const file = files[firstElement];
+        this.updateSelectedFile(file);
+      }
+    }
+  }
+
+  private createFileUploadInput() {
+    this.fileSelect = document.createElement('input') as HTMLInputElement;
+    this.fileSelect.type = 'file';
+    this.fileSelect.accept =
+      'application/pdf,image/jpg,image/png,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet';
+    this.fileSelect.onchange = (event) => {
+      logger.debug('file upload click');
+      this.fileSelected(event);
+    };
+  }
+
+  private fileSelected(event) {
+    // Only take the first file
+    const file = event.target.files[0];
+    this.updateSelectedFile(file);
+  }
+
+  private updateSelectedFile(file: any) {
+    this.file = file;
+    this.fileName = this.file.name;
+    this.fileSize = this.file.size;
+    this.fileSelect.value = '';
+    this.fileUploadProgress = 0;
+    this.uploadedFile();
+  }
+
+  private uploadedFile() {
+    this.currentState = UploadState.UPLOADING;
+    this.docService.uploadDocument(this.file).then((x) => {
+      if (!x.ERROR) {
+        this.fileUploadProgress = 100;
+        this.handleFinishUpload();
+      } else {
+        this.handleError(); // Add logging later
+      }
+    });
+  }
+
+  public cleanData() {
+    this.file = undefined;
+    this.fileName = undefined;
+    this.fileSize = undefined;
+    this.fileSelect.value = '';
+    this.fileUploadProgress = 0;
+    this.currentState = UploadState.START;
+  }
+
+  private preventDefaults(e) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+
+  private handleError() {
+    this.currentState = UploadState.ERROR;
+    setTimeout(() => {
+      this.currentState = UploadState.START;
+    }, this.errorViewTime);
+  }
+
+  private handleFinishUpload() {
+    this.currentState = UploadState.UPLOADING_UPLOADED;
+    setTimeout(() => {
+      if (this.currentState === UploadState.UPLOADING_UPLOADED) {
+        this.currentState = UploadState.UPLOADED;
+        setTimeout(() => {
+          this.cleanData();
+        }, this.uploadedViewTime);
+      }
+    }, this.uploadingUploadedViewTime);
+  }
+}