@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/new/components/reporting-configurations/reporting-configurations.ts

@@ -1,366 +0,0 @@
-import { ColDef } from '@ag-grid-community/core';
-import { Connect } from '@genesislcap/foundation-comms';
-import { EventEmitter } from '@genesislcap/foundation-events';
-import { getCriteriaBuilder, INPUT_MIN_LENGTH, SelectedOption } from '@genesislcap/foundation-ui';
-import { User } from '@genesislcap/foundation-user';
-import { logger } from '@genesislcap/foundation-utils';
-import {
-  getActionsMenuDef,
-  GridOptionsConfig,
-  GridProGenesisDatasource,
-  GridProRendererTypes,
-} from '@genesislcap/rapid-grid-pro';
-import { customElement, GenesisElement, html, observable } from '@genesislcap/web-core';
-import { writeReduxState, reduxBlankState, StorageKey } from '../../store';
-import { Genesis, Permissions } from '../../types';
-import {
-  formatDate,
-  getDatasourceSchema,
-  getFormattedDateTime,
-  permissionGuard,
-  showNotificationToast,
-  transformFromServerPayload,
-  transformToServerPayload,
-} from '../../utils';
-import { getFilterParams } from '../../utils/date-filter-params';
-import { ReportingEventDetailMap, ReportingEvents } from '../../utils/event-map';
-import { CloneReportConfigModal } from '../clone-report-config-modal/clone-report-config-modal';
-import { ReportingConfigurationStyles as styles } from './reporting-configurations.styles';
-import { ReportingConfigurationsTemplate as template } from './reporting-configurations.template';
-
-/**
- * Report configuration grid and toolbar actions.
- * @public
- *
- * @fires set-report-config-disp-mode - Fired to switch the report configuration display mode. detail: `'edit' | 'list'`
- * @fires highlight-grid-row
- */
-@customElement({
-  name: 'reporting-configurations',
-  template,
-  styles,
-})
-export class ReportingConfigurations extends EventEmitter<ReportingEventDetailMap>(GenesisElement) {
-  @Connect connect: Connect;
-  reportConfigurationsDatasource: GridProGenesisDatasource;
-  @observable gridCriteria: string = '';
-  @observable cloneConfigModal: CloneReportConfigModal;
-  importFileInput: HTMLInputElement;
-  @User user!: User;
-
-  public searchBarConfig = [
-    {
-      field: 'NAME',
-      label: (searchTerm) => `${searchTerm} as NAME`,
-      createCriteria: getCriteriaBuilder,
-      isEnabled: (searchTerm, selectedOption) => {
-        return (
-          searchTerm.length >= INPUT_MIN_LENGTH && !selectedOption.some((e) => e.field === 'NAME')
-        );
-      },
-    },
-  ];
-
-  createNewReportHandler() {
-    localStorage.removeItem(StorageKey.ReportingConfig);
-    writeReduxState(reduxBlankState);
-    this.$emit(ReportingEvents.setReportConfigDisplayMode, 'edit');
-  }
-
-  async editReportConfigHandler({ NAME, ID }: { NAME: string; ID: string }) {
-    try {
-      const response = await this.connect.request('REPORT_CONFIG_DETAILS', { REQUEST: { ID } });
-      const data = response.REPLY?.[0];
-      if (!data) throw new Error(`No data returned for edit report with ID ${ID}`);
-
-      const getSchema = getDatasourceSchema(this.connect);
-      const transformed = await transformFromServerPayload(data, getSchema);
-      console.log({ transformed });
-      writeReduxState(transformed);
-      this.$emit(ReportingEvents.setReportConfigDisplayMode, 'edit');
-    } catch (e: unknown) {
-      showNotificationToast({
-        title: 'Edit Report Config',
-        body: `'${NAME}' was not able to be loaded for editing.`,
-        toast: { type: 'critical' as any },
-      });
-      logger.error(e);
-    }
-  }
-
-  getColumnDefs() {
-    const actionsMenu = getActionsMenuDef(
-      [
-        {
-          name: permissionGuard(this, Permissions.ReportConfigurationUpdate) ? 'Edit' : 'View',
-          callback: (rowData) => this.editReportConfigHandler(rowData),
-        },
-        permissionGuard(this, Permissions.ReportConfigurationUpdate)
-          ? {
-              name: 'Clone',
-              callback: (rowData) => this.openCloneReportConfigModal(rowData),
-            }
-          : null,
-        permissionGuard(this, Permissions.ReportConfigurationUpdate)
-          ? {
-              name: 'Export',
-              callback: (rowData) => this.exportConfig(rowData),
-            }
-          : null,
-        permissionGuard(this, Permissions.ReportRun)
-          ? {
-              name: 'Run',
-              callback: (rowData) => this.runReport(rowData.ID, rowData.NAME),
-            }
-          : null,
-        permissionGuard(this, Permissions.ReportConfigurationDelete)
-          ? {
-              name: 'Delete',
-              callback: (rowData) => this.deleteReportConfig(rowData.ID, rowData.NAME),
-              color: 'var(--error-color)',
-            }
-          : null,
-      ].filter(Boolean),
-      {
-        headerName: '',
-        minWidth: 60,
-        maxWidth: 60,
-        pinned: 'right',
-        filter: false,
-      },
-      '⋮',
-      false,
-      'stealth',
-    );
-
-    const columnDefs: ColDef[] = [
-      {
-        field: 'NAME',
-        headerName: 'Name',
-        minWidth: 200,
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'DESCRIPTION',
-        headerName: 'Description',
-        minWidth: 400,
-        flex: 2,
-        filter: true,
-        cellStyle: { display: 'flex' },
-      },
-      {
-        field: 'CREATED_ON',
-        headerName: 'Created Date',
-        minWidth: 150,
-        flex: 1,
-        filter: 'agDateColumnFilter',
-        filterParams: getFilterParams(),
-        cellStyle: { display: 'flex' },
-        valueFormatter: (rowData) => formatDate(rowData.data.CREATED_ON),
-      },
-      {
-        field: 'LAST_UPDATED_AT',
-        headerName: 'Date Last updated',
-        minWidth: 180,
-        flex: 1,
-        sortable: true,
-        sort: 'desc',
-        filter: 'agDateColumnFilter',
-        filterParams: getFilterParams(),
-        cellStyle: { display: 'flex' },
-        valueFormatter: (rowData) => getFormattedDateTime(rowData.data.LAST_UPDATED_AT),
-      },
-      {
-        field: 'LAST_UPDATED_BY',
-        headerName: 'Last Updated By',
-        minWidth: 150,
-        flex: 1,
-        cellStyle: { display: 'flex' },
-      },
-      permissionGuard(this, Permissions.ReportRun)
-        ? {
-            headerName: 'Actions',
-            minWidth: 110,
-            maxWidth: 110,
-            flex: 1,
-            filter: false,
-            cellStyle: { display: 'flex', alignItems: 'center' },
-            pinned: 'right',
-            cellRenderer: GridProRendererTypes.action,
-            cellRendererParams: {
-              actionClick: (rowData) => this.runReport(rowData.ID, rowData.NAME),
-              contentTemplate: html`
-                <rapid-icon
-                  slot="start"
-                  size="md"
-                  name="play"
-                  style="color: var(--neutral-foreground-hint);"
-                ></rapid-icon>
-                Run
-              `,
-              appearance: 'neutral-outline',
-              actionName: 'Run',
-            },
-          }
-        : null,
-      actionsMenu,
-    ].filter(Boolean) as ColDef<any>[];
-    return columnDefs;
-  }
-
-  getGridOptions() {
-    const gridOptions: GridOptionsConfig = {
-      defaultColDef: {
-        filter: true,
-        floatingFilter: false,
-        sortable: true,
-        suppressMenu: false,
-      },
-      suppressRowClickSelection: true,
-      columnDefs: this.getColumnDefs(),
-      headerHeight: 30,
-      rowHeight: 32,
-      tooltipShowDelay: 0,
-    };
-
-    return gridOptions;
-  }
-
-  private async deleteReportConfig(reportConfigId, reportName) {
-    try {
-      const deleteResponse = await this.connect.commitEvent('EVENT_REPORT_CONFIG_DELETE', {
-        DETAILS: {
-          ID: reportConfigId,
-        },
-        IGNORE_WARNINGS: true,
-        VALIDATE: false,
-      });
-      if (deleteResponse.MESSAGE_TYPE === 'EVENT_ACK') {
-        this.reportConfigurationsDatasource.deferredGridOptions = this.getGridOptions();
-        this.reportConfigurationsDatasource.restart();
-        showNotificationToast({
-          title: 'Delete Report Config',
-          body: `'${reportName}' was deleted successfully`,
-          toast: { type: 'success' as any },
-        });
-      } else {
-        const error = deleteResponse?.ERROR?.length ? deleteResponse.ERROR[0].TEXT : '';
-        showNotificationToast({
-          title: 'Delete Report Config',
-          body: `'${reportName}' was not deleted due to following error "${error}"`,
-          toast: { type: 'critical' as any },
-        });
-      }
-    } catch (err) {
-      logger.error(err);
-    }
-  }
-
-  private async runReport(reportConfigId, reportName) {
-    try {
-      const response: any = await this.connect.commitEvent('EVENT_GENERATE_REPORT', {
-        DETAILS: {
-          ID: reportConfigId,
-        },
-        IGNORE_WARNINGS: true,
-        VALIDATE: false,
-      });
-      if (response.MESSAGE_TYPE === 'EVENT_ACK') {
-        showNotificationToast({
-          title: 'Generate Report',
-          body: `'${reportName}' was created successfully`,
-          toast: { type: 'success' as any },
-        });
-        this.$emit(ReportingEvents.highlightGridRow, response.GENERATED[0].GENERATED_REPORT_ID);
-      } else {
-        const error = response?.ERROR?.length ? response.ERROR[0].TEXT : '';
-        showNotificationToast({
-          title: 'Generate Report',
-          body: `'${reportName}' was not created due to following error "${error}"`,
-          toast: { type: 'critical' as any },
-        });
-      }
-    } catch (err) {
-      logger.error(err);
-    }
-  }
-
-  searchChanged(event: CustomEvent<Array<SelectedOption>>) {
-    const options = event.detail;
-    const criteriaBuilder = options
-      .map((option) => {
-        const { field, term, createCriteria } = option;
-        if (createCriteria) {
-          return createCriteria(field, term);
-        } else {
-          logger.debug('Cannot convert search option into criteria', option);
-          return;
-        }
-      })
-      .filter((x) => x)
-      .join(' && ');
-    this.gridCriteria = criteriaBuilder;
-  }
-
-  async openCloneReportConfigModal(e) {
-    this.cloneConfigModal.showReportConfigModal(e.ID);
-  }
-
-  importConfigHandler() {
-    this.importFileInput.value = '';
-    this.importFileInput.click();
-  }
-
-  async handleFileImport(event: Event) {
-    const file = (event.target as HTMLInputElement).files?.[0];
-    if (!file) return;
-    try {
-      const text = await file.text();
-      const config = JSON.parse(text) as Genesis.ServerReportConfig;
-      this.cloneConfigModal.showImportModal(config);
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      showNotificationToast({
-        title: 'Import Report Config',
-        body: `Failed to read config file: ${errorMessage}`,
-        toast: { type: 'critical' as any },
-      });
-    }
-  }
-
-  async exportConfig({ NAME, ID }: { NAME: string; ID: string }) {
-    try {
-      const response = await this.connect.request('REPORT_CONFIG_DETAILS', { REQUEST: { ID } });
-      const data = response.REPLY?.[0];
-      if (!data) throw new Error(`No data returned for export report with ID ${ID}`);
-
-      // Quick and dirty way of removing the BIGINTs from the server response which cannot be serialized
-      // in JSON
-      const getSchema = getDatasourceSchema(this.connect);
-      const transformed = await transformFromServerPayload(data, getSchema);
-      const cleanPayload = transformToServerPayload(transformed);
-
-      const json = JSON.stringify(cleanPayload, null, 2);
-      const blob = new Blob([json], { type: 'application/json' });
-      const url = URL.createObjectURL(blob);
-
-      const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-      const filename = `${NAME.replace(/ /g, '-')}_${timestamp}.json`;
-
-      const anchor = document.createElement('a');
-      anchor.href = url;
-      anchor.download = filename;
-      anchor.click();
-      URL.revokeObjectURL(url);
-    } catch (e: unknown) {
-      const errorMessage = e instanceof Error ? e.message : String(e);
-      showNotificationToast({
-        title: 'Export Report Config',
-        body: `'${NAME}' was not able to be exported: ${errorMessage}`,
-        toast: { type: 'critical' as any },
-      });
-      logger.error(e);
-    }
-  }
-}

