@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

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

@@ -1,147 +0,0 @@
-import type { ExecutionContext } from '@genesislcap/web-core';
-import { html, ref, repeat, when } from '@genesislcap/web-core';
-import { tickIcon } from '../../assets/images';
-import { buttonTag, cardTag, iconTag } from '../../tags';
-import { Debug } from './debug';
-import type { Wizard } from './wizard';
-import { WizardStep } from './wizard.types';
-
-const buttonLabel = (activeTab, content, isEdit) => {
-  if (activeTab === content.length - 1) {
-    return isEdit ? 'Update' : 'Save';
-  } else {
-    return 'Next';
-  }
-};
-
-const TitleTemplate = html<Wizard>`
-  <h5 class="step-title" data-test-id="step-title">
-    <span
-      class="step-number${(x, c: ExecutionContext) =>
-        c.parent.activeTab > c.index || c.parent.activeTab === WizardStep.Three
-          ? ' completed'
-          : ''}"
-      data-test-id="step-number"
-    >
-      ${(x, c: ExecutionContext) =>
-        c.parent.activeTab > c.index
-          ? html`
-              ${tickIcon()}
-            `
-          : c.index + 1}
-    </span>
-    &nbsp;&nbsp;&nbsp;${(x) => x.title}
-  </h5>
-`;
-
-const TabOneContextTemplate = html<Wizard>`
-  <div
-    class="nav-line${(x, c: ExecutionContext) =>
-      c.parent.activeTab > c.index ? ' completed' : ''}"
-    data-test-id="nav-line"
-  >
-    <div class="flex flex-column context-container">
-      ${when(
-        (x, c: ExecutionContext) => c.parent.activeTab >= 1 && c.index === 0,
-        html`
-          <p class="context" data-test-id="report-name">
-            Report Name:
-            <br />
-            <b>${(x, c) => c.parent.reportName}</b>
-          </p>
-          <p class="context" data-test-id="data-source">
-            Data Source:
-            <br />
-            <b>${(x, c) => c.parent.selectedDatasource}</b>
-          </p>
-        `,
-      )}
-      ${when(
-        (x, c: ExecutionContext) => c.parent.activeTab >= 2 && c.index === 1,
-        html`
-          <p class="context" data-test-id="selected-fields">
-            Selected fields:
-            <br />
-            <b>${(x, c) => c.parent.getNormalizedSelectedFields().join(`, `)}</b>
-          </p>
-        `,
-      )}
-      ${when(
-        (x, c: ExecutionContext) => c.parent.activeTab >= WizardStep.Three && c.index === 2,
-        html`
-          <p class="context" data-test-id="applied-filters">
-            Applied filters:
-            <br />
-            <b>${(x, c) => c.parent.getNormalizedSelectedFilters().join(`, `)}</b>
-          </p>
-        `,
-      )}
-    </div>
-  </div>
-`;
-
-const WizardNavigation = html<Wizard>`
-  <div class="nav-actions text-right" data-test-id="wizard-navigation">
-    ${when(
-      (x) => x.activeTab > 0,
-      html`
-        <${buttonTag} @click=${(x) => x.setActiveTab(x.activeTab - 1)} data-test-id="back-button">
-          <${iconTag} class="mr-5px" name="arrow-left"></${iconTag}>
-          Back
-        </${buttonTag}>
-      `,
-    )}
-    <${buttonTag}
-      ${ref('nextButton')}
-      tabindex="99"
-      appearance="${(x) => x.config.buttonAppearance}"
-      ?disabled=${(x) => !x.isFormValid}
-      @click=${(x) =>
-        x.activeTab === x.content.length - 1
-          ? x.saveReport(x.isEdit, x.getData())
-          : x.setActiveTab(x.activeTab + 1)}
-      data-test-id="next-button"
-    >
-      ${(x) => buttonLabel(x.activeTab, x.content, x.isEdit)}
-      <${iconTag} class="ml-5px" name="arrow-right"></${iconTag}>
-    </${buttonTag}>
-  </div>
-`;
-
-const WizardContent = html<Wizard>`
-  <${cardTag} class="card body" design-unit="5" data-test-id="wizard-content">
-    ${(x) => x.viewTemplate}
-  </${cardTag}>
-`;
-
-export const WizardTemplate = html<Wizard>`
-  <div class="wizard grid-container">
-    <${cardTag} class="card nav flex flex-column" data-test-id="wizard-navigation-card">
-      <h3 class="section-title light-grey">${(x) => (x.isEdit ? 'Edit' : 'Create')} Report</h3>
-      ${repeat(
-        (x) => x.content,
-        html`
-          <div
-            class="nav-item${(x, c: ExecutionContext) =>
-              c.index === c.parent.activeTab ? ' active' : ''}"
-            data-test-id="wizard-navigation-item"
-          >
-            ${TitleTemplate}
-            ${when(
-              (x, c: ExecutionContext) => x.description && c.index === c.parent.activeTab,
-              html`
-                <p class="description" data-test-id="wizard-navigation-item-description">
-                  ${(x) => x.description}
-                </p>
-              `,
-            )}
-            ${TabOneContextTemplate}
-          </div>
-        `,
-        { positioning: true, recycle: false },
-      )}
-      ${WizardNavigation} ${(x) => (x.debug ? Debug : null)}
-    </${cardTag}>
-    ${WizardContent}
-  </div>
-`;

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

