@adaptabletools/adaptable 18.0.0-canary.3 → 18.0.0-canary.5

package/src/View/Components/Popups/WindowPopups/windowFactory.js

@@ -2,13 +2,16 @@ import { GridFilterWindowPopup } from '../../../GridFilter/GridFilterWindowPopup
 import { PivotDetailsPopoup } from '../../../Layout/PivotDetailsPopoup';
 import { ExportTablePopup } from '../../../Export/ExportTablePopup';
 import { ThemeEditorWindow } from '../../../Theme/ThemeEditorWindow';
+import { TransposedPopup } from '../../../Layout/TransposedPopup';
 export const WINDOW_GRID_FILTER_EDITOR = 'WINDOW_GRID_FILTER_EDITOR';
 export const SHOW_PIVOT_COLUMN_DETAILS = 'SHOW_PIVOT_COLUMN_DETAILS';
 export const SHOW_EXPORT_TABLE = 'SHOW_EXPORT_TABLE';
 export const SHOW_THEME_EDITOR = 'SHOW_THEME_EDITOR';
+export const WINDOW_SHOW_TRANSPOSED_VIEW = 'WINDOW_SHOW_TRANSPOSED_VIEW';
 export const windowFactory = {
     [WINDOW_GRID_FILTER_EDITOR]: GridFilterWindowPopup,
     [SHOW_PIVOT_COLUMN_DETAILS]: PivotDetailsPopoup,
     [SHOW_EXPORT_TABLE]: ExportTablePopup,
     [SHOW_THEME_EDITOR]: ThemeEditorWindow,
+    [WINDOW_SHOW_TRANSPOSED_VIEW]: TransposedPopup,
 };

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -9,7 +9,7 @@ export const PermittedValuesSelector = function (props) {
     const [filter, setFilter] = React.useState('');
     const columnType = React.useMemo(() => {
         return adaptable.api.columnApi.getColumnDataTypeForColumnId(props.columnId);
-    }, []);
+    }, [props.columnId]);
     React.useEffect(() => {
         if (!props.columnId) {
             setIsLoading(false);

package/src/View/CustomSort/CustomSortSummary.js

@@ -33,7 +33,7 @@ export class CustomSortSummaryComponent extends React.Component {
     }
     render() {
         const customSort = this.props.CustomSorts.find((c) => c.ColumnId == this.props.summarisedColumn.columnId);
-        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn);
+        const columnSortComparer = this.props.api.customSortApi.internalApi.getCustomSortComparer(this.props.summarisedColumn.columnId);
         let noCustomSort = customSort == null && columnSortComparer == null;
         let customSortRow;
         if (!this.props.summarisedColumn.sortable) {

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -65,7 +65,7 @@ export const DataChangeHistoryGrid = (props) => {
         // 2. this UI will be reimplemented with Infinite Table anyway
         const addedRows = mapChangeHistoryRowData(addedChangeHistoryLogs, mainAdaptableInstance);
         const removedRows = mapChangeHistoryRowData(removedChangeHistoryLogs, mainAdaptableInstance);
-        adaptableApi.gridApi.getAgGridInstance().api.applyTransactionAsync({
+        adaptableApi.agGridApi.applyTransactionAsync({
             add: addedRows,
             remove: removedRows,
         });

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -23,6 +23,7 @@ const QueryViewPanelComponent = (props) => {
     const disabled = isReadOnly || isSuspended || gridFilterAccessLevel === 'ReadOnly';
     const handleEnter = (e) => {
         if (e.key === 'Enter') {
+            e.preventDefault();
             runQuery();
         }
     };
@@ -44,8 +45,9 @@ const QueryViewPanelComponent = (props) => {
                         fontFamily: 'monospace',
                         fontSize: 12,
                         maxHeight: 52,
-                        height: 21,
-                        paddingTop: 7,
+                        height: '100%',
+                        paddingTop: 6,
+                        overflow: 'hidden',
                         zIndex: 100,
                     }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression })),
             isExpressionValid && (React.createElement(ButtonPlay, { onClick: () => runQuery(), tooltip: '', accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || expression == '' || expression == (gridFilter === null || gridFilter === void 0 ? void 0 : gridFilter.Expression), marginRight: 1 })),
@@ -71,6 +73,8 @@ const QueryViewPanelComponent = (props) => {
                         maxHeight: 60,
                         paddingTop: 7,
                         zIndex: 100,
+                        height: '100%',
+                        overflow: 'hidden',
                     }, placehoder: "Grid Filter", onChange: (x) => setExpression(x.target.value), value: expression }))));
     };
     const saveButton = (React.createElement(ButtonSave, { onClick: () => saveQuery(), tooltip: "Save as Named Query", accessLevel: namedQueryModuleAccessLevel, disabled: disabled || !isExpressionValid || isExpressionNamedQuery || expression == '', variant: "text", tone: "neutral", marginRight: 1 }));

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.js

