@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/old/components/list/columns.ts

@@ -1,175 +0,0 @@
-import { formatDateTimestamp } from '@genesislcap/foundation-utils';
-import { html } from '@genesislcap/web-core';
-
-export enum REPORT_FIELDS {
-  REPORT_ID = 'REPORT_ID',
-  REPORT_NAME = 'REPORT_NAME',
-  REPORT_DESCRIPTION = 'REPORT_DESCRIPTION',
-  REPORT_DATASOURCE = 'REPORT_DATASOURCE',
-  REPORT_COLUMNS = 'REPORT_COLUMNS',
-  CREATED_BY = 'CREATED_BY',
-  REPORT_CREATED_ON = 'REPORT_CREATED_ON',
-  OPTIONS = 'OPTIONS',
-}
-
-export const REPORT_COLUMN_DEFS = (context: any) => [
-  {
-    checkboxSelection: false,
-    filter: false,
-    headerCheckboxSelection: true,
-    sortable: false,
-    cellRenderer: 'row-select',
-    width: 60,
-    cellStyle: { display: 'flex' },
-  },
-  { field: REPORT_FIELDS.REPORT_ID, hide: true },
-  { field: REPORT_FIELDS.REPORT_COLUMNS, hide: true },
-  {
-    field: REPORT_FIELDS.REPORT_NAME,
-    headerName: 'Report Name',
-    cellStyle: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-      textAlign: 'left',
-      color: 'var(--accent-fill-rest)',
-    },
-    cellRendererSelector: (params) => {
-      return {
-        component: 'action',
-        params: {
-          actionClick: () => context.runReport(params?.node?.data),
-          actionName: params?.value,
-          appearance: 'lightweight',
-        },
-      };
-    },
-  },
-  { field: REPORT_FIELDS.REPORT_DESCRIPTION, headerName: 'Description', width: 400 },
-  { field: REPORT_FIELDS.REPORT_DATASOURCE, headerName: 'Datasource' },
-  { field: REPORT_FIELDS.CREATED_BY, headerName: 'Author' },
-  {
-    field: REPORT_FIELDS.REPORT_CREATED_ON,
-    headerName: 'Created date',
-    filter: 'agDateColumnFilter',
-    filterParams: {
-      comparator: (filterLocalDateAtMidnight: Date, cellValue: number) => {
-        if (!cellValue) return -1;
-
-        const cellValueTime = new Date(cellValue).setHours(0, 0, 0, 0);
-        const filterValueTime = filterLocalDateAtMidnight.getTime();
-
-        if (cellValueTime === filterValueTime) {
-          return 0;
-        }
-
-        if (cellValueTime < filterValueTime) {
-          return -1;
-        }
-
-        if (cellValueTime > filterValueTime) {
-          return 1;
-        }
-      },
-      buttons: ['reset', 'apply'],
-      closeOnApply: true,
-      closeOnClear: true,
-      suppressAndOrCondition: true,
-      browserDatePicker: true,
-      filterOptions: ['equals', 'lessThan', 'greaterThan'],
-    },
-    valueFormatter: (rowData) => formatDateTimestamp(rowData.data.REPORT_CREATED_ON),
-  },
-  {
-    width: 100,
-    colId: 'runReportAction',
-    headerName: 'Run',
-    filter: false,
-    resizable: false,
-    sortable: false,
-    cellStyle: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-    },
-    cellRendererSelector: (params) => {
-      return {
-        component: 'action',
-        params: {
-          actionClick: () => context.runReport(params?.node?.data),
-          contentTemplate: html`
-            <label
-              style="pointer-events: none"
-              aria-label="Run report named: ${params.data[REPORT_FIELDS.REPORT_NAME]}"
-            >
-              Run
-            </label>
-          `,
-          appearance: context.config.buttonAppearance,
-        },
-      };
-    },
-  },
-  {
-    width: 100,
-    colId: 'editReportAction',
-    headerName: 'Edit',
-    filter: false,
-    resizable: false,
-    sortable: false,
-    cellStyle: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-    },
-    cellRendererSelector: (params) => {
-      return {
-        component: 'action',
-        params: {
-          actionClick: () => context.editReport(params?.node?.data),
-          contentTemplate: html`
-            <label
-              style="pointer-events: none"
-              aria-label="Edit report named: ${params.data[REPORT_FIELDS.REPORT_NAME]}"
-            >
-              Edit
-            </label>
-          `,
-          appearance: context.config.buttonAppearance,
-        },
-      };
-    },
-  },
-  {
-    width: 110,
-    colId: 'deleteReportAction',
-    headerName: 'Delete',
-    filter: false,
-    resizable: false,
-    sortable: false,
-    cellStyle: {
-      display: 'flex',
-      justifyContent: 'flex-start',
-      alignItems: 'center',
-    },
-    cellRendererSelector: (params) => {
-      return {
-        component: 'action',
-        params: {
-          actionClick: () => context.deleteReport(params?.node?.data),
-          contentTemplate: html`
-            <label
-              style="pointer-events: none"
-              aria-label="Delete report named: ${params.data[REPORT_FIELDS.REPORT_NAME]}"
-            >
-              Delete
-            </label>
-          `,
-          appearance: context.config.buttonAppearance,
-        },
-      };
-    },
-  },
-];
-
-export function SELECTED_COLUMN_DEFS(context: any) {}

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

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

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

