@genesislcap/pbc-documents-ui 0.0.1

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

@@ -0,0 +1,245 @@
+import { ElementStyles, css } from '@microsoft/fast-element';
+
+export const DocumentManagerStyles: ElementStyles = css`
+  :host {
+    font-family: var(--body-font);
+  }
+
+  ::-webkit-scrollbar {
+    width: calc(var(--base-height-multiplier) * 1px);
+  }
+
+  ::-webkit-scrollbar-track {
+    background: var(--neutral-layer-1);
+  }
+
+  ::-webkit-scrollbar-thumb {
+    background: var(--neutral-fill-rest);
+  }
+
+  .body {
+    display: flex;
+    height: inherit;
+  }
+
+  .container {
+    height: 100%;
+    width: 100%;
+    background: var(--neutral-layer-3);
+    position: relative;
+    border-radius: calc((var(--control-corner-radius) + 2) * 1px);
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.44);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .close-btn {
+    min-width: calc((var(--base-height-multiplier) - 2 )* 3px);
+    display: flex;
+    width: calc((var(--base-height-multiplier) - 2 ) * 3px);
+    height: calc((var(--base-height-multiplier) - 2 ) * 3px);
+    border-radius: calc(var(--control-corner-radius) * 1px);
+    background-color: var(--neutral-layer-3);
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+  }
+
+  .close-btn:hover {
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 95%);
+  }
+
+  .close-btn::part(control):focus-visible {
+    border-color: transparent;
+    box-shadow: none;
+  }
+
+  .directory-list {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .directory-btn,
+  .directory-btn-selected {
+    border-left: 3px solid transparent;
+    margin: 0;
+    border-radius: 0px;
+    height: calc((var(--base-height-multiplier) - 1) * 4px);
+    background-color: transparent;
+    box-sizing: border-box;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-hint);
+    text-align: left;
+    line-height: var(--type-ramp-base-line-height);
+  }
+
+  .directory-btn-selected {
+    border-left: 3px solid;
+    color: var(--neutral-foreground-rest);
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
+    background-color: color-mix(in srgb, var(--neutral-foreground-rest), transparent 96%);
+  }
+
+  .footer {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-minus-2-font-size);
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+  }
+
+  .header {
+    padding: calc(var(--design-unit) * 2px);
+    padding-left: calc(var(--design-unit) * 4px);
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+  }
+
+  .title {
+    font-weight: 500;
+    font-size: var(--type-ramp-minus-1-font-size);
+    color: var(--neutral-foreground-rest);
+    text-align: left;
+    line-height: normal;
+  }
+
+  .pinned-left {
+    width: 163px;
+    padding: 0;
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+    background-color: var(--neutral-layer-4);
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .pinned-left-header {
+    display: flex;
+    height: calc(var(--base-height-multiplier) * 4px);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-weight: 500;
+    font-size: var(--type-ramp-minus-2-font-size);
+    color: var(--neutral-foreground-hint);
+    line-height: var(--type-ramp-base-line-height);
+    align-items: center;
+  }
+
+  .pinned-right {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    flex-direction: column;
+  }
+
+  .pinned-right-body {
+    height: 100%;
+    position: relative;
+  }
+
+  .pinned-right-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+    height: calc(var(--base-height-multiplier) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    justify-content: space-between;
+  }
+
+  .pinned-right-header-left-group {
+    flex: 1 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--design-unit) * 4px);
+  }
+
+  .pinned-right-header-left-group > zero-text-field {
+    max-width: 418px;
+    flex: 1 1;
+  }
+
+  .upload-btn {
+    color: var(--neutral-foreground-hint);
+    font-size: var(--type-ramp-minus-1-font-size);
+    background-color: var(--neutral-layer-3);
+    margin: 0;
+  }
+
+  .uploading {
+    color: var(--neutral-foreground-rest);
+    background-color: var(--neutral-layer-1);
+  }
+
+  .upload-btn:hover {
+    color: var(--neutral-foreground-rest);
+  }
+
+  .upload-btn > svg {
+    width: calc((var(--base-height-multiplier) - 2 )* 3px);
+  }
+
+  .upload-btn::part(start) {
+    margin-inline-end: calc(var(--design-unit) * 2px);
+  }
+
+  fast-dialog {
+    --dialog-height: 668px;
+    --dialog-width: 952px;
+  }
+
+  zero-segmented-control:first-child {
+    border-top-left-radius: calc(var(--control-corner-radius) * 1px);
+    border-bottom-left-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  zero-segmented-control:last-child {
+    border-top-right-radius: calc(var(--control-corner-radius) * 1px);
+    border-bottom-right-radius: calc(var(--control-corner-radius) * 1px);
+  }
+
+  zero-segmented-item {
+    height: calc((var(--base-height-multiplier) - 1 ) * 4px);
+    padding: 0 calc(var(--design-unit) * 3px);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-hint);
+    fill: var(--neutral-foreground-hint);
+  }
+
+  zero-segmented-item > svg:focus,
+  zero-segmented-item > svg > g:focus,
+  zero-segmented-item > svg > g > path:focus {
+    outline: none !important;
+  }
+
+  zero-segmented-item[aria-checked='true'] {
+    box-shadow: none;
+    fill: var(--neutral-foreground-rest);
+    background-image: linear-gradient(
+      -141.41742576267188deg,
+      rgba(71, 188, 224, 0.5) 0%,
+      rgba(101, 77, 249, 0.5) 100%
+    );
+    border-image-slice: 1;
+    border-image-source: linear-gradient(to bottom, #47bce0, #654df9);
+    border-width: calc(var(--stroke-width) * 1px);
+    border-style: solid;
+  }
+
+  zero-modal::part(dialog) {
+    padding: 0;
+    background: var(--neutral-layer-4);
+    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  zero-modal::part(top) {
+    padding: calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+`;

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

