@genesislcap/pbc-reconciliation-ui 0.0.45 → 14.339.0

package/src/components/list/list.styles.ts

@@ -0,0 +1,88 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../styles/scrollbar.styles';
+
+const PERC_ALL_CONF = '20';
+
+export const ListStyles = css`
+  ${scrollbarStyles}
+  :host {
+    display: flex;
+    flex-direction: row;
+    flex: 1 1 ${PERC_ALL_CONF}%;
+    max-width: ${PERC_ALL_CONF}%;
+  }
+
+  .record-list {
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-height: 0;
+  }
+
+  .record-list-content {
+    overflow: auto;
+  }
+
+  .record-new {
+    display: flex;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    background-color: var(--neutral-layer-2);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-minus-1-font-size);
+    gap: calc(var(--design-unit) * 2px);
+    cursor: pointer;
+    align-items: center;
+    font-weight: 500;
+  }
+
+  .record {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0 calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    height: calc(var(--base-height-multiplier) * 4px);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .record-selected {
+    border-left: calc(var(--stroke-width) * 3px) solid var(--accent-fill-rest);
+    color: var(--neutral-foreground-rest);
+    background: var(--neutral-layer-3);
+  }
+
+  .record:hover {
+    background-color: var(--neutral-layer-3);
+    cursor: pointer;
+  }
+
+  .record-delete {
+    display: flex;
+    margin-left: auto;
+    margin-right: calc(var(--design-unit) * 2px);
+  }
+
+  .record-name {
+    font-size: var(--type-ramp-minus-1-font-size);
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .record-all {
+    display: flex;
+    flex-direction: row;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-plus-1-font-size);
+    font-weight: 700;
+  }
+
+  .add-icon {
+    color: var(--success-color);
+  }
+`;

package/src/components/list/list.template.ts

@@ -0,0 +1,36 @@
+import { html, repeat } from '@genesislcap/web-core';
+import { iconTag } from '../../tags';
+import { List } from './list';
+
+export const ListTemplate = html<List>`
+  <div class="record-list">
+    <div class="record-new" @click=${(x) => x.addRecord()}>
+      <${iconTag} class="add-icon" name="circle-plus" size="lg"></${iconTag}>
+      ${(x) => x.addButtonLabel}
+    </div>
+    
+    <div class="record-all">${(x) => x.title}</div>
+      <div class="record-list-content">
+        ${repeat(
+          (x) => x.items,
+          html<List>`
+            <div class="record record${(x, c) =>
+              c.parent.selectedItem &&
+              x[c.parent.idProperty] == c.parent.selectedItem[c.parent.idProperty]
+                ? '-selected'
+                : ''}" @click=${(x, c) => c.parent.selectRecord(c.index)}>
+              <span class="record-name">${(x, c) => x[c.parent.nameProperty]}</span>
+              <span
+                class="record-delete"
+                @click=${(x, c) => c.parent.deleteItem(c.event as CustomEvent, c.index)}
+              >
+                <${iconTag} name="trash-alt" variant="regular"></${iconTag}>
+              </span>
+            </div>
+          `,
+          { positioning: true },
+        )}
+      </div>
+    </div>
+  </div>
+`;

package/src/components/list/list.ts

@@ -0,0 +1,33 @@
+import { GenesisElement, customElement, observable } from '@genesislcap/web-core';
+import type { Configuration, DataDictionary } from '../../reconciliation.types';
+import { ListStyles as styles } from './list.styles';
+import { ListTemplate as template } from './list.template';
+
+@customElement({
+  name: 'item-list',
+  template,
+  styles,
+})
+export class List extends GenesisElement {
+  @observable items: Array<Configuration | DataDictionary> = [];
+  @observable selectedItemIndex: number;
+  @observable selectedItem: Configuration | DataDictionary;
+  @observable idProperty: string;
+  @observable nameProperty: string;
+  @observable title: string;
+  @observable addButtonLabel: string;
+
+  addRecord() {
+    this.$emit('addRecord');
+  }
+
+  selectRecord(index) {
+    this.selectedItemIndex = index;
+    this.$emit('selectRecord', this.items[index]);
+  }
+
+  deleteItem(event, index) {
+    event.stopPropagation();
+    this.$emit('deleteRecord', index);
+  }
+}

