@genesislcap/pbc-reconciliation-ui 0.0.46 → 14.339.0

package/src/components/configurations-panel/configurations-panel.ts

@@ -0,0 +1,387 @@
+import { showNotificationDialog } from '@genesislcap/foundation-notifications';
+import { DOM, GenesisElement, customElement, observable } from '@genesislcap/web-core';
+import {
+  Configuration,
+  ReconciliationFrequency,
+  ConfigurationMode,
+  DataDictionary,
+  DataDictionaryField,
+  Datasource,
+  ReconConfigurationRule,
+  ReconciliationMethod,
+  DatasourceType,
+} from '../../reconciliation.types';
+import { DataDictionaryService } from '../../services/data-dictionary.service';
+import { ReconciliationConfigurationService } from '../../services/reconciliation-configuration.service';
+import { logger } from '../../utils';
+import { isEmpty } from '../../utils/isEmpty';
+import { showNotificationError, showNotificationErrors } from '../../utils/notification';
+import { ConfigurationDatasources } from './configuration-datasources/configuration-datasources';
+import { ConfigurationsPanelStyles } from './configurations-panel.styles';
+import { ConfigurationsPanelTemplate } from './configurations-panel.template';
+
+export type DatasourceEdit = {
+  IS_EDITING: boolean;
+} & Datasource;
+
+@customElement({
+  name: 'configurations-panel',
+  template: ConfigurationsPanelTemplate,
+  styles: ConfigurationsPanelStyles,
+})
+export class ConfigurationsPanel extends GenesisElement {
+  @ReconciliationConfigurationService
+  reconciliationConfigurationService: ReconciliationConfigurationService;
+  @DataDictionaryService dataDictionaryService: DataDictionaryService;
+  @observable configurations: Array<Configuration> = [];
+  @observable datasources: Array<DatasourceEdit> = [];
+  @observable dataDictionaries: Array<DataDictionary> = [];
+
+  @observable selectedConfiguration: Configuration = null;
+  @observable configurationName: string = null;
+  @observable reconciliationFrequency: string = ReconciliationFrequency.BATCH;
+  @observable reconciliationStrategy: string = ReconciliationMethod.ONE_TO_ONE;
+  @observable dataDictionaryId: string = '';
+  @observable configurationMode: (typeof ConfigurationMode)[keyof typeof ConfigurationMode];
+  @observable showConfigurationDetails: boolean = false;
+  @observable matchNull: boolean = false;
+
+  @observable reconRules: Array<ReconConfigurationRule> = [];
+  @observable dataDictionaryFields: Array<DataDictionaryField> = []; // Keep in both
+  @observable filteredRuleFields: Array<DataDictionaryField> = []; // Keep in both
+  @observable firstDatasource: ConfigurationDatasources;
+  @observable secondDatasource: ConfigurationDatasources;
+  @observable primaryDatasource: string;
+  @observable dataPipelineList = [];
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.setConfigurations();
+    await this.setDataDictionaries();
+    await this.setDataPipelines();
+  }
+
+  async setConfigurations() {
+    this.configurations =
+      await this.reconciliationConfigurationService.getReconciliationConfigurations();
+  }
+
+  async setDataPipelines() {
+    const response = await this.reconciliationConfigurationService.getReconciliationDataPipelines();
+    this.dataPipelineList =
+      this.reconciliationFrequency === ReconciliationFrequency.BATCH
+        ? response.BATCH_DATA_SOURCE_NAMES
+        : response.REAL_TIME_DATA_SOURCE_NAMES;
+  }
+
+  async setDataDictionaries() {
+    this.dataDictionaries = await this.dataDictionaryService.getDataDictionaries();
+    this.dataDictionaryId = this.dataDictionaries[0]?.DICTIONARY_ID;
+    this.dataDictionaryChanged();
+  }
+
+  async dataDictionaryChanged() {
+    const fields = await this.dataDictionaryService.getDataDictionaryFields(this.dataDictionaryId);
+    this.dataDictionaryFields = fields;
+    this.filteredRuleFields = fields;
+    this.reconRules = [];
+  }
+
+  addConfiguration() {
+    this.configurationMode = ConfigurationMode.CREATE;
+    this.reset();
+    this.dataDictionaryChanged();
+    this.showConfigurationDetails = true;
+    DOM.queueUpdate(() => {
+      this.resetDatasources();
+    });
+  }
+
+  resetDatasources() {
+    this.firstDatasource.setDefaultDatasource('Datasource 1');
+    this.secondDatasource.setDefaultDatasource('Datasource 2');
+  }
+
+  reset() {
+    this.selectedConfiguration = {};
+    this.configurationName = null;
+    this.datasources = [];
+    this.reconRules = [];
+    this.dataDictionaryId =
+      this.dataDictionaries.length > 0 ? this.dataDictionaries[0].DICTIONARY_ID : '';
+    this.matchNull = false;
+    this.primaryDatasource = null;
+  }
+
+  async selectConfiguration(configuration: Configuration) {
+    this.reset();
+
+    this.configurationMode = ConfigurationMode.EDIT;
+    this.reconciliationStrategy = configuration.RECONCILIATION_STRATEGY;
+    this.primaryDatasource = configuration.PRIMARY_DATASOURCE;
+    this.selectedConfiguration = configuration;
+    this.configurationName = configuration.NAME;
+    this.dataDictionaryId = configuration.DICTIONARY_ID;
+    const fields = await this.dataDictionaryService.getDataDictionaryFields(this.dataDictionaryId);
+    this.dataDictionaryFields = fields;
+    const configurationRules =
+      await this.reconciliationConfigurationService.getReconciliationConfigurationRules(
+        configuration.RECONCILIATION_CONFIG_ID,
+      );
+    this.reconRules =
+      configurationRules.map((rule) => {
+        return {
+          ...rule,
+          FIELD_TYPE: this.dataDictionaryFields.find(
+            (field) => field.FIELD_NAME === rule.FIELD_NAME,
+          ).FIELD_TYPE,
+        };
+      }) || [];
+    this.filterReconRuleFields();
+    const dataSourceConfig =
+      await this.reconciliationConfigurationService.getReconciliationDatasourceConfiguration(
+        configuration.RECONCILIATION_CONFIG_ID,
+      );
+    this.matchNull = configuration.MATCH_NULL;
+    this.showConfigurationDetails = true;
+    this.datasources = dataSourceConfig;
+    DOM.queueUpdate(() => {
+      if (this.reconciliationStrategy === ReconciliationMethod.ONE_TO_ONE) {
+        this.firstDatasource.setDatasource(this.datasources[0]);
+        this.secondDatasource.setDatasource(this.datasources[1]);
+      }
+    });
+  }
+
+  deleteConfiguration(index: number) {
+    showNotificationDialog(
+      {
+        title: 'Confirm Delete',
+        body: `Do you really want to delete "${this.configurations[index].NAME}"?`,
+        dialog: {
+          dismissingAction: {
+            label: 'Dismiss',
+            action: () => null,
+          },
+          confirmingActions: [
+            {
+              label: 'Confirm',
+              action: async () => {
+                const response: any =
+                  await this.reconciliationConfigurationService.deleteReconciliationConfiguration(
+                    this.configurations[index].RECONCILIATION_CONFIG_ID,
+                  );
+
+                if (response.MESSAGE_TYPE !== 'EVENT_ACK') {
+                  showNotificationError(response.ERROR);
+                  return;
+                }
+
+                this.configurations.splice(index, 1);
+                this.showConfigurationDetails = false;
+              },
+            },
+          ],
+        },
+      },
+      'rapid',
+    );
+  }
+
+  @observable isEditingDatasourceName: boolean = false;
+
+  addDataSource(datasource: Datasource) {
+    this.datasources.push({
+      NAME: datasource.NAME ?? `Data Source ${this.datasources.length + 1}`,
+      TYPE: datasource.TYPE,
+      CONFIG_DATA: datasource.CONFIG_DATA,
+      IS_EDITING: false,
+    });
+  }
+
+  deleteDataSource(index: number) {
+    if (this.configurationMode === ConfigurationMode.CREATE) {
+      this.datasources.splice(index, 1);
+    }
+  }
+
+  setDatasources() {
+    const datasourcesList = [];
+    if (
+      this.configurationMode === ConfigurationMode.CREATE &&
+      this.reconciliationStrategy === ReconciliationMethod.ONE_TO_ONE
+    ) {
+      datasourcesList.push(this.firstDatasource.getDatasource(0));
+      datasourcesList.push(this.secondDatasource.getDatasource(1));
+      this.datasources = datasourcesList;
+    }
+  }
+  transformDatasources() {
+    return this.datasources.map((dataSource, index) => {
+      return {
+        ...dataSource,
+        INDEX: index,
+      };
+    });
+  }
+
+  validateDatasources() {
+    let validate = true;
+    this.datasources.forEach((element) => {
+      if (element.TYPE === DatasourceType.PIPELINE && isEmpty(element.CONFIG_DATA)) {
+        validate = false;
+        return false;
+      }
+    });
+    return validate;
+  }
+
+  validateConfiguration() {
+    const errors = [];
+    if (!this.configurationName || !this.dataDictionaryId || this.datasources.length === 0) {
+      errors.push({ CODE: 'Missing fields', TEXT: 'Please fill in all required fields.' });
+    }
+    if (
+      this.reconciliationStrategy === ReconciliationMethod.ONE_TO_MANY &&
+      !this.primaryDatasource
+    ) {
+      errors.push({
+        CODE: 'Missing primary datasource',
+        TEXT: 'Please provide primary datasource for 1:N reconciliation strategy',
+      });
+    }
+    if (!this.validateDatasources()) {
+      errors.push({
+        CODE: 'Missing Pipeline source',
+        TEXT: 'Data Pipeline Source required',
+      });
+    }
+    return errors;
+  }
+
+  saveConfiguration() {
+    this.setDatasources();
+    const errors = this.validateConfiguration();
+    if (errors.length > 0) {
+      showNotificationErrors(errors);
+      return;
+    }
+    let reqObject: Configuration;
+    switch (this.configurationMode) {
+      case ConfigurationMode.CREATE:
+        reqObject = {
+          DICTIONARY_ID: this.dataDictionaryId,
+          RECONCILIATION_STRATEGY: this.reconciliationStrategy,
+          NAME: this.configurationName,
+          RULES: this.reconRules,
+          DATASOURCES: this.transformDatasources(),
+          MATCH_NULL: this.matchNull,
+          PRIMARY_DATASOURCE_NAME: this.primaryDatasource,
+        };
+        this.reconciliationConfigurationService
+          .createReconciliationConfiguration(reqObject)
+          .then((response) => this.validateResponse(response));
+        break;
+      case ConfigurationMode.EDIT:
+        reqObject = {
+          RECONCILIATION_CONFIG_ID: this.selectedConfiguration.RECONCILIATION_CONFIG_ID,
+          DICTIONARY_ID: this.dataDictionaryId,
+          RECONCILIATION_STRATEGY: this.selectedConfiguration.RECONCILIATION_STRATEGY,
+          NAME: this.configurationName,
+          RULES: this.reconRules,
+          DATASOURCES: this.datasources,
+          MATCH_NULL: this.matchNull,
+          PRIMARY_DATASOURCE: this.primaryDatasource,
+        };
+        this.reconciliationConfigurationService
+          .updateReconciliationConfiguration(reqObject)
+          .then((response) => this.validateResponse(response));
+        break;
+      default:
+        logger.error(`Unknown operation ${this.configurationMode}`);
+    }
+  }
+
+  async validateResponse(response) {
+    if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.configurations =
+        await this.reconciliationConfigurationService.getReconciliationConfigurations();
+
+      if (this.configurationMode === ConfigurationMode.CREATE) {
+        this.selectedConfiguration = this.configurations.find(
+          (configuration) =>
+            configuration.RECONCILIATION_CONFIG_ID ===
+            response.GENERATED[0].RECONCILIATION_CONFIG_ID,
+        );
+      }
+
+      this.configurationMode = ConfigurationMode.EDIT;
+
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  addReconRule(rule) {
+    if (this.reconRules.some((r) => r.FIELD_NAME === rule.FIELD_NAME)) {
+      showNotificationError([
+        {
+          CODE: 'Duplicate Field',
+          TEXT: 'Field already exists in the reconciliation rules.',
+        },
+      ]);
+      return;
+    }
+    this.reconRules.push(rule);
+    this.filterReconRuleFields();
+  }
+
+  filterReconRuleFields() {
+    this.filteredRuleFields = this.dataDictionaryFields.filter(
+      (field) => !this.reconRules.some((rule) => rule.FIELD_NAME === field.FIELD_NAME),
+    );
+  }
+
+  removeRule(index) {
+    this.reconRules.splice(index, 1);
+    this.filterReconRuleFields();
+  }
+
+  updateRule(rule, index) {
+    this.reconRules.splice(index, 1, rule);
+  }
+
+  clearReconciliationRules() {
+    this.reconRules = [];
+    this.filterReconRuleFields();
+  }
+
+  public onPrimaryDatasourceChange = (selection) => {
+    this.primaryDatasource = selection;
+  };
+
+  datasourceNameChanged(evt, index) {
+    const { value } = evt.target;
+    if (this.datasources[index].NAME === this.primaryDatasource) {
+      this.primaryDatasource = value;
+    }
+    this.datasources[index].NAME = value;
+  }
+
+  clearDatasources() {
+    this.datasources.splice(0, this.datasources.length);
+    this.primaryDatasource = null;
+  }
+
+  reconStrategyChanged() {
+    if (
+      this.configurationMode === ConfigurationMode.CREATE &&
+      this.reconciliationStrategy === ReconciliationMethod.ONE_TO_ONE
+    ) {
+      DOM.queueUpdate(() => {
+        this.resetDatasources();
+      });
+    }
+  }
+}

