@genesislcap/pbc-reconciliation-ui 0.0.45 → 14.339.0

package/src/components/configurations-panel/reconciliation-rule-row/reconciliation-rule-row.ts

@@ -0,0 +1,202 @@
+import { GenesisElement, customElement, observable } from '@genesislcap/web-core';
+import {
+  DataDictionaryField,
+  FieldType,
+  ReconConfigurationRule,
+  ToleranceType,
+  RuleMode,
+} from '../../../reconciliation.types';
+import { showNotificationError } from '../../../utils/notification';
+import { ReconciliationRuleRowStyles as styles } from './reconciliation-rule-row.styles';
+import { ReconciliationRuleRowTemplate as template } from './reconciliation-rule-row.template';
+
+@customElement({
+  name: 'reconciliation-rule-row',
+  template,
+  styles,
+})
+export class ReconciliationRuleRow extends GenesisElement {
+  @observable dataDictionaryFields: Array<DataDictionaryField> = [];
+  @observable filteredRuleFields: Array<DataDictionaryField> = [];
+  @observable toleranceTypes: Array<ToleranceType> = [];
+  @observable fieldName: string = null;
+  @observable fieldType: FieldType = null;
+  @observable toleranceType: ToleranceType = null;
+  @observable toleranceValue: string;
+  @observable isMatchKey: boolean = false;
+  @observable mode: RuleMode = RuleMode.ADD;
+  @observable reconRule: ReconConfigurationRule;
+  connectedCallback() {
+    super.connectedCallback();
+    if (this.mode === RuleMode.EDIT) {
+      this.fieldName = this.reconRule.FIELD_NAME;
+      this.fieldType = this.reconRule.FIELD_TYPE;
+      this.toleranceType = this.reconRule.TOLERANCE_TYPE;
+      this.toleranceValue = this.reconRule.TOLERANCE_VALUE;
+      this.isMatchKey = this.reconRule.IS_MATCH_KEY;
+    }
+    this.toleranceTypes = this.getToleranceTypes(this.fieldType);
+  }
+
+  dataDictionaryFieldChanged() {
+    this.fieldType = this.dataDictionaryFields.find(
+      (field) => field.FIELD_NAME === this.fieldName,
+    ).FIELD_TYPE;
+    this.toleranceTypes = this.getToleranceTypes(this.fieldType);
+    this.toleranceType = this.toleranceTypes[0];
+  }
+
+  getToleranceTypes(fieldType) {
+    let toleranceTypes = [];
+    switch (fieldType) {
+      case FieldType.DATE:
+        toleranceTypes = [ToleranceType.EQUALITY, ToleranceType.DAYS];
+        break;
+      case FieldType.DATETIME:
+        toleranceTypes = [ToleranceType.EQUALITY, ToleranceType.MINUTES];
+        break;
+      case FieldType.INT:
+      case FieldType.BIGDECIMAL:
+      case FieldType.DOUBLE:
+      case FieldType.LONG:
+      case FieldType.SHORT:
+        toleranceTypes = [ToleranceType.EQUALITY, ToleranceType.ABSOLUTE, ToleranceType.PERCENTAGE];
+        break;
+      default:
+        toleranceTypes = [ToleranceType.EQUALITY];
+    }
+    return toleranceTypes;
+  }
+
+  formatToleranceValue(type, value) {
+    if (type === ToleranceType.ABSOLUTE) {
+      value = this.convertToAbsolute(value);
+    } else if (type === ToleranceType.PERCENTAGE) {
+      value = this.convertToPercentage(value);
+    } else if (type === ToleranceType.DAYS || this.toleranceType === ToleranceType.MINUTES) {
+      value = value.replace(/[^0-9]/g, '');
+    }
+    return value;
+  }
+
+  toleranceValChanged(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const { value } = evt.target;
+    this.toleranceValue = this.formatToleranceValue(this.toleranceType, value);
+    if (this.mode === RuleMode.EDIT) {
+      this.updateReconRule();
+    }
+  }
+
+  tolTypeChanged() {
+    this.toleranceValue = null;
+    if (this.mode === RuleMode.EDIT) {
+      this.updateReconRule();
+    }
+  }
+
+  togglePrimaryKey() {
+    this.isMatchKey = !this.isMatchKey;
+    if (this.mode === RuleMode.EDIT) {
+      this.updateReconRule();
+    }
+  }
+
+  adjustDecimalPoints(value, parts) {
+    if (parts.length > 2) {
+      value = parts[0] + '.' + parts.slice(1).join('');
+    }
+    return value;
+  }
+
+  convertToAbsolute(value) {
+    const parts = value.split('.');
+    value = this.adjustDecimalPoints(value, parts);
+
+    const digitsCount = value.replace(/\./g, '').length;
+    const numericValue = parseFloat(value);
+    if (isNaN(numericValue) || numericValue < 0) {
+      value = '0';
+    } else if (digitsCount > 8) {
+      if (parts.length > 1) {
+        const integerPart = parts[0];
+        const fractionalPart = parts[1];
+        if (integerPart.length >= 8) {
+          value = integerPart.slice(0, 8);
+        } else {
+          const remainingDigits = 8 - integerPart.length;
+          value = integerPart + '.' + fractionalPart.slice(0, remainingDigits);
+        }
+      } else {
+        value = value.slice(0, 8);
+      }
+    }
+    return value;
+  }
+
+  convertToPercentage(value) {
+    const parts = value.split('.');
+    value = this.adjustDecimalPoints(value, parts);
+
+    if (parts.length === 2) {
+      parts[1] = parts[1].slice(0, 2);
+      value = parts[0] + '.' + parts[1];
+    }
+    let numericValue = parseFloat(value);
+    if (isNaN(numericValue) || numericValue < 0 || numericValue > 100) {
+      numericValue = null;
+    }
+    return numericValue !== null ? numericValue.toString() : '0';
+  }
+
+  resetRule() {
+    this.fieldName = '';
+    this.fieldType = null;
+    this.toleranceTypes = [];
+    this.toleranceValue = null;
+    this.isMatchKey = false;
+  }
+
+  validateTolerance() {
+    return (
+      this.toleranceType && this.toleranceType !== ToleranceType.EQUALITY && !this.toleranceValue
+    );
+  }
+
+  addRule() {
+    if (!this.fieldName || !this.fieldType || !this.toleranceType || this.validateTolerance()) {
+      showNotificationError([
+        {
+          CODE: 'Missing Fields',
+          TEXT: 'Please fill in all required fields for adding a rule.',
+        },
+      ]);
+      return;
+    }
+    const rule: ReconConfigurationRule = {
+      FIELD_NAME: this.fieldName,
+      FIELD_TYPE: this.fieldType,
+      TOLERANCE_TYPE: this.toleranceType,
+      TOLERANCE_VALUE: this.toleranceValue || null,
+      IS_MATCH_KEY: this.isMatchKey,
+    };
+    this.$emit('addRule', rule);
+    this.resetRule();
+  }
+
+  deleteRule() {
+    this.$emit('deleteRule');
+  }
+
+  updateReconRule() {
+    const rule: ReconConfigurationRule = {
+      FIELD_NAME: this.fieldName,
+      FIELD_TYPE: this.fieldType,
+      TOLERANCE_TYPE: this.toleranceType,
+      TOLERANCE_VALUE: this.toleranceValue || null,
+      IS_MATCH_KEY: this.isMatchKey,
+    };
+    this.$emit('updateRule', rule);
+  }
+}

