@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/old/components/select-filters/select-filters.ts

@@ -1,255 +0,0 @@
-import { Connect } from '@genesislcap/foundation-comms';
-import type { GridPro } from '@genesislcap/grid-pro';
-import { RapidAgSelectRenderer } from '@genesislcap/rapid-grid-pro';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { ReportingConfig } from '../../config/config';
-import { filterObjectArray, getFiltersByFieldType } from '../../utils';
-import { FilterValueRenderer } from '../renderers/filter-value-renderer';
-import { AVAILABLE_FIELDS_CONFIG, SELECTED_FILTERS_CONFIG } from './columns';
-import { SelectFiltersStyles } from './select-filters.styles';
-import { SelectFiltersTemplate } from './select-filters.template';
-
-/**
- * Detail payload for the `setSelectedFilters` event.
- * @public
- */
-export interface SelectedFiltersEventDetail {
-  filters: Array<Record<string, unknown>>;
-}
-
-/**
- * Reporting filter selection grids.
- * @public
- *
- * @fires setSelectedFilters - Fired when selected filters change. detail: `SelectedFiltersEventDetail`
- */
-@customElement({
-  name: 'reporting-select-filters',
-  template: SelectFiltersTemplate,
-  styles: SelectFiltersStyles,
-})
-export class SelectFilters extends GenesisElement {
-  public availableFieldsGrid!: GridPro;
-  public selectedFiltersGrid!: GridPro;
-
-  @Connect connect: Connect;
-  @observable filtersToRemove = [];
-  @observable selectedFields = [];
-  @observable selectedFilters = [];
-  @observable filterGridReady: boolean = false;
-  @ReportingConfig config!: ReportingConfig;
-
-  private suppressGridRefresh: boolean = false;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    this.loadAvailableFieldsGrid();
-    this.loadSelectedFiltersGrid();
-  }
-
-  // TODO: extract to util
-  public makeSureFieldValueIsNotLost = (array) => {
-    return array.map((field) => {
-      const matchingField = this.selectedFilters?.find((f) => f?.name === field?.name);
-      return {
-        ...field,
-        ...matchingField,
-      };
-    });
-  };
-
-  selectedFiltersChanged(): void {
-    if (this.filterGridReady && !this.suppressGridRefresh) {
-      this.selectedFiltersGrid.gridApi.setRowData(this.selectedFilters);
-      this.selectedFiltersGrid.gridApi.refreshCells();
-    }
-  }
-
-  /**
-   * Update selected filters on parent component
-   */
-  public setSelectedFilters(filters: Array<Record<string, unknown>>): void {
-    this.$emit('setSelectedFilters', { filters });
-  }
-
-  /**
-   * Get a simplified / normalized version of the filters
-   * e.g. ['REPORT_ID', 'REPORT_NAME']
-   * @returns Array of string
-   */
-  public getNormalizedFilters(): Array<string> {
-    return this.selectedFilters?.map(({ FIELD_NAME }) => FIELD_NAME);
-  }
-
-  /**
-   * Loads availableFieldsGrid with data from the field selection step
-   */
-  public async loadAvailableFieldsGrid(): Promise<void> {
-    this.availableFieldsGrid.gridOptions = {
-      ...AVAILABLE_FIELDS_CONFIG.gridOptions,
-      columnDefs: AVAILABLE_FIELDS_CONFIG.colDefs,
-      rowData: [...this.selectedFields],
-      onGridReady: () => {
-        window.addEventListener('resize', () => {
-          setTimeout(() => {
-            this.availableFieldsGrid?.gridApi?.sizeColumnsToFit();
-          });
-        });
-      },
-      onFirstDataRendered: () => {
-        this.availableFieldsGrid?.gridApi?.sizeColumnsToFit();
-        this.selectDefaultFilters();
-      },
-      onSelectionChanged: () => {
-        this.setSelectedFilters([
-          ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
-        ]);
-      },
-    };
-  }
-
-  /**
-   * Loads the selectedFiltersGrid
-   */
-  public loadSelectedFiltersGrid(): void {
-    this.selectedFiltersGrid.gridOptions = {
-      ...SELECTED_FILTERS_CONFIG.gridOptions,
-      columnDefs: [
-        ...SELECTED_FILTERS_CONFIG.colDefs,
-        {
-          field: 'TYPE',
-          headerName: 'Filter',
-          maxWidth: 170,
-          cellStyle: {
-            overflow: 'visible',
-            paddingLeft: 0,
-            paddingRight: 0,
-          },
-          cellRenderer: RapidAgSelectRenderer,
-          cellRendererParams: {
-            accessor: 'filter.conditional',
-            defaultValue: 'Select filter',
-            onSelect: this.onFilterSelect,
-            options: (data) => getFiltersByFieldType(data.type),
-          },
-        },
-        {
-          cellRenderer: FilterValueRenderer,
-          cellRendererParams: {
-            onChange: this.onFilterValueChange,
-            accessor: 'filter.value',
-          },
-          field: 'filter.value',
-          headerName: 'Value',
-          cellStyle: {
-            overflow: 'visible',
-            padding: 0,
-          },
-        },
-      ],
-      rowData: [...this.filtersToRemove, ...this.selectedFilters],
-      onGridReady: () => {
-        this.filterGridReady = true;
-        window.addEventListener('resize', () => {
-          setTimeout(() => {
-            this.selectedFiltersGrid?.gridApi?.sizeColumnsToFit();
-          });
-        });
-      },
-      onFirstDataRendered: () => {
-        this.selectedFiltersGrid?.gridApi?.sizeColumnsToFit();
-      },
-      onSelectionChanged: () => {
-        this.filtersToRemove = this.selectedFiltersGrid.gridApi.getSelectedRows();
-      },
-    };
-  }
-
-  public onFilterSelect = (value, params) => {
-    // Suppress grid refresh during filter selection to prevent any UI disruption
-    this.suppressGridRefresh = true;
-
-    try {
-      const data = params.node.data;
-
-      // Update the node data directly
-      if (data.filter) {
-        data.filter.conditional = value;
-      }
-
-      // Update the selectedFilters array IN PLACE to avoid triggering observer
-      const field = this.selectedFilters.find((f) => f.name === data.name);
-      if (field && field.filter) {
-        field.filter.conditional = value;
-      }
-
-      // Emit the change with the current array (not a new array)
-      this.$emit('setSelectedFilters', { filters: this.selectedFilters });
-    } finally {
-      // Re-enable grid refresh
-      this.suppressGridRefresh = false;
-    }
-  };
-
-  public onFilterValueChange = (value, params) => {
-    // Suppress grid refresh during value changes to prevent input focus loss
-    this.suppressGridRefresh = true;
-
-    try {
-      // Update the node data directly without triggering a full grid refresh
-      const rowNode = params.node;
-      const data = rowNode.data;
-
-      if (data.filter) {
-        data.filter.value = value;
-      }
-
-      // Update the selectedFilters array IN PLACE to avoid triggering observer
-      const field = this.selectedFilters.find((f) => f.name === data.name);
-      if (field && field.filter) {
-        field.filter.value = value;
-      }
-
-      // Emit the change with the current array (not a new array)
-      this.$emit('setSelectedFilters', { filters: this.selectedFilters });
-    } finally {
-      // Re-enable grid refresh
-      this.suppressGridRefresh = false;
-    }
-  };
-
-  /**
-   * Remove fields from selected filters grid and deselect them from the available fields grid
-   */
-  public removeSelectedFilters = (): void => {
-    // filter fields from selected list
-    const filters = filterObjectArray('name', this.selectedFilters, this.filtersToRemove);
-    this.setSelectedFilters(filters);
-
-    // reset removal array
-    this.filtersToRemove = [];
-
-    // deselect available fieldgrid
-    this.availableFieldsGrid.gridApi.deselectAll();
-
-    // reselect
-    this.availableFieldsGrid.gridApi.forEachNode((node) => {
-      filters.find((field) => field.name === node.data.name) && node.setSelected(true);
-    });
-  };
-
-  /**
-   * Select default filters
-   */
-  public selectDefaultFilters(): void {
-    if (this.selectedFilters.length) {
-      this.availableFieldsGrid.gridApi.forEachNode((node) => {
-        this.selectedFilters.find((field) => field.name === node.data.name) &&
-          node.setSelected(true);
-      });
-      this.setSelectedFilters([
-        ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
-      ]);
-    }
-  }
-}

