@adaptabletools/adaptable 18.0.0-canary.2 → 18.0.0-canary.20

package/src/View/Layout/TransposedPopup.js

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../components/FormLayout';
+import Panel from '../../components/Panel';
+import { useAdaptable } from '../AdaptableContext';
+import { ColumnSelector } from '../Components/Selectors/ColumnSelector';
+import { AdaptableAgGrid } from '../../agGrid/AdaptableAgGrid';
+export const TransposedPopup = (props) => {
+    const adaptable = useAdaptable();
+    const { transposedColumnId, hideTransposedColumn, visibleColumns, visibleRows } = props.popupProps;
+    const rowNodes = React.useMemo(() => {
+        return props.popupProps.visibleRows
+            ? adaptable.api.gridApi.getVisibleRowNodes()
+            : adaptable.api.gridApi.getAllRowNodes();
+    }, [
+    // can be later triggered by tickng data
+    ]);
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const [syntheticTransposedByColumnId, setSyntheticTransposedByColumnId] = React.useState(transposedColumnId);
+    const columns = React.useMemo(() => {
+        // customisable
+        return visibleColumns
+            ? adaptable.api.columnApi.getVisibleColumns()
+            : adaptable.api.columnApi.getColumns();
+    }, []);
+    const adaptableContainerId = 'transposed-adaptable-container';
+    const agGridContainerId = 'transposed-adaptable-ag-grid-container';
+    /**
+     * This is used as first field
+     */
+    const transposedFirstColumnField = '_transposed_column_value';
+    const transposedFirstColumnHeader = '_transposed_column_header';
+    const transposedRowsAndColumns = React.useMemo(() => {
+        /**
+         * transposed column values become primaryKey of the new tarnsposed rows
+         * we build row by row, might be easer
+         */
+        const transposedColumns = [];
+        const transposedRows = [];
+        for (const row of rowNodes) {
+            // we force the col-ids to be strings, easer to work with
+            //row[transposeByColumnId] + '';
+            const colId = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey) + '';
+            //row[synteticTransposedByColumnId] + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, syntheticTransposedByColumnId) +
+                '';
+            transposedColumns.push({
+                colId,
+                header,
+            });
+        }
+        for (const column of columns) {
+            /**
+             * We can hide the transposed column, if we want
+             */
+            if (hideTransposedColumn && column.columnId === syntheticTransposedByColumnId) {
+                continue;
+            }
+            const transposedRow = {
+                // [transposed-by-column-id]: [other column id],
+                // the value can be set to friendlyname
+                [transposedFirstColumnField]: column.columnId,
+                [transposedFirstColumnHeader]: column.friendlyName,
+            };
+            for (let row of rowNodes) {
+                // [transposed-by-column-value[n]]: [other column value[n]]
+                const key = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, primaryKey);
+                // row[column.field]
+                let value = adaptable.api.gridApi.getDisplayValueFromRowNode(row, column.columnId);
+                if (value instanceof Date) {
+                    value = value.toLocaleString();
+                }
+                transposedRow[key] = value;
+            }
+            transposedRows.push(transposedRow);
+        }
+        return {
+            transposedColumns,
+            transposedRows,
+        };
+    }, [rowNodes, primaryKey, syntheticTransposedByColumnId]);
+    React.useEffect(() => {
+        // Mounting in an effect, so the nodes are rendered/available
+        const hostAdaptableOptions = adaptable.adaptableOptions;
+        const adaptableOptions = {
+            primaryKey: transposedFirstColumnField,
+            licenseKey: hostAdaptableOptions.licenseKey,
+            userName: `${hostAdaptableOptions.userName}`,
+            adaptableId: `${hostAdaptableOptions.adaptableId}::TransposedView`,
+            containerOptions: {
+                adaptableContainer: adaptableContainerId,
+                agGridContainer: agGridContainerId,
+            },
+            entitlementOptions: {
+                defaultAccessLevel: 'Hidden',
+            },
+            layoutOptions: {
+                createDefaultLayout: false,
+                autoSizeColumnsInLayout: true,
+            },
+            predefinedConfig: {
+                Layout: {
+                    Revision: Date.now(),
+                    CurrentLayout: 'TransposedView',
+                    Layouts: [
+                        {
+                            Name: 'TransposedView',
+                            Columns: [
+                                transposedFirstColumnHeader,
+                                ...transposedRowsAndColumns.transposedColumns.map((c) => c.colId),
+                            ],
+                            PinnedColumnsMap: {
+                                [transposedFirstColumnHeader]: 'left',
+                            },
+                        },
+                    ],
+                },
+                Theme: {
+                    CurrentTheme: adaptable.api.themeApi.getCurrentTheme(),
+                },
+            },
+        };
+        const firstColumn = {
+            field: transposedFirstColumnHeader,
+            headerName: adaptable.api.columnApi.getFriendlyNameForColumnId(syntheticTransposedByColumnId),
+        };
+        const agGridOptions = {
+            suppressLoadingOverlay: true,
+            defaultColDef: {
+                floatingFilter: false,
+                filter: false,
+                sortable: true,
+                resizable: true,
+                enableRowGroup: false,
+                editable: false,
+                enablePivot: false,
+                enableValue: false,
+                lockPinned: true,
+                menuTabs: [],
+                width: 120,
+            },
+            columnDefs: [
+                {
+                    field: transposedFirstColumnField,
+                    hide: true,
+                },
+                firstColumn,
+                ...transposedRowsAndColumns.transposedColumns.map((col) => {
+                    return {
+                        field: col.colId,
+                        type: null,
+                        headerName: col.header,
+                    };
+                }),
+            ],
+            rowData: transposedRowsAndColumns.transposedRows,
+            sideBar: false,
+        };
+        const modules = adaptable.getAgGridRegisteredModules();
+        let transposedAdaptableApi;
+        (async () => {
+            transposedAdaptableApi = await AdaptableAgGrid._initInternal({
+                variant: 'vanilla',
+                adaptableOptions,
+                gridOptions: agGridOptions,
+                modules,
+            });
+            adaptable.api.eventApi.on('ThemeChanged', (event) => {
+                transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            });
+        })();
+        return () => {
+            if (transposedAdaptableApi) {
+                transposedAdaptableApi.destroy();
+            }
+        };
+    }, [syntheticTransposedByColumnId]);
+    /**
+     * Need to get all data, manualy pivot the grid using the primary key.
+     *
+     * 1. get the data, and pivot using the primary key
+     * 2. create the col definitios, a col definition for each row
+     * 3. create the grid
+     */
+    return (React.createElement(Flex, { flexDirection: "column", width: "100%", height: "100%" },
+        React.createElement(Panel, null,
+            React.createElement(FormLayout, null,
+                React.createElement(FormRow, { label: "Elevated Column" },
+                    React.createElement(ColumnSelector, { value: syntheticTransposedByColumnId, onChange: (colId) => {
+                            setSyntheticTransposedByColumnId(colId);
+                        } })))),
+        React.createElement(Flex, { height: "100%" },
+            React.createElement(Box, { id: "transposed-adaptable-container" }),
+            React.createElement(Box, { height: "100%", width: "100%", id: "transposed-adaptable-ag-grid-container" }))));
+};

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -14,6 +14,8 @@ import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionV
 import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
 import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