@@ -1,398 +0,0 @@
-import { Connect } from '@genesislcap/foundation-comms';
-import { Button, customElement, GenesisElement, observable, volatile } from '@genesislcap/web-core';
-import { ReportingConfig } from '../../config/config';
-import { ReportingEventListeners } from '../../main/types';
-import { FiltersStep, NameStep, RunStep, SelectStep } from './steps';
-import { WizardStyles as styles } from './wizard.styles';
-import { WizardTemplate as template } from './wizard.template';
-import {
-  DatasourceFieldOptions,
-  DatasourceOptions,
-  ReportField,
-  WizardContent,
-  WizardStep,
-} from './wizard.types';
-
-const name = 'reporting-wizard';
-
-/**
- * Multi-step saved-report builder (legacy).
- * @public
- *
- * @fires notify - Fired when a user notification should be shown. detail: `ReportNotification`
- */
-@customElement({
-  name,
-  template,
-  styles,
-})
-export class Wizard extends GenesisElement {
-  @Connect connect: Connect;
-  @ReportingConfig config!: ReportingConfig;
-  @observable debug: boolean = false;
-  @observable activeTab: number = 0;
-  @observable datasourceOptions: DatasourceOptions = [];
-  @observable datasourceFieldOptions: DatasourceFieldOptions = [];
-  @observable isEdit: boolean = false;
-  @observable fieldData: ReportField[] = [];
-  @observable report;
-  @observable saveReport;
-  @observable content: WizardContent = [
-    {
-      title: 'Set up & Datasource',
-      description:
-        "Please give your new report a name, brief description and select it's datasource to get started.",
-    },
-    {
-      title: 'Set fields',
-      description: '',
-    },
-    {
-      title: 'Apply filters',
-      description: '(Optional)',
-    },
-    {
-      title: 'Run report',
-      description: '',
-    },
-  ];
-  @observable datasourceSettings;
-
-  // Set name and datasource step
-  @observable reportName: string = '';
-  @observable reportDescription: string = '';
-  @observable selectedDatasource: string = null;
-
-  // Set fields step
-  @observable selectedFields: ReportField[] = [];
-
-  // Set filters step
-  @observable selectedFilters = [];
-
-  // Run / preview report step
-  @observable previewData: any[] = [];
-  @observable previewGridColumns = [];
-
-  @volatile
-  get isFormValid() {
-    // Note: This is a very basic form validation. Would be nice to know if there are any existing form validation tools that we've used in the past and implement it here.
-    switch (this.activeTab) {
-      // Set up & Datasource Step
-      case WizardStep.Zero:
-        return !!this.reportName && !!this.selectedDatasource;
-      // Set columns Step
-      case WizardStep.One:
-        return this.selectedFields && this.selectedFields.length > 0;
-      // Set filters Step
-      case WizardStep.Two:
-        return true;
-      // Run report Step
-      case WizardStep.Three:
-        return true;
-      default:
-        return true;
-    }
-  }
-
-  @volatile
-  get viewTemplate() {
-    switch (this.activeTab) {
-      case WizardStep.Zero:
-        return NameStep;
-      case WizardStep.One:
-        return SelectStep;
-      case WizardStep.Two:
-        return FiltersStep;
-      case WizardStep.Three:
-        return RunStep;
-      default:
-        throw new Error(`Cannot get template for state ${this.activeTab}`);
-    }
-  }
-
-  nextButton: Button;
-
-  /**
-   * When report variable changes handle
-   */
-  async reportChanged(old, newValue) {
-    this.fieldData = this.fieldData?.map(({ filter, ...fields }) => fields);
-    if (Object.keys(newValue).length) {
-      const {
-        REPORT_NAME,
-        REPORT_DESCRIPTION,
-        REPORT_DATASOURCE,
-        REPORT_DATA_SOURCE,
-        REPORT_COLUMNS,
-      } = newValue;
-      this.isEdit = true;
-      this.selectedFields = REPORT_COLUMNS;
-      this.reportName = REPORT_NAME;
-      this.reportDescription = REPORT_DESCRIPTION;
-      this.selectedDatasource = REPORT_DATASOURCE || REPORT_DATA_SOURCE;
-    } else {
-      this.isEdit = false;
-      this.reportName = '';
-      this.reportDescription = '';
-      this.selectedDatasource = null;
-      this.selectedFields = [];
-      this.selectedFilters = [];
-    }
-    this.setActiveTab(0);
-  }
-
-  /**
-   * Set selected fields
-   * @param fields array
-   */
-  public setFields(fields) {
-    this.selectedFields = fields;
-  }
-
-  /**
-   * When report variable changes handle
-   */
-  async selectedDatasourceChanged(old, newValue) {
-    // Reset
-    this.selectedFields = [];
-    this.selectedFilters = [];
-    this.fieldData = [];
-
-    // Prepare field data structure from field metadata response
-    const fieldMetadata = await this.fetchFieldsFromDatasource();
-    if (this.isEdit && Object.keys(this.report).length) {
-      this.selectedFields = this.report['REPORT_COLUMNS'];
-      const reportDatasource =
-        this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
-      if (reportDatasource === newValue) {
-        this.fieldData = fieldMetadata.map(
-          ({ FIELD_NAME, TYPE }) =>
-            this.selectedFields.find((field) => field.name === FIELD_NAME) || {
-              name: FIELD_NAME,
-              type: TYPE,
-              displayName: FIELD_NAME,
-              selected: false,
-            },
-        );
-      }
-    } else {
-      fieldMetadata?.forEach(({ FIELD_NAME, TYPE }) => {
-        this.fieldData = [
-          ...this.fieldData,
-          {
-            name: FIELD_NAME,
-            type: TYPE,
-            displayName: FIELD_NAME,
-            selected: false,
-          },
-        ];
-      });
-    }
-  }
-
-  /**
-   * Make sure to update selected fields when field data changes
-   */
-  fieldDataChanged() {
-    this.selectedFields =
-      this.selectedFields?.map((f) => {
-        const matchingField = this.fieldData?.find((field) => field?.name === f?.name);
-        return {
-          ...matchingField,
-          displayName: matchingField?.displayName || f?.name,
-          selected: matchingField ? true : false,
-        };
-      }) || [];
-    this.selectedFilters = this.fieldData?.filter((field) => field.filter && field.selected) || [];
-  }
-
-  public connectedCallback() {
-    super.connectedCallback();
-    this.getDatasources();
-    this.addEventListener('setSelectedFields', (e: CustomEvent) => {
-      this.selectedFields = e?.detail?.fields;
-      this.fieldData = this.fieldData?.map((field) => {
-        const matchingField = this.selectedFields.find((f) => f?.name === field?.name);
-        return {
-          ...field,
-          ...matchingField,
-          displayName: matchingField?.displayName || field?.name,
-          selected: matchingField ? true : false,
-        };
-      });
-    });
-    this.addEventListener('setSelectedFilters', (e: CustomEvent) => {
-      this.fieldData = this.fieldData?.map((field) => {
-        const matchingField = e?.detail?.filters?.find((f) => f?.name === field?.name);
-
-        if (matchingField) {
-          matchingField.filter = {
-            ...matchingField.filter,
-          };
-        } else {
-          delete field?.filter;
-        }
-
-        return {
-          ...field,
-          ...matchingField,
-        };
-      });
-    });
-  }
-
-  /**
-   * Get a simplified / normalized version of the fields
-   * e.g. ['REPORT_ID', 'REPORT_NAME']
-   * @returns Array of string
-   */
-  public getNormalizedSelectedFields = () =>
-    this.selectedFields?.map((field) => field.displayName) || [];
-
-  /**
-   * Get normalized selected filters context
-   * @returns Array of strings
-   */
-  public getNormalizedSelectedFilters = () =>
-    this.selectedFilters?.map(({ displayName }) => displayName) || [];
-
-  /**
-   * Fetch a list of datasources
-   */
-  private async getDatasources() {
-    await this.connect
-      .request('ALL_REPORT_DATASOURCES', {
-        REQUEST: {},
-      })
-      .then((response) => {
-        response?.REPLY?.forEach(({ DATASOURCE_NAME, RECORD_ID }) => {
-          this.datasourceOptions = [
-            ...this.datasourceOptions,
-            {
-              id: RECORD_ID,
-              name: DATASOURCE_NAME,
-            },
-          ];
-        });
-      })
-      .catch((err) => {
-        this.$emit(ReportingEventListeners.notify, {
-          type: 'warning',
-          title: 'Error:',
-          message: `There was an error fetching data sources:
-          ${err?.ERROR ? err.ERROR : JSON.stringify(err)}
-        `,
-        });
-      });
-  }
-
-  /**
-   * Fetch data from the provided datasource
-   */
-  private fetchFieldsFromDatasource(): Promise<any> {
-    return (
-      this.selectedDatasource &&
-      this.connect
-        .getMetadata(this.selectedDatasource)
-        .then((response) => {
-          if (response.ERROR) {
-            this.$emit(ReportingEventListeners.notify, {
-              type: 'warning',
-              title: 'Error:',
-              message: `The application encountered an error while trying to fetch fields
-              ${this.selectedDatasource && `for data source "${this.selectedDatasource}"`}: 
-              ${response.ERROR} 
-            `,
-            });
-          }
-          const fields = response?.FIELD || response?.REPLY_FIELD;
-          return fields?.map(({ NAME, TYPE }) => ({ FIELD_NAME: NAME, TYPE }));
-        })
-        .catch((err) => {
-          this.$emit(ReportingEventListeners.notify, {
-            type: 'warning',
-            title: 'Error:',
-            message: err?.ERROR ? err.ERROR : JSON.stringify(err),
-          });
-        })
-    );
-  }
-
-  /**
-   * On datasource radio group change event handler
-   * @param selection Number
-   */
-  public onDatasourceChange = (selection) => {
-    this.selectedDatasource = selection;
-  };
-
-  /**
-   * Get report context data
-   * @returns Object
-   */
-  public getData = () => {
-    return {
-      REPORT_NAME: this.reportName,
-      REPORT_DESCRIPTION: this.reportDescription,
-      REPORT_COLUMNS: this.selectedFields,
-      REPORT_DATA_SOURCE: this.selectedDatasource,
-    };
-  };
-
-  /**
-   * Set the current active tab
-   * @param tab Number
-   */
-  public setActiveTab = (tabIndex) => {
-    if (this.content[tabIndex]) {
-      this.activeTab = tabIndex;
-    }
-  };
-
-  private selectedGridId;
-
-  wizardStepKeydownHandler(event: KeyboardEvent) {
-    if (event.key !== 'Tab') {
-      return true;
-    }
-
-    const activeElement = this.shadowRoot.activeElement;
-    const isFieldsOrFiltersStep =
-      this.activeTab === WizardStep.One || this.activeTab === WizardStep.Two;
-
-    if (!isFieldsOrFiltersStep) {
-      if (this.isFormValid) {
-        this.nextButton.focus();
-        return false;
-      }
-      return true;
-    }
-
-    const isReportingSelectElement =
-      activeElement &&
-      (activeElement.localName === 'reporting-select-filters' ||
-        activeElement.localName === 'reporting-select-fields');
-
-    if (isReportingSelectElement) {
-      const selectedElement = activeElement.shadowRoot.activeElement;
-      const selectedId = selectedElement.id;
-
-      if (!activeElement.localName || selectedId === 'select-available-fields-grid') {
-        return true;
-      }
-
-      if (selectedId === 'selected-fields-grid' || selectedId === 'selected-filters-grid') {
-        this.selectedGridId = selectedId;
-        return true;
-      }
-    }
-
-    if ((activeElement || this.selectedGridId) && this.isFormValid) {
-      this.selectedGridId = undefined;
-      this.nextButton.focus();
-      return false;
-    }
-
-    return true;
-  }
-}

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

