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

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

@@ -0,0 +1,363 @@
+import { css } from '@genesislcap/web-core';
+import { scrollbarStyles } from '../../styles/scrollbar.styles';
+import {
+  badgeTag,
+  buttonTag,
+  dividerTag,
+  segmentedItemTag,
+  selectTag,
+  textFieldTag,
+} from '../../tags';
+
+const common = css`
+  .data-source-record {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 0 calc(var(--design-unit) * 4px);
+    border-bottom: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    height: calc(var(--base-height-multiplier) * 4px);
+    background-color: var(--neutral-layer-2);
+    color: var(--neutral-foreground-rest);
+  }
+
+  .data-source-record-disabled {
+    cursor: not-allowed;
+    opacity: var(--disabled-opacity);
+  }
+
+  .data-source-record-delete {
+    display: flex;
+    margin-left: auto;
+
+    /* margin-right: calc(var(--design-unit) * 2px); */
+    cursor: pointer;
+  }
+
+  .data-source-record-name {
+    font-size: var(--type-ramp-minus-1-font-size);
+    font-weight: 700;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .data-source-record-name-label {
+    width: 100%;
+    margin: 0 calc(var(--design-unit) * 1px);
+  }
+`;
+
+const configuration = css`
+  .configuration {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 80%;
+    min-height: 0;
+  }
+
+  .configuration-content {
+    display: flex;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .configuration-name-and-data-sources {
+    display: flex;
+    flex-direction: column;
+    border-right: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    flex: 1 1 30%;
+    max-width: 30%;
+  }
+
+  .configuration-name-and-data-sources-fields {
+    display: flex;
+    flex-direction: column;
+    padding: calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .configuration-name {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .configuration-name-label,
+  .data-sources-label {
+    font-weight: bold;
+  }
+
+  .current-data-source-label {
+    padding: 0 calc(var(--design-unit) * 4px);
+    margin-bottom: calc(var(--design-unit) * 3px);
+  }
+
+  /* #region Data Sources */
+  .data-sources {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 3px);
+  }
+
+  .data-source-list {
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .new-data-source-label,
+  .current-data-source-label,
+  .select-dictionary,
+  .match-null-value,
+  .data-source-name-label {
+    font-weight: bold;
+    color: var(--neutral-foreground-hint);
+  }
+
+  .data-source-types {
+    margin: 0;
+    width: 100%;
+  }
+
+  .data-source-types::part(positioning-region) {
+    width: 100%;
+  }
+
+  .datasources-list-header {
+    display: flex;
+    justify-content: space-between;
+    width: 95%;
+  }
+
+  .file-type {
+    color: var(--success-color);
+  }
+
+  .file-type[aria-checked='true'] {
+    background-color: var(--success-color);
+    color: var(--neutral-foreground-rest);
+    border-color: var(--success-color);
+  }
+
+  .datapipeline-type {
+    color: var(--error-color);
+  }
+
+  .datapipeline-type[aria-checked='true'] {
+    background-color: var(--error-color);
+    color: var(--neutral-foreground-rest);
+    border-color: var(--error-color);
+  }
+
+  .datapipeline-select {
+    width: 100%;
+  }
+  ${badgeTag}::part(control) {
+    font-weight: 700;
+  }
+
+  ${segmentedItemTag} {
+    margin: 0;
+    flex: auto;
+    place-content: center;
+    font-size: var(--type-ramp-minus-1-font-size);
+
+    &[disabled] {
+      cursor: not-allowed;
+    }
+  }
+
+  /* #region Data Sources */
+
+  /* #region Reconciliation Rules */
+  .reconciliation-rules {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 3px);
+    width: 100%;
+    flex: 1 1 70%;
+    max-width: 70%;
+    height: 100%;
+    min-height: 0;
+  }
+
+  .reconciliation-rules-fields {
+    display: flex;
+    flex-direction: row;
+  }
+
+  .reconciliation-rules-label {
+    font-weight: bold;
+    margin: calc(var(--design-unit) * 4px) calc(var(--design-unit) * 4px) 0;
+  }
+
+  .rule-dictionary {
+    display: flex;
+    flex-direction: column;
+    padding: 0 calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .recon-rule-row,
+  .recon-rule-row-grid {
+    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);
+  }
+
+  .recon-rule-row-grid {
+    border-top: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-divider-rest);
+    padding: calc(var(--design-unit) * 4px);
+  }
+
+  .recon-rule-subheader-label {
+    font-size: var(--type-ramp-minus-2-font-size);
+    padding: 0 calc(var(--design-unit) * 4px);
+    font-weight: 700;
+  }
+
+  .recon-rules {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden auto;
+    height: 100%;
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  .reconciliation-rules-list {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--design-unit) * 2px);
+    height: 100%;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .reconciliation-rules-list ${dividerTag} {
+    margin: 0;
+  }
+
+  .header-col-label {
+    font-weight: 700;
+    font-size: var(--type-ramp-minus-2-font-size);
+    color: var(--neutral-foreground-hint);
+  }
+
+  .col-width {
+    width: 20%;
+  }
+
+  .col-width-5 {
+    width: 5%;
+  }
+
+  .col-width-30 {
+    width: 30%;
+  }
+
+  .col-center {
+    display: flex;
+    justify-content: center;
+  }
+
+  .rule-match-null-value {
+    display: flex;
+    flex-direction: column;
+    margin-left: auto;
+    padding: 0 calc(var(--design-unit) * 4px);
+    gap: calc(var(--design-unit) * 2px);
+  }
+
+  /* #endregion Reconciliation Rules */
+
+  .configuration-footer {
+    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);
+  }
+`;
+
+const fields = css`
+  label {
+    display: flex;
+  }
+
+  .bold {
+    font-weight: bold;
+  }
+
+  ${textFieldTag} {
+    display: flex;
+    margin: 0;
+  }
+
+  ${textFieldTag}::part(root) {
+    width: 100%;
+  }
+
+  ${buttonTag} {
+    display: flex;
+    margin: 0;
+  }
+
+  ${buttonTag}.add::part(control) {
+    padding: 0;
+  }
+
+  ${selectTag} {
+    width: 20%;
+  }
+
+  .field-label {
+    font-weight: bold;
+    color: var(--rapid-ag-header-foreground-color);
+  }
+
+  rapid-switch::part(label) {
+    margin-inline-end: 0;
+  }
+
+  .add-datasource {
+    display: flex;
+    background-color: rgb(122 204 121 / 50%);
+  }
+
+  ${buttonTag}.add-datasource::part(control) {
+    padding: 0;
+  }
+
+  ${textFieldTag}.data-source-record-name-edit {
+    margin: 0 calc(var(--design-unit) * 1px);
+  }
+`;
+
+export const ConfigurationsPanelStyles = css`
+  :host {
+    display: flex;
+    height: 100%;
+    width: 100%;
+  }
+
+  .configurations-panel {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+  ${scrollbarStyles}
+  ${common}
+  ${configuration}
+  ${fields}
+
+  .excel-icon {
+    color: #48d745;
+  }
+`;

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

