@genesislcap/pbc-reconciliation-ui 0.0.13 → 0.0.14

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

@@ -7,9 +7,12 @@ import {
   Configuration,
   ConfigurationMode,
   DataDictionary,
+  DataDictionaryField,
   Datasource,
   DatasourceType,
+  FieldType,
   ReconConfigurationRule,
+  ToleranceType,
 } from '../../reconciliation.types';
 import { ReconciliationConfigurationService } from '../../services/reconciliation-configuration.service';
 import { DataDictionaryService } from '../../services/data-dictionary.service';
@@ -21,11 +24,14 @@ import { logger } from '../../utils';
   styles: ConfigurationsPanelStyles,
 })
 export class ConfigurationsPanel extends GenesisElement {
-  @ReconciliationConfigurationService reconciliationConfigurationService: ReconciliationConfigurationService;
+  @ReconciliationConfigurationService
+  reconciliationConfigurationService: ReconciliationConfigurationService;
   @DataDictionaryService dataDictionaryService: DataDictionaryService;
   @observable configurations: Array<Configuration> = [];
   @observable dataSources: Array<Datasource> = [];
   @observable dataDictionaries: Array<DataDictionary> = [];
+  @observable dataDictionaryFields: Array<DataDictionaryField> = [];
+  @observable filteredRuleFields: Array<DataDictionaryField> = [];
   @observable reconRules: Array<ReconConfigurationRule> = [];
   @observable selectedConfiguration: Configuration = null;
   @observable configurationName: string = null;
@@ -33,6 +39,12 @@ export class ConfigurationsPanel extends GenesisElement {
   @observable dataDictionaryId: string = '';
   @observable configurationMode: (typeof ConfigurationMode)[keyof typeof ConfigurationMode];
   @observable showConfigurationDetails: boolean = false;
+  @observable toleranceTypes: Array<ToleranceType> = [];
+  @observable fieldName: string = null;
+  @observable fieldType: FieldType = null;
+  @observable toleranceType: ToleranceType = null;
+  @observable toleranceValue: string;
+  @observable isPrimaryKey: boolean = false;
   @observable matchNullValue: Switch;
 
   async connectedCallback() {
@@ -42,16 +54,53 @@ export class ConfigurationsPanel extends GenesisElement {
   }
 
   async setConfigurations() {
-    this.configurations = await this.reconciliationConfigurationService.getReconciliationConfigurations();
+    this.configurations =
+      await this.reconciliationConfigurationService.getReconciliationConfigurations();
   }
 
   async setDataDictionaries() {
     this.dataDictionaries = await this.dataDictionaryService.getDataDictionaries();
   }
 
+  async dataDictionaryChanged() {
+    const fields = await this.dataDictionaryService.getDataDictionaryFields(this.dataDictionaryId);
+    this.dataDictionaryFields = fields;
+    this.filteredRuleFields = fields;
+    this.reconRules = [];
+    this.fieldName = fields.length > 0 ? fields[0].FIELD_NAME : '';
+    this.dataDictionaryFieldChanged();
+  }
+
+  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.DAYS];
+        break;
+      case FieldType.DATETIME:
+        toleranceTypes = [ToleranceType.MINUTES];
+        break;
+      case (FieldType.INT, FieldType.BIGDECIMAL):
+        toleranceTypes = [ToleranceType.ABSOLUTE, ToleranceType.PERCENTAGE, ToleranceType.EQUALITY];
+        break;
+      default:
+        toleranceTypes = [ToleranceType.EQUALITY];
+    }
+    return toleranceTypes;
+  }
+
   addConfiguration() {
     this.configurationMode = ConfigurationMode.CREATE;
     this.reset();
+    this.dataDictionaryChanged();
     this.showConfigurationDetails = true;
   }
 
