@genesislcap/pbc-reporting-ui 1.0.1

package/dist/esm/components/select-fields/select-fields.template.js

@@ -0,0 +1,49 @@
+import { html, ref } from '@microsoft/fast-element';
+const availableFieldsTemplate = html `
+  <section class="available-fields" slot="left-section">
+    <h3 class="mt-1 section-title dark-grey">Select fields</h3>
+    <zero-card class="card">
+      <div class="flex space-between">
+        <h5 class="card-title">All fields</h5>
+      </div>
+
+      <div class="w-full h-90pc">
+        <zero-grid-pro
+          ${ref('allFieldsGrid')}
+          rowSelection="multiple"
+          data-test-id="select-fields-available"
+        ></zero-grid-pro>
+      </div>
+    </zero-card>
+  </section>
+`;
+const selectedFieldsTemplate = html `
+  <section class="selected-fields" slot="right-section">
+    <div class="spacer-3"></div>
+    <zero-card class="card">
+      <div class="flex space-between">
+        <h5 class="card-title">Selected fields</h5>
+        <zero-button
+          @click=${(x) => x.removeSelectedFields()}
+          ?disabled=${(x) => !x.fieldsToRemove.length}
+          appearance="primary-gradient"
+        >
+          Remove fields
+        </zero-button>
+      </div>
+      <div class="w-full h-90pc">
+        <zero-grid-pro
+          ${ref('selectedFieldsGrid')}
+          rowSelection="multiple"
+          data-test-id="select-fields-selected"
+        ></zero-grid-pro>
+      </div>
+    </zero-card>
+  </section>
+`;
+// TODO: review classes from merge conflict
+export const SelectFieldsTemplate = html `
+  <layout-two-pane-horizontal splitRatio="right-main">
+    ${availableFieldsTemplate} ${selectedFieldsTemplate}
+  </layout-two-pane-horizontal>
+`;

package/dist/esm/components/select-filters/columns.js

@@ -0,0 +1,43 @@
+import { defaultCellConfig, defaultRowConfig } from '../../constants/grid-config';
+/**
+ * Field selection grid config
+ */
+export const AVAILABLE_FIELDS_CONFIG = {
+    colDefs: [
+        {
+            checkboxSelection: true,
+            filter: false,
+            headerCheckboxSelection: true,
+            sortable: false,
+            width: 60,
+        },
+        {
+            field: 'displayName',
+            headerName: 'Field Name',
+        },
+    ],
+    gridOptions: Object.assign(Object.assign({}, defaultRowConfig), { defaultColDef: {
+            filter: false,
+            floatingFilter: false,
+            sortable: false,
+            suppressMenu: false,
+            resizable: false,
+        }, debug: true }),
+};
+/**
+ * Columns main dummy data
+ */
+export const SELECTED_FILTERS_CONFIG = {
+    colDefs: [
+        {
+            checkboxSelection: true,
+            headerCheckboxSelection: true,
+            width: 60,
+        },
+        {
+            field: 'displayName',
+            headerName: 'Field Name',
+        },
+    ],
+    gridOptions: Object.assign(Object.assign({}, defaultRowConfig), { defaultColDef: Object.assign(Object.assign({}, defaultCellConfig), { filter: false, resizable: false, sortable: false, suppressMenu: true }), suppressContextMenu: true, suppressRowTransform: true, debug: true }),
+};

package/dist/esm/components/select-filters/index.js

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

package/dist/esm/components/select-filters/select-filters.js

