@genesislcap/pbc-reporting-ui 1.0.1

package/dist/esm/components/wizard/wizard.js

@@ -0,0 +1,363 @@
+import { __awaiter, __decorate, __rest } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { customElement, FASTElement, observable, volatile } from '@microsoft/fast-element';
+import { ReportingEventListeners } from '../../routes/reporting-home/types';
+import { FiltersStep, NameStep, RunStep, SelectStep } from './steps';
+import { WizardStyles as styles } from './wizard.styles';
+import { WizardTemplate as template } from './wizard.template';
+import { WizardStep, } from './wizard.types';
+const name = 'reporting-wizard';
+let Wizard = class Wizard extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.debug = false;
+        this.activeTab = 0;
+        this.datasourceOptions = [];
+        this.datasourceFieldOptions = [];
+        this.isEdit = false;
+        this.fieldData = [];
+        this.content = [
+            {
+                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: '',
+            },
+        ];
+        // Set name and datasource step
+        this.reportName = '';
+        this.reportDescription = '';
+        this.selectedDatasource = null;
+        // Set fields step
+        this.selectedFields = [];
+        // Set filters step
+        this.selectedFilters = [];
+        // Run / preview report step
+        this.previewData = [];
+        this.previewGridColumns = [];
+        /**
+         * Get a simplified / normalized version of the fields
+         * e.g. ['REPORT_ID', 'REPORT_NAME']
+         * @returns Array of string
+         */
+        this.getNormalizedSelectedFields = () => { var _a; return ((_a = this.selectedFields) === null || _a === void 0 ? void 0 : _a.map((field) => field.displayName)) || []; };
+        /**
+         * Get normalized selected filters context
+         * @returns Array of strings
+         */
+        this.getNormalizedSelectedFilters = () => { var _a; return ((_a = this.selectedFilters) === null || _a === void 0 ? void 0 : _a.map(({ displayName }) => displayName)) || []; };
+        /**
+         * On datasource radio group change event handler
+         * @param selection Number
+         */
+        this.onDatasourceChange = (selection) => {
+            this.selectedDatasource = selection;
+        };
+        /**
+         * Get report context data
+         * @returns Object
+         */
+        this.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
+         */
+        this.setActiveTab = (tabIndex) => {
+            if (this.content[tabIndex]) {
+                this.activeTab = tabIndex;
+            }
+        };
+    }
+    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 !== null ? false : true;
+            // Set columns Step
+            case WizardStep.One:
+                return !this.selectedFields.length;
+            // Set filters Step
+            case WizardStep.Two:
+                return false;
+            // Run report Step
+            case WizardStep.Three:
+                return false;
+            default:
+                return false;
+        }
+    }
+    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}`);
+        }
+    }
+    /**
+     * When report variable changes handle
+     */
+    reportChanged(old, newValue) {
+        var _a;
+        return __awaiter(this, void 0, void 0, function* () {
+            this.fieldData = (_a = this.fieldData) === null || _a === void 0 ? void 0 : _a.map((_a) => {
+                var { filter } = _a, fields = __rest(_a, ["filter"]);
+                return 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
+     */
+    setFields(fields) {
+        this.selectedFields = fields;
+    }
+    /**
+     * When report variable changes handle
+     */
+    selectedDatasourceChanged(old, newValue) {
+        return __awaiter(this, void 0, void 0, function* () {
+            // Reset
+            this.selectedFields = [];
+            this.selectedFilters = [];
+            this.fieldData = [];
+            // Prepare field data structure from field metadata response
+            const fieldMetadata = yield 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 === null || fieldMetadata === void 0 ? void 0 : 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() {
+        var _a, _b;
+        this.selectedFields =
+            ((_a = this.selectedFields) === null || _a === void 0 ? void 0 : _a.map((f) => {
+                var _a;
+                const matchingField = (_a = this.fieldData) === null || _a === void 0 ? void 0 : _a.find((field) => (field === null || field === void 0 ? void 0 : field.name) === (f === null || f === void 0 ? void 0 : f.name));
+                return Object.assign(Object.assign({}, matchingField), { displayName: (matchingField === null || matchingField === void 0 ? void 0 : matchingField.displayName) || (f === null || f === void 0 ? void 0 : f.name), selected: matchingField ? true : false });
+            })) || [];
+        this.selectedFilters = ((_b = this.fieldData) === null || _b === void 0 ? void 0 : _b.filter((field) => field.filter && field.selected)) || [];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.getDatasources();
+        this.addEventListener('setSelectedFields', (e) => {
+            var _a, _b;
+            this.selectedFields = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.fields;
+            this.fieldData = (_b = this.fieldData) === null || _b === void 0 ? void 0 : _b.map((field) => {
+                const matchingField = this.selectedFields.find((f) => (f === null || f === void 0 ? void 0 : f.name) === (field === null || field === void 0 ? void 0 : field.name));
+                return Object.assign(Object.assign(Object.assign({}, field), matchingField), { displayName: (matchingField === null || matchingField === void 0 ? void 0 : matchingField.displayName) || (field === null || field === void 0 ? void 0 : field.name), selected: matchingField ? true : false });
+            });
+        });
+        this.addEventListener('setSelectedFilters', (e) => {
+            var _a;
+            this.fieldData = (_a = this.fieldData) === null || _a === void 0 ? void 0 : _a.map((field) => {
+                var _a, _b;
+                const matchingField = (_b = (_a = e === null || e === void 0 ? void 0 : e.detail) === null || _a === void 0 ? void 0 : _a.filters) === null || _b === void 0 ? void 0 : _b.find((f) => (f === null || f === void 0 ? void 0 : f.name) === (field === null || field === void 0 ? void 0 : field.name));
+                if (matchingField) {
+                    matchingField.filter = Object.assign({}, matchingField.filter);
+                }
+                else {
+                    field === null || field === void 0 ? true : delete field.filter;
+                }
+                return Object.assign(Object.assign({}, field), matchingField);
+            });
+        });
+    }
+    /**
+     * Fetch a list of datasources
+     */
+    getDatasources() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.connect
+                .request('ALL_REPORT_DATASOURCES', {
+                REQUEST: {},
+            })
+                .then((response) => {
+                var _a;
+                (_a = response === null || response === void 0 ? void 0 : response.REPLY) === null || _a === void 0 ? void 0 : _a.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 === null || err === void 0 ? void 0 : err.ERROR) ? err.ERROR : JSON.stringify(err)}
+        `,
+                });
+            });
+        });
+    }
+    /**
+     * Fetch data from the provided datasource
+     */
+    fetchFieldsFromDatasource() {
+        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 === null || response === void 0 ? void 0 : response.FIELD) || (response === null || response === void 0 ? void 0 : response.REPLY_FIELD);
+                return fields === null || fields === void 0 ? void 0 : fields.map(({ NAME, TYPE }) => ({ FIELD_NAME: NAME, TYPE }));
+            })
+                .catch((err) => {
+                this.$emit(ReportingEventListeners.notify, {
+                    type: 'warning',
+                    title: 'Error:',
+                    message: (err === null || err === void 0 ? void 0 : err.ERROR) ? err.ERROR : JSON.stringify(err),
+                });
+            }));
+    }
+};
+__decorate([
+    Connect
+], Wizard.prototype, "connect", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "debug", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "activeTab", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "datasourceOptions", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "datasourceFieldOptions", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "isEdit", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "fieldData", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "report", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "saveReport", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "content", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "datasourceSettings", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "reportName", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "reportDescription", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "selectedDatasource", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "selectedFields", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "selectedFilters", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "previewData", void 0);
+__decorate([
+    observable
+], Wizard.prototype, "previewGridColumns", void 0);
+__decorate([
+    volatile
+], Wizard.prototype, "isFormValid", null);
+__decorate([
+    volatile
+], Wizard.prototype, "viewTemplate", null);
+Wizard = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], Wizard);
+export { Wizard };