package/src/components/rapid-components.ts

@@ -0,0 +1,69 @@
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import {
+  baseComponents,
+  provideDesignSystem,
+  rapidIcon,
+  rapidBadge,
+  rapidButton,
+  rapidTextField,
+  rapidSelect,
+  rapidTabs,
+  rapidTab,
+  rapidTabPanel,
+  rapidProgressRing,
+  rapidSegmentedControl,
+  rapidSegmentedItem,
+  rapidDivider,
+  rapidListboxOption,
+  rapidNumberField,
+  rapidCheckbox,
+  rapidSwitch,
+  rapidModal,
+  rapidDialog,
+  rapidToast,
+  rapidDatePicker,
+  rapidTextArea,
+  rapidRadioGroup,
+  rapidRadio,
+} from '@genesislcap/rapid-design-system';
+import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
+
+/**
+ * @public
+ */
+export const registerCommonRapidComponents = async () => {
+  /**
+   * Register the components the app is using with the system.
+   */
+  provideDesignSystem().register(
+    /**
+     * Common across most routes, so batch register these lightweight components upfront.
+     */
+    rapidIcon(),
+    rapidBadge(),
+    rapidButton(),
+    rapidTextField(),
+    rapidSelect(),
+    rapidDivider(),
+    rapidListboxOption(),
+    rapidTab(),
+    rapidTabs(),
+    rapidTabPanel(),
+    rapidProgressRing(),
+    rapidSegmentedControl(),
+    rapidSegmentedItem(),
+    rapidNumberField(),
+    rapidCheckbox(),
+    rapidSwitch(),
+    rapidModal(),
+    rapidDialog(),
+    rapidToast(),
+    rapidDatePicker(),
+    rapidTextArea(),
+    rapidRadioGroup(),
+    rapidRadio(),
+    rapidGridComponents,
+    baseComponents.designSystemProvider(),
+    foundationLayoutComponents,
+  );
+};

package/src/components/reconciliations-panel/columns.ts

@@ -0,0 +1,74 @@
+const getColor = (result) => {
+  switch (result) {
+    case 'MATCHED':
+      return 'success';
+    case 'MISSING_VALUE':
+      return 'warning';
+    default:
+      return 'error';
+  }
+};
+
+const getResultRenderer = (received, value) => {
+  return received ? `<div style="color: var(--${getColor(value)}-color);">${value}</div>` : '';
+};
+
+export const RECONCILIATION_COLUMNS = (datasourcePair: any): any[] => [
+  {
+    field: 'RECORD_KEY',
+    headerName: 'Match Key',
+    headerClass: 'grid-header',
+    width: 130,
+    pinned: 'left',
+    cellStyle: () => ({
+      textAlign: 'center',
+    }),
+  },
+  {
+    headerName: datasourcePair ? (datasourcePair.FIRST_DATA_SOURCE_NAME ?? '') : '',
+    children: [
+      {
+        field: 'KEY_RESULT',
+        headerName: 'Primary Key Result',
+        flex: 1,
+        cellRenderer: (params) =>
+          getResultRenderer(params.data.FIRST_RECORD_RECEIVED, params.data.KEY_RESULT),
+      },
+      {
+        field: 'COMPARISON_RESULT',
+        headerName: 'Comparison Key Result',
+        flex: 1,
+        cellRenderer: (params) =>
+          getResultRenderer(params.data.FIRST_RECORD_RECEIVED, params.data.COMPARISON_RESULT),
+      },
+    ],
+  },
+  {
+    headerName: datasourcePair ? (datasourcePair.SECOND_DATA_SOURCE_NAME ?? '') : '',
+    children: [
+      {
+        field: 'KEY_RESULT',
+        headerName: 'Primary Key Result',
+        flex: 1,
+        cellRenderer: (params) =>
+          getResultRenderer(params.data.SECOND_RECORD_RECEIVED, params.data.KEY_RESULT),
+      },
+      {
+        field: 'COMPARISON_RESULT',
+        headerName: 'Comparison Key Result',
+        flex: 1,
+        cellRenderer: (params) =>
+          getResultRenderer(params.data.SECOND_RECORD_RECEIVED, params.data.COMPARISON_RESULT),
+      },
+    ],
+  },
+  {
+    field: 'TEXT',
+    headerName: 'Comment',
+    width: 130,
+    pinned: 'right',
+    cellStyle: () => ({
+      textAlign: 'center',
+    }),
+  },
+];