package/src/components/data-dictionaries/columns.ts

@@ -0,0 +1,42 @@
+import { FieldType } from '../../reconciliation.types';
+import { iconTag } from '../../tags';
+import { DeleteRowActionCellRenderer } from '../../utils/delete-row-action-cell-renderer';
+
+export const DATA_DICTIONARY_FIELDS_COLUMNS = (context) => [
+  {
+    field: 'FIELD_NAME',
+    headerName: 'Field',
+    editable: true,
+    flex: 2,
+  },
+  {
+    field: 'FIELD_TYPE',
+    headerName: 'Type',
+    editable: true,
+    flex: 2,
+    cellEditor: 'agSelectCellEditor',
+    cellEditorParams: {
+      values: Object.values(FieldType),
+    },
+  },
+  {
+    headerName: '',
+    flex: 1,
+    cellRenderer: DeleteRowActionCellRenderer,
+    cellRendererParams: (params) => {
+      const deleteButton = {
+        name: `<${iconTag} name="minus" size="lg"></${iconTag}>`,
+        callback: (detail) => {
+          context.removeRowEvent(params.data);
+        },
+        actionName: 'Delete',
+      };
+      const actions = [deleteButton];
+      const enabled = true;
+      return {
+        actions,
+        enabled,
+      };
+    },
+  },
+];

package/src/components/data-dictionaries/data-dictionaries-utils.ts

