@genesislcap/pbc-reporting-ui 1.0.1

package/dist/esm/components/preview/preview.js

@@ -0,0 +1,111 @@
+import { __awaiter, __decorate } from "tslib";
+import { Datasource } from '@genesislcap/foundation-comms';
+import { formatDateTimestamp, formatDateTimeTimestamp } from '@genesislcap/foundation-utils';
+import { customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import { getColumns, getGridOptions } from './columns';
+import { PreviewStyles as styles } from './preview.styles';
+import { PreviewReportTemplate as template } from './preview.template';
+const name = 'reporting-preview';
+let Preview = class Preview extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.report = {};
+        /**
+         * Fetch data from server and load to grid
+         */
+        this.fetchAndLoadToGrid = () => __awaiter(this, void 0, void 0, function* () {
+            // Get the data from the selected dataserver
+            // NOTE: Backend field REPORT_DATASOURCE and REPORT_DATA_SOURCE are not consistent in Events and Dataserver
+            const resourceName = this.report['REPORT_DATASOURCE'] || this.report['REPORT_DATA_SOURCE'];
+            yield this.datasource.init(Object.assign({ resourceName }, this.datasourceSettings), true);
+            this.data = yield this.datasource.snapshotFiltered();
+            // Map data from dataserver to the grid
+            this.grid['gridOptions'] = Object.assign(Object.assign({}, getGridOptions()), { columnDefs: getColumns(this.report['REPORT_COLUMNS']), rowData: this.data });
+        });
+        /**
+         * Export to csv handle
+         */
+        this.exportToCsv = () => {
+            const params = {
+                fileName: 'export.csv',
+            };
+            params.processCellCallback = (cellParams) => this.formatDateType(cellParams);
+            this.grid.gridApi.exportDataAsCsv(Object.assign({}, params));
+        };
+        this.formatDateType = (cellParams) => {
+            let dateFormatter;
+            this.report['REPORT_COLUMNS'].forEach((column) => {
+                if (column.name == cellParams.column.colId) {
+                    column.type === 'DATE'
+                        ? (dateFormatter = formatDateTimestamp(cellParams.value))
+                        : column.type === 'DATETIME'
+                            ? (dateFormatter = formatDateTimeTimestamp(cellParams.value))
+                            : (dateFormatter = cellParams.value);
+                }
+            });
+            return dateFormatter;
+        };
+    }
+    /**
+     * When report variable changes handle
+     */
+    reportChanged(old, newValue) {
+        // Skip if empty report object
+        if (old &&
+            Object.keys(old).length != 0 &&
+            Object.keys(newValue).length > 0 &&
+            (newValue['REPORT_DATASOURCE'] || newValue['REPORT_DATA_SOURCE'])) {
+            this.fetchAndLoadToGrid();
+        }
+    }
+    /**
+     * On component load
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.fetchAndLoadToGrid();
+        this.grid.addEventListener('onGridReady', () => {
+            const model = {};
+            this.report['REPORT_COLUMNS']
+                .filter((f) => f.filter)
+                .forEach((f) => {
+                model[f.name] = {
+                    filterType: 'text',
+                    type: f.filter.conditional,
+                    filter: f.filter.value,
+                };
+            });
+            this.grid.gridApi.setFilterModel(model);
+            window.addEventListener('resize', () => {
+                setTimeout(() => {
+                    var _a, _b;
+                    (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.columnApi) === null || _b === void 0 ? void 0 : _b.autoSizeAllColumns();
+                });
+            });
+            this.grid.gridApi.addEventListener('firstDataRendered', () => {
+                var _a, _b;
+                (_b = (_a = this.grid) === null || _a === void 0 ? void 0 : _a.columnApi) === null || _b === void 0 ? void 0 : _b.autoSizeAllColumns();
+            });
+        });
+    }
+};
+__decorate([
+    Datasource
+], Preview.prototype, "datasource", void 0);
+__decorate([
+    attr
+], Preview.prototype, "report", void 0);
+__decorate([
+    observable
+], Preview.prototype, "data", void 0);
+__decorate([
+    observable
+], Preview.prototype, "datasourceSettings", void 0);
+Preview = __decorate([
+    customElement({
+        name,
+        template,
+        styles,
+    })
+], Preview);
+export { Preview };

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

@@ -0,0 +1,21 @@
+import { css } from '@microsoft/fast-element';
+import { helperStyles } from '../../styles';
+export const PreviewStyles = css `
+  ${helperStyles}
+  .preview {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .controls {
+    align-items: center;
+    display: flex;
+  }
+`;

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

@@ -0,0 +1,30 @@
+import { html, ref } from '@microsoft/fast-element';
+export const PreviewReportTemplate = html `
+  <div class="preview" data-test-id="preview">
+    <zero-card class="card">
+      <div class="header">
+        <div>
+          <h3 class="card-title">${(x) => x.report['REPORT_NAME']}</h3>
+          <p>${(x) => x.report['REPORT_DESCRIPTION']}</p>
+        </div>
+        <div class="controls">
+          <zero-button
+            appearance="primary-gradient"
+            @click=${(x) => x.exportToCsv()}
+            data-test-id="export-csv-button"
+          >
+            Export to csv
+            <zero-icon class="ml-5px" name="arrow-down"></zero-icon>
+          </zero-button>
+        </div>
+      </div>
+      <div class="w-full h-90pc">
+        <zero-grid-pro
+          ${ref('grid')}
+          floatingFilter="false"
+          rowSelection="multiple"
+        ></zero-grid-pro>
+      </div>
+    </zero-card>
+  </div>
+`;

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

@@ -0,0 +1,51 @@
+import { defaultRowConfig } from '../../constants/grid-config';
+/**
+ * Field selection grid config
+ */
+export const FIELD_SELECT_CONFIG = {
+    colDefs: [
+        {
+            checkboxSelection: true,
+            filter: false,
+            headerCheckboxSelection: true,
+            width: 60,
+        },
+        {
+            field: 'name',
+            headerName: 'Field Name',
+        },
+    ],
+    gridOptions: Object.assign(Object.assign({}, defaultRowConfig), { defaultColDef: {
+            filter: false,
+            floatingFilter: false,
+            sortable: false,
+            sort: 'asc',
+            suppressMenu: false,
+            resizable: false,
+        }, debug: true }),
+};
+/**
+ * Selected fields config
+ */
+export const SELECTED_FIELDS_CONFIG = {
+    colDefs: [
+        {
+            checkboxSelection: true,
+            filter: false,
+            headerCheckboxSelection: true,
+            sortable: false,
+            width: 60,
+        },
+        {
+            field: 'name',
+            headerName: 'Column name',
+        },
+    ],
+    gridOptions: Object.assign(Object.assign({}, defaultRowConfig), { defaultColDef: {
+            filter: false,
+            floatingFilter: false,
+            sortable: false,
+            suppressMenu: false,
+            resizable: false,
+        }, animateRows: true, debug: true, rowDragManaged: true }),
+};

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