@@ -0,0 +1,111 @@
+import { html, ref, repeat, when } from '@microsoft/fast-element';
+import { IDirectories, FoundationDocumentManager, ViewSelection } from './document-manager';
+import { closeIcon } from '@genesislcap/foundation-ui';
+import { hamburgerIcon, searchIcon, uploadIcon, viewTileIcon } from './utils/icons';
+import { DocumentTile } from './component/document-tile/document-tile';
+import { DocumentUpload } from './component/document-upload/document-upload';
+import { DocumentGrid } from './component/document-grid/document-grid';
+
+DocumentTile;
+DocumentUpload;
+DocumentGrid;
+
+export const DocumentManagerTemplate = html<FoundationDocumentManager>`
+  <fast-dialog ${ref('modal')}>
+    <div class="container">
+      <div class="header">
+        <a class="title">Document manager</a>
+        <zero-button class="close-btn" @click=${(x) => x.modal.hide()}>
+          ${closeIcon('')}
+        </zero-button>
+      </div>
+      <div class="body">
+        <div class="pinned-left">
+          <a class="pinned-left-header">DIRECTORIES</a>
+          <div class="directory-list">
+            ${repeat(
+              (x) => x.directories,
+              html<IDirectories>`
+                <zero-button
+                  class="directory-btn${(x, c) =>
+                    x.id == c.parent.currentdirectory ? '-selected' : ''}"
+                  @click=${(x, c) => c.parent.changeDirectory(x.id)}
+                >
+                  ${(x) => x.icon} ${(x) => x.title}
+                </zero-button>
+              `,
+              { positioning: true },
+            )}
+          </div>
+        </div>
+        <div class="pinned-right">
+          <div class="pinned-right-header">
+            <span class="pinned-right-header-left-group">
+              <zero-text-field
+                ${ref('searchField')}
+                placeholder="Search..."
+                @change=${(x) => x.changeSearchFilter()}
+              >
+                ${searchIcon}
+              </zero-text-field>
+              <zero-segmented-control>
+                <zero-segmented-item
+                  checked="true"
+                  value="GRID"
+                  @click=${(x) => x.changeView(ViewSelection.GRID)}
+                >
+                  ${hamburgerIcon}
+                </zero-segmented-item>
+                <zero-segmented-item value="TILE" @click=${(x) => x.changeView(ViewSelection.TILE)}>
+                  ${viewTileIcon}
+                </zero-segmented-item>
+              </zero-segmented-control>
+            </span>
+            <zero-button
+              class="upload-btn ${(x) => (x.uploadingDocument ? 'uploading' : '')}"
+              @click=${(x) => x.startUploading()}
+            >
+              ${uploadIcon('start')} Upload Document
+            </zero-button>
+          </div>
+          <div class="pinned-right-body">
+            ${when(
+              (x) => x.currentView == ViewSelection.TILE && !x.uploadingDocument,
+              html<FoundationDocumentManager>`
+                <document-tile
+                  :data=${(x) => x.filteredDocuments}
+                  @download-document=${(x, c) => x.downloadDocument((c.event as any).detail)}
+                  @remove-document=${(x, c) => x.deleteDocument((c.event as any).detail)}
+                ></document-tile>
+              `,
+            )}
+            ${when(
+              (x) => x.currentView == ViewSelection.GRID && !x.uploadingDocument,
+              html<FoundationDocumentManager>`
+                <document-grid
+                  :data=${(x) => x.filteredDocuments}
+                  @download-document=${(x, c) => x.downloadDocument((c.event as any).detail)}
+                  @remove-document=${(x, c) => x.deleteDocument((c.event as any).detail)}
+                ></document-grid>
+              `,
+            )}
+            ${when(
+              (x) => x.uploadingDocument,
+              html<FoundationDocumentManager>`
+                <document-upload></document-upload>
+              `,
+            )}
+          </div>
+        </div>
+      </div>
+      <div class="footer">
+        ${when(
+          (x) => !x.uploadingDocument,
+          html<FoundationDocumentManager>`
+            <a>${(x) => x.filteredDocuments.length} Documents</a>
+          `,
+        )}
+      </div>
+    </div>
+  </fast-dialog>
+`;

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