@@ -0,0 +1,40 @@
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
+
+export function createNotificationDialog(
+  context: any,
+  title: string,
+  body: string,
+  labelDismissing: string,
+  actionDismissing: any,
+  labelConfirming: string,
+  actionConfirming: any,
+  actionParams?: Array<any>,
+) {
+  showNotificationDialog(
+    {
+      title,
+      body,
+      dialog: {
+        dismissingAction: {
+          label: labelDismissing,
+          // eslint-disable-next-line no-return-await
+          action: async () => await actionDismissing,
+        },
+        confirmingActions: [
+          {
+            label: labelConfirming,
+            action: async () => {
+              if (actionParams) {
+                await actionConfirming.apply(context, actionParams);
+                return;
+              }
+
+              await context[actionConfirming.name]();
+            },
+          },
+        ],
+      },
+    },
+    'rapid',
+  );
+}

package/src/components/data-dictionaries/data-dictionaries.styles.ts

@@ -0,0 +1,92 @@
+import { css } from '@genesislcap/web-core';
+import { buttonTag, selectTag, textFieldTag } from '../../tags';
+
+const PERC_LIST = '20';
+const PERC_FIELDS_AND_ACTIONS = '80';
+
+const fields = css`
+  ${textFieldTag},
+  ${selectTag} {
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+  }
+
+  ${textFieldTag}::part(root) {
+    height: calc(var(--design-unit) * 9px);
+  }
+
+  ${buttonTag}.add {
+    height: calc(var(--design-unit) * 9px);
+    display: flex;
+    margin: 0;
+    background-color: rgb(122 204 121 / 50%);
+  }
+
+  ${buttonTag}.add::part(control) {
+    padding: 0;
+  }
+
+  label {
+    font-weight: bold;
+  }
+
+  .add-icon {
+    color: var(--success-color);
+  }
+`;
+
+const dataDictionaryFieldsAndActions = css`
+  .data-dictionary-fields-and-actions {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    flex: 1 1 ${PERC_FIELDS_AND_ACTIONS}%;
+    min-height: 0;
+  }
+
+  .data-dictionary-fields {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 4px);
+  }
+
+  .data-dictionary-field,
+  .data-dictionary-grid {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .data-dictionary-add-field {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .data-dictionary-grid {
+    height: 100%;
+  }
+
+  .data-dictionary-actions {
+    display: flex;
+    flex-direction: row-reverse;
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
+  }
+`;
+
+export const DataDictionariesStyles = css`
+  .data-dictionaries {
+    display: flex;
+    flex-direction: row;
+    height: 100%;
+  }
+
+  ${fields}
+  ${dataDictionaryFieldsAndActions}
+`;

package/src/components/data-dictionaries/data-dictionaries.template.ts

@@ -0,0 +1,78 @@
+import { html, ref, sync, when } from '@genesislcap/web-core';
+import { FieldType } from '../../reconciliation.types';
+import { buttonTag, gridTag, iconTag, optionTag, selectTag, textFieldTag } from '../../tags';
+import { eventDetail } from '../../utils/eventDetail';
+import { humanize } from '../../utils/humanize';
+import type { DataDictionaries } from './data-dictionaries';
+import { DataDictionaryOperation } from './data-dictionaries.types';
+
+export const DataDictionariesTemplate = html<DataDictionaries>`
+  <div class="data-dictionaries">
+    <item-list
+      :items=${(x) => x.dictionaries}
+      :idProperty=${(_) => 'DICTIONARY_ID'}
+      :nameProperty=${(_) => 'DICTIONARY_NAME'}
+      :title=${(_) => 'All Dictionaries'}
+      :addButtonLabel=${(_) => 'New Dictionary'}
+      :selectedItem=${(x) => x.dictionarySelected}
+      @addRecord=${(x) => x.createDataDictionary()}
+      @selectRecord=${(x, c) => x.editDataDictionary(eventDetail(c))}
+      @deleteRecord=${(x, c) => x.deleteDataDictionary(eventDetail(c))}
+    ></item-list>
+
+    ${when(
+      (x) => [DataDictionaryOperation.CREATE, DataDictionaryOperation.UPDATE].includes(x.operation),
+      html<DataDictionaries>`
+        <div class="data-dictionary-fields-and-actions">
+          <div class="data-dictionary-fields">
+            <div class="data-dictionary-field">
+              <label>Dictionary Name</label>
+              <${textFieldTag} :value=${sync((x) => x.dictionaryName)}></${textFieldTag}>
+            </div>
+            
+            <div class="data-dictionary-field">
+              <label>New Field</label>
+              <div class="data-dictionary-add-field">
+                <${textFieldTag} :value=${sync((x) => x.fieldName)}></${textFieldTag}>
+                
+                <${selectTag} :value=${sync((x) => x.fieldType)}>
+                  <options-datasource
+                    value-field="value"
+                    label-field="value"
+                    option-element="${optionTag}"
+                    :data=${(_) => Object.values(FieldType).map((value) => ({ value }))}
+                  >
+                  </options-datasource>
+                </${selectTag}>
+                
+                <${buttonTag} class="add" @click=${(x) => x.addField()}>
+                  <${iconTag} name="plus" size="lg"></${iconTag}>
+                </${buttonTag}>
+              </div>
+            </div>
+
+            <div class="data-dictionary-grid">
+              <label>Existing Fields</label>
+              <${gridTag} ${ref('grid')} :gridOptions=${(x) => x.gridOptions}></${gridTag}>
+            </div>
+          </div>
+
+          <div class="data-dictionary-actions">
+            <${buttonTag} appearance="primary" @click=${(x) => x.submit()}>
+              <${iconTag} name="pen-to-square" size="lg" variant="regular"></${iconTag}>
+              &nbsp;${(x) => humanize(x.operation)} Dictionary
+            </${buttonTag}>
+            <${buttonTag} @click=${(x) => x.clearFields()}>
+              <${iconTag} name="broom" size="lg"></${iconTag}>
+              &nbsp; Clear
+            </${buttonTag}>
+            <${buttonTag} @click=${(x) => x.close()}>
+              <${iconTag} name="xmark" size="lg"></${iconTag}>
+              &nbsp; Close
+            </${buttonTag}>
+          </div>
+        </div>
+      `,
+    )}
+  </div>
+`;