@@ -1,43 +0,0 @@
-export interface FieldItem {
-  FIELD_NAME: string;
-  TYPE: string;
-}
-
-interface WizardStepContent {
-  title: string;
-  description?: string;
-}
-
-export interface WizardContent extends Array<WizardStepContent> {}
-
-interface DatasourceReply {
-  id: number;
-  name: string;
-}
-
-export interface DatasourceOptions extends Array<DatasourceReply> {}
-
-interface DatasourceField {
-  FIELD_NAME: string;
-  DISPLAY_NAME?: string;
-}
-export interface DatasourceFieldOptions extends Array<DatasourceField> {}
-
-export type ReportFieldFilter = {
-  conditional: string;
-  value: string;
-};
-export interface ReportField {
-  name: string;
-  selected: boolean;
-  type: string;
-  displayName?: string;
-  filter?: ReportFieldFilter;
-}
-
-export enum WizardStep {
-  Zero = 0,
-  One,
-  Two,
-  Three,
-}

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

@@ -1,61 +0,0 @@
-import {
-  provideDesignSystem,
-  zeroActionsMenu,
-  zeroButton,
-  zeroCard,
-  zeroCheckbox,
-  zeroDesignSystemProvider,
-  zeroDialog,
-  zeroIcon,
-  zeroListboxOption,
-  zeroMenu,
-  zeroMenuItem,
-  zeroRadio,
-  zeroRadioGroup,
-  zeroSelect,
-  zeroTab,
-  zeroTabPanel,
-  zeroTabs,
-  zeroTextField,
-  zeroTextArea,
-  zeroToast,
-} from '@genesislcap/foundation-zero';
-import { zeroGridComponents } from '@genesislcap/foundation-zero-grid-pro';
-import { foundationAgFilterValueRenderer } from './renderers/filter-value-renderer';
-import { foundationAgRowSelectRenderer } from './renderers/row-select.renderer';
-
-/**
- * @public
- */
-export const registerCommonZeroComponents = async () => {
-  /**
-   * Register the components the app is using with the system.
-   */
-  provideDesignSystem().register(
-    /**
-     * Common across most routes, so batch register these lightweight components upfront.
-     */
-    zeroActionsMenu(),
-    zeroButton(),
-    zeroCard(),
-    zeroCheckbox(),
-    zeroDesignSystemProvider(),
-    zeroDialog(),
-    zeroIcon(),
-    zeroListboxOption(),
-    zeroMenu(),
-    zeroMenuItem(),
-    zeroRadio(),
-    zeroRadioGroup(),
-    zeroSelect(),
-    zeroTab(),
-    zeroTabPanel(),
-    zeroTabs(),
-    zeroTextField(),
-    zeroTextArea(),
-    zeroToast(),
-    zeroGridComponents,
-    foundationAgRowSelectRenderer(),
-    foundationAgFilterValueRenderer(),
-  );
-};