@@ -0,0 +1,192 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { ZeroAgSelectRenderer, ZeroAgTextRenderer } from '@genesislcap/foundation-zero-grid-pro';
+import { customElement, FASTElement, observable } from '@microsoft/fast-element';
+import { filterObjectArray, getFiltersByFieldType } from '../../utils';
+import { AVAILABLE_FIELDS_CONFIG, SELECTED_FILTERS_CONFIG } from './columns';
+import { SelectFiltersStyles } from './select-filters.styles';
+import { SelectFiltersTemplate } from './select-filters.template';
+let SelectFilters = class SelectFilters extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.filtersToRemove = [];
+        this.selectedFields = [];
+        this.selectedFilters = [];
+        this.filterGridReady = false;
+        // TODO: extract to util
+        this.makeSureFieldValueIsNotLost = (array) => {
+            return array.map((field) => {
+                var _a;
+                const matchingField = (_a = this.selectedFilters) === null || _a === void 0 ? void 0 : _a.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({}, field), matchingField);
+            });
+        };
+        this.onFilterSelect = (value, params) => {
+            const newFields = this.selectedFilters.map((field) => {
+                if (field.name === params.node.data.name) {
+                    field.filter.conditional = value;
+                }
+                return field;
+            });
+            this.setSelectedFilters(newFields);
+        };
+        this.onFilterValueChange = (value, params) => {
+            const newFields = this.selectedFilters.map((field) => {
+                if (field.name === params.node.data.name) {
+                    field.filter.value = value;
+                }
+                return field;
+            });
+            this.setSelectedFilters(newFields);
+        };
+        /**
+         * Remove fields from selected filters grid and deselect them from the available fields grid
+         */
+        this.removeSelectedFilters = () => {
+            // filter fields from selected list
+            const filters = filterObjectArray('name', this.selectedFilters, this.filtersToRemove);
+            this.setSelectedFilters(filters);
+            // reset removal array
+            this.filtersToRemove = [];
+            // deselect available fieldgrid
+            this.availableFieldsGrid.gridApi.deselectAll();
+            // reselect
+            this.availableFieldsGrid.gridApi.forEachNode((node) => {
+                filters.find((field) => field.name === node.data.name) && node.setSelected(true);
+            });
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadAvailableFieldsGrid();
+        this.loadSelectedFiltersGrid();
+    }
+    selectedFiltersChanged() {
+        if (this.filterGridReady) {
+            this.selectedFiltersGrid.gridApi.setRowData(this.selectedFilters);
+            this.selectedFiltersGrid.gridApi.refreshCells();
+        }
+    }
+    /**
+     * Update selected filters on parent component
+     */
+    setSelectedFilters(filters) {
+        this.$emit('setSelectedFilters', { filters });
+    }
+    /**
+     * Get a simplified / normalized version of the filters
+     * e.g. ['REPORT_ID', 'REPORT_NAME']
+     * @returns Array of string
+     */
+    getNormalizedFilters() {
+        var _a;
+        return (_a = this.selectedFilters) === null || _a === void 0 ? void 0 : _a.map(({ FIELD_NAME }) => FIELD_NAME);
+    }
+    /**
+     * Loads availableFieldsGrid with data from the field selection step
+     */
+    loadAvailableFieldsGrid() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.availableFieldsGrid.gridOptions = Object.assign(Object.assign({}, AVAILABLE_FIELDS_CONFIG.gridOptions), { columnDefs: AVAILABLE_FIELDS_CONFIG.colDefs, rowData: [...this.selectedFields], onGridReady: () => {
+                    window.addEventListener('resize', () => {
+                        setTimeout(() => {
+                            var _a, _b;
+                            (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                        });
+                    });
+                }, onFirstDataRendered: () => {
+                    var _a, _b;
+                    (_b = (_a = this.availableFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                    this.selectDefaultFilters();
+                }, onSelectionChanged: () => {
+                    this.setSelectedFilters([
+                        ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
+                    ]);
+                } });
+        });
+    }
+    /**
+     * Loads the selectedFiltersGrid
+     */
+    loadSelectedFiltersGrid() {
+        this.selectedFiltersGrid.gridOptions = Object.assign(Object.assign({}, SELECTED_FILTERS_CONFIG.gridOptions), { columnDefs: [
+                ...SELECTED_FILTERS_CONFIG.colDefs,
+                {
+                    field: 'TYPE',
+                    headerName: 'Filter',
+                    maxWidth: 170,
+                    cellStyle: {
+                        overflow: 'visible',
+                        paddingLeft: 0,
+                        paddingRight: 0,
+                    },
+                    cellRenderer: ZeroAgSelectRenderer,
+                    cellRendererParams: {
+                        accessor: 'filter.conditional',
+                        defaultValue: 'Select filter',
+                        onSelect: this.onFilterSelect,
+                        options: (data) => getFiltersByFieldType(data.type),
+                    },
+                },
+                {
+                    cellRenderer: ZeroAgTextRenderer,
+                    cellRendererParams: {
+                        onChange: this.onFilterValueChange,
+                        accessor: 'filter.value',
+                    },
+                    field: 'filter.value',
+                    headerName: 'Value',
+                },
+            ], rowData: [...this.filtersToRemove, ...this.selectedFilters], onGridReady: () => {
+                this.filterGridReady = true;
+                window.addEventListener('resize', () => {
+                    setTimeout(() => {
+                        var _a, _b;
+                        (_b = (_a = this.selectedFiltersGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                    });
+                });
+            }, onFirstDataRendered: () => {
+                var _a, _b;
+                (_b = (_a = this.selectedFiltersGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+            }, onSelectionChanged: () => {
+                this.filtersToRemove = this.selectedFiltersGrid.gridApi.getSelectedRows();
+            } });
+    }
+    /**
+     * Select default filters
+     */
+    selectDefaultFilters() {
+        if (this.selectedFilters.length) {
+            this.availableFieldsGrid.gridApi.forEachNode((node) => {
+                this.selectedFilters.find((field) => field.name === node.data.name) &&
+                    node.setSelected(true);
+            });
+            this.setSelectedFilters([
+                ...this.makeSureFieldValueIsNotLost(this.availableFieldsGrid.gridApi.getSelectedRows()),
+            ]);
+        }
+    }
+};
+__decorate([
+    Connect
+], SelectFilters.prototype, "connect", void 0);
+__decorate([
+    observable
+], SelectFilters.prototype, "filtersToRemove", void 0);
+__decorate([
+    observable
+], SelectFilters.prototype, "selectedFields", void 0);
+__decorate([
+    observable
+], SelectFilters.prototype, "selectedFilters", void 0);
+__decorate([
+    observable
+], SelectFilters.prototype, "filterGridReady", void 0);
+SelectFilters = __decorate([
+    customElement({
+        name: 'reporting-select-filters',
+        template: SelectFiltersTemplate,
+        styles: SelectFiltersStyles,
+    })
+], SelectFilters);
+export { SelectFilters };

package/dist/esm/components/select-filters/select-filters.styles.js

@@ -0,0 +1,20 @@
+import { css } from '@microsoft/fast-element';
+import { helperStyles, normalizeStyles } from '../../styles';
+export const SelectFiltersStyles = css `
+  ${helperStyles}
+  ${normalizeStyles}
+  :host {
+    --select-renderer-max-width: 150px;
+  }
+
+  .select-filters {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .all-fields,
+  .selected-filters {
+    height: 100%;
+  }
+`;

package/dist/esm/components/select-filters/select-filters.template.js

@@ -0,0 +1,51 @@
+import { html, ref } from '@microsoft/fast-element';
+const allFieldsTemplate = html `
+  <section class="all-fields" slot="left-section" data-test-id="all-fields-section">
+    <h3 class="mt-1 section-title dark-grey">Apply filters</h3>
+    <zero-card class="card">
+      <div class="flex space-between">
+        <h5 class="card-title">All fields</h5>
+      </div>
+
+      <div class="w-full h-90pc">
+        <zero-grid-pro
+          ${ref('availableFieldsGrid')}
+          rowSelection="multiple"
+          suppressRowClickSelection
+          data-test-id="available-fields-grid"
+        ></zero-grid-pro>
+      </div>
+    </zero-card>
+  </section>
+`;
+const selectedFiltersTemplate = html `
+  <section class="selected-filters" slot="right-section" data-test-id="selected-filters-section">
+    <div class="spacer-3"></div>
+    <zero-card class="card">
+      <div class="flex space-between">
+        <h5 class="card-title">Fields to Apply Filters</h5>
+        <zero-button
+          @click=${(x) => x.removeSelectedFilters()}
+          ?disabled=${(x) => !x.filtersToRemove.length}
+          appearance="primary-gradient"
+          data-test-id="remove-filters-button"
+        >
+          Remove filters
+        </zero-button>
+      </div>
+      <div class="w-full h-90pc">
+        <zero-grid-pro
+          ${ref('selectedFiltersGrid')}
+          rowSelection="multiple"
+          suppressRowClickSelection
+          data-test-id="selected-filters-grid"
+        ></zero-grid-pro>
+      </div>
+    </zero-card>
+  </section>
+`;
+export const SelectFiltersTemplate = html `
+  <layout-two-pane-horizontal splitRatio="right-main">
+    ${allFieldsTemplate} ${selectedFiltersTemplate}
+  </layout-two-pane-horizontal>
+`;

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

@@ -0,0 +1,34 @@
+import { html } from '@microsoft/fast-element';
+export const Debug = html `
+  <div class="flex flex-column gap-1 overflow-auto">
+    <div>
+      <h5>Report Name</h5>
+      <div>${(x) => x.reportName}</div>
+    </div>
+
+    <div>
+      <h5>Report Description</h5>
+      <div>${(x) => x.reportDescription}</div>
+    </div>
+
+    <div>
+      <h5>Selected Datasource</h5>
+      <div>${(x) => x.selectedDatasource}</div>
+    </div>
+
+    <div>
+      <h5>Selected Fields</h5>
+      <div><pre>${(x) => JSON.stringify(x.selectedFields, undefined, 2)}</pre></div>
+    </div>
+
+    <div>
+      <h5>Selected Filters</h5>
+      <div><pre>${(x) => JSON.stringify(x.selectedFilters, undefined, 2)}</pre></div>
+    </div>
+
+    <div>
+      <h5>Field Data</h5>
+      <div><pre>${(x) => JSON.stringify(x.fieldData, undefined, 2)}</pre></div>
+    </div>
+  </div>
+`;

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

@@ -0,0 +1,2 @@
+export * from './wizard';
+export * from './wizard.styles';

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

@@ -0,0 +1,9 @@
+import { html } from '@microsoft/fast-element';
+export const FiltersStep = html `
+  <div class="step h-90pc">
+    <reporting-select-filters
+      :selectedFields=${(x) => x.selectedFields}
+      :selectedFilters=${(x) => x.selectedFilters}
+    ></reporting-select-filters>
+  </div>
+`;

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

@@ -0,0 +1,4 @@
+export * from './name';
+export * from './select';
+export * from './filters';
+export * from './run';

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

@@ -0,0 +1,58 @@
+import { sync } from '@genesislcap/foundation-utils';
+import { html, repeat } from '@microsoft/fast-element';
+const reportDescriptionTemplate = html `
+  <section class="report-details" slot="left-section" data-test-id="report-details-section">
+    <h3 class="mt-1 section-title dark-grey" data-test-id="report-name-title">Name Report</h3>
+    <zero-card class="card">
+      <h5 class="card-title">Report Set up</h5>
+      <zero-text-field
+        :value=${sync((x) => x.reportName)}
+        class="w-full"
+        placeholder="Enter report name..."
+        data-test-id="report-name-input"
+      >
+        Report Name
+      </zero-text-field>
+      <zero-text-area
+        :value=${sync((x) => x.reportDescription)}
+        class="w-full mt-2"
+        placeholder="Enter report description..."
+        data-test-id="report-description-input"
+      >
+        Report Description
+      </zero-text-area>
+    </zero-card>
+  </section>
+`;
+const dataSourceTemplate = html `
+  <section class="data-sources" slot="right-section" data-test-id="data-sources-section">
+    <h3 class="mt-1 section-title dark-grey" data-test-id="select-datasource-title">
+      Select Datasource
+    </h3>
+    <zero-card class="card">
+      <h5 class="card-title">Data Sources</h5>
+      <div class="card-description">You have selected ${(x) => x.selectedDatasource}</div>
+      <div class="divider"></div>
+      <div class="radio-buttons" data-test-id="datasource-options">
+        <zero-radio-group :value=${(x) => x.selectedDatasource}>
+          ${repeat((x) => x.datasourceOptions, html `
+              <zero-radio
+                @click=${(x, c) => c.parent.onDatasourceChange(x.name)}
+                :checked=${(x, c) => c.parent.selectedDatasource === x.name}
+                :value=${(x) => x.name}
+                class="radio-button${(x, c) => c.parent.selectedDatasource === x.name ? ' active' : ''}"
+                data-test-id=${(x) => `datasource-option-${x.name}`}
+              >
+                ${(x) => x.name}
+              </zero-radio>
+            `)}
+        </zero-radio-group>
+      </div>
+    </zero-card>
+  </section>
+`;
+export const NameStep = html `
+  <layout-two-pane-horizontal hideDivider splitRatio="right-main">
+    ${reportDescriptionTemplate} ${dataSourceTemplate}
+  </layout-two-pane-horizontal>
+`;

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

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+export const RunStep = html `
+  <div class="step h-90pc mt-15px" data-test-id="run-report-step">
+    <h3 class="mt-1 section-title dark-grey" data-test-id="run-report-step-title">Run Report</h3>
+    <reporting-preview
+      :report=${(x) => x.getData()}
+      :datasourceSettings=${(x) => x.datasourceSettings}
+      data-test-id="report-preview-component"
+    />
+  </div>
+`;

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

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+export const SelectStep = html `
+  <div class="step h-90pc" data-test-id="select-fields-step">
+    <reporting-select-fields
+      :selectedFields=${(x) => x.selectedFields}
+      :fieldData=${(x) => x.fieldData}
+      selectedDatasource=${(x) => x.selectedDatasource}
+      data-test-id="select-fields-component"
+    ></reporting-select-fields>
+  </div>
+`;