package/src/old/components/wizard/debug.ts

@@ -1,35 +0,0 @@
-import { html } from '@genesislcap/web-core';
-
-export const Debug = html`
-  <div class="flex flex-column gap-1 overflow-auto">
-    <div>
-      <h5>Report Name</h5>
-      <div>${(x) => x.reportName}</div>
-    </div>
-
-    <div>
-      <h5>Report Description</h5>
-      <div>${(x) => x.reportDescription}</div>
-    </div>
-
-    <div>
-      <h5>Selected Datasource</h5>
-      <div>${(x) => x.selectedDatasource}</div>
-    </div>
-
-    <div>
-      <h5>Selected Fields</h5>
-      <div><pre>${(x) => JSON.stringify(x.selectedFields, undefined, 2)}</pre></div>
-    </div>
-
-    <div>
-      <h5>Selected Filters</h5>
-      <div><pre>${(x) => JSON.stringify(x.selectedFilters, undefined, 2)}</pre></div>
-    </div>
-
-    <div>
-      <h5>Field Data</h5>
-      <div><pre>${(x) => JSON.stringify(x.fieldData, undefined, 2)}</pre></div>
-    </div>
-  </div>
-`;

package/src/old/components/wizard/index.ts

@@ -1,2 +0,0 @@
-export * from './wizard';
-export * from './wizard.styles';

