@genesislcap/pbc-reconciliation-ui 0.0.45 → 14.339.0

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

@@ -0,0 +1,432 @@
+import { html, ref, repeat, sync, when, whenElse } from '@genesislcap/web-core';
+import {
+  MAX_ROWS_RECONCILIATION_RESULT,
+  Reconciliation,
+  ReconciliationStatus,
+} from '../../reconciliation.types';
+import {
+  buttonTag,
+  gridTag,
+  iconTag,
+  optionTag,
+  selectTag,
+  progressRingTag,
+  tabsTag,
+  tabTag,
+  tabPanelTag,
+  segmentedControlTag,
+  segmentedItemTag,
+  textFieldTag,
+} from '../../tags';
+import { getFormattedDateTime } from '../../utils';
+import { eventDetail } from '../../utils/eventDetail';
+import { RECONCILIATION_COLUMNS } from './columns';
+import { InputParameter } from './input-parameter/input-parameter';
+import { ReconciliationNoRowsOverlay } from './reconciliation-no-rows-overlay';
+import { ReconciliationsPanel } from './reconciliations-panel';
+import { ReconciliationsTab } from './reconciliations-panel.utils';
+import { ResultDetails } from './result-details/result-details';
+
+InputParameter;
+ResultDetails;
+
+const reconciliationsSide = html<ReconciliationsPanel>`
+  <div class="reconciliations-side">
+    <div class="reconciliations-side-new">
+      <div
+        class="reconciliation-side-list-header"
+        style="border-bottom: 1px solid var(--neutral-stroke-divider-rest);"
+        @click=${(x) => x.newReconciliation()}
+      >
+        <${iconTag} class="add-icon" name="circle-plus" size="lg"></${iconTag}>
+        New Reconciliation
+      </div>
+    </div>
+
+    <div class="reconciliations-side-list">
+      <!-- In Progress -->
+      <div class="reconciliations-in-progress">
+        <div class="reconciliations-in-progress-label">Reconciliations In Progress</div>
+        <div class="reconciliations-in-progress-list">
+          ${repeat(
+            (x) => x.reconciliationsInProgress,
+            html<Reconciliation>`
+              <div
+                class="recon-in-progress recon-in-progress${(x, c) => isReconciliationSelected(x, c)}"
+                @click=${(x, c) => c.parent.selectReconciliation(x)}
+              >
+                <span>${(x) => x.RECONCILIATION_NAME}</span>
+                <div class="flex-row">
+                  <span class="stop-recon-btn" @click=${(x, c) => c.parent.stopReconciliation(c.event as CustomEvent, x.RECONCILIATION_ID)}>
+                    <${iconTag} name="circle-stop" variant="regular" size="xl"></${iconTag}>
+                  </span>
+                  <${progressRingTag}></${progressRingTag}>
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+      </div>
+
+      <!-- Historical -->
+      <div class="historical-reconciliations">
+        <div class="historical-reconciliations-label">Historical Reconciliations</div>
+        <div class="filters">
+          <label class="filter-label">Filter By:</label>
+          <${segmentedControlTag}
+            class="data-source-types"
+            :value=${sync((x) => x.filterType)}
+          >
+            <${segmentedItemTag}
+              :value=${(_) => 'Name'}
+              @click=${(x) => x.clearFilters()}
+            >
+              Name
+            </${segmentedItemTag}>
+            <${segmentedItemTag}
+              :value=${(_) => 'Date'}
+              @click=${(x) => x.clearFilters()}
+            >
+              Date
+            </${segmentedItemTag}>
+          </${segmentedControlTag}>
+          
+          ${whenElse(
+            (x) => x.filterType === 'Name',
+            html<ReconciliationsPanel>`
+              <${textFieldTag}
+                @input=${(x, c) => x.filterByName(c.event as CustomEvent)}
+                :value=${sync((x) => x.textFilter)}
+                placeholder="Reconciliation Name"
+              >
+              </${textFieldTag}>
+            `,
+            html<ReconciliationsPanel>`
+              <${textFieldTag}
+                type="date"
+                @change=${(x, c) => x.filterByDate(c.event as CustomEvent)}
+                format="MM/DD/YYYY"
+                :value=${sync((x) => x.dateFilter)}
+              >
+              </${textFieldTag}>
+            `,
+          )}
+        </div>
+        
+        <div class="historical-reconciliations-list">
+          <!-- Today -->
+          <div
+            class="reconciliation-side-list-header"
+            @click=${(x) => (x.toggleTodaysReconciliations = !x.toggleTodaysReconciliations)}
+          >
+            <span class="toggle-recon">
+              <${iconTag}
+                class="chevron"
+                name=${(x) => (x.toggleTodaysReconciliations ? 'chevron-down' : 'chevron-up')}
+                size="2xs"
+              >
+              </${iconTag}>
+            </span>
+            Today 
+          </div>
+
+          <div class="historical-today-list">
+            ${repeat(
+              (x) => x.toggleTodaysReconciliations && x.historicalReconciliationsTodayFiltered,
+              html<Reconciliation>`
+                <div
+                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
+                  @click=${(x, c) => c.parent.selectReconciliation(x)}
+                >
+                  <div class="recon-list-item">
+                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}"><${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}></div>
+                    <span>${(x) => x.RECONCILIATION_NAME}</span>
+                  </div>
+                  <span class="historic-recon-date">
+                    ${(x) => getFormattedDateTime(x.DATETIME)}
+                  </span>
+                </div>
+              `,
+            )}
+          </div>
+
+          <!-- Previous -->
+          <div
+            class="reconciliation-side-list-header" 
+            @click=${(x) => (x.togglePreviousReconciliations = !x.togglePreviousReconciliations)}
+          >
+            <span class="toggle-recon">
+              <${iconTag}
+                class="chevron"
+                name=${(x) => (x.togglePreviousReconciliations ? 'chevron-down' : 'chevron-up')}
+                size="2xs"
+              >
+              </${iconTag}>
+            </span>
+            Previous 
+          </div>
+          
+          <div class="historical-previous-list">
+            ${repeat(
+              (x) => x.togglePreviousReconciliations && x.historicalReconciliationsPreviousFiltered,
+              html<Reconciliation>`
+                <div
+                  class="historical-recon historical-recon${(x, c) => isReconciliationSelected(x, c)}"
+                  @click=${(x, c) => c.parent.selectReconciliation(x)}
+                >
+                  <div class="recon-list-item">
+                    <div class="icon-container ${(x) => x.iconClass}" title="${(x) => x.STATUS}">
+                      <${iconTag} name="${(x) => x.iconName}" size="md"></${iconTag}>
+                    </div>
+                    <span>${(x) => x.RECONCILIATION_NAME}</span>
+                  </div>
+                  <span class="historic-recon-date">${(x) => getFormattedDateTime(x.DATETIME)}</span>
+                </div>
+              `,
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+`;
+
+function isReconciliationSelected(x, c) {
+  return c.parent.reconciliation && x.RECONCILIATION_ID == c.parent.reconciliation.RECONCILIATION_ID
+    ? '-selected'
+    : '';
+}
+
+const reconciliationsResult = html<ReconciliationsPanel>`
+  <div class="reconciliation-result">
+    <div class="reconciliation-result-header">
+      <label class="reconciliation-result-label">Reconciliation Result</label>
+      
+      ${when(
+        (x) =>
+          x.reconciliation.RECONCILIATION_ID &&
+          (x.reconciliation.STATUS === ReconciliationStatus.FAILED ||
+            x.reconciliation.STATUS === ReconciliationStatus.CANCELLED),
+        html<ReconciliationsPanel>`
+          <div class="error-message">
+            ${(x) =>
+              x.reconciliation.STATUS === ReconciliationStatus.FAILED
+                ? x.reconciliation.MESSAGE
+                : `${x.reconciliation.CANCELED_BY} CANCELLED this Reconciliation Run on ${getFormattedDateTime(x.reconciliation.END_TIMESTAMP)}`}
+          </div>
+        `,
+      )}
+
+      ${when(
+        (x) =>
+          x.reconciliation.RECONCILIATION_ID &&
+          x.reconciliation.STATUS === ReconciliationStatus.COMPLETED,
+        html<ReconciliationsPanel>`
+          <${buttonTag}
+            class="reconciliation-report"
+            @click=${(x) => x.downloadReconciliationReport()}
+            disabled
+          >
+            <${iconTag} name="download" size="lg"></${iconTag}>
+            &nbsp;Reconciliation Report
+          </${buttonTag}>
+        `,
+      )}
+    </div>
+    
+    ${when(
+      (x) =>
+        !x.reconciliation?.RECONCILIATION_ID ||
+        x.reconciliation.STATUS === ReconciliationStatus.CANCELLED,
+      html<ReconciliationsPanel>`
+        <${buttonTag}
+          class="run-reconciliation"
+          @click=${(x) => x.runReconciliation()}
+          ?disabled=${(x) => x.runReconciliationButtonDisable}
+        >
+          <${iconTag} name="play" size="lg"></${iconTag}>
+          &nbsp;Run Reconciliation
+        </${buttonTag}>
+      `,
+    )}
+    
+    <${tabsTag}
+      ${ref('tabs')}
+      appearance="secondary"
+      class="tabs"
+    >
+      <${tabTag}
+        appearance="secondary"
+        slot="all-breaks-tab"
+        id=${() => ReconciliationsTab.ALL_BREAKS}
+        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_BREAKS)}
+      >
+        All Breaks
+      </${tabTag}>
+      
+      <${tabTag}
+        appearance="secondary"
+        slot="all-matched-tab"
+        id=${() => ReconciliationsTab.ALL_MATCHED}
+        @click=${(x) => x.reconciliationsTabChanged(ReconciliationsTab.ALL_MATCHED)}
+      >
+        All Matched
+      </${tabTag}>
+
+      <${tabPanelTag}
+        slot="all-breaks-tab"
+        id="all-breaks-tab-panel"
+        style="${(x) => (x.selectedTab === ReconciliationsTab.ALL_BREAKS ? '' : 'display: none')}"
+      >
+        ${when(
+          (x) => x.datasourcePairs.size > 1,
+          html<ReconciliationsPanel>`
+            <div class="view-datasource-pair">
+              <${selectTag}
+                :value=${sync((x) => x.viewDatasourcePairValue)}
+                @change=${(x) => x.changeViewSelect()}
+              >
+                ${(x) => x.datasourcePairsItemsOptions}
+              </${selectTag}>
+            </div>
+          `,
+        )}
+        
+        <${gridTag}
+          only-template-col-defs
+        >
+          <grid-pro-genesis-datasource
+            ${ref('allBreaksDatasource')}
+            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
+            criteria=${(x) => x.breaksTabCriteria}
+            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            order-by="TIMESTAMP"
+            reverse="true"
+            moving-view="true"
+            :deferredGridOptions=${(x) => ({
+              noRowsOverlayComponent: !x.reconciliation?.RECONCILIATION_ID
+                ? ReconciliationNoRowsOverlay
+                : null,
+              onCellDoubleClicked: (params) => x.openResultDetails(params),
+              columnDefs: RECONCILIATION_COLUMNS({}),
+            })}
+          >
+          </grid-pro-genesis-datasource>
+        </${gridTag}>
+      </${tabPanelTag}>
+      
+      <${tabPanelTag}
+        slot="all-matched-tab"
+        id="all-matched-tab-panel"
+        style="${(x) => (x.selectedTab === ReconciliationsTab.ALL_MATCHED ? '' : 'display: none')}"
+      >
+        ${when(
+          (x) => x.datasourcePairs.size > 1,
+          html<ReconciliationsPanel>`
+            <div class="view-datasource-pair">
+              <${selectTag}
+                :value=${sync((x) => x.viewDatasourcePairValue)}
+                @change=${(x) => x.changeViewSelect()}
+              >
+                ${(x) => x.datasourcePairsItemsOptions}
+              </${selectTag}>
+            </div>
+          `,
+        )}
+
+        <${gridTag}
+          only-template-col-defs
+        >
+          <grid-pro-genesis-datasource
+            ${ref('allMatchedDatasource')}
+            resource-name="ALL_RECONCILIATION_RECORD_RESULTS_VIEW"
+            criteria=${(x) => x.matchedTabCriteria}
+            max-rows=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            max-view=${(_) => MAX_ROWS_RECONCILIATION_RESULT}
+            order-by="TIMESTAMP"
+            reverse="true"
+            moving-view="true"
+            :deferredGridOptions=${(x) => ({
+              noRowsOverlayComponent: !x.reconciliation?.RECONCILIATION_ID
+                ? ReconciliationNoRowsOverlay
+                : null,
+              onCellDoubleClicked: (params) => x.openResultDetails(params),
+              columnDefs: RECONCILIATION_COLUMNS({}),
+            })}
+          >
+          </grid-pro-genesis-datasource>
+        </${gridTag}>
+      </${tabPanelTag}>
+    </${tabsTag}>
+  </div>
+`;
+
+const reconciliationConfigurationAndResult = html<ReconciliationsPanel>`
+  ${when(
+    (x) => x.reconciliation,
+    html<ReconciliationsPanel>`
+      <div class="configuration-and-reconciliation-result">
+        <div class="configuration">
+          <div class="configuration-fields">
+            <div class="configuration-select-configuration">
+              <label class="configuration-label">Reconciliation Name</label>
+              
+              <${textFieldTag}
+                :value=${sync((x) => x.reconciliationName)}
+                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
+              > 
+              </${textFieldTag}>
+            </div>
+            
+            <div class="configuration-select-configuration">
+              <label class="configuration-label">Select Configuration</label>
+              
+              <${selectTag}
+                :value=${sync((x) => x.reconciliationConfiguration)}
+                :disabled=${(x) => x.reconciliation.RECONCILIATION_ID && x.reconciliation.STATUS !== ReconciliationStatus.CANCELLED}
+              >
+                ${repeat(
+                  (x) => x.reconciliationConfigurations,
+                  html`
+                    <${optionTag} :value=${(x) => x.RECONCILIATION_CONFIG_ID}>
+                      ${(x) => x.NAME}
+                    </${optionTag}>
+                  `,
+                )}
+              </${selectTag}>
+            </div>
+          </div>
+
+          <div class="configuration-input-parameters">
+            <label class="input-parameters-label">Input Parameters</label>
+            <div class="input-parameters-fields">
+              ${repeat(
+                (x) => x.datasourceConfigurations,
+                html`
+                  <input-parameter
+                    :datasourceConfiguration=${(x) => x}
+                    :locked=${(_, c) => c.parent.lockInputParameters}
+                    @uploaded=${(_, c) => c.parent.fileUploaded(eventDetail(c))}
+                  ></input-parameter>
+                `,
+              )}
+            </div>
+          </div>
+        </div>
+
+        ${reconciliationsResult}
+      </div>
+    `,
+  )}
+`;
+
+// prettier-ignore
+export const ReconciliationsPanelTemplate = html<ReconciliationsPanel>`
+  <div class="reconciliations-panel">
+    ${reconciliationsSide}
+    ${reconciliationConfigurationAndResult}
+  </div>
+
+  <result-details ${ref('resultDetails')}></result-details>
+`;