+import { areSummaryRowsValid, RowSummarySection } from './sections/RowSummarySection';
+import { WEIGHTED_AVERAGE_AGGREATED_FUNCTION } from '../../../PredefinedConfig/Common/RowSummary';
 export const LayoutWizard = (props) => {
     var _a, _b;
     const dispatch = useDispatch();
@@ -33,8 +35,9 @@ export const LayoutWizard = (props) => {
             preparedLayout = ObjectFactory.CreateEmptyLayout({ Name: '' });
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
-            preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.api.gridApi.getAgGridInstance().suppressAggFuncInHeader;
+            preparedLayout.SuppressAggFuncInHeader = !!adaptable.agGridAdapter
+                .getAgGridApi()
+                .getGridOption('suppressAggFuncInHeader');
         }
         return preparedLayout;
     });
@@ -101,6 +104,7 @@ export const LayoutWizard = (props) => {
             {
                 title: 'Row Groups',
                 isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
+                isValid: areSummaryRowsValid,
                 details: 'Configure Row Grouping',
                 renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
@@ -113,7 +117,36 @@ export const LayoutWizard = (props) => {
                 renderSummary: () => React.createElement(AggregationsSectionSummary, null),
                 isValid: (data) => isAggregationsSectionValid(data),
                 render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
-                    React.createElement(AggregationsSection, { onChange: setLayout }))),
+                    React.createElement(AggregationsSection, { onChange: (layout) => {
+                            let newLayout = cloneObject(layout);
+                            // if we do not have an weighted avg col, we need to clear the row summary if one exists
+                            if (newLayout.RowSummaries) {
+                                newLayout.RowSummaries = newLayout.RowSummaries.map((rowSummary) => {
+                                    return Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
+                                            if (
+                                            // see if it is weighted avg
+                                            aggFunc === WEIGHTED_AVERAGE_AGGREATED_FUNCTION &&
+                                                // see if we have a weight in the agg columns
+                                                newLayout.AggregationColumns[columnId] &&
+                                                (typeof newLayout.AggregationColumns[columnId] !== 'object' ||
+                                                    newLayout.AggregationColumns[columnId].weightColumnId)) {
+                                                // need to remove the row summary
+                                                return acc;
+                                            }
+                                            acc[columnId] = aggFunc;
+                                            return acc;
+                                        }, {}) });
+                                });
+                            }
+                            setLayout(newLayout);
+                        } }))),
+            },
+            {
+                title: 'Row Summaries',
+                details: 'Configure Row Summaries',
+                renderSummary: () => React.createElement(RowGroupingSectionSummary, null),
+                render: () => (React.createElement(Box, { p: 2, style: { height: '100%' } },
+                    React.createElement(RowSummarySection, { onChange: setLayout }))),
             },
             {
                 title: 'Sort',

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -170,7 +170,7 @@ const ColumnRow = (props) => {
                     React.createElement(FormRow, { label: "ColumnId" },
                         React.createElement(Tag, null, props.column.columnId)),
                     React.createElement(FormRow, { label: "Header" },
-                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placehoder: "Custom name (optional)", onChange: () => {
+                        React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnRow__Input", placeholder: "Custom name (optional)", onChange: () => {
                                 props.onColumnNameChange(props.column.columnId, event.target.value);
                             }, value: customHeader })),
                     React.createElement(FormRow, { label: "Width" },

package/src/View/Layout/Wizard/sections/RowSummarySection.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const areSummaryRowsValid: (layout: Layout) => true | string;
+export declare const RowGroupingSectionSummary: React.FunctionComponent;
+interface RowSummarySectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const RowSummarySection: React.FunctionComponent<RowSummarySectionProps>;
+export {};

package/src/View/Layout/Wizard/sections/RowSummarySection.js

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import FormLayout, { FormRow } from '../../../../components/FormLayout';
+import Panel from '../../../../components/Panel';
+import { Select } from '../../../../components/Select';
+import SimpleButton from '../../../../components/SimpleButton';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { summarySupportedExpressions, WEIGHTED_AVERAGE_AGGREATED_FUNCTION, } from '../../../../PredefinedConfig/Common/RowSummary';
+import { mapColumnDataTypeToExpressionFunctionType } from '../../../../Utilities/adaptableQlUtils';
+import { LayoutModuleId } from '../../../../Utilities/Constants/ModuleConstants';
+import { sortWithOrderArray } from '../../../../Utilities/sortWithOrder';
+import { useAdaptable } from '../../../AdaptableContext';
+import { ValueSelector } from '../../../Components/ValueSelector';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { columnFilter } from './Utilities';
+export const areSummaryRowsValid = (layout) => {
+    var _a;
+    if (!layout.RowSummaries)
+        return true;
+    let valid = true;
+    (_a = layout.RowSummaries) === null || _a === void 0 ? void 0 : _a.find((rowSummary) => {
+        var _a;
+        for (const [_, fn] of Object.entries((_a = rowSummary.ColumnsMap) !== null && _a !== void 0 ? _a : {})) {
+            if (!fn) {
+                valid = 'All row summary columns must have an aggregation function.';
+                return true;
+            }
+        }
+    });
+    return valid;
+};
+const getAvailableExpressionsForColumnType = (columnType, availableScalarExpressions) => {
+    const inputType = mapColumnDataTypeToExpressionFunctionType(columnType);
+    return Object.entries(availableScalarExpressions !== null && availableScalarExpressions !== void 0 ? availableScalarExpressions : {})
+        .map(([expression, expressionDef]) => {
+        var _a, _b;
+        let firstArg = null;
+        if (!summarySupportedExpressions.includes(expression)) {
+            return null;
+        }
+        if (Array.isArray((_a = expressionDef === null || expressionDef === void 0 ? void 0 : expressionDef.inputs) === null || _a === void 0 ? void 0 : _a[0])) {
+            // @ts-ignore
+            firstArg = (_b = expressionDef.inputs.find((input) => input.includes(inputType))) === null || _b === void 0 ? void 0 : _b[0];
+        }
+        else {
+            firstArg = expressionDef.inputs[0];
+        }
+        if (inputType === firstArg) {
+            return expression;
+        }
+        else {
+            return null;
+        }
+    })
+        .filter(Boolean);
+};
+export const RowGroupingSectionSummary = () => {
+    var _a;
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    return (React.createElement(Box, null, ((_a = layout.RowGroupedColumns) === null || _a === void 0 ? void 0 : _a.length) ? (layout.RowGroupedColumns.map((columnId) => (React.createElement(Tag, { mr: 1, key: columnId }, adaptable.api.columnApi.getFriendlyNameForColumnId(columnId))))) : (React.createElement(Tag, null, "No Row Grouping"))));
+};
+const RowSummaryEditor = ({ rowSummary, onChange, availableScalarExpressions, onDelete, }) => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const adaptable = useAdaptable();
+    const columns = React.useMemo(() => {
+        const colIds = adaptable.api.columnApi
+            .getColumns()
+            .filter((column) => {
+            var _a, _b;
+            if (!['Number', 'String', 'Date'].includes(column.dataType))
+                return false;
+            return (_b = (_a = layout.Columns) === null || _a === void 0 ? void 0 : _a.includes) === null || _b === void 0 ? void 0 : _b.call(_a, column.columnId);
+        })
+            .map((c) => c.columnId);
+        return sortWithOrderArray(colIds, Object.keys(rowSummary.ColumnsMap), {
+            sortUnorderedItems: false,
+        }).map((colId) => adaptable.api.columnApi.getColumnWithColumnId(colId));
+    }, [rowSummary.ColumnsMap]);
+    return (React.createElement(Panel, { header: React.createElement(Flex, { style: { width: '100%' } },
+            React.createElement(Flex, { flex: 1, alignItems: "center" }, "Row Summary"),
+            React.createElement(SimpleButton, { icon: "delete", onClick: () => {
+                    onDelete();
+                } })), p: 2 },
+        React.createElement(FormLayout, null,
+            React.createElement(FormRow, { label: "Position" },
+                React.createElement(Select, { options: [
+                        {
+                            label: 'Top',
+                            value: 'Top',
+                        },
+                        {
+                            label: 'Bottom',
+                            value: 'Bottom',
+                        },
+                    ], value: rowSummary.Position, onChange: (position) => {
+                        onChange(Object.assign(Object.assign({}, rowSummary), { Position: position }));
+                    } }))),
+        React.createElement(Flex, { flexDirection: 'column', mt: 2, mb: 1 },
+            React.createElement(Flex, { alignItems: "center", flex: 1, mb: 2 }, "Column Aggregations"),
+            React.createElement(Panel, { bodyProps: { maxHeight: '100%' }, style: { height: 360 } },
+                React.createElement(ValueSelector, { style: { maxHeight: '100%' }, showFilterInput: true, filter: columnFilter, toIdentifier: (column) => column.columnId, toLabel: (option) => { var _a; return (_a = option.friendlyName) !== null && _a !== void 0 ? _a : option.columnId; }, options: columns, xSelectedLabel: () => {
+                        return 'Active Aggregations:';
+                    }, toListLabel: (column) => {
+                        var _a, _b, _c;
+                        const label = (_a = column.friendlyName) !== null && _a !== void 0 ? _a : column.columnId;
+                        if (!(column.columnId in ((_b = rowSummary.ColumnsMap) !== null && _b !== void 0 ? _b : {}))) {
+                            return label;
+                        }
+                        const expressionOptions = getAvailableExpressionsForColumnType(column.dataType, availableScalarExpressions).map((expression) => ({
+                            label: expression,
+                            value: expression,
+                        }));
+                        // check out if this layout has a aggregation with wighted column
+                        const aggregation = (_c = layout.AggregationColumns) === null || _c === void 0 ? void 0 : _c[column.columnId];
+                        if (aggregation && typeof aggregation === 'object' && aggregation.weightedColumnId) {
+                            expressionOptions.push({
+                                label: 'WEIGHTERD_AVG',
+                                value: WEIGHTED_AVERAGE_AGGREATED_FUNCTION,
+                            });
+                        }
+                        const expression = rowSummary.ColumnsMap[column.columnId];
+                        return (React.createElement(Flex, null,
+                            React.createElement(Flex, { mr: 2, alignItems: 'center' }, label),
+                            React.createElement(Select, { value: expression, options: expressionOptions, onChange: (expression) => {
+                                    onChange(Object.assign(Object.assign({}, rowSummary), { ColumnsMap: Object.assign(Object.assign({}, rowSummary.ColumnsMap), { [column.columnId]: expression }) }));
+                                } })));
+                    }, value: Object.keys(rowSummary.ColumnsMap), onChange: (colIds) => {
+                        const newColumnsMap = {};
+                        colIds.forEach((colId) => {
+                            var _a;
+                            newColumnsMap[colId] = (_a = rowSummary.ColumnsMap[colId]) !== null && _a !== void 0 ? _a : null;
+                        });
+                        onChange(Object.assign(Object.assign({}, rowSummary), { ColumnsMap: newColumnsMap }));
+                    } })))));
+};
+export const RowSummarySection = (props) => {
+    var _a;
+    const adaptable = useAdaptable();
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const availableScalarExpressions = React.useMemo(() => {
+        return adaptable.api.internalApi
+            .getQueryLanguageService()
+            .getModuleExpressionFunctionsMap(LayoutModuleId).aggregatedScalarFunctions;
+    }, []);
+    return (React.createElement(Tabs, { style: { height: '100%' } },
+        React.createElement(Tabs.Tab, null, "Row Summaries"),
+        React.createElement(Tabs.Content, null,
+            React.createElement("div", null,
+                React.createElement(Flex, { mb: 1 },
+                    React.createElement(Flex, { flex: 1 }),
+                    React.createElement(SimpleButton, { onClick: () => {
+                            var _a;
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: [
+                                    ...((_a = layout.RowSummaries) !== null && _a !== void 0 ? _a : []),
+                                    {
+                                        Position: 'Top',
+                                        ColumnsMap: {},
+                                    },
+                                ] }));
+                        }, icon: "plus" }, "Add Row Summary")),
+                ((_a = layout.RowSummaries) !== null && _a !== void 0 ? _a : []).map((rowSummary, index) => {
+                    return (React.createElement(RowSummaryEditor, { key: index, onDelete: () => {
+                            const newSummaries = [...layout.RowSummaries];
+                            newSummaries.splice(index, 1);
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: newSummaries }));
+                        }, availableScalarExpressions: availableScalarExpressions, rowSummary: rowSummary, onChange: (rowSummary) => {
+                            const newSummaries = [...layout.RowSummaries];
+                            newSummaries[index] = rowSummary;
+                            props.onChange(Object.assign(Object.assign({}, layout), { RowSummaries: newSummaries }));
+                        } }));
+                })))));
+};

