@adaptabletools/adaptable 12.0.3 → 12.0.6

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -78,7 +78,7 @@ const DateFormatPresets = [
     'yyyyMMdd',
     'HH:mm:ss',
 ];
-const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
+const getFormatColumnFormatSummaryValue = (data, api) => {
     let content = 'N/A';
     if (!data.DisplayFormat) {
         content = 'N/A';
@@ -86,24 +86,17 @@ const getFormatColumnFormatSummaryValue = (data, formattedColumnApi) => {
     else {
         if (data.DisplayFormat.Formatter === 'NumberFormatter') {
             content = FormatHelper_1.default.NumberFormatter(12345.6789, data.DisplayFormat.Options);
-            //formattedColumnApi.getNumberFormattedValue(12345.6789, data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'DateFormatter') {
-            content = FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options);
-            //formattedColumnApi.getDateFormattedValue(new Date(), data.DisplayFormat.Options);
+            content = FormatHelper_1.default.DateFormatter(new Date(2022, 0, 1), data.DisplayFormat.Options);
         }
         if (data.DisplayFormat.Formatter === 'StringFormatter') {
             content = FormatHelper_1.default.StringFormatter('Hello World ', data.DisplayFormat.Options);
-            //formattedColumnApi.getStringFormattedValue('Hello World ', data.DisplayFormat.Options);
         }
     }
     return content;
 };
 exports.getFormatColumnFormatSummaryValue = getFormatColumnFormatSummaryValue;
-function splitArrayInTwo(arr) {
-    const half = Math.floor(arr.length - 1 / 2);
-    return [arr.slice(0, half), arr.slice(half)];
-}
 const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
     var _a, _b, _c;
     return (React.createElement(FormLayout_1.FormRow, { key: customFormatter.id, label: (_a = customFormatter.label) !== null && _a !== void 0 ? _a : customFormatter.id },
@@ -120,7 +113,7 @@ const renderCustomFormatter = (data, customFormatter, setFormatOption) => {
             } })));
 };
 const renderFormatColumnFormatSummary = (data, api) => {
-    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api.formatColumnApi));
+    return React.createElement(Tag_1.Tag, null, exports.getFormatColumnFormatSummaryValue(data, api));
 };
 exports.renderFormatColumnFormatSummary = renderFormatColumnFormatSummary;
 const getFormatDisplayTypeForScope = (scope, api) => {
@@ -157,7 +150,7 @@ const getFormatDisplayTypeForScope = (scope, api) => {
     return undefined;
 };
 exports.getFormatDisplayTypeForScope = getFormatDisplayTypeForScope;
-const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'DateFormatter') {
         return null;
     }
@@ -173,9 +166,12 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Pattern" },
                         React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Pattern, onChange: (e) => setFormatOption('Pattern', e.currentTarget.value), mr: 2 }),
-                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options))),
-                    customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))),
-        React.createElement(Tabs_1.Tabs, { marginTop: 2 },
+                        React.createElement("span", null, FormatHelper_1.default.DateFormatter(new Date(), data.DisplayFormat.Options)))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+        React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { style: { fontWeight: 'bold' }, colItems: [
@@ -195,7 +191,7 @@ const renderDateFormat = (data, _onChange, setFormatOption, customFormatters, fo
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -247,7 +243,6 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
-    const [leftCustomFormatters, rightCustomFormatters] = splitArrayInTwo(customFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -261,8 +256,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        leftCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) }))),
                     React.createElement(FormLayout_1.default, null,
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Digits" },
                             React.createElement(Input_1.default, { type: "number", min: "0", 
@@ -279,8 +273,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Truncate" },
-                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })),
-                        rightCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(CheckBox_1.CheckBox, { checked: data.DisplayFormat.Options.Truncate, onChange: (checked) => setFormatOption('Truncate', checked) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "row" },
+                    React.createElement(FormLayout_1.default, null, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Presets"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -322,10 +320,11 @@ const renderNumberFormat = (data, onChange, setFormatOption, customFormatters, f
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption, customFormatters, formatColumnApi) => {
+const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
+    console.log('formatters', scopedCustomFormatters);
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -341,8 +340,12 @@ const renderStringFormat = (data, _onChange, setFormatOption, customFormatters,
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
                             React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Prefix, onChange: (e) => setFormatOption('Prefix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
-                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
-                        customFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption)))))),
+                            React.createElement(Input_1.default, { value: data.DisplayFormat.Options.Suffix, onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })))))),
+        scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Custom Formats"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    React.createElement(FormLayout_1.default, { mr: 3 }, scopedCustomFormatters.map((formatter) => renderCustomFormatter(data, formatter, setFormatOption))))))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Example"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -376,15 +379,15 @@ const FormatColumnFormatWizardSection = (props) => {
         update({ DisplayFormat });
     };
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
-    const customNumberFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
+    const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.scopeApi.isScopeInScope(displayFormatter.scope, data.Scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'DateFormatter') {
-        return renderDateFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderDateFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption, customNumberFormatters, formatColumnApi);
+        return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only available if ",

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

@@ -1,7 +1,7 @@
+import * as React from 'react';
 import { ViewPanelProps } from '../Components/SharedProps/ViewPanelProps';
