@adaptabletools/adaptable 14.0.0-canary.0 → 14.0.0-canary.1

package/src/Strategy/FormatColumnModule.js

@@ -4,7 +4,6 @@ exports.FormatColumnModule = void 0;
 const tslib_1 = require("tslib");
 const AdaptableModuleBase_1 = require("./AdaptableModuleBase");
 const ModuleConstants = tslib_1.__importStar(require("../Utilities/Constants/ModuleConstants"));
-const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const FormatColumnRedux = tslib_1.__importStar(require("../Redux/ActionsReducers/FormatColumnRedux"));
 const LoggingHelper_1 = require("../Utilities/Helpers/LoggingHelper");
 const FormatColumnWizard_1 = require("../View/FormatColumn/Wizard/FormatColumnWizard");
@@ -13,33 +12,16 @@ const FormatColumnFormatWizardSection_1 = require("../View/FormatColumn/Wizard/F
 const getFormatColumnSettingsViewItems_1 = require("./Utilities/FormatColumn/getFormatColumnSettingsViewItems");
 const getFormatColumnStyleViewItems_1 = require("./Utilities/FormatColumn/getFormatColumnStyleViewItems");
 const getObjectTagsViewItems_1 = require("./Utilities/getObjectTagsViewItems");
+const getRuleViewItems_1 = require("./Utilities/getRuleViewItems");
+const MoveFormatColumn_1 = require("../View/FormatColumn/MoveFormatColumn");
+const Helper_1 = require("../Utilities/Helpers/Helper");
+const updateSingleToMultiplePredicates_1 = require("./Utilities/updateSingleToMultiplePredicates");
 class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     constructor(api) {
         super(ModuleConstants.FormatColumnModuleId, ModuleConstants.FormatColumnFriendlyName, 'format-column', 'FormatColumnPopup', 'Create a column style, display format or cell alignment', api);
-        /**
-         * Use Case: Data (cell/row) has changed
-         * Action: Any CheckboxFormatColumns need to be updated, as their disabled state may have changed
-         */
-        this.api.internalApi
-            .getDataService()
-            .on('CellDataChanged', (cellDataChangedInfo) => {
-            const activeCheckboxColumnIds = this.api.columnApi
-                .getColumns()
-                .filter((aColumn) => {
-                const checkboxFormatColumn = this.api.formatColumnApi.getCheckBoxStyleFormatColumn(aColumn);
-                return checkboxFormatColumn && !checkboxFormatColumn.IsSuspended;
-            })
-                .map((aColumn) => aColumn.columnId);
-            // no need to refresh the CheckboxColumns if the change was triggered by one of them
-            if (!activeCheckboxColumnIds.includes(cellDataChangedInfo.column.columnId)) {
-                this.api.internalApi
-                    .getAdaptableInstance()
-                    .refreshCells(null, activeCheckboxColumnIds, true, true);
-            }
-        });
     }
     getModuleAdaptableObjects(config) {
-        return this.api.formatColumnApi.getAllFormatColumn(config);
+        return this.api.formatColumnApi.getFormatColumns(config);
     }
     getExplicitlyReferencedColumnIds(formatColumn) {
         if (this.api.scopeApi.scopeHasColumns(formatColumn.Scope)) {
@@ -53,185 +35,86 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
         return false;
     }
     updateOldConfig() {
-        var _a, _b;
-        // warn about FormatColumn.HeaderName deprecation
-        if ((_b = (_a = this.api.internalApi
-            .getState()
-            .FormatColumn) === null || _a === void 0 ? void 0 : _a.FormatColumns) === null || _b === void 0 ? void 0 : _b.some((formatColumn) => !!formatColumn.HeaderName)) {
-            (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: The 'FormatColumn.HeaderName' property is deprecated; use a Layout custom Column Header instead!`);
-        }
-        let newFormatColumns = [];
-        let existingFormatColumns = [];
-        // 1. Convert Gradient Columns to Format Columns
-        let gradientColumnState = this.api.internalApi.getState().GradientColumn;
-        if (gradientColumnState === null || gradientColumnState === void 0 ? void 0 : gradientColumnState.GradientColumns) {
-            gradientColumnState.GradientColumns.forEach((gradientColumn) => {
-                const columnId = gradientColumn.ColumnId;
-                (0, LoggingHelper_1.LogAdaptableWarning)(`Merging Gradient Style into Format Column for Column: ${columnId}`);
-                let existingFormatColumn = this.getExistingFormatColumn(columnId);
-                let gradientStyle = {
-                    GradientStyle: {
-                        CellRanges: [
-                            {
-                                Min: gradientColumn.BaseValue,
-                                Max: gradientColumn.PositiveValue,
-                                Color: gradientColumn.PositiveColor,
-                            },
-                        ],
-                    },
-                };
-                if (!existingFormatColumn) {
-                    let formatColumn = {
-                        Scope: {
-                            ColumnIds: [gradientColumn.ColumnId],
-                        },
-                        ColumnStyle: gradientStyle,
-                    };
-                    newFormatColumns.push(formatColumn);
-                }
-                else {
-                    existingFormatColumn.ColumnStyle = gradientStyle;
-                    existingFormatColumns.push(existingFormatColumn);
-                }
-            });
-        }
-        // 2. Convert Percent Bars to Format Columns
-        let percentBarState = this.api.internalApi.getState().PercentBar;
-        if (percentBarState === null || percentBarState === void 0 ? void 0 : percentBarState.PercentBars) {
-            percentBarState === null || percentBarState === void 0 ? void 0 : percentBarState.PercentBars.forEach((percentBar) => {
-                const columnId = percentBar.ColumnId;
-                (0, LoggingHelper_1.LogAdaptableWarning)(`Merging Percent Bar Style into Format Column for Column: ${columnId}`);
-                let existingFormatColumn = this.getExistingFormatColumn(columnId);
-                const ranges = percentBar.Ranges;
-                const columnComparison = percentBar.ColumnComparison;
-                let cellText = [];
-                if (percentBar.ShowValue && percentBar.DisplayRawValue) {
-                    cellText.push('CellValue');
-                }
-                if (percentBar.ShowValue && percentBar.DisplayPercentageValue) {
-                    cellText.push('PercentageValue');
-                }
-                const tooltipText = [];
-                if (percentBar.ShowToolTip && percentBar.DisplayRawValue) {
-                    tooltipText.push('CellValue');
-                }
-                if (percentBar.ShowToolTip && percentBar.DisplayPercentageValue) {
-                    tooltipText.push('PercentageValue');
-                }
-                const percentBarStyle = {
-                    PercentBarStyle: {
-                        CellRanges: ranges,
-                        ColumnComparison: columnComparison,
-                        CellText: cellText,
-                        ToolTipText: tooltipText,
-                        BackColor: percentBar.BackColor,
-                    },
-                };
-                if (!existingFormatColumn) {
-                    const formatColumn = {
-                        Scope: {
-                            ColumnIds: [percentBar.ColumnId],
-                        },
-                        ColumnStyle: percentBarStyle,
-                    };
-                    newFormatColumns.push(formatColumn);
-                }
-                else {
-                    existingFormatColumn.ColumnStyle = percentBarStyle;
-                    existingFormatColumns.push(existingFormatColumn);
-                }
-            });
+        this.updateConditionalStylesColumnsOldConfig();
+        this.updateFormatColumnSingleToMultiplePredicates();
+        // update ConditionalStyle StatusBarPanel
+        const oldStatusBars = this.api.internalApi.getState().StatusBar.StatusBars;
+        let replaceConditionalStyleStatusBar = false;
+        const newStatusBars = oldStatusBars.map((statusBar) => (Object.assign(Object.assign({}, statusBar), { StatusBarPanels: [
+                ...new Set(statusBar.StatusBarPanels.map((statusBarPanel) => {
+                    if (statusBarPanel === 'ConditionalStyle') {
+                        replaceConditionalStyleStatusBar = true;
+                        return 'FormatColumn';
+                    }
+                    return statusBarPanel;
+                })),
+            ] })));
+        if (replaceConditionalStyleStatusBar) {
+            this.api.statusBarApi.setStatusBarPanels(newStatusBars);
         }
-        // update Redux
-        this.api.formatColumnApi.addFormatColumns(newFormatColumns);
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(existingFormatColumns)) {
-            existingFormatColumns.forEach((fc) => {
-                this.api.formatColumnApi.editFormatColumn(fc);
-            });
+        // update ConditionalStyle dashboard buttons
+        const dashboardModuleButtons = this.api.internalApi.getState().Dashboard.ModuleButtons;
+        if (dashboardModuleButtons.includes('ConditionalStyle')) {
+            dashboardModuleButtons[dashboardModuleButtons.indexOf('ConditionalStyle')] = 'FormatColumn';
+            this.api.dashboardApi.setModuleButtons([...new Set(dashboardModuleButtons)]);
         }
-        if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(newFormatColumns) ||
-            ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(existingFormatColumns)) {
-            this.api.internalApi.clearGradientColumnState();
-            this.api.internalApi.clearPercentBarState();
+        // update ConditionalStyle toolPanel buttons
+        const toolPanelModuleButtons = this.api.internalApi.getState().ToolPanel.ModuleButtons;
+        if (toolPanelModuleButtons.includes('ConditionalStyle')) {
+            toolPanelModuleButtons[toolPanelModuleButtons.indexOf('ConditionalStyle')] = 'FormatColumn';
+            this.api.toolPanelApi.setModuleButtons([...new Set(dashboardModuleButtons)]);
         }
     }
-    getExistingFormatColumn(columnId) {
-        let formatColumn = this.api.formatColumnApi.getFormatColumnWithSingleColumnScope(columnId);
-        if (formatColumn) {
-            return formatColumn;
-        }
-        // special columns (Calculated, FreeText, Action) are not yet part of AG-GridS colDefs
-        // so we have to check if the given columnId is a special column
-        const isSpecialColumn = !!this.api.calculatedColumnApi.getCalculatedColumnForColumnId(columnId) ||
-            !!this.api.freeTextColumnApi.getFreeTextColumnById(columnId);
-        if (isSpecialColumn) {
-            return this.api.formatColumnApi
-                .getAllFormatColumn()
-                .find((formatColumn) => 'ColumnIds' in formatColumn.Scope &&
-                formatColumn.Scope.ColumnIds.length == 1 &&
-                formatColumn.Scope.ColumnIds.includes(columnId));
+    updateFormatColumnSingleToMultiplePredicates() {
+        const formatColumns = this.api.formatColumnApi.getFormatColumns();
+        formatColumns.forEach((formatColumn) => {
+            if (formatColumn.Rule && 'Predicate' in formatColumn.Rule) {
+                const preparedFormatColumn = (0, Helper_1.cloneObject)(formatColumn);
+                (0, updateSingleToMultiplePredicates_1.updateSingleToMultiplePredicates)(preparedFormatColumn.Rule);
+                this.api.formatColumnApi.editFormatColumn(preparedFormatColumn);
+            }
+        });
+    }
+    updateConditionalStylesColumnsOldConfig() {
+        var _a;
+        const oldConditionalStyles = (_a = this.api.internalApi.getState().ConditionalStyle) === null || _a === void 0 ? void 0 : _a.ConditionalStyles;
+        if (!(oldConditionalStyles === null || oldConditionalStyles === void 0 ? void 0 : oldConditionalStyles.length)) {
+            return;
         }
+        (0, LoggingHelper_1.ConsoleLogWarning)(`DEPRECATED: Conditional Styles have been merged into 'Format Columns'`);
+        // remove conditional styles
+        this.api.internalApi.deleteConditionalStyles(oldConditionalStyles);
+        const transformedFormatColumns = oldConditionalStyles.map((conditionalStyle) => {
+            const formatColumn = {
+                Scope: conditionalStyle.Scope,
+                Style: conditionalStyle.Style,
+                IncludeGroupedRows: conditionalStyle.IncludeGroupedRows,
+            };
+            if ('Rule' in conditionalStyle && conditionalStyle.Rule.Predicate) {
+                formatColumn.Rule = {
+                    Predicates: [conditionalStyle.Rule.Predicate],
+                };
+            }
+            return formatColumn;
+        });
+        // add as format column
+        this.api.formatColumnApi.addFormatColumns(transformedFormatColumns);
     }
     addColumnMenuItems(column) {
-        var _a;
         let returnColumnMenuItems = [];
         if (column && this.isModuleEditable() && !column.isSparkline) {
-            // not fullproof as might be an All but its generally pretty good
-            let formatColumn = this.api.formatColumnApi.getFormatColumnForColumn(column);
-            let formatExists = formatColumn
-                ? this.api.scopeApi.isColumnInScopeColumns(column, formatColumn.Scope)
-                : false;
-            if (formatColumn && formatColumn.IsReadOnly && formatColumn.IsReadOnly == true) {
-                formatExists = false;
-            }
-            let label = formatExists ? 'Edit ' : 'Create ';
             let popupParam = {
                 column: column,
-                action: formatExists ? 'Edit' : 'New',
+                action: 'New',
                 source: 'ColumnMenu',
-                value: formatColumn,
             };
-            returnColumnMenuItems.push(this.createColumnMenuItemShowPopup(label + 'Format Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
-            if (column.dataType == 'Boolean' && !this.api.columnApi.isFreeTextColumn(column.columnId)) {
-                let formatColumn = this.api.formatColumnApi.getFormatColumnForColumnId(column.columnId);
-                let hasCheckBox = formatColumn && ((_a = formatColumn.ColumnStyle) === null || _a === void 0 ? void 0 : _a.CheckBoxStyle);
-                if (hasCheckBox) {
-                    returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Remove Checkbox', 'unchecked', () => {
-                        this.api.formatColumnApi.deleteFormatColumn(formatColumn);
-                    }));
-                }
-                else {
-                    //    const test = this.api.formatColumnApi.getCheckBoxStyleFormatColumn(column);
-                    if (formatColumn) {
-                        returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Show as Checkbox', 'checked', () => {
-                            formatColumn.ColumnStyle = {
-                                CheckBoxStyle: true,
-                            };
-                            formatColumn.Style = undefined;
-                            this.api.formatColumnApi.editFormatColumn(formatColumn);
-                        }));
-                    }
-                    else {
-                        returnColumnMenuItems.push(this.createColumnMenuItemClickFunction('Show as Checkbox', 'checked', () => {
-                            let newFormatColumn = {
-                                Scope: {
-                                    ColumnIds: [column.columnId],
-                                },
-                                ColumnStyle: {
-                                    CheckBoxStyle: true,
-                                },
-                            };
-                            this.api.formatColumnApi.addFormatColumn(newFormatColumn);
-                        }));
-                    }
-                }
-            }
+            returnColumnMenuItems.push(this.createColumnMenuItemShowPopup('Create Format Column', this.moduleInfo.Popup, this.moduleInfo.Glyph, popupParam));
         }
         return returnColumnMenuItems;
     }
     getTeamSharingAction() {
         return {
-            ModuleEntities: this.api.formatColumnApi.getAllFormatColumn(),
+            ModuleEntities: this.api.formatColumnApi.getFormatColumns(),
             AddAction: FormatColumnRedux.FormatColumnAdd,
             EditAction: FormatColumnRedux.FormatColumnEdit,
         };
@@ -241,6 +124,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             abObject: formatColumn,
             items: [
                 (0, getScopeViewItems_1.getScopeViewItems)(formatColumn.Scope, this.api),
+                formatColumn.Rule && (0, getRuleViewItems_1.getRuleViewItems)(formatColumn.Rule, this.api),
                 {
                     name: 'Style',
                     view: () => (0, getFormatColumnStyleViewItems_1.getFormatColumnStyleViewItems)(formatColumn, this.api),
@@ -251,7 +135,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
                 },
                 (0, getFormatColumnSettingsViewItems_1.getFormatColumnSettingsViewItems)(formatColumn),
                 (0, getObjectTagsViewItems_1.getObjectTagsViewItems)(formatColumn, this.api),
-            ],
+            ].filter(Boolean),
         };
     }
     toViewAll() {
@@ -261,6 +145,7 @@ class FormatColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     getViewProperties() {
         return {
+            actions: [MoveFormatColumn_1.MoveFormatColumn],
             getDeleteAction: FormatColumnRedux.FormatColumnDelete,
             getSuspendAction: FormatColumnRedux.FormatColumnSuspend,
             getUnSuspendAction: FormatColumnRedux.FormatColumnUnSuspend,

package/src/Strategy/FreeTextColumnModule.js

@@ -17,7 +17,7 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
             !this.api.internalApi.getAdaptableOptions().autogeneratePrimaryKey);
     }
     getModuleAdaptableObjects() {
-        return this.api.freeTextColumnApi.getAllFreeTextColumn();
+        return this.api.freeTextColumnApi.getFreeTextColumns();
     }
     hasNamedQueryReferences() {
         return false;
@@ -36,7 +36,7 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     addColumnMenuItems(column) {
         if (column && this.isModuleEditable()) {
             if (this.api.freeTextColumnApi
-                .getAllFreeTextColumn()
+                .getFreeTextColumns()
                 .find((ftc) => ftc.ColumnId == column.columnId)) {
                 let popupParam = {
                     column: column,
@@ -51,7 +51,7 @@ class FreeTextColumnModule extends AdaptableModuleBase_1.AdaptableModuleBase {
     }
     getTeamSharingAction() {
         return {
-            ModuleEntities: this.api.freeTextColumnApi.getAllFreeTextColumn(),
+            ModuleEntities: this.api.freeTextColumnApi.getFreeTextColumns(),
             AddAction: FreeTextColumnRedux.FreeTextColumnAdd,
             EditAction: FreeTextColumnRedux.FreeTextColumnEdit,
         };

package/src/Strategy/Interface/IModule.d.ts

@@ -34,17 +34,17 @@ export interface AdaptableObjectItemView {
     /**
      * Custom name for the property name
      */
-    label?: string | React.FunctionComponent<{
+    label?: string | React.FunctionComponent<React.PropsWithChildren<{
         data: AdaptableObject | SuspendableObject;
-    }>;
+    }>>;
     /**
      * How the item is rendered.
      * Defaults to tags.
      * Important to be a component so react can detect if it is the same component.
      */
-    view?: React.FunctionComponent<{
+    view?: React.FunctionComponent<React.PropsWithChildren<{
         data: AdaptableObject | SuspendableObject;
-    }>;
+    }>> | React.ReactElement;
     /**
      * Values used for the component.
      * Could be later extended to include an 'onChange' prop.
@@ -59,7 +59,7 @@ export interface AdaptableObjectView {
     /**
      * Used to render expanded content
      */
-    expand?: React.FunctionComponent;
+    expand?: React.FunctionComponent<React.PropsWithChildren<unknown>>;
     /**
      * Reference to the underling object.
      */
@@ -77,10 +77,10 @@ export interface AdaptableObjectCompactView {
     item: AdaptableObjectItemView;
     abObject: AdaptableObject;
 }
-export declare type AdaptableModuleViewAction = React.FunctionComponent<{
+export declare type AdaptableModuleViewAction = React.FunctionComponent<React.PropsWithChildren<{
     data: AdaptableObject;
     accessLevel: AccessLevel;
-}>;
+}>>;
 export interface AdaptableModuleView {
     /**
      * List of actions.
@@ -88,6 +88,7 @@ export interface AdaptableModuleView {
      */
     actions?: AdaptableModuleViewAction[];
     onMount?: () => void;
+    HeaderComponent?: React.FunctionComponent;
     onOpenEditPopup?: (abObject?: AdaptableObject) => void;
     getDeleteAction?: (abObject: AdaptableObject) => Redux.Action;
     getCompactDeleteAction?: (abObject: AdaptableObject) => Redux.Action;
@@ -98,10 +99,11 @@ export interface AdaptableModuleView {
     getSuspendAllAction?: () => Redux.Action;
     getUnSuspendAllAction?: () => Redux.Action;
     getDeleteAllAction?: () => Redux.Action;
-    emptyView?: React.FunctionComponent<{
+    emptyView?: React.FunctionComponent<React.PropsWithChildren<{
         module: IModule;
-    }> | string;
+    }>> | string;
     newTooltipText?: string;
+    hideNewButton?: boolean;
     /**
      * Specifieds the types of objects the module manages.
      * When specified the new button will have these options.
@@ -111,7 +113,7 @@ export interface AdaptableModuleView {
         label?: string;
         accessLevel?: AccessLevel;
     }[];
-    getEditWizard?(abObject?: AdaptableObject): React.FunctionComponent<AdaptableOnePageWizardProps<AdaptableObject>>;
+    getEditWizard?(abObject?: AdaptableObject): React.FunctionComponent<React.PropsWithChildren<AdaptableOnePageWizardProps<AdaptableObject>>>;
     /**
      * Specify status panel props.
      * Can be extended to include custom rendereres.

package/src/Strategy/LayoutModule.d.ts

@@ -9,6 +9,8 @@ import { AdaptableObject } from '../PredefinedConfig/Common/AdaptableObject';
 export declare class LayoutModule extends AdaptableModuleBase implements IModule {
     protected LayoutState: LayoutState;
     constructor(api: AdaptableApi);
+    updateOldConfig(): void;
+    private clearUnsuportedFeaturesFromLayout;
     getModuleAdaptableObjects(): AdaptableObject[];
     getExplicitlyReferencedColumnIds(layout: Layout): string[];
     getTeamSharingReferences(adaptableObject: AdaptableObject): TeamSharingReferences;
@@ -16,6 +18,7 @@ export declare class LayoutModule extends AdaptableModuleBase implements IModule
     handleAdaptableReady(): void;
     addColumnMenuItems(column: AdaptableColumn): AdaptableMenuItem[] | undefined;
     addContextMenuItems(menuContext: ContextMenuContext): AdaptableMenuItem[] | undefined;
+    private createViewPivotItemsMenuItem;
     getTeamSharingAction(): TeamSharingImportInfo<Layout>;
     toViewAll(): {
         items: {