package/src/old/config/config.ts

@@ -1,59 +0,0 @@
-import { DI, PartialGenesisElementDefinition } from '@genesislcap/web-core';
-import { defaultTemplateOptions, TemplateOptions } from './templates';
-
-/**
- * Do not reference any ../main files here. We must avoid ../tags being referenced and therefore setup pre-configuration.
- */
-
-/**
- * ReportingConfig DI interface.
- *
- * @public
- */
-export interface ReportingConfig extends PartialGenesisElementDefinition {
-  /**
-   * Template options.
-   *
-   * @remarks
-   * Used by host applications to assign MF template options and subcomponent tags to align with the host design system.
-   */
-  templateOptions: TemplateOptions;
-
-  /**
-   * Button appearance.
-   *
-   * @remarks
-   * Used by foundation-button to specify the appearance of the button
-   */
-  buttonAppearance: string;
-
-  /**
-   * Design System prefix for foundation-form
-   *
-   * @remarks
-   * Used by foundation-form to specify the design system used by the form elements
-   */
-  designSystemPrefix: string;
-}
-
-/**
- * Default ReportingConfig DI implementation.
- * @public
- */
-export const defaultReportingConfig: ReportingConfig = {
-  name: 'foundation-reporting',
-  templateOptions: defaultTemplateOptions,
-  designSystemPrefix: 'rapid',
-  buttonAppearance: 'primary',
-};
-
-/**
- * ReportingConfig DI key.
- *
- * @internal
- * @privateRemarks
- * Marked as internal to stop api-extractor becoming confused cross-linking tokens with the same name.
- */
-export const ReportingConfig = DI.createInterface<ReportingConfig>((x) =>
-  x.instance(defaultReportingConfig),
-);