package/src/old/components/wizard/steps/filters.ts

@@ -1,13 +0,0 @@
-import { html } from '@genesislcap/web-core';
-import type { Wizard } from '../wizard';
-
-export const FiltersStep = html<Wizard>`
-  <div class="step h-90pc">
-    <reporting-select-filters
-      @keydown="${(x, c) => x.wizardStepKeydownHandler(c.event as KeyboardEvent)}"
-      :selectedFields=${(x) => x.selectedFields}
-      :selectedFilters=${(x) => x.selectedFilters}
-      data-test-id="select-filters-component"
-    ></reporting-select-filters>
-  </div>
-`;

package/src/old/components/wizard/steps/index.ts

@@ -1,4 +0,0 @@
-export * from './name';
-export * from './select';
-export * from './filters';
-export * from './run';

package/src/old/components/wizard/steps/name.ts

@@ -1,72 +0,0 @@
-import { sync } from '@genesislcap/foundation-utils';
-import { html, RadioGroup, repeat } from '@genesislcap/web-core';
-import { cardTag, radioGroupTag, radioTag, textAreaTag, textFieldTag } from '../../../tags';
-import type { Wizard } from '../wizard';
-
-const reportDescriptionTemplate = html<Wizard>`
-  <section class="report-details" slot="left-section" data-test-id="report-details-section">
-    <h3 class="mt-1 section-title dark-grey" data-test-id="report-name-title">Name Report</h3>
-    <${cardTag} class="card">
-      <h5 class="card-title">Report Set up</h5>
-      <${textFieldTag}
-        tabindex="0"
-        :value=${sync((x) => x.reportName)}
-        class="w-full"
-        placeholder="Enter report name..."
-        data-test-id="report-name-input"
-      >
-        Report Name
-      </${textFieldTag}>
-      <${textAreaTag}
-        :value=${sync((x) => x.reportDescription)}
-        class="w-full mt-2"
-        placeholder="Enter report description..."
-        data-test-id="report-description-input"
-      >
-        Report Description
-      </${textAreaTag}>
-    </${cardTag}>
-  </section>
-`;
-
-const dataSourceTemplate = html<Wizard>`
-  <section 
-    @keydown="${(x, c) => x.wizardStepKeydownHandler(c.event as KeyboardEvent)}"
-    class="data-sources"
-    slot="right-section"
-    data-test-id="data-sources-section"
-  >
-    <h3 class="mt-1 section-title dark-grey" data-test-id="select-datasource-title">
-      Select Datasource
-    </h3>
-    <${cardTag} class="card">
-      <h5 class="card-title">Data Sources</h5>
-      <div class="card-description">You have selected ${(x) => x.selectedDatasource}</div>
-      <div class="divider"></div>
-      <div class="radio-buttons" data-test-id="datasource-options">
-        <${radioGroupTag} @change=${(x, c) => x.onDatasourceChange((c.event.target as RadioGroup).value)}>
-          ${repeat(
-            (x) => x.datasourceOptions,
-            html`
-              <${radioTag}
-                :checked=${(x, c) => c.parent.selectedDatasource === x.name}
-                :value=${(x) => x.name}
-                class="radio-button${(x, c) =>
-                  c.parent.selectedDatasource === x.name ? ' active' : ''}"
-                data-test-id=${(x) => `datasource-option-${x.name}`}
-              >
-                ${(x) => x.name}
-              </${radioTag}>
-            `,
-          )}
-        </${radioGroupTag}>
-      </div>
-    </${cardTag}>
-  </section>
-`;
-
-export const NameStep = html<Wizard>`
-  <layout-two-pane-horizontal hideDivider splitRatio="right-main">
-    ${reportDescriptionTemplate} ${dataSourceTemplate}
-  </layout-two-pane-horizontal>
-`;

