@genesislcap/pbc-reconciliation-ui 0.0.46 → 14.339.0

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

@@ -0,0 +1,88 @@
+import { html, ref, repeat, sync } from '@genesislcap/web-core';
+import { buttonTag, modalTag, textAreaTag } from '../../../tags';
+import { getFormattedDateTime } from '../../../utils';
+import type { ResultDetails } from './result-details';
+import { PropertyName } from './result-details.types';
+
+export const ResultDetailsTemplate = html<ResultDetails>`
+  <${modalTag}
+    ${ref('modal')}
+    class="modal"
+    show-close-icon="false"
+    :onCloseCallback=${(x) => () => x.close()}
+    @click=${(x, c) => x.modalBackdropClickHandler(c.event, x.close)}
+  >
+    <div class="modal-main">  
+      <div class="modal-top">Record Information</div>
+      
+      <div class="record-information">      
+        <div class="record-information-column">
+          ${repeat(
+            (x) => x.columns,
+            html`
+              <div class="record-information-cell record-information-data-field-name">
+                ${(x) => x.attributeValue[PropertyName.FIELD_NAME] ?? ' '}
+              </div>
+            `,
+          )}
+        </div>
+
+        <div class="record-information-column">
+          ${repeat(
+            (x) => x.columns,
+            html`
+              <div
+                class="record-information-cell ${(x, c) =>
+                  c.parent.applyStyle(x, PropertyName.FIRST_VALUE)}"
+              >
+                ${(x) => x.attributeValue[PropertyName.FIRST_VALUE] ?? ' '}
+              </div>
+            `,
+          )}
+        </div>
+
+        <div class="record-information-column">
+          ${repeat(
+            (x) => x.columns,
+            html`
+              <div
+                class="record-information-cell ${(x, c) =>
+                  c.parent.applyStyle(x, PropertyName.SECOND_VALUE)}"
+              >
+                ${(x) => x.attributeValue[PropertyName.SECOND_VALUE] ?? ' '}
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+      
+      <div class="comment-container">
+        <div class="modal-top">Comment</div>
+        
+        <div class="record-information">
+          <div class="record-information-column">
+            <div class="record-information-cell record-information-data-field-name">Commented By </div>
+          </div>
+          <div class="record-information-column">
+            <div class="record-information-cell record-information-data-field-name"> ${(x) => x.commentedBy}</div>
+          </div>
+        </div>
+        
+        <div class="record-information">
+          <div class="record-information-column">
+            <div class="record-information-cell record-information-data-field-name">Commented At </div>
+          </div>
+          <div class="record-information-column">
+            <div class="record-information-cell record-information-data-field-name"> ${(x) => (x.commentTimestamp ? getFormattedDateTime(x.commentTimestamp) : '')}</div>
+          </div>
+        </div>
+        
+        <${textAreaTag} class="space-x" :value=${sync((x) => x.commentText)}></${textAreaTag}> 
+        
+        <div class="save-comment-button">
+          <${buttonTag} appearance="primary" @click="${(x) => x.saveComment()}"> Save Comment</${buttonTag}>
+        </div>
+      </div>
+    </div>
+  </${modalTag}>
+`;

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

@@ -0,0 +1,200 @@
+import { Modal } from '@genesislcap/rapid-design-system';
+import { customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
+import { ReconciliationService } from '../../../services/reconciliation.service';
+import { showNotificationError } from '../../../utils/notification';
+import { ResultDetailsStyles } from './result-details.styles';
+import { ResultDetailsTemplate } from './result-details.template';
+import { AttributeType, RecordInformation, RecordInformationField } from './result-details.types';
+
+@customElement({
+  name: 'result-details',
+  template: ResultDetailsTemplate,
+  styles: ResultDetailsStyles,
+})
+export class ResultDetails extends GenesisElement {
+  @ReconciliationService reconciliationService: ReconciliationService;
+  @observable recordInformation: RecordInformation;
+  @observable commentText: string;
+  @observable commentedBy: string;
+  @observable commentTimestamp: any;
+  @observable reconciliationRecordResultId: string;
+
+  fields: RecordInformationField[];
+  modal: Modal;
+
+  async open(reconciliationRecordResultId: string, datasourceConfigurations, comment) {
+    this.recordInformation = await this.createRecordInformation(
+      reconciliationRecordResultId,
+      datasourceConfigurations,
+    );
+    this.reconciliationRecordResultId = reconciliationRecordResultId;
+    this.commentedBy = comment.USER_NAME ?? '';
+    this.commentText = comment.TEXT ?? '';
+    this.commentTimestamp = comment.TIMESTAMP ?? 0;
+
+    this.modal.show();
+  }
+
+  close() {
+    this.modal.close();
+  }
+
+  async createRecordInformation(reconciliationRecordResultId, datasourceConfigurations) {
+    const reconciliationRecordPairResult =
+      await this.reconciliationService.getReconciliationRecordResult(reconciliationRecordResultId);
+
+    return {
+      datasources: {
+        fieldName: 'Source Name',
+        firstValue: datasourceConfigurations[0].NAME,
+        secondValue: datasourceConfigurations[1].NAME,
+      },
+      fields: this.getFields(reconciliationRecordPairResult, ['MATCHED', 'FAILED']),
+      primaryKeyResult: {
+        fieldName: 'Primary Key Result',
+        firstValue: reconciliationRecordPairResult.KEY_RESULT,
+        secondValue: reconciliationRecordPairResult.KEY_RESULT,
+      },
+      comparisonResult: {
+        fieldName: 'Comparison Result',
+        firstValue: reconciliationRecordPairResult.COMPARISON_RESULT,
+        secondValue: reconciliationRecordPairResult.COMPARISON_RESULT,
+      },
+      missingInDictionaryFields: this.getFields(reconciliationRecordPairResult, [
+        'MISSING_IN_DICTIONARY',
+      ]),
+      noRuleConfiguredFields: this.getFields(reconciliationRecordPairResult, [
+        'NO_RULE_CONFIGURED',
+      ]),
+    };
+  }
+
+  getFields(reconciliationRecordPairResult, resultType: string[]) {
+    return reconciliationRecordPairResult.FIRST_DATA_SOURCE_DATA.RULES_INFO.filter((field) =>
+      resultType.includes(field.RESULT),
+    ).map((field) => {
+      const secondValue = reconciliationRecordPairResult.SECOND_DATA_SOURCE_DATA.RULES_INFO.filter(
+        (secondField) => field.FIELD_NAME === secondField.FIELD_NAME,
+      )[0]?.FIELD_VALUE;
+
+      return {
+        fieldName: field.FIELD_NAME,
+        firstValue: this.isEmpty(field.FIELD_VALUE) ? ' ' : field.FIELD_VALUE,
+        secondValue: this.isEmpty(secondValue) ? ' ' : secondValue,
+      };
+    });
+  }
+
+  isEmpty(value) {
+    return (
+      // null or undefined
+      value == null ||
+      // Has length and it's zero
+      (value.hasOwnProperty('length') && value.trim().length === 0) ||
+      // Is an Object and has no keys
+      (value.constructor === Object && Object.keys(value.trim()).length === 0)
+    );
+  }
+
+  @volatile
+  get columns() {
+    if (!this.recordInformation) {
+      return [];
+    }
+
+    return [
+      this.createSingleRow(AttributeType.DATASOURCE, this.recordInformation.datasources),
+      ...this.createFieldsRows(AttributeType.FIELDS, this.recordInformation.fields),
+      this.createSingleRow(
+        AttributeType.PRIMARY_KEY_RESULT,
+        this.recordInformation.primaryKeyResult,
+      ),
+      this.createSingleRow(
+        AttributeType.COMPARISON_RESULT,
+        this.recordInformation.comparisonResult,
+      ),
+      ...this.createFieldsRows(
+        AttributeType.MISSING_IN_DICTIONARY_FIELDS,
+        this.recordInformation.missingInDictionaryFields,
+      ),
+      ...this.createFieldsRows(
+        AttributeType.NO_RULE_CONFIGURED_FIELDS,
+        this.recordInformation.noRuleConfiguredFields,
+      ),
+    ];
+  }
+
+  saveComment() {
+    if (this.commentText === null) {
+      return;
+    }
+    this.reconciliationService
+      .updateReconciliationRecordComment(this.reconciliationRecordResultId, this.commentText)
+      .then((response) => this.validateResponse(response));
+  }
+
+  async validateResponse(response) {
+    if (response.MESSAGE_TYPE === 'EVENT_ACK') {
+      this.close();
+      return;
+    }
+
+    showNotificationError(response.ERROR);
+  }
+
+  private createSingleRow = (attributeType: AttributeType, attributeValue) => ({
+    attributeType: attributeType,
+    attributeValue: attributeValue,
+  });
+
+  private createFieldsRows = (attributeType: AttributeType, fields) => {
+    return fields.map((field) => ({
+      attributeType: attributeType,
+      attributeValue: field,
+    }));
+  };
+
+  applyStyle(attribute, propertyName?) {
+    switch (attribute.attributeType) {
+      case AttributeType.FIELDS:
+        return attribute.attributeValue.firstValue !== attribute.attributeValue.secondValue
+          ? 'red'
+          : '';
+      case AttributeType.PRIMARY_KEY_RESULT:
+        return attribute.attributeValue[propertyName].toUpperCase() === 'MATCHED' ? 'green' : 'red';
+      case AttributeType.COMPARISON_RESULT:
+        switch (attribute.attributeValue[propertyName].toUpperCase()) {
+          case 'MATCHED':
+            return 'green';
+          case 'FAILED':
+            return 'red';
+          case 'MISSING_VALUE':
+            return 'amber';
+        }
+      case AttributeType.MISSING_IN_DICTIONARY_FIELDS:
+      case AttributeType.NO_RULE_CONFIGURED_FIELDS:
+        return 'amber';
+      default:
+        return '';
+    }
+  }
+
+  modalBackdropClickHandler(modal, closeEvent) {
+    // This prevents issues with forms
+    if (!modal.target.tagName.includes('-MODAL')) {
+      return;
+    }
+
+    const rect = modal.target.mainElement.getBoundingClientRect();
+
+    const clickedInModal =
+      rect.top <= modal.clientY &&
+      modal.clientY <= rect.top + rect.height &&
+      rect.left <= modal.clientX &&
+      modal.clientX <= rect.left + rect.width;
+
+    if (!clickedInModal) {
+      modal.target[closeEvent.name]();
+    }
+  }
+}

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

@@ -0,0 +1,30 @@
+export enum PropertyName {
+  FIELD_NAME = 'fieldName',
+  FIRST_VALUE = 'firstValue',
+  SECOND_VALUE = 'secondValue',
+}
+
+export type RecordInformation = {
+  datasources: RecordInformationField;
+  fields: RecordInformationField & { result?: string }[];
+  primaryKeyResult: RecordInformationField;
+  comparisonResult: RecordInformationField;
+  missingInDictionaryFields: RecordInformationField[];
+  noRuleConfiguredFields: RecordInformationField[];
+};
+
+export type RecordInformationField = {
+  fieldName: string;
+  firstValue: string;
+  secondValue: string;
+};
+
+export enum AttributeType {
+  DATASOURCE = 'datasource',
+  FILE = 'file',
+  FIELDS = 'fields',
+  PRIMARY_KEY_RESULT = 'primaryKeyResult',
+  COMPARISON_RESULT = 'comparisonResult',
+  MISSING_IN_DICTIONARY_FIELDS = 'missingInDictionaryFields',
+  NO_RULE_CONFIGURED_FIELDS = 'noRuleConfiguredFields',
+}

package/src/components/zero-components.ts

@@ -0,0 +1,61 @@
+import { foundationLayoutComponents } from '@genesislcap/foundation-layout';
+import {
+  provideDesignSystem,
+  zeroIcon,
+  zeroBadge,
+  zeroButton,
+  zeroTextField,
+  zeroSelect,
+  zeroTabs,
+  zeroTab,
+  zeroTabPanel,
+  zeroProgressRing,
+  zeroSegmentedControl,
+  zeroSegmentedItem,
+  zeroDivider,
+  zeroListboxOption,
+  zeroNumberField,
+  zeroCheckbox,
+  zeroModal,
+  zeroDatePicker,
+  zeroTextArea,
+  zeroRadio,
+  zeroRadioGroup,
+} from '@genesislcap/foundation-zero';
+import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
+
+/**
+ * @public
+ */
+export const registerCommonZeroComponents = async () => {
+  /**
+   * Register the components the app is using with the system.
+   */
+  provideDesignSystem().register(
+    /**
+     * Common across most routes, so batch register these lightweight components upfront.
+     */
+    zeroIcon(),
+    zeroBadge(),
+    zeroButton(),
+    zeroTextField(),
+    zeroSelect(),
+    zeroTab(),
+    zeroTabs(),
+    zeroTabPanel(),
+    zeroProgressRing(),
+    zeroSegmentedControl(),
+    zeroSegmentedItem(),
+    zeroDivider(),
+    zeroListboxOption(),
+    zeroNumberField(),
+    zeroCheckbox(),
+    zeroModal(),
+    zeroDatePicker(),
+    zeroTextArea(),
+    zeroRadio(),
+    zeroRadioGroup(),
+    zeroGridComponents,
+    foundationLayoutComponents,
+  );
+};

package/src/config/config.ts

@@ -0,0 +1,49 @@
+import { DI, PartialGenesisElementDefinition } from '@genesislcap/web-core';
+import { defaultTemplateOptions, TemplateOptions } from './templates';
+
+/**
+ * Do not reference any ../main files here. We must avoid ../tags being referenced and therefore setup pre-configuration.
+ */
+
+/**
+ * ReconciliationConfig DI interface.
+ *
+ * @public
+ */
+export interface ReconciliationConfig extends PartialGenesisElementDefinition {
+  /**
+   * Template options.
+   *
+   * @remarks
+   * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
+   */
+  templateOptions: TemplateOptions;
+  /**
+   * Design System prefix for foundation-form
+   *
+   * @remarks
+   * Used by foundation-form to specify the design system used by the form elements
+   */
+  designSystemPrefix: string;
+}
+
+/**
+ * Default ReconciliationConfig DI implementation.
+ * @public
+ */
+export const defaultReconciliationConfig: ReconciliationConfig = {
+  name: 'foundation-reconciliation',
+  templateOptions: defaultTemplateOptions,
+  designSystemPrefix: 'rapid',
+};
+
+/**
+ * ReconciliationConfig DI key.
+ *
+ * @internal
+ * @privateRemarks
+ * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
+ */
+export const ReconciliationConfig = DI.createInterface<ReconciliationConfig>((x) =>
+  x.instance(defaultReconciliationConfig),
+);

package/src/config/configure.ts

@@ -0,0 +1,72 @@
+import { DI, GenesisElement, Registration } from '@genesislcap/web-core';
+import { ReconciliationConfig, defaultReconciliationConfig } from './config';
+
+/**
+ * @remarks
+ * Configure the alert micro frontend for host app integration.
+ *
+ * @example Providing template options to align to your host application.
+ * ```ts
+ * const { configure } = await import('@genesislcap/pbc-reconciliation-ui/config');
+ *  return configure({
+ *    name: 'rapid-reconciliation',
+ *    templateOptions: {
+ *     icon: 'rapid-icon',
+ *     button: 'rapid-button',
+ *     textField: 'rapid-text-field',
+ *     select: 'rapid-select',
+ *     tabs: 'rapid-tab',
+ *     tab: 'rapid-tab',
+ *     tabPanel: 'rapid-tab-panel',
+ *     segmentedControl: 'rapid-segmented-control',
+ *     segmentedItem: 'rapid-segmented-item',
+ *     grid: 'rapid-grid-pro',
+ *   },
+ *   designSystemPrefix: 'rapid',
+ *  });
+ * },
+ * ```
+ *
+ * This is just an example, as there is a `RapidReconciliation` which you can import and use.
+ *
+ * @param config - A partial ReconciliationConfig.
+ * @public
+ */
+export async function configure(config: Partial<ReconciliationConfig>) {
+  /**
+   * Merge the configs
+   */
+  const value: ReconciliationConfig = {
+    ...defaultReconciliationConfig,
+    ...config,
+  };
+  if (config.templateOptions) {
+    value.templateOptions = {
+      ...defaultReconciliationConfig.templateOptions,
+      ...config.templateOptions,
+    };
+  }
+  /**
+   * Register a new ReconciliationConfig
+   */
+  DI.getOrCreateDOMContainer().register(
+    Registration.instance<ReconciliationConfig>(ReconciliationConfig, value),
+  );
+  /**
+   * Lazily reference and define the micro frontend element post config setting.
+   */
+  const {
+    FoundationReconciliation,
+    FoundationReconciliationStyles,
+    FoundationReconciliationTemplate,
+  } = await import('../main');
+  const { name, attributes, shadowOptions, elementOptions } = value;
+  return GenesisElement.define(FoundationReconciliation, {
+    name,
+    template: FoundationReconciliationTemplate,
+    styles: FoundationReconciliationStyles,
+    attributes,
+    shadowOptions,
+    elementOptions,
+  });
+}

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export * from './config';
+export * from './configure';

package/src/config/templates.ts

@@ -0,0 +1,80 @@
+import { SyntheticViewTemplate, TemplateElementDependency } from '@genesislcap/web-core';
+
+/**
+ * TemplateComponents.
+ * @public
+ */
+export type TemplateComponents = {
+  badge: TemplateElementDependency;
+  button: TemplateElementDependency;
+  divider: TemplateElementDependency;
+  grid: TemplateElementDependency;
+  icon: TemplateElementDependency;
+  option: TemplateElementDependency;
+  progress: TemplateElementDependency;
+  progressRing: TemplateElementDependency;
+  textField: TemplateElementDependency;
+  select: TemplateElementDependency;
+  segmentedControl: TemplateElementDependency;
+  segmentedItem: TemplateElementDependency;
+  tabs: TemplateElementDependency;
+  tab: TemplateElementDependency;
+  tabPanel: TemplateElementDependency;
+  numberField: TemplateElementDependency;
+  checkbox: TemplateElementDependency;
+  switch: TemplateElementDependency;
+  modal: TemplateElementDependency;
+  dialog: TemplateElementDependency;
+  toast: TemplateElementDependency;
+  datePicker: TemplateElementDependency;
+  textArea: TemplateElementDependency;
+  radio: TemplateElementDependency;
+  radioGroup: TemplateElementDependency;
+};
+
+/**
+ * TemplateOptions.
+ * @public
+ */
+export type TemplateOptions = Partial<TemplateComponents> & {
+  /**
+   * @remarks
+   * Just for reference that template options may be more than tags.
+   * @internal
+   */
+  somePartial?: string | SyntheticViewTemplate;
+};
+
+/**
+ * defaultTemplateOptions.
+ * @remarks
+ * The default template options this MF has been created with.
+ * @public
+ */
+export const defaultTemplateOptions: TemplateOptions = {
+  button: 'rapid-button',
+  divider: 'rapid-divider',
+  grid: 'rapid-grid-pro',
+  icon: 'rapid-icon',
+  badge: 'rapid-badge',
+  option: 'rapid-option',
+  progressRing: 'rapid-progress-ring',
+  progress: 'rapid-progress',
+  select: 'rapid-select',
+  segmentedControl: 'rapid-segmented-control',
+  segmentedItem: 'rapid-segmented-item',
+  switch: 'rapid-switch',
+  tab: 'rapid-tab',
+  tabPanel: 'rapid-tab-panel',
+  numberField: 'rapid-number-field',
+  checkbox: 'rapid-checkbox',
+  tabs: 'rapid-tabs',
+  textField: 'rapid-text-field',
+  modal: 'rapid-modal',
+  dialog: 'rapid-dialog',
+  toast: 'rapid-toast',
+  datePicker: 'rapid-date-picker',
+  textArea: 'rapid-text-area',
+  radio: 'rapid-radio',
+  radioGroup: 'rapid-radio-group',
+};

package/src/globals.d.ts

@@ -0,0 +1,7 @@
+declare global {
+  const GENX_SANDBOX_API_HOST: string;
+  const GENX_SANDBOX_DEFAULT_USER: string;
+  const GENX_SANDBOX_DEFAULT_PASSWORD: string;
+}
+
+export {};

package/src/index.federated.ts

@@ -0,0 +1 @@
+import('./index');

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './config';
+export * from './main';
+export * from './sandbox';

package/src/main/index.ts

@@ -0,0 +1,3 @@
+export * from './main.template';
+export * from './main.styles';
+export * from './main';

package/src/main/main.styles.ts

@@ -0,0 +1,33 @@
+import { css } from '@genesislcap/web-core';
+import { tabPanelTag, tabsTag } from '../tags';
+
+/**
+ * @public
+ */
+export const FoundationReconciliationStyles = css`
+  ${tabsTag},
+  ${tabPanelTag} {
+    height: 100%;
+
+    --base-height-multiplier: 10;
+  }
+
+  ${tabsTag} {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+  }
+
+  ${tabsTag}::part(tablist) {
+    place-self: flex-start;
+    border-bottom: none;
+  }
+
+  ${tabsTag}::part(tabpanel) {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-height: 0;
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+  }
+`;