@@ -0,0 +1,128 @@
+import { FASTElement, customElement, observable } from '@microsoft/fast-element';
+import { DocumentManagerTemplate } from './document-manager.template';
+import { DocumentManagerStyles } from './document-manager.styles';
+import { IDocumentService } from '../../services/document.service';
+import { Dialog } from '@microsoft/fast-components';
+import { folderIcon, userIcon } from './utils/icons';
+import { IFileStorage } from '../../utils/types';
+import { Auth } from '@genesislcap/foundation-comms';
+import { TextField } from '@microsoft/fast-foundation';
+import { logger } from '../../utils';
+import { updateArray } from '../../utils/dataserver';
+
+export enum DIRECTORY {
+  ALL = 'ALL',
+  MY_FILES = 'MY_FILES',
+}
+export interface IDirectories {
+  id: DIRECTORY;
+  icon: any;
+  title: string;
+  selected: boolean;
+}
+
+export enum ViewSelection {
+  GRID = 'GRID',
+  TILE = 'TILE',
+}
+
+@customElement({
+  name: 'foundation-document-manager',
+  template: DocumentManagerTemplate,
+  styles: DocumentManagerStyles,
+})
+export class FoundationDocumentManager extends FASTElement {
+  @IDocumentService docService: IDocumentService;
+  @Auth auth!: Auth;
+
+  public modal: Dialog;
+  public searchField: TextField;
+
+  @observable currentView: ViewSelection = ViewSelection.GRID;
+  @observable uploadingDocument: boolean = false;
+  @observable directories: IDirectories[] = [
+    {
+      id: DIRECTORY.ALL,
+      icon: folderIcon,
+      title: 'All files',
+      selected: true,
+    },
+    {
+      id: DIRECTORY.MY_FILES,
+      icon: userIcon,
+      title: 'My files',
+      selected: false,
+    },
+  ];
+  @observable currentdirectory = DIRECTORY.ALL;
+  @observable documents: IFileStorage[] = [];
+  @observable filteredDocuments: IFileStorage[] = [];
+
+  private currentFilter = '';
+
+  connectedCallback(): void {
+    super.connectedCallback();
+    this.streamDocuments();
+    this.modal.show();
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback();
+  }
+
+  public open() {
+    this.modal.show();
+  }
+
+  public changeSearchFilter() {
+    this.currentFilter = this.searchField.currentValue.trim().toLowerCase();
+    this.filterDocumentsByDirectory();
+  }
+
+  private streamDocuments() {
+    this.docService.streamDocuments().subscribe((x) => {
+      if (!x.ERROR) {
+        this.documents = updateArray(x.ROW, this.documents);
+        this.changeSearchFilter();
+      } else {
+        logger.error(x.ERROR);
+      }
+    });
+  }
+
+  private filterDocumentsByDirectory() {
+    if (this.currentdirectory === DIRECTORY.ALL) {
+      this.filteredDocuments = this.documents;
+    } else if (this.currentdirectory === DIRECTORY.MY_FILES) {
+      this.filteredDocuments = this.documents.filter(
+        (x) => x.CREATED_BY === this.auth.currentUser.username,
+      );
+    }
+    this.filteredDocuments = this.filteredDocuments.filter((x) =>
+      x.FILE_NAME.trim().toLowerCase().includes(this.currentFilter),
+    );
+  }
+
+  public startUploading() {
+    this.currentdirectory = null;
+    this.uploadingDocument = true;
+  }
+
+  public changeDirectory(directory: DIRECTORY) {
+    this.currentdirectory = directory;
+    this.uploadingDocument = false;
+    this.filterDocumentsByDirectory();
+  }
+
+  public changeView(view: ViewSelection) {
+    this.currentView = view;
+  }
+
+  public downloadDocument(event) {
+    this.docService.downloadDocument(event);
+  }
+
+  public deleteDocument(event) {
+    console.error('Deleting document ' + event); // temp
+  }
+}