@@ -1,9 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const ListStyles = css`
-  :host {
-    display: block;
-    width: 100%;
-    height: 100%;
-  }
-`;

package/src/old/components/list/list.template.ts

@@ -1,40 +0,0 @@
-import { html, ref } from '@genesislcap/web-core';
-import { gridTag } from '../../tags';
-import { RowSelectRenderer } from '../renderers/row-select.renderer';
-import { REPORT_COLUMN_DEFS } from './columns';
-import type { List } from './list';
-
-// TODO: provide gridoptions in class
-export const ListTemplate = html<List>`
-  <${gridTag}
-    ${ref('grid')}
-    data-test-id="report-grid"
-    only-template-col-defs
-    rowSelection="multiple"
-    suppressRowClickSelection
-    suppressRowTransform
-  >
-    <grid-pro-genesis-datasource 
-      resource-name="ALL_SAVED_REPORTS"
-      :deferredGridOptions=${(x) => ({
-        components: {
-          'row-select': RowSelectRenderer,
-        },
-        defaultColDef: {
-          filter: false,
-          floatingFilter: false,
-          sortable: false,
-          sort: 'asc',
-          suppressMenu: false,
-          resizable: false,
-        },
-        rowSelection: 'multiple',
-        suppressRowClickSelection: true,
-        columnDefs: REPORT_COLUMN_DEFS(x),
-        context: {
-          ariaLabelField: 'REPORT_NAME',
-        },
-      })}
-    ></grid-pro-genesis-datasource>
-  </${gridTag}>
-`;

package/src/old/components/list/list.ts

