@genesislcap/pbc-reporting-ui 15.19.0 → 15.19.1

package/src/new/main/edit-config/data-transforms-derived-fields/date-format-modal/date-format-modal.ts

@@ -1,280 +0,0 @@
-import { EventEmitter } from '@genesislcap/foundation-events';
-import { formatTimestamp } from '@genesislcap/foundation-utils';
-import { Modal } from '@genesislcap/rapid-design-system';
-import { customElement, DOM, GenesisElement, observable, volatile } from '@genesislcap/web-core';
-import { actions, selectors, subscribe } from '../../../../store';
-import { getDateFormatOptions } from '../../../../utils';
-import { ReportingEventDetailMap, ReportingEvents } from '../../../../utils/event-map';
-import { datasourceNameFromDisplay, GridColumnNames } from '../../shared';
-import { mapToDateFormat } from '../data-transforms.helpers';
-import {
-  FormatTypes,
-  DateLocaleFormats,
-  DateMonthFormats,
-  DateStandardFormats,
-  DateTimeFormats,
-  DateYearFormats,
-  DisplayConfigurationRow,
-  DateDisplayConfigurationRow,
-  DatetimeDisplayConfigurationRow,
-} from '../data-transforms.types';
-import { dateFormatModalStyles as styles } from './date-format-modal.styles';
-import { dateFormatModalTemplate as template } from './date-format-modal.template';
-
-/**
- * Modal to edit date/datetime column display formats.
- * @public
- *
- * @fires refresh-column-format-grid
- */
-@customElement({
-  name: 'date-format-modal',
-  template,
-  styles,
-})
-export class DateFormatModal extends EventEmitter<ReportingEventDetailMap>(GenesisElement) {
-  dateModal: Modal;
-  @observable isXlsx: boolean = false;
-  private unsubscribe: () => void;
-
-  @observable displayConfigurationRow:
-    | DateDisplayConfigurationRow
-    | DatetimeDisplayConfigurationRow
-    | null = null;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateState();
-    this.unsubscribe = subscribe(this.updateState);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-
-  updateState = () => {
-    this.isXlsx = selectors.baseConfig.getConfig().OUTPUT_FORMAT === 'XLSX';
-  };
-
-  displayConfigurationRowChanged(oldValue, newValue) {
-    if (newValue) {
-      this.resetDateValues();
-
-      DOM.queueUpdate(() => {
-        this.getDateFormats();
-        this.getDateTimeFormats();
-      });
-    }
-  }
-  @observable gridLocaleType: DateLocaleFormats | undefined = undefined;
-  gridLocaleTypeChanged(_: string, newValue: DateLocaleFormats) {
-    if (!newValue) return;
-    if (
-      !(
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Date ||
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Datetime
-      )
-    ) {
-      throw new Error('Setting local type unavailable');
-    }
-    if (this.displayConfigurationRow.format === newValue || !newValue) return;
-    this.displayConfigurationRow.format = newValue;
-
-    this.resetDateValues();
-
-    DOM.queueUpdate(() => {
-      this.getDateFormats();
-      this.getDateTimeFormats();
-      this.formatString = mapToDateFormat(this.displayConfigurationRow);
-    });
-  }
-
-  @observable gridYearType: DateYearFormats | undefined = undefined;
-  gridYearTypeChanged(_: string, newValue: DateYearFormats) {
-    if (!newValue) return;
-    if (
-      !(
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Date ||
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Datetime
-      )
-    ) {
-      throw new Error('Setting year type unavailable');
-    }
-    if (this.displayConfigurationRow.year === newValue || !newValue) return;
-    this.displayConfigurationRow.year = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  @observable gridMonthType: DateMonthFormats | undefined = undefined;
-  gridMonthTypeChanged(_: string, newValue: DateMonthFormats) {
-    if (!newValue) return;
-    if (
-      !(
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Date ||
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Datetime
-      )
-    ) {
-      throw new Error('Setting month type unavailable');
-    }
-    if (this.displayConfigurationRow.month === newValue || !newValue) return;
-    this.displayConfigurationRow.month = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  @observable gridDayType: DateStandardFormats | undefined = undefined;
-  gridDayTypeChanged(_: string, newValue: DateStandardFormats) {
-    if (!newValue) return;
-    if (
-      !(
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Date ||
-        this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Datetime
-      )
-    ) {
-      throw new Error('Setting day type unavailable');
-    }
-    if (this.displayConfigurationRow.day === newValue || !newValue) return;
-    this.displayConfigurationRow.day = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  @observable gridHourType: DateTimeFormats | undefined = undefined;
-  gridHourTypeChanged(_: string, newValue: DateTimeFormats) {
-    if (!newValue) return;
-    if (!(this.displayConfigurationRow.type === FormatTypes.Datetime)) {
-      throw new Error('Setting hour type unavailable');
-    }
-    if (this.displayConfigurationRow.hour === newValue || !newValue) return;
-    this.displayConfigurationRow.hour = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  @observable gridMinuteType: DateTimeFormats | undefined = undefined;
-  gridMinuteTypeChanged(_: string, newValue: DateTimeFormats) {
-    if (!newValue) return;
-    if (!(this.displayConfigurationRow.type === FormatTypes.Datetime)) {
-      throw new Error('Setting minute type unavailable');
-    }
-    if (this.displayConfigurationRow.minute === newValue || !newValue) return;
-    this.displayConfigurationRow.minute = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  @observable gridSecondType: DateTimeFormats | undefined = undefined;
-  gridSecondTypeChanged(_: string, newValue: DateTimeFormats) {
-    if (!newValue) return;
-    if (!(this.displayConfigurationRow.type === FormatTypes.Datetime)) {
-      throw new Error('Setting second type unavailable');
-    }
-    if (this.displayConfigurationRow.second === newValue || !newValue) return;
-    this.displayConfigurationRow.second = newValue;
-    this.formatString = mapToDateFormat(this.displayConfigurationRow);
-  }
-
-  showModal(displayConfigurationRow: DisplayConfigurationRow) {
-    // Type guard to ensure we only accept date/datetime configurations
-    if (
-      displayConfigurationRow.type === FormatTypes.Date ||
-      displayConfigurationRow.type === FormatTypes.Datetime
-    ) {
-      this.displayConfigurationRow = displayConfigurationRow as
-        | DateDisplayConfigurationRow
-        | DatetimeDisplayConfigurationRow;
-      this.formatString =
-        displayConfigurationRow.format !== DateLocaleFormats.Unformatted
-          ? mapToDateFormat(this.displayConfigurationRow)
-          : '';
-      this.dateModal.show();
-    } else {
-      throw new Error('Date format modal can only handle Date or Datetime configurations');
-    }
-  }
-
-  discardChanges() {
-    this.resetDisplayRow();
-    this.formatString = '';
-    this.dateModal.close();
-  }
-
-  saveChanges() {
-    if (!this.gridLocaleType || this.gridLocaleType === DateLocaleFormats.Unformatted) {
-      actions.datasourceConfig.deleteColumnFormat({
-        key: datasourceNameFromDisplay(this.displayConfigurationRow[GridColumnNames.Datasource]),
-        column: this.displayConfigurationRow[GridColumnNames.ColumnName],
-      });
-    } else {
-      const format = mapToDateFormat(this.displayConfigurationRow);
-      actions.datasourceConfig.setColumnFormat({
-        key: datasourceNameFromDisplay(this.displayConfigurationRow[GridColumnNames.Datasource]),
-        column: this.displayConfigurationRow[GridColumnNames.ColumnName],
-        format,
-      });
-    }
-    this.$emit(ReportingEvents.refreshColumnFormatGrid);
-    DOM.queueUpdate(() => {
-      this.resetDisplayRow();
-      this.dateModal.close();
-    });
-  }
-
-  @volatile
-  get dateFormatOptions() {
-    const date = new Date('2050-2-2').getTime();
-    if (this.gridLocaleType === DateLocaleFormats.Unformatted) {
-      return formatTimestamp(
-        date,
-        this.displayConfigurationRow?.[GridColumnNames.Type] === 'DATETIME' ? true : false,
-      );
-    }
-
-    const options = getDateFormatOptions({
-      year: this.gridYearType,
-      month: this.gridMonthType,
-      day: this.gridDayType,
-      hour: this.gridHourType,
-      minute: this.gridMinuteType,
-      second: this.gridSecondType,
-    });
-
-    if (this.displayConfigurationRow)
-      return Intl.DateTimeFormat(this.gridLocaleType, options).format(date);
-  }
-
-  @observable formatString: string;
-
-  getDateTimeFormats() {
-    if (this.displayConfigurationRow.type === FormatTypes.Datetime) {
-      this.gridHourType = (<{ hour?: DateTimeFormats }>this.displayConfigurationRow).hour;
-      this.gridMinuteType = (<{ minute?: DateTimeFormats }>this.displayConfigurationRow).minute;
-      this.gridSecondType = (<{ second?: DateTimeFormats }>this.displayConfigurationRow).second;
-    }
-  }
-
-  resetDisplayRow() {
-    this.displayConfigurationRow = undefined;
-  }
-
-  resetDateValues() {
-    this.gridLocaleType = undefined;
-    this.gridDayType = undefined;
-    this.gridMonthType = undefined;
-    this.gridYearType = undefined;
-    this.gridHourType = undefined;
-    this.gridMinuteType = undefined;
-    this.gridSecondType = undefined;
-  }
-
-  getDateFormats() {
-    if (
-      this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Date ||
-      this.displayConfigurationRow[GridColumnNames.Type] === FormatTypes.Datetime
-    ) {
-      this.gridLocaleType = (<{ format?: DateLocaleFormats }>this.displayConfigurationRow).format;
-      this.gridYearType = (<{ year?: DateYearFormats }>this.displayConfigurationRow).year;
-      this.gridMonthType = (<{ month?: DateMonthFormats }>this.displayConfigurationRow).month;
-      this.gridDayType = (<{ day?: DateStandardFormats }>this.displayConfigurationRow).day;
-    }
-  }
-}

package/src/new/main/edit-config/data-transforms-derived-fields/date-format-modal/index.ts

@@ -1 +0,0 @@
-export * from './date-format-modal';

package/src/new/main/edit-config/data-transforms-derived-fields/format-warning.ts

@@ -1,43 +0,0 @@
-import { customElement, html, css, GenesisElement, attr, classNames } from '@genesislcap/web-core';
-
-@customElement({
-  name: 'format-warning',
-  template: html<FormatWarning>`
-    <div class="${(x) => classNames(['warning', x.warning])}">
-      <p>
-        <strong class="${(x) => classNames(['warning', x.warning])}">
-          ${(x) => (x.warning ? 'Warning' : 'Info')}:
-        </strong>
-        Reporting generates
-        <code>.xlsx</code>
-        files with dates and numbers correctly formatted for Excel by default. If you enable formats
-        for dates or numbers they'll be interpreted as text in Excel.
-      </p>
-    </div>
-  `,
-  styles: css`
-    div {
-      border-color: var(--accent-foreground-rest);
-      border-width: 1px;
-      border-style: solid;
-      padding-left: calc(var(--design-unit) * 3px);
-      padding-right: calc(var(--design-unit) * 3px);
-      border-radius: 3px;
-    }
-    div.warning {
-      border-color: var(--warning-color);
-    }
-    p {
-      margin: calc(var(--design-unit) * 1px);
-    }
-    strong {
-      color: var(--accent-foreground-rest);
-    }
-    strong.warning {
-      color: var(--warning-color);
-    }
-  `,
-})
-export class FormatWarning extends GenesisElement {
-  @attr({ mode: 'boolean' }) warning: boolean = false;
-}

package/src/new/main/edit-config/data-transforms-derived-fields/number-format-modal/index.ts

@@ -1 +0,0 @@
-export * from './number-format-modal';

package/src/new/main/edit-config/data-transforms-derived-fields/number-format-modal/number-format-modal.styles.ts

@@ -1,68 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const numberFormatModalStyles = css`
-  .number-format-select {
-    min-width: 230px;
-    max-width: 230px;
-  }
-
-  .format-options-container {
-    display: flex;
-    gap: 10px;
-  }
-
-  .modal-format-options {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .label {
-    color: var(--neutral-foreground-hint);
-    margin: 0;
-    cursor: pointer;
-    font-size: var(--type-ramp-base-font-size);
-    line-height: var(--type-ramp-base-line-height);
-  }
-
-  .action-button-container {
-    display: flex;
-    justify-content: flex-end;
-    gap: calc(var(--design-unit) * 2.5px);
-  }
-
-  .save-button {
-    max-width: 100px;
-    align-self: flex-end;
-  }
-
-  rapid-number-field {
-    display: flex;
-    width: fit-content;
-  }
-
-  rapid-number-field::part(root) {
-    width: 230px;
-  }
-
-  .footer-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-top: calc(var(--design-unit) * 4px);
-  }
-
-  .footer-container p {
-    color: var(--neutral-foreground-hint);
-    font-size: var(--type-ramp-base-font-size);
-    font-weight: 500;
-  }
-
-  rapid-modal::part(top) {
-    font-weight: 600;
-  }
-
-  rapid-modal {
-    --dialog-min-width: 420px;
-  }
-`;

package/src/new/main/edit-config/data-transforms-derived-fields/number-format-modal/number-format-modal.template.ts

@@ -1,93 +0,0 @@
-import { sync } from '@genesislcap/foundation-utils';
-import { html, ref, repeat, when } from '@genesislcap/web-core';
-import {
-  NumericCurrencies,
-  NumericFormats,
-  numericFormatsWithLabels,
-} from '../data-transforms.types';
-import type { NumberFormatModal } from './number-format-modal';
-
-export const numberFormatModalTemplate = html<NumberFormatModal>`
-  <rapid-modal
-    ${ref('numberModal')}
-    show-close-icon="false"
-    :onCloseCallback=${(x) => x.resetDisplayRow}
-  >
-    <p slot="top">Configure Number Format</p>
-    <div class="modal-format-options">
-      <label class="label">Format Type</label>
-      <rapid-select
-        data-test-id="number-format-select-format-type"
-        class="number-format-select"
-        :value="${sync((x) => x.gridFormatType)}"
-      >
-        ${repeat(
-          () => numericFormatsWithLabels,
-          html`
-            <rapid-option data-test-id="${(x) => x.label}" value="${(x) => x.value}">
-              ${(x) => x.label}
-            </rapid-option>
-          `,
-        )}
-      </rapid-select>
-      ${when(
-        (x) =>
-          x.gridFormatType !== NumericFormats.CurrencyRounded &&
-          x.gridFormatType !== NumericFormats.Unformatted,
-        html`
-          <label class="label">Decimal Places</label>
-          <rapid-number-field
-            data-test-id="attribute-form-number-decimals"
-            value="${sync((x) => x.gridFormatDecimalPlaces, 'number', 'input')}"
-            placeholder="Decimal places"
-            maxlength="1"
-            min="0"
-          ></rapid-number-field>
-        `,
-      )}
-      ${when(
-        (x) =>
-          x.gridFormatType === NumericFormats.Currency ||
-          x.gridFormatType === NumericFormats.CurrencyRounded,
-        html`
-          <label class="label">Currency</label>
-          <rapid-select
-            data-test-id="number-format-select-currency"
-            class="number-format-select"
-            :value="${sync((x) => x.gridFormatCurrency)}"
-          >
-            ${repeat(
-              () => Object.values(NumericCurrencies),
-              html`
-                <rapid-option data-test-id="${(x) => x}">${(x) => x}</rapid-option>
-              `,
-            )}
-          </rapid-select>
-        `,
-      )}
-      <div class="footer-container">
-        <p>
-          ${(x) =>
-            x.gridFormatType !== NumericFormats.Unformatted ? `Formatted: ${x.formatPreview}` : ''}
-        </p>
-        <div class="action-button-container">
-          <rapid-button
-            data-test-id="date-format-cancel"
-            class="save-button"
-            @click=${(x) => x.discardChanges()}
-          >
-            Discard
-          </rapid-button>
-          <rapid-button
-            data-test-id="number-format-save"
-            class="save-button"
-            appearance="primary"
-            @click=${(x) => x.saveChanges()}
-          >
-            Save
-          </rapid-button>
-        </div>
-      </div>
-    </div>
-  </rapid-modal>
-`;

package/src/new/main/edit-config/data-transforms-derived-fields/number-format-modal/number-format-modal.ts

@@ -1,152 +0,0 @@
-import { EventEmitter } from '@genesislcap/foundation-events';
-import { Modal } from '@genesislcap/rapid-design-system';
-import { customElement, DOM, GenesisElement, observable, volatile } from '@genesislcap/web-core';
-import { actions, selectors, subscribe } from '../../../../store';
-import { ReportingEventDetailMap, ReportingEvents } from '../../../../utils/event-map';
-import { datasourceNameFromDisplay, GridColumnNames } from '../../shared';
-import { mapToNumberFormat } from '../data-transforms.helpers';
-import {
-  NumericCurrencies,
-  NumericFormats,
-  isNumericFieldType,
-  DisplayConfigurationRow,
-  NumericDisplayConfigurationRow,
-} from '../data-transforms.types';
-import { numberFormatModalStyles as styles } from './number-format-modal.styles';
-import { numberFormatModalTemplate as template } from './number-format-modal.template';
-
-/**
- * Modal to edit numeric column display formats.
- * @public
- *
- * @fires refresh-column-format-grid
- */
-@customElement({
-  name: 'number-format-modal',
-  template,
-  styles,
-})
-export class NumberFormatModal extends EventEmitter<ReportingEventDetailMap>(GenesisElement) {
-  numberModal: Modal;
-  @observable isXlsx: boolean = false;
-  private unsubscribe: () => void;
-
-  @observable displayConfigurationRow: NumericDisplayConfigurationRow | null = null;
-  displayConfigurationRowChanged(oldValue, newValue) {
-    if (newValue) this.getGridFormat();
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.updateState();
-    this.unsubscribe = subscribe(this.updateState);
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.unsubscribe) {
-      this.unsubscribe();
-    }
-  }
-
-  updateState = () => {
-    this.isXlsx = selectors.baseConfig.getConfig().OUTPUT_FORMAT === 'XLSX';
-  };
-
-  @observable gridFormatType: NumericFormats | undefined = undefined;
-  gridFormatTypeChanged(_: string, newValue: NumericFormats) {
-    if (!newValue) return;
-    if (this.displayConfigurationRow.format === newValue || !newValue) return;
-    this.displayConfigurationRow.format = newValue;
-  }
-
-  @observable gridFormatDecimalPlaces: number | undefined = undefined;
-  gridFormatDecimalPlacesChanged(_: string, newValue: number) {
-    if (!newValue) return;
-    if (this.displayConfigurationRow.decimalPlaces === newValue) return;
-    this.displayConfigurationRow.decimalPlaces = newValue;
-  }
-
-  @observable gridFormatCurrency: NumericCurrencies | undefined = undefined;
-  gridFormatCurrencyChanged(_: string, newValue: NumericCurrencies) {
-    if (!newValue) return;
-    if (this.displayConfigurationRow.currency === newValue || !newValue) return;
-    this.displayConfigurationRow.currency = newValue;
-  }
-
-  showModal(displayConfigurationRow: DisplayConfigurationRow) {
-    if (isNumericFieldType(displayConfigurationRow.type)) {
-      this.displayConfigurationRow = displayConfigurationRow as NumericDisplayConfigurationRow;
-      this.numberModal.show();
-    } else {
-      throw new Error('Number format modal can only handle numeric configurations');
-    }
-  }
-
-  saveChanges() {
-    if (!this.gridFormatType || this.gridFormatType === NumericFormats.Unformatted) {
-      actions.datasourceConfig.deleteColumnFormat({
-        key: datasourceNameFromDisplay(this.displayConfigurationRow[GridColumnNames.Datasource]),
-        column: this.displayConfigurationRow[GridColumnNames.ColumnName],
-      });
-    } else {
-      const format = mapToNumberFormat(
-        this.gridFormatType || NumericFormats.Unformatted,
-        this.gridFormatDecimalPlaces,
-        this.gridFormatCurrency,
-      );
-
-      actions.datasourceConfig.setColumnFormat({
-        key: datasourceNameFromDisplay(this.displayConfigurationRow[GridColumnNames.Datasource]),
-        column: this.displayConfigurationRow[GridColumnNames.ColumnName],
-        format,
-      });
-    }
-    this.$emit(ReportingEvents.refreshColumnFormatGrid);
-    DOM.queueUpdate(() => {
-      this.resetNumberValues();
-      this.numberModal.close();
-    });
-  }
-
-  resetDisplayRow() {
-    this.displayConfigurationRow = undefined;
-  }
-
-  resetNumberValues() {
-    this.gridFormatType = undefined;
-    this.gridFormatCurrency = undefined;
-    this.gridFormatDecimalPlaces = undefined;
-  }
-
-  discardChanges() {
-    this.resetDisplayRow();
-    this.resetNumberValues();
-    this.numberModal.close();
-  }
-
-  getGridFormat() {
-    this.gridFormatType = this.displayConfigurationRow.format as NumericFormats;
-    this.gridFormatCurrency = this.displayConfigurationRow.currency;
-    this.gridFormatDecimalPlaces = this.displayConfigurationRow.decimalPlaces;
-  }
-
-  @volatile
-  get formatPreview() {
-    if (!this.gridFormatType || this.gridFormatType === NumericFormats.Unformatted) {
-      return '';
-    }
-
-    const formatString = mapToNumberFormat(
-      this.gridFormatType,
-      this.gridFormatDecimalPlaces,
-      this.gridFormatCurrency,
-    );
-
-    if (!formatString) {
-      return '';
-    }
-
-    return formatString;
-  }
-}

package/src/new/main/edit-config/datasource-config/datasource-config-container.styles.ts

@@ -1,22 +0,0 @@
-import { css } from '@genesislcap/web-core';
-
-export const styles = css`
-  div.container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  rapid-button.add {
-    display: flex;
-    margin: 5px;
-    background-color: var(--success-color);
-    min-width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-    width: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-    height: calc(var(--base-height-multiplier) * (var(--design-unit) - 1) * 1px);
-  }
-
-  rapid-button.add::part(control) {
-    padding: 0;
-  }
-`;