package/dist/esm/components/wizard/wizard.styles.js

@@ -0,0 +1,193 @@
+import { neutralFillStealthHover, neutralFillStealthRest, neutralForegroundHint, neutralForegroundRest, neutralLayer1, neutralLayer2, neutralLayer4, } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { helperStyles, normalizeStyles } from '../../styles';
+import { ColorHEX } from '../../styles';
+const { cyan, darkGreen, lightGreen, lightBlue1 } = ColorHEX;
+export const WizardStyles = css `
+  ${normalizeStyles}
+  ${helperStyles}
+  :host {
+    width: 100%;
+  }
+
+  .grid-container {
+    display: grid;
+    gap: 1rem;
+    grid-template-columns: minmax(250px, 10%) 1fr;
+    grid-auto-rows: 1fr;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    height: 95%;
+  }
+
+  .nav {
+    max-width: 248px;
+    background-color: ${neutralLayer2};
+  }
+
+  .nav-item h5 {
+    position: relative;
+    padding: 7px 15px;
+    margin-left: -15px;
+    margin-right: -15px;
+    margin-bottom: 0;
+    vertical-align: middle;
+    color: ${neutralForegroundHint};
+  }
+
+  .nav-item.active h5,
+  .nav-item h5:hover {
+    color: ${neutralForegroundRest};
+    background-color: ${neutralFillStealthRest};
+  }
+
+  .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),
+      ${lightBlue1} 0%,
+      rgb(101 77 249 / 97%) 100%
+    );
+    box-sizing: border-box;
+  }
+
+  .nav-item .step-number {
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    vertical-align: middle;
+    text-align: center;
+    font-family: ArialMT, Arial, sans-serif;
+    font-size: 11px;
+    line-height: 16px;
+    color: ${neutralFillStealthHover};
+    border-radius: 50%;
+    border: 1px solid ${cyan};
+  }
+
+  .nav-item.active .step-number,
+  .nav-item h5:hover .step-number {
+    color: ${neutralForegroundHint};
+    border-color: ${neutralForegroundHint};
+  }
+
+  .nav-item .step-number.completed {
+    border-color: ${lightGreen};
+    background-color: ${lightGreen};
+    color: ${darkGreen};
+  }
+
+  .body {
+    background-color: ${neutralLayer4};
+    padding-left: 0;
+    padding-top: 0;
+  }
+
+  .description {
+    color: ${neutralForegroundHint};
+    font-size: 10px;
+    font-weight: 700;
+    line-height: normal;
+    margin-left: 30px;
+  }
+
+  .divider {
+    margin: 25px 0 20px;
+    border: 1px solid ${cyan};
+  }
+
+  .nav-line.completed {
+    margin: 3px 0 3px 9px;
+    border-left: 2px solid ${lightGreen};
+  }
+
+  .context-container {
+    gap: 0.75rem;
+  }
+
+  .completed .context-container {
+    padding: 10px 0 20px;
+  }
+
+  .context {
+    color: ${neutralForegroundHint};
+    font-size: 10px;
+    font-weight: 700;
+    line-height: 12px;
+    max-height: 100px;
+    margin: 0 0 0 20px;
+    overflow: auto;
+  }
+
+  .context b {
+    color: ${neutralForegroundRest};
+  }
+
+  .label {
+    font-size: 13px;
+    color: ${neutralForegroundHint};
+    margin-bottom: 5px;
+  }
+
+  zero-radio-group::part(positioning-region) {
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+    width: 100%;
+  }
+
+  @media screen and (min-width: 1200px) {
+    zero-radio-group::part(positioning-region) {
+      display: grid;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+  }
+
+  .radio-button {
+    background-color: ${neutralLayer2};
+    border-radius: 2px;
+    cursor: pointer;
+    height: 42px;
+    margin: 0;
+    padding: 0 10px;
+  }
+
+  .radio-button::part(label) {
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .radio-button.active,
+  .radio-button:hover {
+    background-color: ${neutralLayer1};
+  }
+
+  zero-radio:hover::part(control) {
+    border: 1px solid #fff;
+  }
+
+  .arrow {
+    align-self: center;
+    justify-self: center;
+  }
+
+  zero-text-area::part(control) {
+    min-height: 170px;
+  }
+
+  .report-details,
+  .data-sources {
+    height: 100%;
+  }
+`;