@@ -1,109 +0,0 @@
-import { Connect } from '@genesislcap/foundation-comms';
-import { GridPro } from '@genesislcap/grid-pro';
-import { customElement, GenesisElement, observable } from '@genesislcap/web-core';
-import { ReportingConfig } from '../../config/config';
-import { ReportingEventListeners } from '../../main/types';
-import { ListStyles as styles } from './list.styles';
-import { ListTemplate as template } from './list.template';
-
-const name = 'reporting-list';
-
-/**
- * Detail payload for the `rowSelectionEvent` event. `selectedRows` is a getter
- * returning the rows selected at call time.
- * @public
- */
-export interface RowSelectionEventDetail {
-  selectedRows: () => unknown[];
-}
-
-/**
- * Saved reports grid (legacy).
- * @public
- *
- * @fires rowSelectionEvent - Fired when grid row selection changes. detail: `RowSelectionEventDetail`
- * @fires notify - Fired when a user notification should be shown. detail: `ReportNotification`
- * @fires runReport
- * @fires editReport
- */
-@customElement({
-  name,
-  template,
-  styles,
-})
-export class List extends GenesisElement {
-  @Connect connect!: Connect;
-  @observable userInteractedRow = {};
-  @observable selectedRows = [];
-  @ReportingConfig config!: ReportingConfig;
-
-  public grid: GridPro;
-
-  slectionEvent = new CustomEvent('rowSelectionEvent', {
-    detail: { selectedRows: () => this.selectedRows },
-  });
-
-  async connectedCallback(): Promise<void> {
-    super.connectedCallback();
-
-    this.grid.addEventListener('onGridReady', () => {
-      window.addEventListener('resize', () => {
-        setTimeout(() => {
-          this.grid?.gridApi?.sizeColumnsToFit();
-        });
-      });
-      this.grid.gridApi.addEventListener('firstDataRendered', () => {
-        this.grid?.gridApi?.sizeColumnsToFit();
-      });
-
-      this.grid.gridApi.addEventListener('selectionChanged', () => {
-        this.selectedRows = this.grid.gridApi.getSelectedRows();
-        this.dispatchEvent(this.slectionEvent);
-      });
-    });
-  }
-
-  public async delete(rowData: any): Promise<void> {
-    let notification = null;
-    const { REPORT_ID } = rowData;
-
-    const result = await this.connect.commitEvent('EVENT_SAVED_REPORTS_DELETE', {
-      DETAILS: { REPORT_ID },
-      IGNORE_WARNINGS: true,
-      VALIDATE: false,
-    });
-
-    result.MESSAGE_TYPE === 'EVENT_ACK'
-      ? (notification = {
-          message: `'${rowData.REPORT_NAME}' was deleted`,
-          title: 'Success:',
-          type: 'success',
-          autoClose: true,
-        })
-      : (notification = {
-          message: `'${rowData.REPORT_NAME}' was not deleted due to the following error "${result.ERROR[0].TEXT}"`,
-          title: 'Error:',
-          type: 'warning',
-          autoClose: true,
-        });
-
-    this.$emit(ReportingEventListeners.notify, notification);
-  }
-
-  public batchDelete(): void {
-    // service does not accept arrays so have to loop
-    this.selectedRows.forEach((rowData) => this.delete(rowData));
-  }
-
-  public runReport = (data: any): void => {
-    this.$emit(ReportingEventListeners.runReport, data);
-  };
-
-  public editReport = (data: any): void => {
-    this.$emit(ReportingEventListeners.editReport, data);
-  };
-
-  public deleteReport = (data: any): void => {
-    this.delete(data);
-  };
-}

package/src/old/components/preview/columns.ts

@@ -1,58 +0,0 @@
-import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
-import { defaultCellConfig } from '../../constants/grid-config';
-import { getFilterTypeByFieldType } from '../../utils/getFiltersByType';
-
-const getAgGridFilter = (fieldType: string): string | boolean => {
-  const filterType = getFilterTypeByFieldType(fieldType);
-  switch (filterType) {
-    case 'number':
-      return 'agNumberColumnFilter';
-    case 'date':
-    case 'datetime':
-      // Use number filter for epoch timestamps with custom comparator
-      return 'agNumberColumnFilter';
-    case 'text':
-    default:
-      return 'agTextColumnFilter';
-  }
-};
-
-export const getColumns = (columns) =>
-  columns.map(({ name, displayName, type }) => {
-    const isDateType = type === 'DATE' || type === 'DATETIME';
-
-    return {
-      field: name,
-      headerName: displayName,
-      filter: getAgGridFilter(type),
-      valueFormatter:
-        type === 'DATE'
-          ? (rowData) => formatDateTimestamp(rowData.data[name])
-          : type === 'DATETIME'
-            ? (rowData) => formatDateTimeTimestamp(rowData.data[name])
-            : '',
-      // Add date-specific comparator for sorting
-      // Data is in epoch format, so we can compare directly as numbers
-      ...(isDateType
-        ? {
-            comparator: (valueA, valueB) => valueA - valueB,
-          }
-        : {}),
-    };
-  });
-
-export const getGridOptions = () => {
-  return {
-    defaultColDef: {
-      ...defaultCellConfig,
-      filter: true,
-      floatingFilter: false,
-      sortable: false,
-      suppressMenu: false,
-      resizable: false,
-      autoSizeStrategy: {
-        type: 'fitGridWidth',
-      },
-    },
-  };
-};

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

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

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