package/src/components/configurations-panel/recon-rules-columns.ts

@@ -0,0 +1,117 @@
+// import {
+//   RapidAgSelectRenderer,
+//   RapidBooleanRenderer,
+//   RapidNumberEditor,
+// } from '@genesislcap/rapid-grid-pro';
+// import { iconTag } from '../../tags';
+// import { DeleteRowActionCellRenderer } from '../../utils/delete-row-action-cell-renderer';
+
+// export const RECON_RULES_FIELDS_COLUMNS = (context) => [
+//   {
+//     field: 'FIELD_NAME',
+//     headerName: 'Field',
+//     editable: false,
+//     suppressMenu: true,
+//     resizable: false,
+//     sortable: false,
+//     flex: 2,
+//   },
+//   {
+//     field: 'FIELD_TYPE',
+//     headerName: 'Type',
+//     editable: false,
+//     suppressMenu: true,
+//     resizable: false,
+//     sortable: false,
+//     flex: 2,
+//   },
+//   {
+//     field: 'TOLERANCE_TYPE',
+//     headerName: 'Type',
+//     editable: true,
+//     suppressMenu: false,
+//     resizable: false,
+//     sortable: false,
+//     cellStyle: {
+//       overflow: 'visible',
+//       paddingLeft: 0,
+//       paddingRight: 0,
+//     },
+//     // cellRenderer: RapidAgSelectRenderer,
+//     cellRendererParams: {
+//       accessor: 'TOLERANCE_TYPE',
+//       defaultValue: 'Select filter',
+//       onSelect: (value, params) => context.resetToleranceValue(value, params),
+//       options: (data) =>
+//         Object.values(context.getToleranceTypes(data.FIELD_TYPE)).map((value) => ({
+//           name: value,
+//           displayName: value,
+//         })),
+//     },
+//     cellEditor: RapidAgSelectRenderer,
+//     cellEditorParams: (params) => {
+//       debugger;
+//       console.log(params);
+//       return { values: context.getToleranceTypes(params.data.FIELD_TYPE) };
+//     },
+//     flex: 2,
+//   },
+//   {
+//     field: 'TOLERANCE_VALUE',
+//     headerName: '',
+//     editable: true,
+//     suppressMenu: true,
+//     resizable: false,
+//     sortable: false,
+//     cellEditor: RapidNumberEditor,
+//     cellEditorParams: (params) => {
+//       console.log(params);
+//       onChange: context.gridToleranceValueChanged(
+//         params.data.TOLERANCE_TYPE,
+//         params.data.TOLERANCE_VALUE,
+//       );
+//     },
+//     // cellRenderer: RapidNumberEditor,
+//     // cellRendererParams: {
+//     //   onChange: (params) => context.gridToleranceValueChanged(params.data.TOLERANCE_TYPE,params.data.TOLERANCE_VALUE),
+//     // },
+//     flex: 2,
+//   },
+//   {
+//     field: 'IS_PRIMARY_KEY',
+//     headerName: 'PRIMARY KEY',
+//     suppressMenu: true,
+//     resizable: false,
+//     editable: true,
+//     sortable: false,
+//     cellRenderer: RapidBooleanRenderer,
+//     flex: 2,
+//   },
+//   {
+//     headerName: '',
+//     suppressMenu: true,
+//     resizable: false,
+//     sortable: false,
+//     flex: 1,
+//     cellStyle: () => ({
+//       display: 'flex',
+//       alignItems: 'center',
+//     }),
+//     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/configurations-panel/reconciliation-rule-row/reconciliation-rule-row.styles.ts