@@ -9,8 +9,8 @@ import { AdaptableObjectCollection } from '../../Components/AdaptableObjectColle
 import { AdaptableObjectRow } from '../../Components/AdaptableObjectRow';
 import { PopupPanel } from '../../Components/Popups/AdaptablePopup/PopupPanel';
 import { AdaptableObjectsSummary } from './AdaptableObjectsSummary';
-import env from '../../../env';
-const version = env.VERSION;
+import { ADAPTABLE_VERSION } from '../../../EnvVars';
+const version = ADAPTABLE_VERSION;
 export const GridInfoPopup = (props) => {
     const CreateGridSummaries = (colItems) => {
         var _a;
@@ -39,7 +39,6 @@ export const GridInfoPopup = (props) => {
         returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
         returnRows.push(createReadOnlyColItem(colItems, 'Grid Filter', gridFilterExpression));
         returnRows.push(createReadOnlyColItem(colItems, 'All Rows', props.api.gridApi.getRowCount()));
-        returnRows.push(createReadOnlyColItem(colItems, 'Visible Rows', props.api.gridApi.getVisibleRowCount()));
         returnRows.push(createReadOnlyColItem(colItems, 'Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.length));
         returnRows.push(createReadOnlyColItem(colItems, 'Visible Selected Rows', selectedRowInfo === null || selectedRowInfo === void 0 ? void 0 : selectedRowInfo.gridRows.filter((gr) => { var _a; return ((_a = gr.rowNode) === null || _a === void 0 ? void 0 : _a.displayed) == true; }).length));
         returnRows.push(createReadOnlyColItem(colItems, 'All Columns', props.api.gridApi.getColumnCount()));

package/src/View/Layout/TransposedPopup.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { WindowPopupChildProps } from '../Components/Popups/WindowPopups/WindowPopups';
+export declare const TransposedPopup: (props: WindowPopupChildProps) => JSX.Element;

package/src/View/Layout/TransposedPopup.js

@@ -0,0 +1,193 @@
+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';
+export const TransposedPopup = (props) => {
+    const adaptable = useAdaptable();
+    const rowNodes = React.useMemo(() => {
+        return adaptable.api.gridApi.getAllRowNodes();
+    }, [
+    // can be later triggered by ticking data
+    ]);
+    const { transposedColumnId, hideTransposedColumn = true } = props.popupProps;
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    // Thist must be qunique
+    const transposeByColumnId = primaryKey;
+    // Only used to show nice values a the top of the grid, istead on the value
+    // of the primarykey
+    const [synteticTransposedByColumnId, setSynteticTransposedByColumnId] = React.useState(transposedColumnId !== null && transposedColumnId !== void 0 ? transposedColumnId : primaryKey);
+    const columns = React.useMemo(() => {
+        // customisable
+        return 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, transposeByColumnId) + '';
+            //row[synteticTransposedByColumnId] + '';
+            const header = adaptable.api.gridApi.getNormalisedValueFromRowNode(row, synteticTransposedByColumnId) + '';
+            transposedColumns.push({
+                colId,
+                header,
+            });
+        }
+        for (const column of columns) {
+            /**
+             * We can hide the transposed column, if we want
+             */
+            if (hideTransposedColumn && column.columnId === synteticTransposedByColumnId) {
+                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, transposeByColumnId);
+                // 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, synteticTransposedByColumnId]);
+    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: false,
+            },
+            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(synteticTransposedByColumnId),
+        };
+        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();
+        const adaptableInitFn = Object.getPrototypeOf(adaptable).constructor.init;
+        const agGridConfig = {
+            gridOptions: agGridOptions,
+            modules: modules,
+        };
+        let transposedAdaptableApi;
+        (async () => {
+            transposedAdaptableApi = await adaptableInitFn(adaptableOptions, agGridConfig);
+            adaptable.api.eventApi.on('ThemeChanged', (event) => {
+                transposedAdaptableApi.themeApi.loadTheme(typeof event.theme === 'object' ? event.theme.Name : event.theme);
+            });
+        })();
+        return () => {
+            if (transposedAdaptableApi) {
+                transposedAdaptableApi.destroy();
+            }
+        };
+    }, [synteticTransposedByColumnId]);
+    /**
+     * 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: synteticTransposedByColumnId, onChange: (colId) => {
+                            setSynteticTransposedByColumnId(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

@@ -34,7 +34,7 @@ export const LayoutWizard = (props) => {
         }
         if (preparedLayout.SuppressAggFuncInHeader === undefined) {
             preparedLayout.SuppressAggFuncInHeader =
-                !!adaptable.api.gridApi.getAgGridInstance().suppressAggFuncInHeader;
+                !!adaptable.agGridAdapter.initialGridOptions.suppressAggFuncInHeader;
         }
         return preparedLayout;
     });

package/src/View/Notes/NotesPopup.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/NotesRedux';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
 import { PopupPanel } from '../Components/Popups/AdaptablePopup/PopupPanel';
@@ -15,7 +15,7 @@ const tableDOMProps = {
 export const NotesPopup = (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.Notes));
     const columnsMap = React.useMemo(() => {
         const columns = {
             primaryKey: {
@@ -24,13 +24,14 @@ export const NotesPopup = (props) => {
             },
             column: {
                 field: 'ColumnId',
+                header: 'Column',
                 valueGetter: (params) => {
                     return adaptable.api.columnApi.getFriendlyNameForColumnId(params.data.ColumnId);
                 },
             },
-            note: {
-                field: 'Value',
-                header: 'Note',
+            text: {
+                field: 'Text',
+                header: 'Text',
                 defaultEditable: true,
                 defaultFlex: 3,
             },
@@ -40,10 +41,6 @@ export const NotesPopup = (props) => {
                     return new Date(params.data.Timestamp).toDateString();
                 },
             },
-            author: {
-                header: 'Author',
-                valueGetter: (params) => params.data.Author.UserName,
-            },
             delete: {
                 defaultWidth: 50,
                 render: (params) => {
@@ -64,8 +61,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.notesApi.updateNoteText(data.Text, prevNote);
                             }
                         }
                     }
@@ -76,6 +73,7 @@ export const NotesPopup = (props) => {
                         align: 'start',
                         defaultFlex: 1,
                         defaultSortable: false,
+                        style: { fontSize: 'var(--ab-font-size-3)' },
                     },
                 }, headerOptions: {
                     alwaysReserveSpaceForSortIcon: false,

package/src/View/Theme/ThemeSelector.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { Select } from '../../components/Select';
 import * as ThemeRedux from '../../Redux/ActionsReducers/ThemeRedux';
 import { ThemeModuleId } from '../../Utilities/Constants/ModuleConstants';
@@ -8,6 +8,7 @@ export const ThemeSelector = (props) => {
     const adaptable = useAdaptable();
     const dispatch = useDispatch();
     const availableThemes = adaptable.api.themeApi.getThemes();
+    const currentTheme = useSelector((state) => state.Theme.CurrentTheme);
     const disabled = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(ThemeModuleId) === 'ReadOnly';
     const optionThemes = availableThemes.map((theme) => {
         if (typeof theme === 'string') {
@@ -22,8 +23,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    const theme = adaptable.api.themeApi.getCurrentThemeObject();
-    return (React.createElement(Select, { "data-name": "select-theme-dropdown", options: optionThemes, value: theme.Name, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select, { "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/agGrid/ActionColumnRenderer.js

@@ -32,7 +32,7 @@ const ActionButtons = (props) => {
 };
 export const ReactActionColumnRenderer = (props) => {
     const rerender = useRerender();
-    const adaptable = props.api.__adaptable;
+    const adaptable = props.context.__adaptable;
     const { actionButtons, actionColumn } = adaptable.api.internalApi.getActionButtonsAndActionColumn(props.colDef);
     if (!actionColumn || !actionButtons.length) {
         return null;
@@ -41,7 +41,7 @@ export const ReactActionColumnRenderer = (props) => {
     if (adaptable.api.gridApi.isGroupRowNode(props.node) && !actionColumn.includeGroupedRows) {
         return null;
     }
-    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node);
+    const pkValue = adaptable.getPrimaryKeyValueFromRowNode(props.node, props.api);
     const buttonContext = {
         actionColumn,
         primaryKeyValue: pkValue,
@@ -57,7 +57,7 @@ export const ReactActionColumnRenderer = (props) => {
 export class ActionColumnRenderer {
     // gets called once before the renderer is used
     init(params) {
-        const adaptable = params.api.__adaptable;
+        const adaptable = params.context.__adaptable;
         const { actionButtons, actionColumn } = adaptable.api.internalApi.getActionButtonsAndActionColumn(params.colDef);
         if (!actionColumn || !actionButtons.length) {
             return;
@@ -70,7 +70,7 @@ export class ActionColumnRenderer {
             this.eGui.innerHTML = '';
             return;
         }
-        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node);
+        const pkValue = adaptable.getPrimaryKeyValueFromRowNode(params.node, params.api);
         const buttonContext = {
             actionColumn,
             primaryKeyValue: pkValue,