@@ -1,22 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { helperStyles } from '../../styles';
-
-export const PreviewStyles = css`
-  ${helperStyles}
-  .preview {
-    display: flex;
-    width: 100%;
-    height: 100%;
-  }
-
-  .header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  .controls {
-    align-items: center;
-    display: flex;
-  }
-`;

package/src/old/components/preview/preview.template.ts

@@ -1,33 +0,0 @@
-import { html, ref } from '@genesislcap/web-core';
-import { buttonTag, cardTag, gridTag, iconTag } from '../../tags';
-import type { Preview } from './preview';
-
-export const PreviewReportTemplate = html<Preview>`
-  <div class="preview" data-test-id="preview">
-    <${cardTag} class="card">
-      <div class="header">
-        <div>
-          <h3 class="card-title">${(x) => x.report['REPORT_NAME']}</h3>
-          <p>${(x) => x.report['REPORT_DESCRIPTION']}</p>
-        </div>
-        <div class="controls">
-          <${buttonTag}
-            appearance="${(x) => x.config.buttonAppearance}"
-            @click=${(x) => x.exportToCsv()}
-            data-test-id="export-csv-button"
-          >
-            Export to csv
-            <${iconTag} class="ml-5px" name="arrow-down"></${iconTag}>
-          </${buttonTag}>
-        </div>
-      </div>
-      <div class="w-full h-90pc">
-        <${gridTag}
-          ${ref('grid')}
-          floatingFilter="false"
-          rowSelection="multiple"
-        ></${gridTag}>
-      </div>
-    </${cardTag}>
-  </div>
-`;

package/src/old/components/preview/preview.ts

@@ -1,143 +0,0 @@
-import { Datasource, FilteredDataServerResult } from '@genesislcap/foundation-comms';
-import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
-import type { GridPro } from '@genesislcap/grid-pro';
-import { customElement, GenesisElement, observable, attr, DOM } from '@genesislcap/web-core';
-import { ReportingConfig } from '../../config/config';
-import { getFilterTypeByFieldType } from '../../utils/getFiltersByType';
-import { getColumns, getGridOptions } from './columns';
-import { PreviewStyles as styles } from './preview.styles';
-import { PreviewReportTemplate as template } from './preview.template';
-
-const name = 'reporting-preview';
-
-@customElement({
-  name,
-  template,
-  styles,
-})
-export class Preview extends GenesisElement {
-  public grid!: GridPro;
-  @Datasource datasource!: Datasource;
-  @attr report: any = {};
-  @observable data: FilteredDataServerResult;
-  @observable datasourceSettings;
-  @ReportingConfig config!: ReportingConfig;
-
-  /**
-   * When report variable changes handle
-   */
-  reportChanged(old, newValue) {
-    // Skip if empty report object
-    if (
-      old &&
-      Object.keys(old).length != 0 &&
-      Object.keys(newValue).length > 0 &&
-      (newValue['REPORT_DATASOURCE'] || newValue['REPORT_DATA_SOURCE'])
-    ) {
-      if (this.data && this.grid.gridApi) {
-        this.grid.gridApi.setColumnDefs([]);
-        this.grid.gridApi.setRowData([]);
-        this.grid.gridApi.showLoadingOverlay();
-
-        DOM.queueUpdate(() => {
-          this.fetchAndLoadToGrid();
-        });
-
-        return;
-      }
-
-      this.fetchAndLoadToGrid();
-    }
-  }
-
-  /**
-   * On component load
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.fetchAndLoadToGrid();
-    this.grid.addEventListener('onGridReady', () => {
-      const model = {};
-      this.report['REPORT_COLUMNS']
-        .filter((f) => f.filter)
-        .forEach((f) => {
-          const filterType = getFilterTypeByFieldType(f.type);
-          let filterValue = f.filter.value;
-
-          // Convert date/datetime values to epoch timestamps for AG Grid number filter
-          // Since grid data is in epoch format, we use number filter with epoch values
-          if ((filterType === 'date' || filterType === 'datetime') && filterValue) {
-            if (typeof filterValue === 'string') {
-              // Handle ISO strings and other date formats - convert to epoch
-              const date = new Date(filterValue);
-              filterValue = !isNaN(date.getTime()) ? date.getTime() : filterValue;
-            } else if (filterValue instanceof Date) {
-              // Convert Date objects to epoch timestamps
-              filterValue = filterValue.getTime();
-            }
-            // If already a number (epoch), leave as is
-          }
-
-          model[f.name] = {
-            filterType: 'number', // Use number filter for epoch timestamps
-            type: f.filter.conditional,
-            filter: filterValue,
-          };
-        });
-      this.grid.gridApi.setFilterModel(model);
-      window.addEventListener('resize', () => {
-        setTimeout(() => {
-          this.grid?.columnApi?.autoSizeAllColumns();
-        });
-      });
-    });
-  }
-
-  /**
-   * Fetch data from server and load to grid
-   */
-  public fetchAndLoadToGrid = async () => {
-    // Get the data from the selected dataserver
-    // NOTE: Backend field REPORT_DATASOURCE and REPORT_DATA_SOURCE are not consistent in Events and Dataserver
-    const resourceName = this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
-
-    await this.datasource.init({ resourceName, ...this.datasourceSettings }, true);
-
-    this.data = (await this.datasource.snapshotFiltered()) as FilteredDataServerResult;
-
-    // Map data from dataserver to the grid
-    this.grid['gridOptions'] = {
-      ...getGridOptions(),
-      columnDefs: getColumns(this.report['REPORT_COLUMNS']),
-      rowData: this.data as any[],
-    };
-  };
-
-  /**
-   * Export to csv handle
-   */
-  public exportToCsv = () => {
-    const params: any = {
-      fileName: 'export.csv',
-    };
-    params.processCellCallback = (cellParams) => this.formatDateType(cellParams);
-
-    this.grid.gridApi.exportDataAsCsv({
-      ...params,
-    });
-  };
-
-  public formatDateType = (cellParams) => {
-    let dateFormatter;
-    this.report['REPORT_COLUMNS'].forEach((column) => {
-      if (column.name == cellParams.column.colId) {
-        column.type === 'DATE'
-          ? (dateFormatter = formatDateTimestamp(cellParams.value))
-          : column.type === 'DATETIME'
-            ? (dateFormatter = formatDateTimeTimestamp(cellParams.value))
-            : (dateFormatter = cellParams.value);
-      }
-    });
-    return dateFormatter;
-  };
-}