package/src/old/components/wizard/steps/run.ts

@@ -1,14 +0,0 @@
-import { html } from '@genesislcap/web-core';
-import type { Wizard } from '../wizard';
-
-export const RunStep = html<Wizard>`
-  <div class="step h-90pc mt-15px" data-test-id="run-report-step">
-    <h3 class="mt-1 section-title dark-grey" data-test-id="run-report-step-title">Run Report</h3>
-    <reporting-preview
-      @keydown="${(x, c) => x.wizardStepKeydownHandler(c.event as KeyboardEvent)}"
-      :report=${(x) => x.getData()}
-      :datasourceSettings=${(x) => x.datasourceSettings}
-      data-test-id="report-preview-component"
-    />
-  </div>
-`;

package/src/old/components/wizard/steps/select.ts

@@ -1,14 +0,0 @@
-import { html } from '@genesislcap/web-core';
-import type { Wizard } from '../wizard';
-
-export const SelectStep = html<Wizard>`
-  <div class="step h-90pc" data-test-id="select-fields-step">
-    <reporting-select-fields
-      @keydown="${(x, c) => x.wizardStepKeydownHandler(c.event as KeyboardEvent)}"
-      :selectedFields=${(x) => x.selectedFields}
-      :fieldData=${(x) => x.fieldData}
-      selectedDatasource=${(x) => x.selectedDatasource}
-      data-test-id="select-fields-component"
-    ></reporting-select-fields>
-  </div>
-`;

package/src/old/components/wizard/wizard.styles.ts