@@ -70,13 +119,27 @@ export class ConfigurationsPanel extends GenesisElement {
     this.selectedConfiguration = configuration;
     this.configurationName = configuration.NAME;
     this.dataDictionaryId = configuration.DICTIONARY_ID;
-    const configurationRules = await this.reconciliationConfigurationService.getReconciliationConfigurationRules(
-      configuration.RECONCILIATION_CONFIG_ID,
-    );
-    this.reconRules = configurationRules || [];
-    const dataSourceConfig = await this.reconciliationConfigurationService.getReconciliationDatasourceConfiguration(
-      configuration.RECONCILIATION_CONFIG_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();
+    this.resetRule();
+    const dataSourceConfig =
+      await this.reconciliationConfigurationService.getReconciliationDatasourceConfiguration(
+        configuration.RECONCILIATION_CONFIG_ID,
+      );
     this.dataSources = dataSourceConfig;
     if(this.matchNullValue){
       this.matchNullValue.checked = configuration.MATCH_NULL;
@@ -99,9 +162,10 @@ export class ConfigurationsPanel extends GenesisElement {
             {
               label: 'Confirm',
               action: async () => {
-                const response: any = await this.reconciliationConfigurationService.deleteReconciliationConfiguration(
-                  this.configurations[index].RECONCILIATION_CONFIG_ID,
-                );
+                const response: any =
+                  await this.reconciliationConfigurationService.deleteReconciliationConfiguration(
+                    this.configurations[index].RECONCILIATION_CONFIG_ID,
+                  );
                 if (response.MESSAGE_TYPE === 'EVENT_ACK') {
                   this.configurations.splice(index, 1);
                   this.showConfigurationDetails = false;
@@ -221,4 +285,135 @@ export class ConfigurationsPanel extends GenesisElement {
 
     this.showNotificationError(response.ERROR);
   }
+
+  validateTolerance() {
+    return (
+      this.toleranceType && this.toleranceType !== ToleranceType.EQUALITY && !this.toleranceValue
+    );
+  }
+
+  addReconRule() {
+    if (!this.fieldName || !this.fieldType || !this.toleranceType || this.validateTolerance()) {
+      this.showErrorNotification(
+        'Missing fields',
+        '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_PRIMARY_KEY: this.isPrimaryKey,
+    };
+    this.reconRules.push(rule);
+    this.filterReconRuleFields();
+    this.resetRule();
+  }
+
+  filterReconRuleFields() {
+    this.filteredRuleFields = this.dataDictionaryFields.filter(
+      (field) => !this.reconRules.some((rule) => rule.FIELD_NAME === field.FIELD_NAME),
+    );
+  }
+
+  resetRule() {
+    this.fieldName =
+      this.filteredRuleFields.length > 0 ? this.filteredRuleFields[0].FIELD_NAME : '';
+    this.fieldType =
+      this.filteredRuleFields.length > 0 ? this.filteredRuleFields[0].FIELD_TYPE : null;
+    this.toleranceTypes = this.getToleranceTypes(this.fieldType);
+    this.toleranceType = this.toleranceTypes.length > 0 ? this.toleranceTypes[0] : null;
+    this.toleranceValue = null;
+    this.isPrimaryKey = false;
+  }
+
+  removeRule(index) {
+    this.reconRules.splice(index, 1);
+    this.filterReconRuleFields();
+  }
+
+  resetGridToleranceValue(evt, index) {
+    const { value } = evt.target;
+    const ruleObject = {
+      ...this.reconRules[index],
+      TOLERANCE_TYPE: value,
+      TOLERANCE_VALUE: null,
+    };
+    this.reconRules.splice(index, 1, ruleObject);
+  }
+
+  gridToleranceValueChanged(evt, index) {
+    const { value } = evt.target;
+    const toleanceValue = this.formatToleranceValue(
+      this.reconRules[index].TOLERANCE_TYPE,
+      value,
+    );
+    const ruleObject = {
+      ...this.reconRules[index],
+      TOLERANCE_VALUE: toleanceValue,
+    };
+    this.reconRules.splice(index, 1, ruleObject);
+  }
+
+  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) {
+    const { value } = evt.target;
+    this.toleranceValue = this.formatToleranceValue(this.toleranceType, value);
+  }
+
+  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;
+    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';
+  }
 }

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/rapid-components.ts

@@ -13,6 +13,8 @@ import {
   rapidSegmentedItem,
   rapidDivider,
   rapidListboxOption,
+  rapidNumberField,
+  rapidCheckbox,
 } from '@genesislcap/rapid-design-system';
 import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
 
@@ -23,23 +25,26 @@ 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(),
-    rapidButton(),
-    rapidTextField(),
-    rapidSelect(),
-    rapidDivider(),
-    rapidListboxOption(),
-    rapidTab(),
-    rapidTabs(),
-    rapidTabPanel(),
-    rapidProgressRing(),
-    rapidSegmentedControl(),
-    rapidSegmentedItem(),
-    rapidGridComponents,
-    foundationLayoutComponents,
-  );
+  provideDesignSystem()
+    .register(
+        /**
+        * Common across most routes, so batch register these lightweight components upfront.
+        */
+        rapidIcon(),
+        rapidButton(),
+        rapidTextField(),
+        rapidSelect(),
+        rapidDivider(),
+        rapidListboxOption(), 
+        rapidTab(),
+        rapidTabs(),
+        rapidTabPanel(),
+        rapidProgressRing(),
+        rapidSegmentedControl(),
+        rapidSegmentedItem(),
+        rapidNumberField(),
+        rapidCheckbox(),
+        rapidGridComponents,
+        foundationLayoutComponents,
+    );
 };

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

@@ -1,4 +1,4 @@
-import { DOM, GenesisElement, customElement, observable } from '@genesislcap/web-core';
+import { GenesisElement, customElement, observable } from '@genesislcap/web-core';
 import { ReconciliationsPanelTemplate } from './reconciliations-panel.template';
 import { ReconciliationsPanelStyles } from './reconciliations-panel.styles';
 import {
@@ -8,7 +8,7 @@ import {
   ReconciliationInsert,
   ReconciliationStatus,
 } from '../../reconciliation.types';
-import { GridPro } from '@genesislcap/rapid-grid-pro';
+import { GridPro, GridProGenesisDatasource } from '@genesislcap/rapid-grid-pro';
 import { ReconciliationConfigurationService } from '../../services/reconciliation-configuration.service';
 import { ReconciliationService } from '../../services/reconciliation.service';
 import { showNotificationError } from '../../utils/notification';
@@ -45,6 +45,8 @@ export class ReconciliationsPanel extends GenesisElement {
   @observable files: Map<string, any> = new Map();
 
   grid: GridPro;
+  datasource: GridProGenesisDatasource;
+  reconciliationSubscription: any;
 
   async connectedCallback() {
     super.connectedCallback();
@@ -55,12 +57,17 @@ export class ReconciliationsPanel extends GenesisElement {
       this.reconciliationConfigurations[0]?.RECONCILIATION_CONFIG_ID;
   }
 
-  // #region Reconciliation Methods
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.reconciliationSubscription.unsubscribe();
+  }
 
   getReconciliations() {
-    this.reconciliationService.getReconciliations().subscribe((reconciliations) => {
-      this.filterAndSortReconciliations(reconciliations);
-    });
+    this.reconciliationSubscription = this.reconciliationService
+      .getReconciliations()
+      .subscribe((reconciliations) => {
+        this.filterAndSortReconciliations(reconciliations);
+      });
   }
   filterAndSortReconciliations(reconciliations) {
     let inProgress: Array<Reconciliation> = [];

package/src/components/zero-components.ts

@@ -13,6 +13,8 @@ import {
   zeroSegmentedItem,
   zeroDivider,
   zeroListboxOption,
+  zeroNumberField,
+  zeroCheckbox,
 } from '@genesislcap/foundation-zero';
 import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
 
@@ -40,6 +42,8 @@ export const registerCommonZeroComponents = async () => {
         zeroSegmentedItem(),
         zeroDivider(),
         zeroListboxOption(),
+        zeroNumberField(),
+        zeroCheckbox(),
         zeroGridComponents,
         foundationLayoutComponents,
     );

package/src/config/templates.ts

@@ -19,6 +19,8 @@ export type TemplateComponents = {
   tabs: TemplateElementDependency;
   tab: TemplateElementDependency;
   tabPanel: TemplateElementDependency;
+  numberField: TemplateElementDependency;
+  checkbox: TemplateElementDependency;
   switch: TemplateElementDependency;
 };
 
@@ -55,6 +57,8 @@ export const defaultTemplateOptions: TemplateOptions = {
   switch: 'rapid-switch',
   tab: 'rapid-tab',
   tabPanel: 'rapid-tab-panel',
+  numberField: 'rapid-number-field',
+  checkbox: 'rapid-checkbox',
   tabs: 'rapid-tabs',
   textField: 'rapid-text-field',
 };

package/src/reconciliation.types.ts

@@ -9,12 +9,13 @@ export type Configuration = {
 };
 
 export type ReconConfigurationRule = {
-  RECONCILIATION_CONFIG_ID: string;
+  RECONCILIATION_CONFIG_ID?: string;
+  FIELD_TYPE: FieldType;
   FIELD_NAME: string;
-  // FIELD_TYPE: FieldType,
-  // TOLERANCE: string,
+  TOLERANCE_TYPE: ToleranceType;
+  TOLERANCE_VALUE: string;
   IS_PRIMARY_KEY: boolean;
-};
+}
 
 export const ConfigurationMode = {
   CREATE: 'create',
@@ -27,10 +28,10 @@ export type DataDictionary = {
 };
 
 export type DataDictionaryField = {
-  DICTIONARY_ID: string;
-  FIELD_NAME: string;
-  FIELD_TYPE: FieldType;
-};
+  DICTIONARY_ID?: string;
+  FIELD_NAME?: string;
+  FIELD_TYPE?: FieldType;
+}
 
 export type Datasource = {
   NAME: string;
@@ -64,6 +65,15 @@ export enum ReconciliationStatus {
   CANCELLED = 'CANCELLED',
 }
 
+export enum ToleranceType {
+  ABSOLUTE = 'ABSOLUTE',
+  PERCENTAGE = 'PERCENTAGE',
+  EQUALITY = 'EQUALITY',
+  DAYS = 'DAYS',
+  MINUTES = 'MINUTES',
+}
+
+
 export type DatasourceRule = {
   field: string;
   type: FieldType;

package/src/tags/tags.ts

@@ -87,6 +87,16 @@ export const dividerTag = tagFor(templateOptions.divider);
  */
 export const progressTag = tagFor(templateOptions.progress);
 
+/**
+ * @internal
+ */
+export const numberFieldTag = tagFor(templateOptions.numberField);
+
+/**
+ * @internal
+ */
+export const checkboxTag = tagFor(templateOptions.checkbox);
+
 /**
  * @internal
  */