package/src/components/reconciliations-panel/input-parameter/input-parameter.styles.ts

@@ -0,0 +1,104 @@
+import { css } from '@genesislcap/web-core';
+import { textFieldTag } from '../../../tags';
+
+const fields = css`
+  ${textFieldTag} {
+    margin: 0;
+    width: 100%;
+  }
+
+  .file-upload-button {
+    min-width: auto;
+  }
+
+  .select-upload-file {
+    min-width: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  .select-upload-file::part(listbox) {
+    max-height: calc(var(--design-unit) * var(--base-height-multiplier) * 5px);
+  }
+`;
+
+export const InputParameterStyles = css`
+  :host {
+    display: flex;
+    width: 100%;
+  }
+
+  ${fields}
+
+  .input-parameter {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    max-width: 100%;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+
+  .input-parameter-data-source {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    height: calc(var(--design-unit) * 10px);
+    gap: calc(var(--design-unit) * 2px);
+    background-color: var(--neutral-layer-3);
+    padding: 0 calc(var(--design-unit) * 4px);
+  }
+
+  .show-hide-upload {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(var(--design-unit) * 4px);
+    width: calc(var(--design-unit) * 4px);
+    cursor: pointer;
+    border-radius: calc(var(--design-unit) * 1px);
+    background-color: rgb(255 255 255 / 6%);
+  }
+
+  .show-hide-upload:hover {
+    background-color: rgb(255 255 255 / 10%);
+  }
+
+  .chevron {
+    display: flex;
+  }
+
+  .input-parameter-upload-file {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .input-parameter-label {
+    color: var(--neutral-foreground-hint);
+    font-weight: bold;
+  }
+
+  .input-parameter-upload {
+    display: flex;
+    flex: 1;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .filename {
+    display: inline-block;
+    flex: 1;
+    width: 100%;
+    max-width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    color: var(--error-color);
+  }
+
+  .uploaded {
+    color: var(--success-color);
+  }
+`;

package/src/components/reconciliations-panel/input-parameter/input-parameter.template.ts