@@ -0,0 +1,218 @@
+export const data = [
+    {
+        name: 'AMOUNT',
+        selected: false,
+        type: 'DOUBLE',
+        displayName: 'AMOUNT',
+        availableFilters: [
+            {
+                type: 'equals',
+                name: 'Equals',
+                filterType: 'number',
+            },
+            {
+                type: 'notEqual',
+                name: 'Not equal',
+                filterType: 'number',
+            },
+            {
+                type: 'lessThan',
+                name: 'Less than',
+                filterType: 'number',
+            },
+            {
+                type: 'lessThanEquals',
+                name: 'Less than or equals',
+                filterType: 'number',
+            },
+            {
+                type: 'greaterThan',
+                name: 'Greater than',
+                filterType: 'number',
+            },
+            {
+                type: 'greaterThanOrEquals',
+                name: 'Greater than or equals',
+                filterType: 'number',
+            },
+            {
+                type: 'inRange',
+                name: 'In range',
+                filterType: 'number',
+            },
+        ],
+        filterIsActive: false,
+        selectedFilter: {
+            type: 'greaterThan',
+            name: 'Greater than',
+            filterType: 'number',
+        },
+        selectedFilterValue: 10000,
+    },
+    {
+        name: 'BASE_CURRENCY_AMOUNT',
+        selected: false,
+        type: 'DOUBLE',
+        displayName: 'BASE_CURRENCY_AMOUNT',
+        availableFilters: [
+            {
+                type: 'equals',
+                name: 'Equals',
+                filterType: 'number',
+            },
+            {
+                type: 'notEqual',
+                name: 'Not equal',
+                filterType: 'number',
+            },
+            {
+                type: 'lessThan',
+                name: 'Less than',
+                filterType: 'number',
+            },
+            {
+                type: 'lessThanEquals',
+                name: 'Less than or equals',
+                filterType: 'number',
+            },
+            {
+                type: 'greaterThan',
+                name: 'Greater than',
+                filterType: 'number',
+            },
+            {
+                type: 'greaterThanOrEquals',
+                name: 'Greater than or equals',
+                filterType: 'number',
+            },
+            {
+                type: 'inRange',
+                name: 'In range',
+                filterType: 'number',
+            },
+        ],
+        filterIsActive: false,
+        selectedFilter: {
+            type: 'greaterThan',
+            name: 'Greater than',
+            filterType: 'number',
+        },
+    },
+    {
+        name: 'BOND_STOCK_CCY',
+        selected: false,
+        type: 'STRING',
+        displayName: 'BOND_STOCK_CCY',
+        availableFilters: [
+            {
+                type: 'equals',
+                name: 'Equals',
+                filterType: 'text',
+            },
+            {
+                type: 'notEqual',
+                name: 'Not equal',
+                filterType: 'text',
+            },
+            {
+                type: 'contains',
+                name: 'Contains',
+                filterType: 'text',
+            },
+            {
+                type: 'notContains',
+                name: 'Not contains',
+                filterType: 'text',
+            },
+            {
+                type: 'startsWith',
+                name: 'Starts with',
+                filterType: 'text',
+            },
+            {
+                type: 'endsWith',
+                name: 'Ends with',
+                filterType: 'text',
+            },
+        ],
+        filterIsActive: false,
+    },
+    {
+        name: 'BOND_STOCK_TRADE_ID',
+        selected: false,
+        type: 'STRING',
+        displayName: 'BOND_STOCK_TRADE_ID',
+        availableFilters: [
+            {
+                type: 'equals',
+                name: 'Equals',
+                filterType: 'text',
+            },
+            {
+                type: 'notEqual',
+                name: 'Not equal',
+                filterType: 'text',
+            },
+            {
+                type: 'contains',
+                name: 'Contains',
+                filterType: 'text',
+            },
+            {
+                type: 'notContains',
+                name: 'Not contains',
+                filterType: 'text',
+            },
+            {
+                type: 'startsWith',
+                name: 'Starts with',
+                filterType: 'text',
+            },
+            {
+                type: 'endsWith',
+                name: 'Ends with',
+                filterType: 'text',
+            },
+        ],
+        filterIsActive: false,
+    },
+    {
+        name: 'CURRENCY_PAIR',
+        selected: false,
+        type: 'STRING',
+        displayName: 'CURRENCY_PAIR',
+        availableFilters: [
+            {
+                type: 'equals',
+                name: 'Equals',
+                filterType: 'text',
+            },
+            {
+                type: 'notEqual',
+                name: 'Not equal',
+                filterType: 'text',
+            },
+            {
+                type: 'contains',
+                name: 'Contains',
+                filterType: 'text',
+            },
+            {
+                type: 'notContains',
+                name: 'Not contains',
+                filterType: 'text',
+            },
+            {
+                type: 'startsWith',
+                name: 'Starts with',
+                filterType: 'text',
+            },
+            {
+                type: 'endsWith',
+                name: 'Ends with',
+                filterType: 'text',
+            },
+        ],
+        filterIsActive: false,
+    },
+];

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

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

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