package/src/components/foundation-document-manager/index.ts

@@ -0,0 +1 @@
+export * from '.';

package/src/components/foundation-document-manager/utils/action-cell-renderer.ts

@@ -0,0 +1,55 @@
+interface IAction {
+  name: string;
+  callback: (any?) => void;
+  actionName: string;
+  disabled?: boolean;
+}
+
+interface IAgGridActions {
+  actions: IAction[];
+}
+
+export class ActionCellRenderer {
+  content: HTMLElement;
+
+  constructor() {
+    this.content = document.createElement('div');
+  }
+
+  init(params: IAgGridActions) {
+    this.renderButtons(params);
+  }
+
+  renderButtons(params) {
+    const { actions, data, enabled } = params;
+    this.content.setAttribute('style', 'display: flex; gap: 8px; align-items: center;');
+    actions.forEach((action: IAction) => {
+      const button: HTMLElement = document.createElement('span');
+      button.title = action.actionName;
+      const defualtStyle = 'display: flex; cursor: pointer;';
+      const defualtColor = 'fill: #879ba6;';
+      button.setAttribute('style', defualtStyle + defualtColor);
+      button.addEventListener('mouseover', () => {
+        button.setAttribute('style', 'fill: #ffffff;' + defualtStyle);
+      });
+      button.addEventListener('mouseleave', () => [
+        button.setAttribute('style', defualtStyle + defualtColor),
+      ]);
+      button.innerHTML = action.name;
+      button.addEventListener('click', () => {
+        action.callback(data);
+      });
+      this.content.appendChild(button);
+    });
+  }
+
+  refresh(params): boolean {
+    this.content.innerHTML = '';
+    this.renderButtons(params);
+    return true;
+  }
+
+  getGui(): HTMLElement {
+    return this.content;
+  }
+}

package/src/components/foundation-document-manager/utils/file-type-cell-renderer.ts

@@ -0,0 +1,33 @@
+import { getFileColor, getFileType } from '../../../utils/formatting';
+
+export class FileTypeCellRenderer {
+  content: HTMLElement;
+
+  constructor() {
+    this.content = document.createElement('div');
+  }
+
+  init(params: any) {
+    this.renderButtons(params);
+  }
+
+  renderButtons(params) {
+    const { data } = params;
+    const fileType = getFileType(data.FILE_NAME);
+    let style =
+      'height: fit-content; width: fit-content; padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 2px); border-radius: calc(var(--control-corner-radius) * 1px); font-size: 10px; font-weight: 700; color: rgba(20, 20, 20, 0.89); text-align: center; line-height: normal;';
+    style += ` background-color:  ${getFileColor(fileType)};`;
+    this.content.setAttribute('style', style);
+    this.content.innerText = fileType;
+  }
+
+  refresh(params): boolean {
+    this.content.innerHTML = '';
+    this.renderButtons(params);
+    return true;
+  }
+
+  getGui(): HTMLElement {
+    return this.content;
+  }
+}