@@ -0,0 +1,73 @@
+import { css } from '@genesislcap/web-core';
+import { buttonTag, numberFieldTag, selectTag, textFieldTag } from '../../../tags';
+
+export const ReconciliationRuleRowStyles = css`
+  .recon-rule-row {
+    display: flex;
+    gap: calc(var(--design-unit) * 3px);
+    align-items: center;
+    padding: 0 calc(var(--design-unit) * 4px);
+    font-size: var(--type-ramp-minus-2-font-size);
+  }
+
+  .col-width {
+    width: 20%;
+  }
+
+  .col-width-5 {
+    width: 5%;
+  }
+
+  .col-width-30 {
+    width: 30%;
+  }
+
+  .overflow {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  .col-width-30 ${selectTag} {
+    min-width: 100%;
+  }
+
+  .col-width ${numberFieldTag}::part(label) {
+    margin: 0;
+  }
+
+  .col-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  ${buttonTag}.add-rule-btn::part(control) {
+    padding: 0;
+  }
+
+  .add-rule-btn {
+    display: flex;
+    margin: 0;
+    background-color: rgb(122 204 121 / 50%);
+    min-width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+    width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+  }
+
+  .delete-rule-btn {
+    display: flex;
+    margin: 0;
+    background-color: var(--error-color);
+    min-width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+    width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
+  }
+
+  ${buttonTag}.delete-rule-btn::part(control) {
+    padding: 0;
+  }
+
+  ${textFieldTag} {
+    margin: 0;
+  }
+`;

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