package/src/components/data-dictionaries/data-dictionaries.ts

@@ -0,0 +1,236 @@
+import { GridPro } from '@genesislcap/rapid-grid-pro';
+import { DOM, GenesisElement, customElement, observable } from '@genesislcap/web-core';
+import { DataDictionary, FieldType } from '../../reconciliation.types';
+import { DataDictionaryService } from '../../services/data-dictionary.service';
+import { logger } from '../../utils';
+import { isEmpty } from '../../utils/isEmpty';
+import { showNotificationError } from '../../utils/notification';
+import { DATA_DICTIONARY_FIELDS_COLUMNS } from './columns';
+import { createNotificationDialog } from './data-dictionaries-utils';
+import { DataDictionariesStyles } from './data-dictionaries.styles';
+import { DataDictionariesTemplate } from './data-dictionaries.template';
+import { DataDictionaryOperation } from './data-dictionaries.types';
+
+export { DataDictionaryOperation };
+
+@customElement({
+  name: 'data-dictionaries',
+  template: DataDictionariesTemplate,
+  styles: DataDictionariesStyles,
+})
+export class DataDictionaries extends GenesisElement {
+  @DataDictionaryService dataDictionaryService: DataDictionaryService;
+
+  @observable operation: DataDictionaryOperation = null;
+  @observable dictionaries: Array<DataDictionary> = [];
+
+  @observable dictionarySelected: DataDictionary = null;
+
+  @observable dictionaryName: string = null;
+  @observable fieldName: string = null;
+  @observable fieldType: string = null;
+  @observable gridOptions = {};
+
+  @observable fields = [];
+
+  grid: GridPro;
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.setGridOptions([]);
+    this.dictionaries = await this.dataDictionaryService.getDataDictionaries();
+    this.fieldType = FieldType.STRING;
+  }
+
+  // #region Create, Update and Delete
+  createDataDictionary() {
+    this.operation = DataDictionaryOperation.CREATE;
+    this.dictionarySelected = null;
+    this.dictionaryName = null;
+    this.fieldName = null;
+    this.setGridOptions([]);
+    DOM.queueUpdate(() => {
+      this.setGridRows([]);
+    });
+  }
+
+  async editDataDictionary(dataDictionary: DataDictionary) {
+    this.dictionarySelected = dataDictionary;
+    this.dictionaryName = dataDictionary.DICTIONARY_NAME;
+    const data = await this.dataDictionaryService.getDataDictionaryFields(
+      this.dictionarySelected.DICTIONARY_ID,
+    );
+    this.setGridOptions(data);
+    DOM.queueUpdate(() => {
+      this.setGridRows(data);
+    });
+    this.operation = DataDictionaryOperation.UPDATE;
+  }
+
+  setGridOptions(data) {
+    Object.assign(this.gridOptions, {
+      defaultColDef: {
+        cellStyle: {
+          display: 'flex',
+          alignItems: 'center',
+        },
+        flex: 2,
+        sortable: false,
+        suppressMenu: true,
+        resizable: false,
+      },
+      columnDefs: DATA_DICTIONARY_FIELDS_COLUMNS(this),
+      rowData: data,
+      headerHeight: 40,
+      rowHeight: 40,
+    });
+  }
+
+  async deleteDataDictionary(index: number) {
+    this.operation = DataDictionaryOperation.DELETE;
+    const dataDictionary = this.dictionaries[index];
+    createNotificationDialog(
+      this,
+      `Confirm Delete`,
+      `Do you really want to delete this data dictionary [${dataDictionary.DICTIONARY_NAME}]?`,
+      'No',
+      this.clear,
+      'Yes',
+      this.executeDeleteDictionary,
+      [index],
+    );
+  }
+
+  clear() {
+    this.operation = null;
+  }
+
+  async executeDeleteDictionary(index) {
+    const response: Promise<boolean> = await this.dataDictionaryService.deleteDataDictionary(
+      this.dictionaries[index].DICTIONARY_ID,
+    );
+
+    if (response) {
+      this.dictionaries.splice(index, 1);
+      return;
+    }
+
+    logger.error('Error deleting data dictionary');
+  }
+  // #endregion
+
+  // #region Grid Events
+
+  addField() {
+    if (this.fields.some((field) => field.FIELD_NAME === this.fieldName)) {
+      createNotificationDialog(
+        this,
+        `${this.fieldName} already exists`,
+        'This field already exists. Do you want to overwrite it?',
+        'No',
+        null,
+        'Yes',
+        this.editRow,
+      );
+      return;
+    }
+
+    const field = {
+      FIELD_NAME: this.fieldName,
+      FIELD_TYPE: this.fieldType,
+    };
+
+    this.setGridRows(this.fields.concat(field));
+
+    this.fieldName = null;
+    this.fieldType = FieldType.STRING;
+  }
+
+  private editRow() {
+    this.fields.find((x) => x.FIELD_NAME === this.fieldName).FIELD_TYPE = this.fieldType;
+    this.grid?.gridApi?.refreshCells();
+    this.fieldName = null;
+    this.fieldType = FieldType.STRING;
+  }
+
+  removeRowEvent(params) {
+    this.setGridRows(this.fields.filter((x) => x.FIELD_NAME !== params.FIELD_NAME));
+  }
+
+  setGridRows(rows) {
+    this.fields = rows;
+    this.grid?.gridApi?.setRowData(this.fields);
+  }
+  // #endregion
+
+  clearFields() {
+    this.setGridRows([]);
+  }
+
+  close() {
+    this.dictionaryName = null;
+    this.fieldName = null;
+    this.operation = null;
+    this.dictionarySelected = null;
+    this.fieldType = FieldType.STRING;
+    this.setGridRows([]);
+  }
+
+  async submit() {
+    if (isEmpty(this.dictionaryName)) {
+      return;
+    }
+
+    if (this.fields.length <= 0) {
+      return;
+    }
+
+    switch (this.operation) {
+      case DataDictionaryOperation.CREATE:
+        const dataDictionaryCreate = {
+          DICTIONARY_NAME: this.dictionaryName,
+          FIELDS: this.fields,
+        };
+
+        await this.dataDictionaryService
+          .createDataDictionary(dataDictionaryCreate)
+          .then(async (response) => this.validateResponse(response));
+
+        break;
+      case DataDictionaryOperation.UPDATE:
+        const dataDictionaryUpdate = {
+          DICTIONARY_ID: this.dictionarySelected.DICTIONARY_ID,
+          DICTIONARY_NAME: this.dictionaryName,
+          FIELDS: this.fields.map((field) => ({
+            ...field,
+            DICTIONARY_ID: this.dictionarySelected.DICTIONARY_ID,
+          })),
+        };
+
+        await this.dataDictionaryService
+          .editDataDictionary(dataDictionaryUpdate)
+          .then(async (response) => this.validateResponse(response));
+
+        break;
+      default:
+        logger.error(`Unknown operation ${this.operation}`);
+    }
+  }
+
+  async validateResponse(response) {
+    if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.dictionaries = await this.dataDictionaryService.getDataDictionaries();
+      if (this.operation === DataDictionaryOperation.CREATE) {
+        this.dictionarySelected = this.dictionaries.find(
+          (dictionary) => dictionary.DICTIONARY_ID === response.GENERATED[0].DICTIONARY_ID,
+        );
+      }
+
+      this.operation = DataDictionaryOperation.UPDATE;
+
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+}

package/src/components/data-dictionaries/data-dictionaries.types.ts

@@ -0,0 +1,5 @@
+export enum DataDictionaryOperation {
+  CREATE = 'CREATE',
+  UPDATE = 'UPDATE',
+  DELETE = 'DELETE',
+}