@genesislcap/pbc-reconciliation-ui 0.0.46 → 14.339.1-alpha-d5fee56.0

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

@@ -0,0 +1,441 @@
+import { GridProGenesisDatasource } from '@genesislcap/rapid-grid-pro';
+import { GenesisElement, Tabs, customElement, html, observable } from '@genesislcap/web-core';
+import {
+  DatasourceConfiguration,
+  CRITERIA_NO_ROWS,
+  Reconciliation,
+  ReconciliationInsert,
+  ReconciliationStatus,
+  DatasourceType,
+  MessageType,
+} from '../../reconciliation.types';
+import { ReconciliationConfigurationService } from '../../services/reconciliation-configuration.service';
+import { ReconciliationService } from '../../services/reconciliation.service';
+import { getFormattedDate } from '../../utils';
+import { showNotificationError } from '../../utils/notification';
+import { RECONCILIATION_COLUMNS } from './columns';
+import { ReconciliationNoRowsOverlay } from './reconciliation-no-rows-overlay';
+import { ReconciliationsPanelStyles } from './reconciliations-panel.styles';
+import { ReconciliationsPanelTemplate } from './reconciliations-panel.template';
+import {
+  getDatasourcePairResultCriteria,
+  createInputParameters,
+  getStatusIcon,
+  createDatasourcePairItemsOptions,
+  ReconciliationsTab,
+  ReconciliationOperation,
+} from './reconciliations-panel.utils';
+import { ResultDetails } from './result-details/result-details';
+
+@customElement({
+  name: 'reconciliations-panel',
+  template: ReconciliationsPanelTemplate,
+  styles: ReconciliationsPanelStyles,
+})
+export class ReconciliationsPanel extends GenesisElement {
+  @ReconciliationConfigurationService
+  reconciliationConfigurationService: ReconciliationConfigurationService;
+  @ReconciliationService reconciliationService: ReconciliationService;
+
+  @observable toggleTodaysReconciliations: boolean = true;
+  @observable togglePreviousReconciliations: boolean = true;
+  @observable reconciliationsInProgress: Array<Reconciliation> = [];
+  @observable historicalReconciliationsToday: Array<Reconciliation> = [];
+  @observable historicalReconciliationsTodayFiltered: Array<Reconciliation> = [];
+  @observable historicalReconciliationsPrevious: Array<Reconciliation> = [];
+  @observable historicalReconciliationsPreviousFiltered: Array<Reconciliation> = [];
+
+  @observable datasourceConfigurations: Array<DatasourceConfiguration> = [];
+  @observable reconciliationConfigurations: any = [];
+  @observable reconciliationConfiguration: string = null;
+
+  @observable reconciliationName: string = null;
+
+  @observable reconciliation: any = null;
+
+  private generatedReconciliationId: string = null;
+
+  @observable lockInputParameters = false;
+  @observable runReconciliationButtonDisable: boolean = true;
+
+  @observable matchedTabCriteria: string = CRITERIA_NO_ROWS;
+  @observable breaksTabCriteria: string = CRITERIA_NO_ROWS;
+
+  @observable filterType: string = 'Name';
+  @observable textFilter: string = '';
+  @observable dateFilter: string = '';
+
+  @observable files: Map<string, any> = new Map();
+
+  reconciliationSubscription: any;
+
+  resultDetails: ResultDetails;
+
+  @observable allBreaksDatasource: GridProGenesisDatasource;
+  @observable allMatchedDatasource: GridProGenesisDatasource;
+
+  @observable selectedTab: ReconciliationsTab = ReconciliationsTab.ALL_BREAKS;
+
+  @observable datasourcePairs: Map<string, any> = new Map();
+  @observable viewDatasourcePairValue: string = null;
+  @observable datasourcePairsItemsOptions = html``;
+
+  tabs: Tabs;
+
+  async connectedCallback() {
+    super.connectedCallback();
+    this.getReconciliations();
+    await this.setReconciliationConfigurations();
+  }
+
+  public async setReconciliationConfigurations() {
+    this.reconciliationConfigurations =
+      await this.reconciliationConfigurationService.getReconciliationConfigurations();
+    this.reconciliationConfiguration =
+      this.reconciliationConfigurations[0]?.RECONCILIATION_CONFIG_ID;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.reconciliationSubscription.unsubscribe();
+  }
+
+  async reconciliationConfigurationChanged(oldValue, newValue) {
+    if (!oldValue || !newValue) {
+      return;
+    }
+
+    if (!this.reconciliationConfiguration) {
+      return;
+    }
+
+    const nameExist =
+      this.reconciliationConfigurations.filter((x) => x.NAME === this.reconciliationName).length >
+      0;
+
+    if (nameExist) {
+      this.reconciliationName = this.reconciliationConfigurations.filter(
+        (x) => x.RECONCILIATION_CONFIG_ID === this.reconciliationConfiguration,
+      )[0].NAME;
+    }
+
+    if (!this.reconciliation?.RECONCILIATION_ID) {
+      await this.clearFields();
+    }
+  }
+
+  getReconciliations() {
+    this.reconciliationSubscription = this.reconciliationService
+      .getReconciliations()
+      .subscribe(async (reconciliations) => {
+        this.filterAndSortReconciliations(reconciliations);
+
+        // 1
+        if (this.generatedReconciliationId) {
+          const generatedReconciliation = reconciliations.find(
+            (reconciliation) => reconciliation.RECONCILIATION_ID == this.generatedReconciliationId,
+          );
+
+          this.reconciliation = { ...generatedReconciliation };
+
+          if (generatedReconciliation.STATUS !== ReconciliationStatus.IN_PROGRESS) {
+            await this.reloadView(generatedReconciliation);
+          }
+
+          this.generatedReconciliationId = null;
+
+          return;
+        }
+
+        // 2
+        if (this.reconciliation?.RECONCILIATION_ID) {
+          const selectedReconciliationModified = reconciliations.find(
+            (reconciliation) =>
+              reconciliation.RECONCILIATION_ID == this.reconciliation.RECONCILIATION_ID,
+          );
+
+          if (selectedReconciliationModified) {
+            if (
+              this.reconciliation.STATUS == ReconciliationStatus.IN_PROGRESS &&
+              selectedReconciliationModified.STATUS !== ReconciliationStatus.IN_PROGRESS
+            ) {
+              await this.reloadView(selectedReconciliationModified);
+            }
+          }
+
+          return;
+        }
+      });
+  }
+
+  async reloadView(reconciliation) {
+    this.reconciliation = { ...reconciliation };
+    await this.getDatasourcePairs(reconciliation.RECONCILIATION_ID);
+    this.populateDatasourcePairItemsOptions();
+    this.changeViewSelect();
+  }
+
+  filterAndSortReconciliations(reconciliations) {
+    const inProgress: Array<Reconciliation> = [];
+    const remainingStatuses: Array<Reconciliation> = [];
+
+    reconciliations.forEach((record) => {
+      if (record.STATUS === ReconciliationStatus.IN_PROGRESS) {
+        inProgress.push(record);
+      } else {
+        remainingStatuses.push(record);
+      }
+    });
+
+    inProgress.sort((a, b) => b.DATETIME - a.DATETIME);
+    this.reconciliationsInProgress = inProgress;
+    this.filterHistoricalReconciliations(remainingStatuses);
+  }
+
+  filterHistoricalReconciliations(remainingStatuses: Array<Reconciliation>) {
+    const todayRecords: Array<Reconciliation> = [];
+    const previousDayRecords: Array<Reconciliation> = [];
+    remainingStatuses.sort((a, b) => b.DATETIME - a.DATETIME);
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const todayTimestamp = today.getTime();
+    remainingStatuses.forEach((record) => {
+      const { iconName, iconClass } = getStatusIcon(record.STATUS);
+
+      if (record.DATETIME <= todayTimestamp) {
+        previousDayRecords.push({ ...record, iconName, iconClass });
+      } else {
+        todayRecords.push({ ...record, iconName, iconClass });
+      }
+    });
+    this.historicalReconciliationsToday = todayRecords;
+    this.historicalReconciliationsTodayFiltered = todayRecords;
+    this.historicalReconciliationsPrevious = previousDayRecords;
+    this.historicalReconciliationsPreviousFiltered = previousDayRecords;
+  }
+
+  filterTypeChanged() {
+    this.toggleTodaysReconciliations = this.filterType === 'Name';
+  }
+
+  async selectReconciliation(reconciliation: Reconciliation) {
+    this.reconciliation = reconciliation;
+    this.reconciliationName = reconciliation.RECONCILIATION_NAME;
+
+    const inputParameters = JSON.parse(reconciliation.INPUT_PARAMETERS);
+    this.files = new Map(Object.entries(inputParameters));
+
+    this.datasourceConfigurations = Object.keys(inputParameters).map((key) => ({
+      NAME: key,
+      RECONCILIATION_CONFIG_ID: reconciliation.RECONCILIATION_CONFIG_ID,
+      INPUT_PARAMETER: {
+        FILE_STORAGE_ID: inputParameters[key].FILE_STORAGE_ID,
+        FILE_NAME: inputParameters[key].FILE_NAME,
+      },
+      TYPE: inputParameters[key].TYPE,
+    }));
+
+    this.reconciliationConfiguration = reconciliation.RECONCILIATION_CONFIG_ID;
+    this.runReconciliationButtonDisable =
+      this.reconciliation.STATUS !== ReconciliationStatus.CANCELLED;
+    this.lockInputParameters = this.reconciliation.STATUS !== ReconciliationStatus.CANCELLED;
+    await this.getDatasourcePairs(this.reconciliation.RECONCILIATION_ID);
+    this.reloadGridsAndCriterias();
+    this.tabs.activeid = ReconciliationsTab.ALL_BREAKS.toString();
+    this.reconciliationsTabChanged(ReconciliationsTab.ALL_BREAKS);
+  }
+
+  async newReconciliation() {
+    this.lockInputParameters = false;
+    this.reconciliationName = this.reconciliationConfigurations[0].NAME;
+    this.reconciliationConfiguration =
+      this.reconciliationConfigurations[0].RECONCILIATION_CONFIG_ID;
+    this.matchedTabCriteria = CRITERIA_NO_ROWS;
+    this.breaksTabCriteria = CRITERIA_NO_ROWS;
+    this.reconciliation = {};
+    await this.clearFields();
+    this.filterType = 'Name';
+    this.viewDatasourcePairValue = null;
+    this.tabs.activeid = ReconciliationsTab.ALL_BREAKS.toString();
+    this.reloadDatasource(this.allBreaksDatasource, ReconciliationOperation.NEW);
+    this.reloadDatasource(this.allMatchedDatasource, ReconciliationOperation.NEW);
+    this.clearFilters();
+  }
+
+  async runReconciliation() {
+    const reconciliationInsert: ReconciliationInsert = {
+      RECONCILIATION_NAME: this.reconciliationName,
+      RECONCILIATION_CONFIG_ID: this.reconciliationConfiguration,
+      INPUT_PARAMETERS: createInputParameters(this.datasourceConfigurations, this.files),
+    };
+
+    const response = await this.reconciliationService.runReconciliation(reconciliationInsert);
+
+    if (response.MESSAGE_TYPE === MessageType.EVENT_ACK) {
+      this.lockInputParameters = true;
+      this.generatedReconciliationId = response.GENERATED[0].RECONCILIATION_ID;
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  downloadReconciliationReport() {}
+
+  fileUploaded(datasourceNameAndFileInfo) {
+    this.files.set(
+      datasourceNameAndFileInfo.DATASOURCE_CONFIG_NAME,
+      datasourceNameAndFileInfo.FILE_INFO,
+    );
+    const onlyTypeFileDatasourceConfigurations = this.datasourceConfigurations.filter(
+      (datasourceConfiguration) => datasourceConfiguration.TYPE === DatasourceType.FILE,
+    );
+    this.runReconciliationButtonDisable =
+      onlyTypeFileDatasourceConfigurations.length !== this.files.size;
+  }
+
+  async clearFields() {
+    this.datasourceConfigurations = [];
+    this.datasourceConfigurations =
+      await this.reconciliationConfigurationService.getReconciliationDatasourceConfiguration(
+        this.reconciliationConfiguration,
+      );
+    this.datasourcePairs = new Map();
+    this.files = new Map();
+
+    const allConfigurationsArePipelines = this.datasourceConfigurations.every(
+      (configuration) => configuration.TYPE === DatasourceType.PIPELINE,
+    );
+
+    this.runReconciliationButtonDisable = !allConfigurationsArePipelines;
+  }
+
+  async stopReconciliation(evt: CustomEvent, reconciliationId: string) {
+    evt.stopPropagation();
+
+    const response = await this.reconciliationService.stopReconciliation(reconciliationId);
+
+    if (response.MESSAGE_TYPE === MessageType.EVENT_ACK) {
+      this.lockInputParameters = false;
+      this.runReconciliationButtonDisable = false;
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  openResultDetails(params) {
+    this.resultDetails.open(
+      params.data.RECONCILIATION_RECORD_RESULT_ID,
+      this.datasourceConfigurations,
+      {
+        USER_NAME: params.data.USER_NAME,
+        TEXT: params.data.TEXT,
+        TIMESTAMP: params.data.DATETIME,
+      },
+    );
+  }
+
+  clearFilters() {
+    this.textFilter = '';
+    this.dateFilter = '';
+    this.historicalReconciliationsPreviousFiltered = this.historicalReconciliationsPrevious;
+    this.historicalReconciliationsTodayFiltered = this.historicalReconciliationsToday;
+  }
+
+  filterByName(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const { value } = evt.target;
+
+    if (value.length > 0) {
+      this.historicalReconciliationsPreviousFiltered =
+        this.historicalReconciliationsPrevious.filter((record) =>
+          record.RECONCILIATION_NAME.toLowerCase().includes(value.toLowerCase()),
+        );
+      this.historicalReconciliationsTodayFiltered = this.historicalReconciliationsToday.filter(
+        (record) => record.RECONCILIATION_NAME.toLowerCase().includes(value.toLowerCase()),
+      );
+    } else {
+      this.historicalReconciliationsPreviousFiltered = this.historicalReconciliationsPrevious;
+      this.historicalReconciliationsTodayFiltered = this.historicalReconciliationsToday;
+    }
+  }
+
+  filterByDate(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    const { value } = evt.target;
+    const formattedDate = getFormattedDate(value);
+
+    this.historicalReconciliationsPreviousFiltered = this.historicalReconciliationsPrevious.filter(
+      (record) => getFormattedDate(record.DATETIME) === formattedDate,
+    );
+  }
+
+  reloadDatasource(datasource: GridProGenesisDatasource, operation: ReconciliationOperation) {
+    if (!datasource) {
+      return;
+    }
+
+    datasource.deferredGridOptions = {
+      noRowsOverlayComponent:
+        operation === ReconciliationOperation.NEW ? ReconciliationNoRowsOverlay : null,
+      onCellDoubleClicked: (params) => this.openResultDetails(params),
+      columnDefs: RECONCILIATION_COLUMNS(this.datasourcePairs.get(this.viewDatasourcePairValue)),
+    };
+
+    datasource.restart();
+  }
+
+  reconciliationsTabChanged(reconciliationsTab: ReconciliationsTab) {
+    this.selectedTab = reconciliationsTab;
+    this.populateDatasourcePairItemsOptions();
+    this.changeViewSelect();
+  }
+
+  async changeViewSelect() {
+    this.reloadGridsAndCriterias();
+  }
+
+  populateDatasourcePairItemsOptions() {
+    this.datasourcePairsItemsOptions = createDatasourcePairItemsOptions(
+      this.datasourcePairs,
+      this.reconciliation.STATUS,
+    );
+
+    const firstDatasourcePair = this.datasourcePairs.values().next().value;
+
+    this.viewDatasourcePairValue =
+      this.datasourcePairs.size > 0
+        ? `${firstDatasourcePair.FIRST_DATA_SOURCE_NAME}${firstDatasourcePair.SECOND_DATA_SOURCE_NAME}`
+        : null;
+  }
+
+  async getDatasourcePairs(reconciliationId) {
+    this.datasourcePairs =
+      await this.reconciliationService.getReconciliationDatasourcePairs(reconciliationId);
+
+    const firstDatasourcePair = this.datasourcePairs.values().next().value;
+
+    this.viewDatasourcePairValue = `${firstDatasourcePair.FIRST_DATA_SOURCE_NAME}${firstDatasourcePair.SECOND_DATA_SOURCE_NAME}`;
+  }
+
+  private reloadGridsAndCriterias() {
+    // Breaks
+    this.breaksTabCriteria = getDatasourcePairResultCriteria(
+      this.reconciliation.RECONCILIATION_ID,
+      this.datasourcePairs.get(this.viewDatasourcePairValue),
+      false,
+    );
+    this.reloadDatasource(this.allBreaksDatasource, ReconciliationOperation.HISTORICAL);
+
+    // Matched
+    this.matchedTabCriteria = getDatasourcePairResultCriteria(
+      this.reconciliation.RECONCILIATION_ID,
+      this.datasourcePairs.get(this.viewDatasourcePairValue),
+      true,
+    );
+    this.reloadDatasource(this.allMatchedDatasource, ReconciliationOperation.HISTORICAL);
+  }
+}

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

@@ -0,0 +1,103 @@
+import { normaliseCriteria } from '@genesislcap/foundation-comms';
+import { html, repeat } from '@genesislcap/web-core';
+import {
+  ComparisonResult,
+  DatasourceType,
+  KeyResult,
+  ReconciliationStatus,
+} from '../../reconciliation.types';
+import { optionTag } from '../../tags';
+
+export enum ReconciliationsTab {
+  ALL_BREAKS,
+  ALL_MATCHED,
+}
+
+export enum ReconciliationOperation {
+  NEW = 'NEW',
+  HISTORICAL = 'HISTORICAL',
+}
+
+export const createInputParameters = (
+  datasourceConfigurations: Array<any>,
+  files: Map<string, any>,
+): {
+  [key: string]: any;
+} => {
+  if (!datasourceConfigurations || datasourceConfigurations.length === 0) {
+    return {};
+  }
+
+  const inputParameters = {};
+
+  datasourceConfigurations.forEach((datasourceConfiguration) => {
+    inputParameters[datasourceConfiguration.NAME] = {
+      TYPE: datasourceConfiguration.TYPE,
+    };
+
+    if (datasourceConfiguration.TYPE !== DatasourceType.FILE) {
+      return;
+    }
+
+    const file = files.get(datasourceConfiguration.NAME);
+
+    inputParameters[datasourceConfiguration.NAME] = {
+      ...inputParameters[datasourceConfiguration.NAME],
+      FILE_STORAGE_ID: file.FILE_STORAGE_ID,
+      FILE_NAME: file.FILE_NAME,
+    };
+  });
+
+  return inputParameters;
+};
+
+export const getDatasourcePairResultCriteria = (
+  reconciliationId: string,
+  datasourcePair: any,
+  matched?: boolean,
+) => {
+  const criteria = `RECONCILIATION_ID == "${reconciliationId}"
+    && (KEY_RESULT ${matched ? '==' : '!='} "${KeyResult.MATCHED}"
+      ${matched ? '&&' : '||'} COMPARISON_RESULT ${matched ? '==' : '!='} "${ComparisonResult.MATCHED}")
+    && (FIRST_DATASOURCE_NAME == "${datasourcePair.FIRST_DATA_SOURCE_NAME}"
+      && SECOND_DATASOURCE_NAME == "${datasourcePair.SECOND_DATA_SOURCE_NAME}")`;
+
+  return normaliseCriteria(criteria);
+};
+
+export function getStatusIcon(status: ReconciliationStatus) {
+  switch (status) {
+    case ReconciliationStatus.COMPLETED:
+      return createIcon('check', 'completed-status');
+    case ReconciliationStatus.FAILED:
+      return createIcon('xmark', 'failed-status');
+    default:
+      return createIcon('exclamation', 'cancelled-status');
+  }
+}
+
+export const createIcon = (iconName: string, iconClass: string) => ({
+  iconName: iconName,
+  iconClass: iconClass,
+});
+
+export const createDatasourcePairItemsOptions = (
+  datasourcePairsItems,
+  reconciliationStatus,
+) => html`
+  ${repeat(
+    () => Array.from(datasourcePairsItems.values()),
+    html`
+      <${optionTag} :value="${(x) => `${x.FIRST_DATA_SOURCE_NAME}${x.SECOND_DATA_SOURCE_NAME}`}">
+        ${(x, c) => `${x.FIRST_DATA_SOURCE_NAME} > ${x.SECOND_DATA_SOURCE_NAME}${getBreaksCounter(x, c.parent.selectedTab, reconciliationStatus)}`}
+      </${optionTag}>
+    `,
+  )}
+`;
+
+const getBreaksCounter = (datasourcePair, selectedTab, reconciliationStatus) => {
+  return selectedTab === ReconciliationsTab.ALL_BREAKS &&
+    reconciliationStatus !== ReconciliationStatus.IN_PROGRESS
+    ? ` (${datasourcePair.BREAKS_COUNTER})`
+    : '';
+};

package/src/components/reconciliations-panel/result-details/result-details.styles.ts

@@ -0,0 +1,108 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../../styles/scrollbar.styles';
+import { textAreaTag } from '../../../tags';
+
+const top = css`
+  .modal::part(top) {
+    height: 0;
+    margin: 0;
+  }
+
+  .modal-top {
+    margin: 0;
+    padding: calc(var(--design-unit) * 2px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    font-weight: bold;
+  }
+`;
+
+const recordInformation = css`
+  .parent-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .record-information {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    overflow: hidden auto;
+  }
+
+  .record-information-column {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    text-wrap: nowrap;
+  }
+
+  .record-information-cell {
+    display: flex;
+    flex-direction: row;
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 2px);
+    height: calc(var(--base-height-multiplier) * 2px);
+  }
+
+  .record-information-data,
+  .record-information-data-field-name {
+    display: flex;
+  }
+
+  .record-information-data-field-name {
+    font-weight: bold;
+    color: var(--rapid-ag-header-foreground-color);
+  }
+
+  .green {
+    color: var(--success-color);
+  }
+
+  .red {
+    color: var(--error-color);
+  }
+
+  .amber {
+    color: var(--warning-color);
+  }
+`;
+
+export const ResultDetailsStyles = css`
+  ${scrollbarStyles}
+
+  .modal::part(dialog) {
+    padding: 0;
+    margin-right: 0;
+    height: 100%;
+    max-height: none;
+    overflow: hidden auto;
+  }
+
+  .modal-main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .comment-container {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .space-x {
+    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px);
+  }
+
+  .save-comment-button {
+    display: flex;
+    justify-content: end;
+    padding: 0 calc(var(--design-unit) * 2px) calc(var(--design-unit) * 2px) 0;
+  }
+
+  ${top}
+  ${recordInformation}
+
+  ${textAreaTag}::part(control) {
+    display: flex;
+  }
+`;