@@ -0,0 +1,122 @@
+import { html, repeat, sync, when } from '@genesislcap/web-core';
+import { ToleranceType, RuleMode } from '../../../reconciliation.types';
+import {
+  buttonTag,
+  checkboxTag,
+  iconTag,
+  numberFieldTag,
+  optionTag,
+  selectTag,
+  textFieldTag,
+} from '../../../tags';
+import { ReconciliationRuleRow } from './reconciliation-rule-row';
+
+export const ReconciliationRuleRowTemplate = html<ReconciliationRuleRow>`
+  <div class="recon-rule-row">
+    ${when(
+      (x) => x.mode === RuleMode.ADD,
+      html`
+        <div class="col-width-30">
+          <${selectTag} 
+            :value=${sync((x) => x.fieldName)}
+            @change= ${(x) => x.dataDictionaryFieldChanged()}
+          >
+            <${optionTag} value="">Select Field</${optionTag}>
+            ${repeat(
+              (x) => x.filteredRuleFields,
+              html`
+                <${optionTag} :value=${(x) => x.FIELD_NAME}>
+                  ${(x) => x.FIELD_NAME}
+                </${optionTag}>
+              `,
+            )}
+          </${selectTag}>
+        </div>
+      `,
+    )}
+
+    ${when(
+      (x) => x.mode === RuleMode.EDIT,
+      html`
+        <div class="col-width-30 overflow">${(x) => x.fieldName}</div>
+      `,
+    )}
+    
+    <div class="col-width">
+      ${when(
+        (x) => x.mode === RuleMode.ADD,
+        html`
+          <${textFieldTag} :value=${sync((x) => x.fieldType)} disabled></${textFieldTag}>
+        `,
+      )}
+
+      ${when(
+        (x) => x.mode === RuleMode.EDIT,
+        html`
+          ${(x) => x.fieldType}
+        `,
+      )}
+    </div>
+    
+    <div class="col-width-30">
+      <${selectTag} 
+        :value=${sync((x) => x.toleranceType)} 
+        @change=${(x) => x.tolTypeChanged()}
+      >
+        ${repeat(
+          (x) => x.toleranceTypes,
+          html`
+            <${optionTag} :value=${(x) => x}>
+              ${(x) => x}
+            </${optionTag}>
+          `,
+        )}
+      </${selectTag}>
+    </div>
+    
+    <div class="col-width">
+      ${when(
+        (x) => x.toleranceType !== ToleranceType.EQUALITY && x.toleranceType !== null,
+        html`
+          <${numberFieldTag}
+            :value=${sync((x) => x.toleranceValue)}
+            @input=${(x, c) => x.toleranceValChanged(c.event as CustomEvent)}>
+          </${numberFieldTag}>
+        `,
+      )}
+    </div>
+
+    <div class="col-width col-center">
+      ${when(
+        (x) => x.mode === RuleMode.EDIT,
+        html`
+          <${checkboxTag}
+            :checked=${(x) => x.isMatchKey}
+            @click=${(x) => x.togglePrimaryKey()}
+          >
+          </${checkboxTag}>
+        `,
+      )}
+    </div>
+
+    <div class="col-width-5">
+      ${when(
+        (x) => x.mode === RuleMode.ADD,
+        html`
+          <${buttonTag} class="add-rule-btn" @click=${(x) => x.addRule()}>
+            <${iconTag} name="plus" size="md"></${iconTag}>
+          </${buttonTag}>
+        `,
+      )}
+
+      ${when(
+        (x) => x.mode === RuleMode.EDIT,
+        html`
+          <${buttonTag} class="delete-rule-btn" @click=${(x) => x.deleteRule()}>
+            <${iconTag} name="minus" size="md"></${iconTag}>
+          </${buttonTag}>
+        `,
+      )}
+    </div>  
+  </div>
+`;