@@ -0,0 +1,356 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, ref, repeat, when, whenElse } from '@genesislcap/web-core';
+import {
+  ConfigurationMode,
+  ReconciliationFrequency,
+  DatasourceType,
+  RuleMode,
+  ReconciliationMethod,
+} from '../../reconciliation.types';
+import {
+  badgeTag,
+  buttonTag,
+  dividerTag,
+  iconTag,
+  optionTag,
+  radioTag,
+  segmentedControlTag,
+  segmentedItemTag,
+  selectTag,
+  switchTag,
+  textFieldTag,
+} from '../../tags';
+import { eventDetail } from '../../utils/eventDetail';
+import { ConfigurationDatasources } from './configuration-datasources/configuration-datasources';
+import { ConfigurationsPanel, DatasourceEdit } from './configurations-panel';
+import { ReconciliationRuleRow } from './reconciliation-rule-row/reconciliation-rule-row';
+
+ReconciliationRuleRow;
+ConfigurationDatasources;
+
+const listTemplate = html<ConfigurationsPanel>`
+  <item-list
+    :items=${(x) => x.configurations}
+    :idProperty=${(_) => 'RECONCILIATION_CONFIG_ID'}
+    :nameProperty=${(_) => 'NAME'}
+    :title=${(_) => 'All Configurations'}
+    :addButtonLabel=${(_) => 'New Configuration'}
+    :selectedItem=${(x) => x.selectedConfiguration}
+    @addRecord=${(x) => x.addConfiguration()}
+    @selectRecord=${(x, c) => x.selectConfiguration(eventDetail(c))}
+    @deleteRecord=${(x, c) => x.deleteConfiguration(eventDetail(c))}
+  ></item-list>
+`;
+
+const configurationNameAndDatasourcesTemplate = html<ConfigurationsPanel>`
+  <div class="configuration-name-and-data-sources">
+    <div class="configuration-name-and-data-sources-fields">
+      <div class="configuration-name">
+        <label class="configuration-name-label">Configuration Name</label>
+        <${textFieldTag}
+          :value=${sync((x) => x.configurationName)}
+          :disabled=${(x) => x.configurationMode === ConfigurationMode.EDIT}>
+        </${textFieldTag}>
+      </div>
+      
+      <div class="configuration-name">
+        <label class="configuration-name-label">Configuration Method</label>
+        
+        <${segmentedControlTag}
+          class="data-source-types"
+          :value=${sync((x) => x.reconciliationFrequency)}
+        >
+          <${segmentedItemTag}
+            :value=${(_) => ReconciliationFrequency.BATCH}
+          >
+            Batch
+          </${segmentedItemTag}>
+          <${segmentedItemTag}
+            disabled
+            :value=${(_) => ReconciliationFrequency.REAL_TIME}
+          >
+            Real-time
+          </${segmentedItemTag}>
+        </${segmentedControlTag}>
+        
+        <${segmentedControlTag}
+          class="data-source-types"
+          :value=${sync((x) => x.reconciliationStrategy)}
+          @change=${(x, c) => x.reconStrategyChanged()}
+          disabled=${(x) => x.configurationMode === ConfigurationMode.EDIT}
+        >
+          <${segmentedItemTag}
+            :value=${(_) => ReconciliationMethod.ONE_TO_ONE}
+            @click=${(x, c) => x.clearDatasources()}
+          >
+            1:1
+          </${segmentedItemTag}>
+          <${segmentedItemTag}
+            :value=${(_) => ReconciliationMethod.ONE_TO_MANY}
+          >
+            1:N
+          </${segmentedItemTag}>
+          <${segmentedItemTag}
+            :value=${(_) => ReconciliationMethod.MANY_TO_MANY}
+            @click=${(x, c) => (x.primaryDatasource = null)}
+          >
+            N:N
+          </${segmentedItemTag}>
+        </${segmentedControlTag}>
+      </div>
+
+      <${dividerTag}></${dividerTag}>
+
+      <div class="data-sources">
+        <label class="data-sources-label">Data Sources</label>
+        
+        ${whenElse(
+          (x) => x.reconciliationStrategy === ReconciliationMethod.ONE_TO_ONE,
+          html<ConfigurationsPanel>`
+            <label class="data-source-name-label">Add 1st Data Source</label>
+            
+            <configuration-datasources 
+              :configurationMode=${(x) => x.configurationMode}  
+              ${ref('firstDatasource')}
+              :dataPipelineList=${(x) => x.dataPipelineList}
+            >
+            </configuration-datasources>
+            
+            <${dividerTag}></${dividerTag}>
+            
+            <label class="data-source-name-label">Add 2nd Data Source</label>
+            
+            <configuration-datasources 
+              :configurationMode=${(x) => x.configurationMode} 
+              ${ref('secondDatasource')}
+              :dataPipelineList=${(x) => x.dataPipelineList}
+            >
+            </configuration-datasources>
+          `,
+          html`
+            <label class="data-source-name-label">Add New Data Source</label>
+
+            <configuration-datasources
+              show-add-button
+              :configurationMode=${(x) => x.configurationMode}
+              :dataPipelineList=${(x) => x.dataPipelineList}
+              @addDatasource=${(x, c) => x.addDataSource(eventDetail(c))}
+            ></configuration-datasources>
+          `,
+        )}
+      </div>
+    </div>
+    
+    ${when(
+      (x) => x.reconciliationStrategy !== ReconciliationMethod.ONE_TO_ONE,
+      html`
+        <div class="configuration-name-and-data-sources-list">
+          <div class="datasources-list-header">
+            <label class="current-data-source-label">Current Data Sources</label>
+            <label class="current-data-source-label">
+              ${(x) =>
+                x.reconciliationStrategy === ReconciliationMethod.ONE_TO_MANY ? 'Primary?' : ''}
+            </label>
+          </div>
+
+          <div class="data-source-list">
+            ${repeat(
+              (x) => x.datasources,
+              html<DatasourceEdit>`
+                <div class="data-source-record ${(x, c) => (c.parent.configurationMode === ConfigurationMode.EDIT ? 'data-source-record-disabled' : '')}" >
+                  <span class="data-source-record-name">
+                    <${badgeTag} fill="${(x) => (x.TYPE === DatasourceType.FILE ? 'success' : 'danger')}" color="text" style="font-size: calc(var(--type-ramp-minus-2-font-size) - 1px); line-height: calc(var(--type-ramp-minus-2-font-size) - 2px);">
+                      ${(x) => (x.TYPE === DatasourceType.FILE ? 'File' : 'DPL')}
+                    </${badgeTag}>
+
+                    ${whenElse(
+                      (x, c) => c.parent.isEditingDatasourceName && x.IS_EDITING,
+                      html`
+                        <${textFieldTag}
+                          class="data-source-record-name-edit"
+                          autofocus=true
+                          :value=${(x) => x.NAME}
+                          @keydown=${(x, c) => {
+                            if ((c.event as KeyboardEvent).key === 'Enter') {
+                              x.IS_EDITING = false;
+                              c.parent.isEditingDatasourceName = false;
+                            }
+                            return true;
+                          }}
+                          @input=${(x, c) => c.parent.datasourceNameChanged(c.event as CustomEvent, c.index)}
+                          @blur=${(x, c) => {
+                            x.IS_EDITING = false;
+                            c.parent.isEditingDatasourceName = false;
+                          }}
+                        >
+                        </${textFieldTag}>
+                      `,
+                      html`
+                        ${whenElse(
+                          (x, c) => c.parent.configurationMode !== ConfigurationMode.EDIT,
+                          html`
+                            <span
+                              class="data-source-record-name-label"
+                              @click=${(x, c) => {
+                                x.IS_EDITING = true;
+                                c.parent.isEditingDatasourceName = true;
+                              }}
+                            >
+                              &nbsp;${(x) => `${x.NAME}`}
+                            </span>
+                          `,
+                          html`
+                            <span class="data-source-record-name-label">
+                              &nbsp;${(x) => `${x.NAME}`}
+                            </span>
+                          `,
+                        )}
+                      `,
+                    )}
+                  </span>
+                  
+                  <div class="data-source-record-name-label">${(x) => x.CONFIG_DATA ?? ''}</div>  
+                  
+                  ${when(
+                    (x, c) => c.parent.reconciliationStrategy === ReconciliationMethod.ONE_TO_MANY,
+                    html`
+                      <${radioTag}
+                        :checked=${(x, c) => c.parent.primaryDatasource === x.NAME}
+                        :value=${(x) => x.NAME}
+                        @click=${(x, c) => c.parent.onPrimaryDatasourceChange(x.NAME)}
+                        class="radio-button${(x, c) => (c.parent.primaryDatasource === x.NAME ? ' active' : '')}"
+                        data-test-id=${(x) => `datasource-option-${x.NAME}`}
+                      >
+                      </${radioTag}>
+                    `,
+                  )}         
+
+                  <span class="data-source-record-delete" 
+                    @click=${(x, c) => c.parent.deleteDataSource(c.index)}
+                  >
+                    <${iconTag} name="trash-alt"></${iconTag}>
+                  </span>
+                </div>
+              `,
+              { positioning: true },
+            )}
+          </div>
+        </div>
+      `,
+    )}
+  </div>
+`;
+
+const reconciliationRulesTemplate = html<ConfigurationsPanel>`
+  <div class="reconciliation-rules">
+    <label class="reconciliation-rules-label">Reconciliation Rules</label>
+    
+    <div class="reconciliation-rules-fields">
+      <div class="rule-dictionary">
+        <label class="select-dictionary">Select Data Dictionary</label>
+        
+        <${selectTag}
+          :value=${sync((x) => x.dataDictionaryId)}
+          :disabled=${(x) => x.configurationMode === ConfigurationMode.EDIT}
+          @change=${(x) => x.dataDictionaryChanged()}
+        >
+          ${repeat(
+            (x) => x.dataDictionaries,
+            html`
+              <${optionTag} :value=${(x) => x.DICTIONARY_ID}>
+                ${(x) => x.DICTIONARY_NAME}
+              </${optionTag}>
+            `,
+          )}
+        </${selectTag}>
+      </div>
+      
+      <div class="rule-match-null-value">
+        <label class="match-null-value">Match Null Value</label>
+        
+        <${switchTag}
+          @click=${(x) => (x.matchNull = !x.matchNull)}
+          ?current-checked=${(x) => x.matchNull}
+        >
+        </${switchTag}>
+      </div>
+    </div>
+
+    <div class="reconciliation-rules-list">
+      <div class="recon-rule-row">
+        <div class="col-width-30 header-col-label">Name</div>
+        <div class="col-width header-col-label">Type</div>
+        <div class="col-width-30 header-col-label">Tolerance</div>
+        <div class="col-width header-col-label"></div>
+        <div class="col-width header-col-label col-center">Match Key</div>
+        <div class="col-width-5 header-col-label"></div>
+      </div>
+      
+      <${dividerTag}></${dividerTag}>
+      
+      <label class="recon-rule-subheader-label">New Rule</label>
+      
+      <${dividerTag}></${dividerTag}>
+      
+      <reconciliation-rule-row 
+        :dataDictionaryFields=${(x) => x.dataDictionaryFields}
+        :filteredRuleFields=${(x) => x.filteredRuleFields}
+        @addRule=${(x, c) => x.addReconRule(eventDetail(c))}
+      >
+      </reconciliation-rule-row>
+      
+      <${dividerTag}></${dividerTag}>
+      
+      <label class="recon-rule-subheader-label">Existing Rules</label>
+      
+      <${dividerTag}></${dividerTag}>
+      
+      <div class="recon-rules">
+        ${repeat(
+          (x, c) => x.reconRules,
+          html`
+            <reconciliation-rule-row
+              :mode=${(_) => RuleMode.EDIT}
+              :reconRule=${(x) => x}
+              :dataDictionaryFields=${(x) => x.dataDictionaryFields}
+              :filteredRuleFields=${(x) => x.filteredRuleFields}
+              @updateRule=${(x, c) => c.parent.updateRule(eventDetail(c), c.index)}
+              @deleteRule=${(x, c) => c.parent.removeRule(c.index)}
+            >
+            </reconciliation-rule-row>
+            
+            <${dividerTag}></${dividerTag}>
+          `,
+          { positioning: true },
+        )}
+      </div>
+    </div>
+  </div>
+`;
+
+export const ConfigurationsPanelTemplate = html<ConfigurationsPanel>`
+  <div class="configurations-panel">
+    ${listTemplate}
+    ${when(
+      (x) => x.showConfigurationDetails,
+      html<ConfigurationsPanel>`
+        <div class="configuration">
+          <div class="configuration-content">
+            ${configurationNameAndDatasourcesTemplate}
+            ${reconciliationRulesTemplate}
+          </div>
+          
+          <div class="configuration-footer">
+            <${buttonTag} appearance="primary" @click=${(x) => x.saveConfiguration()}>
+              Save Configuration
+            </${buttonTag}>
+            <${buttonTag} @click=${(x) => x.clearReconciliationRules()}>
+              <${iconTag} name="broom" size="lg"></${iconTag}>
+              &nbsp; Clear
+            </${buttonTag}>
+          </div>
+        </div>
+      `,
+    )}
+  </div>
+`;