package/dist/esm/components/wizard/wizard.template.js

@@ -0,0 +1,113 @@
+import { html, repeat, when } from '@microsoft/fast-element';
+import { tickIcon } from '../../assets/images';
+import { Debug } from './debug';
+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 `
+  <h5 class="step-title" data-test-id="step-title">
+    <span
+      class="step-number${(x, c) => c.parent.activeTab > c.index || c.parent.activeTab === WizardStep.Three
+    ? ' completed'
+    : ''}"
+      data-test-id="step-number"
+    >
+      ${(x, c) => c.parent.activeTab > c.index
+    ? html `
+              ${tickIcon()}
+            `
+    : c.index + 1}
+    </span>
+    &nbsp;&nbsp;&nbsp;${(x) => x.title}
+  </h5>
+`;
+const TabOneContextTemplate = html `
+  <div
+    class="nav-line${(x, c) => c.parent.activeTab > c.index ? ' completed' : ''}"
+    data-test-id="nav-line"
+  >
+    <div class="flex flex-column context-container">
+      ${when((x, c) => 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) => 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) => 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 `
+  <div class="nav-actions text-right" data-test-id="wizard-navigation">
+    ${when((x) => x.activeTab > 0, html `
+        <zero-button @click=${(x) => x.setActiveTab(x.activeTab - 1)} data-test-id="back-button">
+          <zero-icon class="mr-5px" name="arrow-left"></zero-icon>
+          Back
+        </zero-button>
+      `)}
+    <zero-button
+      appearance="primary-gradient"
+      ?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)}
+      <zero-icon class="ml-5px" name="arrow-right"></zero-icon>
+    </zero-button>
+  </div>
+`;
+const WizardContent = html `
+  <zero-card class="card body" design-unit="5" data-test-id="wizard-content">
+    ${(x) => x.viewTemplate}
+  </zero-card>
+`;
+export const WizardTemplate = html `
+  <div class="wizard grid-container">
+    <zero-card 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) => c.index === c.parent.activeTab ? ' active' : ''}"
+            data-test-id="wizard-navigation-item"
+          >
+            ${TitleTemplate}
+            ${when((x, c) => 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)}
+    </zero-card>
+    ${WizardContent}
+  </div>
+`;

package/dist/esm/components/wizard/wizard.types.js

@@ -0,0 +1,7 @@
+export var WizardStep;
+(function (WizardStep) {
+    WizardStep[WizardStep["Zero"] = 0] = "Zero";
+    WizardStep[WizardStep["One"] = 1] = "One";
+    WizardStep[WizardStep["Two"] = 2] = "Two";
+    WizardStep[WizardStep["Three"] = 3] = "Three";
+})(WizardStep || (WizardStep = {}));

package/dist/esm/constants/grid-config.js

@@ -0,0 +1,19 @@
+// TODO: styling shoould be applied with classes
+export const defaultRowConfig = {
+    rowHeight: 52,
+    rowStyle: {
+        // TODO: use var for colors; allow styling through design system
+        backgroundColor: 'RGB(34, 39, 44)',
+        border: 'none',
+        borderRadius: '6px',
+        maxHeight: '42px',
+    },
+    suppressRowClickSelection: true,
+};
+// TODO: styling shoould be applied with classes
+export const defaultCellConfig = {
+    cellStyle: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+};

package/dist/esm/index.federated.js

@@ -0,0 +1 @@
+import('./index');

package/dist/esm/index.js

@@ -0,0 +1,2 @@
+export * from './main/index';
+export * from './routes/config';