@@ -0,0 +1,93 @@
+import { html, when, classNames, sync, whenElse, repeat } from '@genesislcap/web-core';
+import { DatasourceType } from '../../../reconciliation.types';
+import { badgeTag, buttonTag, iconTag, optionTag, selectTag } from '../../../tags';
+import { excelFile } from '../../../utils/icons';
+import type { InputParameter } from './input-parameter';
+import { ShowHideUpload, UploadFileMode } from './input-parameter.types';
+
+export const InputParameterTemplate = html<InputParameter>`
+  <div class="input-parameter">
+    <div class="input-parameter-data-source">
+      ${when(
+        (x) => x.datasourceConfiguration.TYPE === DatasourceType.FILE,
+        html`
+          <span class="show-hide-upload" @click=${(x) => x.toggleChevron()}>
+            <${iconTag} class="chevron" name=${(x) => x.showHideUpload} size="2xs"></${iconTag}>
+          </span>
+          
+          ${excelFile}
+        `,
+      )}
+      ${when(
+        (x) => x.datasourceConfiguration.TYPE === DatasourceType.PIPELINE,
+        html`
+          <${badgeTag} fill="danger" color="text" style="font-size: calc(var(--type-ramp-minus-2-font-size) - 1px); line-height: calc(var(--type-ramp-minus-2-font-size) - 2px);">
+            DPL
+          </${badgeTag}>
+        `,
+      )}
+
+      <span>${sync((x) => x.datasourceName)}</span>
+    </div>
+
+    ${when(
+      (x) => x.datasourceConfiguration.TYPE === DatasourceType.FILE,
+      html`
+        ${when(
+          (x) => x.showHideUpload === ShowHideUpload.CHEVRON_DOWN,
+          html<InputParameter>`  
+            <div class="input-parameter-upload-file">
+              <div class="input-parameter-label">
+                Upload File
+              </div>
+              
+              <div class="input-parameter-upload">
+                <${buttonTag}
+                  class="file-upload-button"
+                  :disabled=${(x) => x.locked}
+                  @click=${(x) => x.loadFile()}
+                >
+                  New
+                </${buttonTag}>
+                
+                <${buttonTag}
+                  class="file-upload-button"
+                  :disabled=${(x) => x.locked}
+                  @click=${(x) => x.selectExistingFile()}
+                >
+                  Existing
+                </${buttonTag}>
+
+                ${whenElse(
+                  (x) => x.uploadFileMode === UploadFileMode.LABEL,
+                  html<InputParameter>`
+                    <label class="filename ${(x) => classNames(['uploaded', x.filename])}">
+                      ${(x) => x.filename ?? 'No file uploaded'}
+                    </label>
+                  `,
+                  html<InputParameter>`
+                    <${selectTag}
+                      class="select-upload-file"
+                      :value=${sync((x) => x.fileStorageValue)}
+                      :disabled=${(x) => x.locked}
+                      @change=${(x) => x.changeExistingFile()}
+                    >
+                      ${repeat(
+                        (x) => x.fileStorages,
+                        html`
+                          <${optionTag} :value=${(x) => x.FILE_STORAGE_ID}>
+                            ${(x) => x.FILE_NAME}
+                          </${optionTag}>
+                        `,
+                      )}
+                    </${selectTag}>
+                  `,
+                )}
+              </div>
+            </div>
+          `,
+        )}
+      `,
+    )}
+  </div>
+`;

package/src/components/reconciliations-panel/input-parameter/input-parameter.ts