@@ -0,0 +1,197 @@
+import { __awaiter, __decorate } from "tslib";
+import { Connect } from '@genesislcap/foundation-comms';
+import { ZeroAgTextRenderer } from '@genesislcap/foundation-zero-grid-pro';
+import { customElement, FASTElement, observable, attr } from '@microsoft/fast-element';
+import { filterObjectArray, getSelectedFields } from '../../utils';
+import { FIELD_SELECT_CONFIG, SELECTED_FIELDS_CONFIG } from './columns';
+import { SelectFieldsStyles } from './select-fields.styles';
+import { SelectFieldsTemplate } from './select-fields.template';
+let SelectFields = class SelectFields extends FASTElement {
+    constructor() {
+        super(...arguments);
+        this.fieldsToRemove = [];
+        this.report = {};
+        this.selectedDatasource = '';
+        /**
+         * As the current fieldsGrid does not have display name ctx, we need to make sure the text renderer field value is not lost
+         * @param array Array
+         * @returns Array
+         */
+        this.makeSureFieldValueIsNotLost = (array) => {
+            return array.map((field) => {
+                var _a;
+                const matchingField = (_a = this.selectedFields) === 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);
+            });
+        };
+        /**
+         * When text renderer text field changes handle
+         * @param value string
+         * @param params Object
+         */
+        this.onTextFieldChange = (value, params) => __awaiter(this, void 0, void 0, function* () {
+            const newFields = this.selectedFields.map((field) => {
+                let newField = Object.assign({}, field);
+                if (field.name === params.node.data.name) {
+                    newField = Object.assign(Object.assign({}, newField), { displayName: value });
+                }
+                return newField;
+            });
+            this.setSelectedFields(newFields);
+        });
+        /**
+         * Refresh select field grid data
+         */
+        this.refreshSelectFieldGridData = () => {
+            const selectedFieldsOrder = [];
+            this.selectedFieldsGrid.gridApi.forEachNodeAfterFilterAndSort((rowNode) => {
+                selectedFieldsOrder.push(rowNode.data);
+            });
+            this.setSelectedFields([...this.makeSureFieldValueIsNotLost(selectedFieldsOrder)]);
+        };
+        /**
+         * Remove fields from selected fields grid and deselect them from the available fields grid
+         */
+        this.removeSelectedFields = () => {
+            // filter fields from selected list
+            const filteredFields = filterObjectArray('name', this.selectedFields, this.fieldsToRemove);
+            this.setSelectedFields(filteredFields);
+            // reset removal array
+            this.fieldsToRemove = [];
+            // deselect available fieldgrid
+            this.allFieldsGrid.gridApi.deselectAll();
+            // reselect
+            this.allFieldsGrid.gridApi.forEachNode((node) => {
+                filteredFields.find((field) => field.name === node.data.name) && node.setSelected(true);
+            });
+        };
+    }
+    /**
+     * Loading selected fields grid when we have selected rows
+     */
+    selectedFieldsChanged(oldValue) {
+        var _a, _b, _c, _d;
+        if (oldValue) {
+            (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.setRowData(this.selectedFields);
+            (_d = (_c = this.selectedFieldsGrid) === null || _c === void 0 ? void 0 : _c.gridApi) === null || _d === void 0 ? void 0 : _d.refreshCells();
+        }
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.loadAllFieldsGrid();
+        this.loadSelectedFieldsGrid();
+    }
+    /**
+     * Update selected fields on parent component
+     */
+    setSelectedFields(fields) {
+        this.$emit('setSelectedFields', { fields });
+    }
+    /**
+     * Loads the allFieldsGrid
+     */
+    loadAllFieldsGrid() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.allFieldsGrid.gridOptions = Object.assign(Object.assign({}, FIELD_SELECT_CONFIG.gridOptions), { columnDefs: FIELD_SELECT_CONFIG.colDefs, rowData: [...this.fieldData], onSelectionChanged: () => {
+                    if (this.selectedFields) {
+                        this.selectedFields = getSelectedFields(this.allFieldsGrid, this.selectedFields);
+                        this.setSelectedFields([...this.makeSureFieldValueIsNotLost(this.selectedFields)]);
+                    }
+                    else {
+                        this.setSelectedFields([
+                            ...this.makeSureFieldValueIsNotLost(this.allFieldsGrid.gridApi.getSelectedRows()),
+                        ]);
+                    }
+                }, onFirstDataRendered: () => {
+                    var _a, _b;
+                    (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                    this.selectDefaultFields();
+                }, onGridReady: () => {
+                    window.addEventListener('resize', () => {
+                        setTimeout(() => {
+                            var _a, _b;
+                            (_b = (_a = this.allFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                        });
+                    });
+                } });
+        });
+    }
+    /**
+     * Loads the allFieldsGrid
+     */
+    loadSelectedFieldsGrid() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.selectedFieldsGrid.gridOptions = Object.assign(Object.assign({}, SELECTED_FIELDS_CONFIG.gridOptions), { onRowDragEnd: this.refreshSelectFieldGridData, columnDefs: [
+                    ...SELECTED_FIELDS_CONFIG.colDefs,
+                    {
+                        field: 'displayName',
+                        headerName: 'Display name',
+                        cellRenderer: ZeroAgTextRenderer,
+                        cellRendererParams: {
+                            accessor: 'displayName',
+                            onChange: this.onTextFieldChange,
+                        },
+                    },
+                    {
+                        rowDrag: true,
+                        width: 60,
+                        sortable: false,
+                        filter: false,
+                    },
+                ], rowData: [], onGridReady: () => {
+                    window.addEventListener('resize', () => {
+                        setTimeout(() => {
+                            var _a, _b;
+                            (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                        });
+                    });
+                }, onFirstDataRendered: () => {
+                    var _a, _b;
+                    (_b = (_a = this.selectedFieldsGrid) === null || _a === void 0 ? void 0 : _a.gridApi) === null || _b === void 0 ? void 0 : _b.sizeColumnsToFit();
+                }, onSelectionChanged: () => {
+                    this.fieldsToRemove = this.selectedFieldsGrid.gridApi.getSelectedRows();
+                } });
+        });
+    }
+    /**
+     * Select default fields
+     */
+    selectDefaultFields() {
+        if (this.selectedFields.length) {
+            this.allFieldsGrid.gridApi.forEachNode((node) => {
+                this.selectedFields.find((field) => field.name === node.data.name) &&
+                    node.setSelected(true);
+            });
+            this.setSelectedFields([...this.makeSureFieldValueIsNotLost(this.selectedFields)]);
+        }
+        else {
+            this.selectedFields = [];
+        }
+    }
+};
+__decorate([
+    Connect
+], SelectFields.prototype, "connect", void 0);
+__decorate([
+    observable
+], SelectFields.prototype, "fieldsToRemove", void 0);
+__decorate([
+    observable
+], SelectFields.prototype, "fieldData", void 0);
+__decorate([
+    observable
+], SelectFields.prototype, "report", void 0);
+__decorate([
+    observable
+], SelectFields.prototype, "selectedFields", void 0);
+__decorate([
+    attr
+], SelectFields.prototype, "selectedDatasource", void 0);
+SelectFields = __decorate([
+    customElement({
+        name: 'reporting-select-fields',
+        template: SelectFieldsTemplate,
+        styles: SelectFieldsStyles,
+    })
+], SelectFields);
+export { SelectFields };

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

@@ -0,0 +1,21 @@
+import { neutralLayer3 } from '@microsoft/fast-components';
+import { css } from '@microsoft/fast-element';
+import { helperStyles, normalizeStyles } from '../../styles';
+export const SelectFieldsStyles = css `
+  ${helperStyles}
+  ${normalizeStyles}
+  .available-fields,
+  .selected-fields {
+    height: 100%;
+  }
+
+  .select-fields {
+    display: flex;
+    width: 100%;
+    height: 100%;
+  }
+
+  zero-card {
+    background-color: ${neutralLayer3};
+  }
+`;