@@ -1,198 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { helperStyles, normalizeStyles } from '../../styles';
-import { radioGroupTag, radioTag, textAreaTag } from '../../tags';
-
-export const WizardStyles = css`
-  ${normalizeStyles}
-  ${helperStyles}
-  :host {
-    width: 100%;
-  }
-
-  .grid-container {
-    display: grid;
-    gap: calc(var(--design-unit) * 4px);
-    grid-template-columns: minmax(250px, 10%) 1fr;
-    grid-auto-rows: 1fr;
-    margin: calc(var(--design-unit) * 4px) 0;
-    height: 95%;
-  }
-
-  .nav {
-    max-width: 248px;
-    background-color: var(--neutral-layer-2);
-    overflow-y: auto;
-  }
-
-  .nav-item h5 {
-    position: relative;
-    padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px);
-    margin-left: calc(var(--design-unit) * -4px);
-    margin-right: calc(var(--design-unit) * -4px);
-    margin-bottom: 0;
-    vertical-align: middle;
-    color: var(--neutral-foreground-hint);
-  }
-
-  .nav-item.active h5,
-  .nav-item h5:hover {
-    color: var(--neutral-foreground-rest);
-    background-color: var(--neutral-fill-stealth-rest);
-  }
-
-  .nav-item.active h5::after {
-    content: ' ';
-    width: 5px;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-
-    --primary-gradient-angle: -172.6004deg;
-
-    background-image: linear-gradient(
-      var(--primary-gradient-angle),
-      var(--accent-fill-rest) 0%,
-      rgb(101 77 249 / 97%) 100%
-    );
-    box-sizing: border-box;
-  }
-
-  .nav-item .step-number {
-    display: inline-block;
-    width: calc(var(--base-height-multiplier) * 2px);
-    height: calc(var(--base-height-multiplier) * 2px);
-    vertical-align: middle;
-    text-align: center;
-    font-family: var(--body-font);
-    font-size: var(--type-ramp-minus-2-font-size);
-    line-height: var(--type-ramp-minus-2-line-height);
-    color: var(--neutral-fill-stealth-hover);
-    border-radius: 50%;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-hint);
-  }
-
-  .nav-item.active .step-number,
-  .nav-item h5:hover .step-number {
-    color: var(--neutral-foreground-hint);
-    border-color: var(--neutral-foreground-hint);
-  }
-
-  .nav-item .step-number.completed {
-    border-color: var(--success-color);
-    background-color: var(--success-color);
-  }
-
-  .body {
-    background-color: var(--neutral-layer-4);
-    padding-left: 0;
-    padding-top: 0;
-    box-shadow: none;
-  }
-
-  .description {
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-minus-2-font-size);
-    font-weight: 700;
-    line-height: normal;
-    margin-left: calc((var(--design-unit) + 1) * 6px);
-  }
-
-  .divider {
-    margin: calc(var(--design-unit) * 4px) 0;
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-stroke-rest);
-  }
-
-  .nav-line.completed {
-    margin: calc(var(--design-unit) * 1px) 0 calc(var(--design-unit) * 1px)
-      calc(var(--design-unit) * 2px);
-    border-left: calc(var(--stroke-width) * 2px) solid var(--success-color);
-  }
-
-  .context-container {
-    gap: calc(var(--design-unit) * 3px);
-  }
-
-  .completed .context-container {
-    padding: calc(var(--design-unit) * 2px) 0 calc(var(--design-unit) * 4px);
-  }
-
-  .context {
-    color: var(--neutral-foreground-hint);
-    font-size: calc(var(--type-ramp-minus-2-font-size) - 1px);
-    font-weight: 700;
-    line-height: calc(var(--type-ramp-minus-2-line-height) - calc(var(--design-unit) * 1px));
-    max-height: 100px;
-    margin: 0 0 0 calc(var(--design-unit) * 5px);
-    overflow: auto;
-  }
-
-  .context b {
-    color: var(--neutral-foreground-rest);
-  }
-
-  .label {
-    font-size: var(--type-ramp-minus-1-font-size);
-    color: var(--neutral-foreground-hint);
-    margin-bottom: calc(var(--design-unit) * 1px);
-  }
-
-  ${radioGroupTag}::part(positioning-region) {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-    width: 100%;
-  }
-
-  @media screen and (min-width: 1200px) {
-    ${radioGroupTag}::part(positioning-region) {
-      display: grid;
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-
-  .radio-button {
-    background-color: var(--neutral-layer-2);
-    border-radius: calc((var(--control-corner-radius) - 2) * 1px);
-    cursor: pointer;
-    height: 42px;
-    margin: 0;
-    padding: 0 calc(var(--design-unit) * 2px);
-  }
-
-  .radio-button::part(label) {
-    display: inline-block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .radio-button.active,
-  .radio-button:hover {
-    background-color: var(--neutral-layer-1);
-  }
-
-  ${radioTag}:hover::part(control) {
-    border: calc(var(--stroke-width) * 1px) solid var(--neutral-foreground-rest);
-  }
-
-  .arrow {
-    align-self: center;
-    justify-self: center;
-  }
-
-  ${textAreaTag}::part(control) {
-    min-height: 170px;
-  }
-
-  .report-details,
-  .data-sources {
-    height: 100%;
-  }
-
-  .radio-buttons {
-    max-height: 560px;
-    overflow: auto;
-  }
-`;