package/src/new/components/shared/file-template-picker.template.ts

@@ -1,45 +0,0 @@
-import { html, repeat, when } from '@genesislcap/web-core';
-import type { BaseConfig } from '../../main/edit-config/base-config/base-config';
-import type { ReportOutputTypes } from '../../store';
-import { Genesis } from '../../types';
-import { TOOLTIP, tooltip } from '../../utils';
-import type { CloneReportConfigModal } from '../clone-report-config-modal/clone-report-config-modal';
-
-export const NULL_TEMPLATE = 'Select a template';
-
-export const allowedTemplateFiletypes: Record<ReportOutputTypes, string[]> = {
-  CSV: ['csv', 'txt'],
-  PDF: ['html', 'xhtml'],
-  XLSX: ['xls', 'xlsx'],
-};
-
-export const fileTemplatePicker = html<BaseConfig | CloneReportConfigModal>`
-  <label class="label">File template${tooltip(TOOLTIP.SETUP_FILE_TEMPLATE)}</label>
-  ${repeat(
-    (x) => (x.allowedTemplates?.length > 0 ? [x] : []),
-    html<BaseConfig | CloneReportConfigModal>`
-      <rapid-select
-        data-test-id="config-document-template"
-        :value=${(x) => x.selectedTemplateId || NULL_TEMPLATE}
-        @change=${(x, ctx) => x.handleTemplateSelectChange(ctx.event.target as HTMLSelectElement)}
-      >
-        <rapid-option value=${() => NULL_TEMPLATE}>${NULL_TEMPLATE}</rapid-option>
-        ${repeat(
-          (x) => x.allowedTemplates,
-          html<Genesis.FileStorageDataRow>`
-            <rapid-option value="${(x) => x[Genesis.FileStorageFields.FILE_STORAGE_ID]}">
-              ${(x) => x[Genesis.FileStorageFields.FILE_NAME]}
-            </rapid-option>
-          `,
-        )}
-      </rapid-select>
-    `,
-    { recycle: false },
-  )}
-  ${when(
-    (x) => !x.allowedTemplates || x.allowedTemplates.length === 0,
-    html`
-      No valid templates available for this output format.
-    `,
-  )}
-`;