package/src/View/License/LicenseWatermark.js

@@ -1,61 +1 @@
-import * as React from 'react';
-import { Logo } from '../../components/Logo';
-import { Flex } from 'rebass';
-const style = {
-    border: '1px solid var(--ab-color-error)',
-    padding: '5px',
-    fontWeight: 600,
-    margin: '5px',
-    fontSize: '14px',
-    alignItems: 'center',
-    color: 'var(--ab-color-text-on-defaultbackground)',
-    background: 'var(--ab-color-defaultbackground)',
-};
-const isStyleValid = (element) => {
-    const notAllowedProperties = [
-        ['display', 'none'],
-        ['opacity', '0'],
-        ['position', 'absolute'],
-        ['position', 'fixed'],
-        ['position', 'relative'],
-        ['visibility', 'hidden'],
-    ];
-    for (const [prop, value] of notAllowedProperties) {
-        if (element.style[prop] === value) {
-            return false;
-        }
-    }
-    return true;
-};
-export const LicenseWatermark = (props) => {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-        const checkWatermark = () => {
-            var _a, _b;
-            if (!((_a = ref.current) === null || _a === void 0 ? void 0 : _a.isConnected)) {
-                alert('It is not allowed to remove the Adaptable watermark.');
-            }
-            if (!isStyleValid(ref.current)) {
-                alert('It is not allowed to modify the Adaptable watermark.');
-            }
-            if ((_b = ref === null || ref === void 0 ? void 0 : ref.current) === null || _b === void 0 ? void 0 : _b.style) {
-                ref.current.style.border = style.border;
-                ref.current.style.padding = style.padding;
-                ref.current.style.fontWeight = `${style.fontWeight}`;
-                ref.current.style.margin = style.margin;
-                ref.current.style.fontSize = style.fontSize;
-                ref.current.style.color = style.color;
-                ref.current.style.background = style.background;
-                ref.current.style.display = 'flex';
-                ref.current.style.position = 'static';
-                ref.current.style.opacity = '1';
-                ref.current.style.visibility = 'visible';
-            }
-        };
-        const timerId = setInterval(checkWatermark, 5000);
-        return () => clearTimeout(timerId);
-    }, []);
-    return (React.createElement(Flex, { style: style, ref: ref },
-        React.createElement(Logo, { style: { marginRight: 10 } }),
-        React.createElement("div", null, props.children)));
-};
+import*as e from"react";import{Logo as t}from"../../components/Logo";import{Flex as r}from"rebass";const o={border:"1px solid var(--ab-color-error)",padding:"5px",fontWeight:600,margin:"5px",fontSize:"14px",alignItems:"center",color:"var(--ab-color-text-on-defaultbackground)",background:"var(--ab-color-defaultbackground)"},n=e=>{const t=[["display","none"],["opacity","0"],["position","absolute"],["position","fixed"],["position","relative"],["visibility","hidden"]];for(const[r,o]of t)if(e.style[r]===o)return!1;return!0};export const LicenseWatermark=i=>{const l=e.useRef(null);return e.useEffect((()=>{const e=setInterval((()=>{var e,t;(null===(e=l.current)||void 0===e?void 0:e.isConnected)||alert("It is not allowed to remove the Adaptable watermark."),n(l.current)||alert("It is not allowed to modify the Adaptable watermark."),(null===(t=null==l?void 0:l.current)||void 0===t?void 0:t.style)&&(l.current.style.border=o.border,l.current.style.padding=o.padding,l.current.style.fontWeight=`${o.fontWeight}`,l.current.style.margin=o.margin,l.current.style.fontSize=o.fontSize,l.current.style.color=o.color,l.current.style.background=o.background,l.current.style.display="flex",l.current.style.position="static",l.current.style.opacity="1",l.current.style.visibility="visible")}),5e3);return()=>clearTimeout(e)}),[]),e.createElement(r,{style:o,ref:l},e.createElement(t,{style:{marginRight:10}}),e.createElement("div",null,i.children))};