package/src/old/components/rapid-components.ts

@@ -1,64 +0,0 @@
-import {
-  baseComponents,
-  provideDesignSystem,
-  rapidActionsMenu,
-  rapidButton,
-  rapidCard,
-  rapidCheckbox,
-  rapidDialog,
-  rapidIcon,
-  rapidListboxOption,
-  rapidMenu,
-  rapidMenuItem,
-  rapidRadio,
-  rapidRadioGroup,
-  rapidSelect,
-  rapidTab,
-  rapidTabPanel,
-  rapidTabs,
-  rapidTextField,
-  rapidTextArea,
-  rapidToast,
-} from '@genesislcap/rapid-design-system';
-import { rapidGridComponents } from '@genesislcap/rapid-grid-pro';
-import { foundationAgFilterValueRenderer } from './renderers/filter-value-renderer';
-import { foundationAgRowSelectRenderer } from './renderers/row-select.renderer';
-
-/**
- * @public
- */
-export const registerCommonRapidComponents = async () => {
-  /**
-   * Register the components the app is using with the system.
-   */
-  provideDesignSystem().register(
-    /**
-     * Common across most routes, so batch register these lightweight components upfront.
-     */
-    rapidActionsMenu(),
-    rapidButton(),
-    rapidCard(),
-    rapidCheckbox(),
-    rapidDialog(),
-    rapidIcon(),
-    rapidListboxOption(),
-    rapidMenu(),
-    rapidMenuItem(),
-    rapidRadio(),
-    rapidRadioGroup(),
-    rapidSelect(),
-    rapidTab(),
-    rapidTabPanel(),
-    rapidTabs(),
-    rapidTextField(),
-    rapidTextArea(),
-    rapidToast(),
-    /**
-     * A re-export of designSystemProvider is missing from the top level index file in rapid
-     */
-    baseComponents.designSystemProvider(),
-    rapidGridComponents,
-    foundationAgRowSelectRenderer(),
-    foundationAgFilterValueRenderer(),
-  );
-};