-import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 import { Layout } from '../../PredefinedConfig/LayoutState';
-import * as React from 'react';
+import * as LayoutRedux from '../../Redux/ActionsReducers/LayoutRedux';
 export declare const COMPONENT_LAYOUT_POPUP_NAME = "LayoutEditorStandalonePopup";
 export interface LayoutViewPanelComponentProps extends ViewPanelProps {
     onSelectLayout: (layoutName: string) => LayoutRedux.LayoutSelectAction;

package/src/View/Layout/LayoutViewPanel.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LayoutViewPanelControl = exports.COMPONENT_LAYOUT_POPUP_NAME = void 0;
 const tslib_1 = require("tslib");
-const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
 const AdaptableHelper_1 = tslib_1.__importDefault(require("../../Utilities/Helpers/AdaptableHelper"));
 const rebass_1 = require("rebass");
 const DropdownButton_1 = tslib_1.__importDefault(require("../../components/DropdownButton"));
@@ -13,9 +13,9 @@ const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
 const ButtonEdit_1 = require("../Components/Buttons/ButtonEdit");
 const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
 const ButtonDelete_1 = require("../Components/Buttons/ButtonDelete");
-const react_redux_1 = require("react-redux");
 const ButtonClone_1 = require("../Components/Buttons/ButtonClone");
 const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
 exports.COMPONENT_LAYOUT_POPUP_NAME = 'LayoutEditorStandalonePopup';
 class LayoutViewPanelComponent extends React.Component {
     render() {
@@ -55,8 +55,7 @@ function mapStateToProps(state, ownProps) {
         CurrentLayoutName,
         CurrentDraftLayout: state.Grid.CurrentLayout || selectedLayout,
         Layouts,
-        CanSave: state.Grid.CurrentLayout &&
-            !api.layoutApi.areLayoutsEqual(selectedLayout, state.Grid.CurrentLayout),
+        CanSave: state.Grid.CurrentLayout && !api.layoutApi.areDraftAndCurrentLayoutEqual(),
     };
 }
 function mapDispatchToProps(dispatch) {

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

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

package/src/View/Layout/SaveLayoutButton.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SaveLayoutButton = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const AdaptableContext_1 = require("../AdaptableContext");
+const ButtonSave_1 = require("../Components/Buttons/ButtonSave");
+const GridRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/GridRedux"));
+const LayoutRedux = tslib_1.__importStar(require("../../Redux/ActionsReducers/LayoutRedux"));
+const ModuleConstants = tslib_1.__importStar(require("../../Utilities/Constants/ModuleConstants"));
+const SaveLayoutButton = () => {
+    const adaptable = AdaptableContext_1.useAdaptable();
+    const accessLevel = adaptable.api.internalApi
+        .getEntitlementService()
+        .getEntitlementAccessLevelForModule(ModuleConstants.LayoutModuleId);
+    const dispatch = react_redux_1.useDispatch();
+    const currentDraftLayout = react_redux_1.useSelector((state) => state.Grid.CurrentLayout);
+    const isManualSaveLayout = !adaptable.api.layoutApi.shouldAutoSaveLayout(currentDraftLayout);
+    const handleSave = React.useCallback((layout) => {
+        dispatch(LayoutRedux.LayoutSave(layout));
+        dispatch(GridRedux.LayoutUpdateCurrentDraft(null));
+    }, []);
+    const isSaveEnabled = currentDraftLayout && !adaptable.api.layoutApi.areDraftAndCurrentLayoutEqual();
+    if (!isManualSaveLayout) {
+        return React.createElement(React.Fragment, null);
+    }
+    return (React.createElement(ButtonSave_1.ButtonSave, { ml: 1, variant: "text", iconSize: 15, onClick: () => handleSave(currentDraftLayout), tooltip: "Save Changes to Current Layout", disabled: !isSaveEnabled, accessLevel: accessLevel }));
+};
+exports.SaveLayoutButton = SaveLayoutButton;

package/src/agGrid/Adaptable.js

@@ -2760,7 +2760,7 @@ class Adaptable {
             all_modules_1.Events.EVENT_ROW_GROUP_OPENED,
             all_modules_1.Events.EVENT_COLUMN_VALUE_CHANGED,
         ];
-        // no need to add filter event, it is handled by AdaptableStore side-effects
+        // ADD filter event
         this.gridOptions.api.addGlobalListener((this.listenerGlobalColumnEventsThatTriggerAutoLayoutSave = (type) => {
             if (columnEventsThatTriggersAutoLayoutSave.indexOf(type) > -1) {
                 this.debouncedSaveGridLayout();

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -51,7 +51,7 @@ function BaseEditorInput(props) {
             result = expr.evaluate({
                 // we need a fully-fledged rowNode as Adaptable accesses internal methods of it
                 node: testRowNode,
-                api: props.api,
+                adaptableApi: props.api,
                 functions: expressionFunctions,
             });
         }

package/src/metamodel/adaptable.metamodel.d.ts

@@ -2544,22 +2544,22 @@ export declare const ADAPTABLE_METAMODEL: {
             kind: string;
             description: string;
             uiLabel: string;
-            reference: string;
-            isOptional?: undefined;
+            isOptional: boolean;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
-            isOptional: boolean;
-            reference?: undefined;
+            reference: string;
+            isOptional?: undefined;
         } | {
             name: string;
             kind: string;
             description: string;
             uiLabel: string;
-            reference?: undefined;
             isOptional?: undefined;
+            reference?: undefined;
         } | {
             name: string;
             kind: string;