@@ -0,0 +1,131 @@
+import { DOM, GenesisElement, attr, customElement, observable } from '@genesislcap/web-core';
+import { DatasourceConfiguration } from '../../../reconciliation.types';
+import { DocumentService } from '../../../services/document.service';
+import { logger } from '../../../utils';
+import { InputParameterStyles } from './input-parameter.styles';
+import { InputParameterTemplate } from './input-parameter.template';
+import { FileUploadButtonLabel, ShowHideUpload, UploadFileMode } from './input-parameter.types';
+
+export { ShowHideUpload, UploadFileMode };
+
+@customElement({
+  name: 'input-parameter',
+  template: InputParameterTemplate,
+  styles: InputParameterStyles,
+})
+export class InputParameter extends GenesisElement {
+  @DocumentService documentService: DocumentService;
+
+  static readonly NO_FILE_UPLOADED = 'No file uploaded';
+
+  @observable @attr datasourceConfiguration: DatasourceConfiguration;
+  @observable @attr locked: boolean = false;
+
+  @observable datasourceName: string;
+
+  @observable showHideUpload: ShowHideUpload = ShowHideUpload.CHEVRON_RIGHT;
+  @observable fileUploadButtonLabel: FileUploadButtonLabel = FileUploadButtonLabel.UPLOAD_FILE;
+  @observable filename = null;
+
+  public fileSelect: HTMLInputElement;
+  private file: any = null;
+
+  @observable uploadFileMode: UploadFileMode = UploadFileMode.LABEL;
+  @observable fileStorageValue: string = null;
+  @observable fileStorages = [];
+
+  connectedCallback() {
+    super.connectedCallback();
+    DOM.queueUpdate(() => {
+      this.fileSelect = document.createElement('input') as HTMLInputElement;
+      this.fileSelect.type = 'file';
+      this.fileSelect.accept = '.csv';
+      this.fileSelect.onchange = async (event) => {
+        await this.fileSelected(event);
+      };
+    });
+  }
+
+  datasourceConfigurationChanged() {
+    this.datasourceName = this.datasourceConfiguration.NAME;
+    this.showHideUpload = ShowHideUpload.CHEVRON_DOWN;
+    if (this.datasourceConfiguration.INPUT_PARAMETER) {
+      this.filename = this.datasourceConfiguration.INPUT_PARAMETER.FILE_NAME;
+      this.fileUploadButtonLabel = FileUploadButtonLabel.REPLACE_FILE;
+    }
+    this.uploadFileMode = UploadFileMode.LABEL;
+  }
+
+  lockedChanged() {
+    if (this.locked) {
+      this.uploadFileMode = UploadFileMode.LABEL;
+    }
+  }
+
+  toggleChevron() {
+    this.showHideUpload =
+      this.showHideUpload === ShowHideUpload.CHEVRON_RIGHT
+        ? ShowHideUpload.CHEVRON_DOWN
+        : ShowHideUpload.CHEVRON_RIGHT;
+  }
+
+  loadFile() {
+    if (this.uploadFileMode === UploadFileMode.SELECTION) {
+      this.file = null;
+      this.filename = null;
+      this.fileStorages = [];
+      this.fileStorageValue = null;
+    }
+    this.uploadFileMode = UploadFileMode.LABEL;
+    this.fileSelect.click();
+  }
+
+  private async fileSelected(event) {
+    this.file = event.target.files[0]; // Only 1st file
+    this.fileSelect.value = '';
+    this.uploadFile();
+    this.filename = this.file.name;
+    this.fileUploadButtonLabel = FileUploadButtonLabel.REPLACE_FILE;
+  }
+
+  private async uploadFile() {
+    const response = await this.documentService.uploadDocument(this.file);
+
+    if (response.ERROR) {
+      logger.error(response);
+      return;
+    }
+
+    this.$emit('uploaded', {
+      DATASOURCE_CONFIG_NAME: this.datasourceConfiguration.NAME,
+      FILE_INFO: {
+        FILE_STORAGE_ID: response[0].FILE_STORAGE_ID,
+        FILE_NAME: this.file.name,
+      },
+    });
+  }
+
+  async selectExistingFile() {
+    if (this.uploadFileMode === UploadFileMode.SELECTION) {
+      return;
+    }
+
+    this.uploadFileMode = UploadFileMode.SELECTION;
+    this.fileStorages = await this.documentService.getAllFileStorages();
+    this.fileStorageValue = this.fileStorages[0].FILE_STORAGE_ID ?? null;
+    this.changeExistingFile();
+  }
+
+  changeExistingFile() {
+    ((this.filename = this.fileStorages.find(
+      (fileStorage) => fileStorage.FILE_STORAGE_ID === this.fileStorageValue,
+    ).FILE_NAME),
+      this.$emit('uploaded', {
+        DATASOURCE_CONFIG_NAME: this.datasourceConfiguration.NAME,
+        FILE_INFO: {
+          FILE_STORAGE_ID: this.fileStorageValue,
+          FILE_NAME: this.filename,
+        },
+      }));
+  }
+}

package/src/components/reconciliations-panel/input-parameter/input-parameter.types.ts

@@ -0,0 +1,14 @@
+export enum ShowHideUpload {
+  CHEVRON_RIGHT = 'chevron-right',
+  CHEVRON_DOWN = 'chevron-down',
+}
+
+export enum FileUploadButtonLabel {
+  UPLOAD_FILE = 'Upload File',
+  REPLACE_FILE = 'Replace File',
+}
+
+export enum UploadFileMode {
+  LABEL = 'LABEL',
+  SELECTION = 'SELECTION',
+}

package/src/components/reconciliations-panel/reconciliation-no-rows-overlay.ts

@@ -0,0 +1,18 @@
+import type { ICellRendererComp, ICellRendererParams } from '@ag-grid-community/core';
+
+export class ReconciliationNoRowsOverlay implements ICellRendererComp {
+  eGui!: HTMLElement;
+
+  init(params: ICellRendererParams & { noRowsMessageFunc: () => string }) {
+    this.eGui = document.createElement('div');
+    this.eGui.innerHTML = `Results will be displayed when reconciliation is run`;
+  }
+
+  getGui() {
+    return this.eGui;
+  }
+
+  refresh(params: ICellRendererParams): boolean {
+    return false;
+  }
+}