package/src/new/lib/redux-store/README.md

@@ -1,55 +0,0 @@
-# Redux store for FAST projects (WIP)
-
-Currently this is a POC for internal use in Create. Once we test it more, it could be published as separate module (e.g. in FUI) as an alternative to the foundation-store.
-
-## Why migrate away from foundation-store?
-
-foundation-store was created as an implementation of Redux pattern within FAST context. There're a few issues with it compared to using Redux itself:
-
-* boilerplate
-* not benefitting fully from vast Redux docs and ecosystem - there is a lot of documentation on the official Redux site covering various complex cases. You _can_ adapt them to foundation-store, but it's a lot more work compared to being able to copy/paste
-  * e.g. https://redux-toolkit.js.org/api/createEntityAdapter for auto-generating typical CRUD-style actions and selectors
-* need to implement things from scratch (e.g. serialisation and hydration from local storage)
-
-Rather than re-implenting Redux pattern, this package provides bindings to the Redux itself. 
-Bindings themselves are pretty small so they can be adapated for other libraries (e.g. https://mobx.js.org/README.html, https://github.com/pmndrs/zustand, https://pinia.vuejs.org/)
-
-### Boilerplate example
-
-Foundation store leaves immutability handling to the developer (so you need to do a lot of object and array spreading) and it also uses native custom events, so your components need to extend event emitter clases, you need to set up event maps etc. This results in quite a lot of boilerplate:
-
-Foundation store:
-
-```ts
-this.createListener<DeleteViewDerivedFieldPayload>(
-  StoreEvents.DeleteViewDerivedField,
-  ({ view, field }) => {
-    const { [field]: fieldToDelete, ...rest } =
-      this.commit.genesisCreateConfig.views.views[view]?.derivedFields || {};
-    if (fieldToDelete) {
-      this.commit.genesisCreateConfig = {
-        ...this.genesisCreateConfig,
-        views: {
-          views: {
-            ...this.genesisCreateConfig.views.views,
-            [view]: {
-              ...this.genesisCreateConfig.views.views[view],
-              derivedFields: {
-                ...rest,
-              },
-            },
-          },
-        },
-      };
-    }
-  },
-);
-```
-
-Redux toolkit:
-
-```ts
-deleteDerivedField(state, { payload: { view, field } }) {
-  delete state[view].derivedFields[field];
-}
-```

package/src/new/lib/redux-store/index.ts

@@ -1,2 +0,0 @@
-export * from './store';
-export * from './state-utils';

package/src/new/lib/redux-store/state-utils.ts

@@ -1 +0,0 @@
-export { find, get, set, findIndex } from 'lodash';

package/src/new/lib/redux-store/store.ts

@@ -1,135 +0,0 @@
-import { isDev } from '@genesislcap/foundation-utils';
-import { Observable } from '@genesislcap/web-core';
-import { configureStore, ReducersMapObject, EnhancedStore, Action } from '@reduxjs/toolkit';
-import {
-  ActionsFromSlices,
-  StoreReturn,
-  RootStateFromSlices,
-  SelectorsFromSlices,
-  SliceArray,
-} from '../../types';
-
-export { createSlice } from '@reduxjs/toolkit';
-
-class ObservableStore<S extends SliceArray> {
-  private _store: EnhancedStore<RootStateFromSlices<S>>;
-  private _slices: S;
-  private _rootReducer: ReducersMapObject<RootStateFromSlices<S>>;
-
-  constructor(slices: S, preloadedState: RootStateFromSlices<S>) {
-    this._slices = slices;
-    this._rootReducer = slices.reduce(
-      (acc, slice) => {
-        acc[slice.name] = slice.reducer;
-        return acc;
-      },
-      {} as ReducersMapObject<RootStateFromSlices<S>>,
-    );
-
-    this._store = configureStore({
-      reducer: this._rootReducer,
-      devTools: isDev(),
-      preloadedState,
-    });
-  }
-
-  getReduxStore = () => this._store;
-
-  dispatch = (action: Action) => this._store.dispatch(action);
-
-  notify = (sliceName: keyof RootStateFromSlices<S>) =>
-    Observable.notify(this, sliceName as string);
-
-  getRootReducer = () => this._rootReducer;
-
-  subscribe = (cb: (state: RootStateFromSlices<S>) => void) =>
-    this._store.subscribe(() => {
-      cb(this._store.getState());
-    });
-
-  subscribeKey = (
-    checkerFn: (s: RootStateFromSlices<S>) => string,
-    callbackFn: (s: RootStateFromSlices<S>) => void,
-  ): void => {
-    let cache = checkerFn(this._store.getState());
-    this.subscribe(() => {
-      const newState = checkerFn(this._store.getState());
-      if (cache === newState) return;
-      cache = newState;
-      callbackFn(this._store.getState());
-    });
-  };
-
-  getSlice = (name: keyof RootStateFromSlices<S>) => {
-    Observable.track(this, name);
-    return this._store.getState()[name];
-  };
-
-  getActions = () =>
-    this._slices.reduce((acc, slice) => {
-      Object.keys(slice.actions).forEach((key) => {
-        if (acc[key]) {
-          throw new Error(`Action name not unique: ${key}`);
-        }
-
-        acc[slice.name] = {
-          ...acc[slice.name],
-          [key]: (payload: any) => {
-            this.dispatch(slice.actions[key](payload));
-            this.notify(slice.name as keyof RootStateFromSlices<S>);
-          },
-        };
-      });
-      return acc;
-    }, {}) as ActionsFromSlices<S>;
-
-  getSelectors = () =>
-    this._slices.reduce((acc, slice) => {
-      Object.keys(slice.selectors).forEach((key) => {
-        if (acc[slice.name]?.[key]) {
-          throw new Error(`Selector name not unique: ${key}`);
-        }
-        if (!acc[slice.name]) {
-          acc[slice.name] = {};
-        }
-
-        acc[slice.name] = {
-          ...acc[slice.name],
-          [key]: (...params: any[]) => {
-            const sliceState = this.getSlice(slice.name as keyof RootStateFromSlices<S>);
-            const fullState = {
-              ...this._store.getState(),
-              [slice.name]: sliceState,
-            };
-            return slice.selectors[key](fullState, ...params);
-          },
-        };
-      });
-      return acc;
-    }, {} as SelectorsFromSlices<S>);
-}
-
-export const createStore = <S extends SliceArray>(
-  slices: S,
-  preloadedState: RootStateFromSlices<S>,
-): StoreReturn<S> => {
-  const observableStore = new ObservableStore(slices, preloadedState);
-  const actions = observableStore.getActions();
-  const storeProxy = new Proxy({} as RootStateFromSlices<S>, {
-    get(target, propertyName) {
-      return observableStore.getSlice(propertyName as keyof RootStateFromSlices<S>);
-    },
-  });
-
-  return {
-    store: storeProxy,
-    actions,
-    selectors: observableStore.getSelectors(),
-    rootReducer: observableStore.getRootReducer(),
-    dispatch: observableStore.dispatch,
-    notify: observableStore.notify,
-    subscribe: observableStore.subscribe,
-    getState: () => observableStore.getReduxStore().getState(),
-    subscribeKey: observableStore.subscribeKey,
-  };
-};

package/src/new/main/edit-config/base-config/base-config.styles.ts

@@ -1,26 +0,0 @@
-import { css } from '@genesislcap/web-core';
-import { formLabel } from '../../../styles';
-
-export const styles = css`
-  ${formLabel}
-
-  :host {
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--design-unit) * 2px);
-  }
-
-  rapid-select {
-    width: 100%;
-    margin-bottom: calc(var(--design-unit) * 2px);
-  }
-
-  rapid-text-area {
-    height: 115px;
-    padding-bottom: calc(var(--design-unit) * 2px);
-  }
-
-  rapid-text-field {
-    margin-bottom: calc(var(--design-unit) * 2px);
-  }
-`;