package/src/View/Note/NotePopup.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const NotePopup: React.FunctionComponent;

package/src/View/{Notes/NotesPopup.js → Note/NotePopup.js}

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
 import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
-import { GetNotesSelector } from '../../Redux/ActionsReducers/NotesRedux';
+import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
@@ -12,10 +12,11 @@ const tableDOMProps = {
         // minHeight: 600,
     },
 };
-export const NotesPopup = (props) => {
+export const NotePopup = (props) => {
     const adaptable = useAdaptable();
     const primaryKeyHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(adaptable.api.columnApi.getPrimaryKeyColumn().columnId);
-    const allNotes = useSelector((state) => GetNotesSelector(state.Notes));
+    const allNotes = useSelector((state) => GetAllNotesSelector(state.Note));
+    const isReadOnlyModule = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule('Note') === 'ReadOnly';
     const columnsMap = React.useMemo(() => {
         const columns = {
             primaryKey: {
@@ -24,32 +25,30 @@ export const NotesPopup = (props) => {
             },
             column: {
                 field: 'ColumnId',
+                header: 'Column',
                 valueGetter: (params) => {
                     return adaptable.api.columnApi.getFriendlyNameForColumnId(params.data.ColumnId);
                 },
             },
-            note: {
-                field: 'Value',
-                header: 'Note',
-                defaultEditable: true,
+            text: {
+                field: 'Text',
+                header: 'Text',
+                defaultEditable: !isReadOnlyModule,
                 defaultFlex: 3,
             },
             timestamp: {
                 field: 'Timestamp',
                 valueGetter: (params) => {
-                    return new Date(params.data.Timestamp).toDateString();
+                    var _a;
+                    return (_a = new Date(params.data.Timestamp)) === null || _a === void 0 ? void 0 : _a.toDateString();
                 },
             },
-            author: {
-                header: 'Author',
-                valueGetter: (params) => params.data.Author.UserName,
-            },
             delete: {
                 defaultWidth: 50,
                 render: (params) => {
-                    return (React.createElement(AdaptableButtonComponent, { variant: "text", icon: "delete", onClick: () => {
-                            const note = adaptable.api.notesApi.getNoteByUuid(params.data.Uuid);
-                            adaptable.api.notesApi.deleteNote(note);
+                    return (React.createElement(AdaptableButtonComponent, { disabled: isReadOnlyModule, variant: "text", icon: "delete", onClick: () => {
+                            const note = adaptable.api.noteApi.getNoteByUuid(params.data.Uuid);
+                            adaptable.api.noteApi.deleteNote(note);
                         } }));
                 },
             },
@@ -64,8 +63,8 @@ export const NotesPopup = (props) => {
                         if (change.type === 'update') {
                             const data = change.data;
                             const prevNote = allNotes.find((x) => x.Uuid === uuid);
-                            if (prevNote.Value !== data.Value) {
-                                adaptable.api.notesApi.updateNoteText(data.Value, prevNote);
+                            if (prevNote.Text !== data.Text) {
+                                adaptable.api.noteApi.updateNoteText(data.Text, prevNote);
                             }
                         }
                     }
@@ -76,6 +75,7 @@ export const NotesPopup = (props) => {
                         align: 'start',
                         defaultFlex: 1,
                         defaultSortable: false,
+                        style: { fontSize: 'var(--ab-font-size-3)' },
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,

package/src/View/SpecialColumnSettingsWizardStep.js

@@ -7,10 +7,10 @@ import { Tabs } from '../components/Tabs';
 import { ColumnFilterModuleId } from '../Utilities/Constants/ModuleConstants';
 import { useAdaptable } from './AdaptableContext';
 export const SpecialColumnSettingsWizardStep = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const adaptable = useAdaptable();
-    const possibleColumnTypes = adaptable.api.optionsApi.getColumnOptions().columnTypes;
-    const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_a = props.settings) !== null && _a !== void 0 ? _a : {};
+    const possibleColumnTypes = (_a = adaptable.api.columnApi.getColumnTypes()) !== null && _a !== void 0 ? _a : [];
+    const { Filterable, Resizable, Groupable, Sortable, Pivotable, Aggregatable, SuppressMenu, SuppressMovable, } = (_b = props.settings) !== null && _b !== void 0 ? _b : {};
     const handleColumnTypeChange = (columnType, checked) => {
         var _a, _b, _c;
         const columnTypes = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) !== null && _b !== void 0 ? _b : [];
@@ -51,7 +51,7 @@ export const SpecialColumnSettingsWizardStep = (props) => {
         Boolean(possibleColumnTypes === null || possibleColumnTypes === void 0 ? void 0 : possibleColumnTypes.length) && (React.createElement(Tabs, { marginTop: 2, autoFocus: false },
             React.createElement(Tabs.Tab, null, "Column Types"),
             React.createElement(Tabs.Content, null,
-                React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_b = chunk(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _b === void 0 ? void 0 : _b.map(([first, second]) => {
+                React.createElement(FormLayout, { columns: [{ name: 'first', size: '30%' }, { name: 'second' }] }, (_c = chunk(possibleColumnTypes !== null && possibleColumnTypes !== void 0 ? possibleColumnTypes : [], 2)) === null || _c === void 0 ? void 0 : _c.map(([first, second]) => {
                     var _a, _b, _c, _d, _e, _f;
                     return (React.createElement(FormRow, { key: first },
                         first && (React.createElement(CheckBox, { "data-name": first, onChange: (checked) => handleColumnTypeChange(first, checked), checked: (_c = (_b = (_a = props.settings) === null || _a === void 0 ? void 0 : _a.ColumnTypes) === null || _b === void 0 ? void 0 : _b.includes) === null || _c === void 0 ? void 0 : _c.call(_b, first) }, first)),