@adaptabletools/adaptable 16.0.9 → 16.1.0-canary.0

package/src/View/ColumnInfo/ColumnInfo.js

@@ -0,0 +1,185 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnInfo = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../components/FormLayout"));
+const InfiniteTable_1 = require("../../components/InfiniteTable");
+const Panel_1 = tslib_1.__importDefault(require("../../components/Panel"));
+const Tabs_1 = require("../../components/Tabs");
+const Enums_1 = require("../../PredefinedConfig/Common/Enums");
+const AdaptableContext_1 = require("../AdaptableContext");
+const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
+const ButtonNew_1 = require("../Components/Buttons/ButtonNew");
+const ColumnSelector_1 = require("../Components/Selectors/ColumnSelector");
+const BASE_CLASS_NAME = 'ab-AdaptableColumns';
+// TODOS:
+// - use column from props as initial value
+// - table summary
+// - access level for edit/new buttons
+const MODULES_WITH_COLUMN = [
+    'Alert',
+    'CalculatedColumn',
+    'CustomSort',
+    'Filter',
+    'FormatColumn',
+    'FlashingCell',
+    'PlusMinus',
+    'Shortcut',
+    'StyledColumn', // Scope
+];
+const MODULES_WITH_SCOPE = [
+    'Alert',
+    'FormatColumn',
+    'PlusMinus',
+    'Shortcut',
+    'StyledColumn',
+];
+// These modules are shown only if they have objects defiend
+const MODULES_WITH_VIEW_ONLY = ['CalculatedColumn', 'Filter'];
+const MODULES_WITHOUT_NEW = ['CalculatedColumn', 'Filter'];
+const ColumnDefPreview = (props) => {
+    const keyValuePairs = [
+        {
+            Key: 'Column Id',
+            Value: props.column ? props.column.columnId : null,
+        },
+        {
+            Key: 'Header',
+            Value: props.column ? props.column.friendlyName : null,
+        },
+        {
+            Key: 'Aggregatable',
+            Value: props.column ? props.column.aggregatable : null,
+        },
+        {
+            Key: 'DataType',
+            Value: props.column ? props.column.dataType : null,
+        },
+        {
+            Key: 'Groupable',
+            Value: props.column ? props.column.groupable : null,
+        },
+        {
+            Key: 'Filterable',
+            Value: props.column ? props.column.filterable : null,
+        },
+        {
+            Key: 'Hideable',
+            Value: props.column ? props.column.hideable : null,
+        },
+        {
+            Key: 'Editable',
+            Value: props.column ? !props.column.IsReadOnly : null,
+        },
+        {
+            Key: 'Moveable',
+            Value: props.column ? props.column.moveable : null,
+        },
+        {
+            Key: 'Pivotable',
+            Value: props.column ? props.column.pivotable : null,
+        },
+        {
+            Key: 'Queryable',
+            Value: props.column ? props.column.queryable : null,
+        },
+        {
+            Key: 'Sortable',
+            Value: props.column ? props.column.sortable : null,
+        },
+        {
+            Key: 'Visible',
+            Value: props.column ? props.column.visible : null,
+        },
+        {
+            Key: 'Grouped',
+            Value: props.column ? props.column.isGrouped : null,
+        },
+    ]
+        .map((keyValuePair) => {
+        return {
+            Key: keyValuePair.Key,
+            Value: keyValuePair.Value === true ? 'Yes' : keyValuePair.Value,
+        };
+    })
+        .filter((x) => x.Value);
+    const columnsMap = {
+        Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
+        Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
+    };
+    return (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
+        React.createElement(InfiniteTable_1.InfiniteTable, { domProps: {
+                style: {
+                    height: '460px',
+                    width: '100%',
+                },
+            }, columns: columnsMap })));
+};
+const ModuleView = (props) => {
+    var _a, _b, _c, _d;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const module = adaptable.ModuleService.getModuleById(props.moduleName);
+    if (!module.isModuleAvailable()) {
+        return null;
+    }
+    const moduleInfo = module.moduleInfo;
+    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    const EditWizard = (_c = (_b = (_a = module === null || module === void 0 ? void 0 : module.getViewProperties) === null || _a === void 0 ? void 0 : _a.call(module)) === null || _b === void 0 ? void 0 : _b.getEditWizard) === null || _c === void 0 ? void 0 : _c.call(_b);
+    const column = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
+    const allItems = (_d = module === null || module === void 0 ? void 0 : module.toViewAll) === null || _d === void 0 ? void 0 : _d.call(module);
+    if (MODULES_WITH_VIEW_ONLY.includes(props.moduleName) && !(allItems === null || allItems === void 0 ? void 0 : allItems.length)) {
+        return React.createElement(React.Fragment, null);
+    }
+    const itemsInScope = allItems.filter((item) => {
+        var _a;
+        if ('Scope' in item.abObject) {
+            const abColumn = adaptable.api.columnApi.getColumnWithColumnId(props.selectedColumnId);
+            return adaptable.api.scopeApi.isColumnInScope(abColumn, item.abObject.Scope);
+        }
+        if ('ColumnId' in item.abObject) {
+            return ((_a = item.abObject) === null || _a === void 0 ? void 0 : _a.ColumnId) === props.selectedColumnId;
+        }
+        return false;
+    });
+    if (!itemsInScope) {
+        return null;
+    }
+    const handleWizardClose = React.useCallback(() => {
+        setIsWizardOpen(false);
+    }, []);
+    // filter out items with scope
+    return (React.createElement(rebass_1.Box, { "data-name": module.moduleInfo.ModuleName, className: `${BASE_CLASS_NAME}__module-list`, key: module.moduleInfo.ModuleName, mb: 4 },
+        React.createElement(rebass_1.Flex, null,
+            React.createElement("b", { className: `${BASE_CLASS_NAME}__header` }, module.moduleInfo.FriendlyName),
+            React.createElement(rebass_1.Box, { flex: 1 }),
+            !MODULES_WITHOUT_NEW.includes(props.moduleName) && (React.createElement(ButtonNew_1.ButtonNew, { onClick: () => setIsWizardOpen(true) }, "New"))),
+        (itemsInScope === null || itemsInScope === void 0 ? void 0 : itemsInScope.length) ? React.createElement(AdaptableObjectList_1.AdaptableObjectList, { items: itemsInScope, module: module }) : null,
+        isWizardOpen && EditWizard && (React.createElement(EditWizard, { popupParams: {
+                column,
+                action: 'New',
+                source: 'ModuleButton',
+            }, moduleInfo: moduleInfo, data: null, configEntities: null, onCloseWizard: handleWizardClose, onFinishWizard: handleWizardClose }))));
+};
+const ColumnInfo = (props) => {
+    const state = (0, react_redux_1.useSelector)((state) => state);
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const [selectedColumnId, setSelectedColumnId] = React.useState(props.selectedColumnId);
+    const column = adaptable.api.columnApi.getColumnWithColumnId(selectedColumnId);
+    return (React.createElement(Panel_1.default, { flex: 1 },
+        React.createElement(rebass_1.Box, { mb: 3 },
+            React.createElement(FormLayout_1.default, null,
+                React.createElement(FormLayout_1.FormRow, { label: "Select Column" },
+                    React.createElement(ColumnSelector_1.ColumnSelector, { SelectedColumnIds: [selectedColumnId], ColumnList: adaptable.api.columnApi.getColumns(), onColumnChange: (columns) => { var _a, _b; return setSelectedColumnId((_b = (_a = columns === null || columns === void 0 ? void 0 : columns[0]) === null || _a === void 0 ? void 0 : _a.columnId) !== null && _b !== void 0 ? _b : undefined); }, SelectionMode: Enums_1.SelectionMode.Single })))),
+        selectedColumnId && (React.createElement(Tabs_1.Tabs, { mb: 3 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Config"),
+            React.createElement(Tabs_1.Tabs.Tab, null, "Info"),
+            React.createElement(Tabs_1.Tabs.Content, null, selectedColumnId && (React.createElement(rebass_1.Box, { className: BASE_CLASS_NAME }, MODULES_WITH_COLUMN.map((moduleName) => {
+                return (React.createElement(ModuleView, { key: moduleName, moduleName: moduleName, selectedColumnId: selectedColumnId }));
+            })))),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Flex, { flex: 1 }, selectedColumnId && React.createElement(ColumnDefPreview, { column: column })))))));
+};
+exports.ColumnInfo = ColumnInfo;

package/src/View/ColumnInfo/ColumnInfoPopup.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+export declare const ColumnInfoPopup: React.FunctionComponent<ModuleViewPopupProps<any>>;

package/src/View/ColumnInfo/ColumnInfoPopup.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColumnInfoPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const ColumnInfo_1 = require("./ColumnInfo");
+const ColumnInfoPopup = (props) => {
+    var _a, _b;
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Column Info', glyphicon: 'info' },
+        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
+            React.createElement(ColumnInfo_1.ColumnInfo, { selectedColumnId: (_b = (_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.column) === null || _b === void 0 ? void 0 : _b.columnId }))));
+};
+exports.ColumnInfoPopup = ColumnInfoPopup;

package/src/View/Components/AdaptableIconSelector/index.d.ts

@@ -3,4 +3,4 @@ import { IconSelectorProps } from '../../../components/IconSelector';
 /**
  * This component connects to adaptable to retrieve custom icons
  */
-export declare const AdaptableIconSelector: React.FunctionComponent<IconSelectorProps>;
+export declare const AdaptableIconSelector: React.FunctionComponent<Omit<IconSelectorProps, 'customIcons'>>;

package/src/View/Components/ExternalRenderer.d.ts

@@ -6,6 +6,7 @@ interface ExternalRendererProps {
     componentName?: string;
     render?: Render;
     frameworkComponent?: AdaptableFrameworkComponent;
+    onDestroy?: () => void;
 }
 export declare const ExternalRenderer: React.FunctionComponent<ExternalRendererProps>;
 export {};

package/src/View/Components/ExternalRenderer.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const AdaptableContext_1 = require("../AdaptableContext");
 const ExternalRenderer = (_a) => {
-    var { render, frameworkComponent, componentName = 'N/A' } = _a, rest = tslib_1.__rest(_a, ["render", "frameworkComponent", "componentName"]);
+    var { render, frameworkComponent, componentName = 'N/A', onDestroy } = _a, rest = tslib_1.__rest(_a, ["render", "frameworkComponent", "componentName", "onDestroy"]);
     const ref = React.useRef();
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const [contentsHTML, setContentsHTML] = React.useState('');
@@ -36,6 +36,7 @@ const ExternalRenderer = (_a) => {
                 });
             }
             else if (frameworkComponent) {
+                onDestroy === null || onDestroy === void 0 ? void 0 : onDestroy();
                 adaptableApi.internalApi.destroyFrameworkComponent(element, frameworkComponent, 
                 // @ts-ignore
                 componentName);

package/src/View/Components/Panels/PanelWithImage.js

@@ -13,6 +13,7 @@ const ButtonInfo_1 = require("../Buttons/ButtonInfo");
 //let { buttonContent, ...other } = this.props
 class PanelWithImageCmp extends React.Component {
     render() {
+        var _a;
         const IconCmp = icons_1.allIcons[(this.props.icon || this.props.glyphicon)];
         const headerStyle = {};
         if (this.props.headerColor) {
@@ -21,10 +22,9 @@ class PanelWithImageCmp extends React.Component {
         }
         let headerRow = (React.createElement(rebass_1.Flex, { flex: 1 },
             React.createElement(rebass_1.Flex, { alignItems: "center" },
-                React.createElement(rebass_1.Flex, { alignItems: "center", style: headerStyle },
+                React.createElement(rebass_1.Flex, { minHeight: 15, alignItems: "center", style: headerStyle },
                     IconCmp ? React.createElement(IconCmp, null) : null,
-                    React.createElement(rebass_1.Box, { marginRight: 2 }),
-                    this.props.header,
+                    React.createElement(rebass_1.Box, { marginRight: 2 }), (_a = this.props.header) !== null && _a !== void 0 ? _a : '',
                     React.createElement(rebass_1.Box, { marginRight: 2, "data-name": "space-after" }),
                     this.props.infoLink != null && !this.props.infoLinkDisabled && (React.createElement(ButtonInfo_1.ButtonInfo, { onClick: () => window.open(this.props.infoLink, '_blank' // <- opens the link in a new tab or window.
                         ) }))),

package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js

@@ -39,7 +39,7 @@ const AdaptablePopup = (props) => {
     let componentName = props.componentName;
     // ts forces to check for General, there is no menu item General
     const useFirstItem = !props.componentName;
-    if (useFirstItem && firstMenuModule !== 'General') {
+    if (useFirstItem && firstMenuModule !== 'General' && firstMenuModule !== 'CustomSettingsPanel') {
         componentModule = firstMenuModule;
     }
     const customSettingsPanel = (_c = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _c === void 0 ? void 0 : _c.find((customPanel) => useFirstItem ? customPanel.name === firstMenuItem.label : customPanel.name === componentName);

package/src/View/Components/Popups/AdaptablePopup/Navigation.js

@@ -43,10 +43,13 @@ const Navigation = (props) => {
             const isActive = props.activeItem === menuItem.module || menuItem.label === props.activeItem;
             const className = (0, join_1.default)(baseClassName, isActive && `${baseClassName}--active`);
             let customIcon = (_d = (_c = (_b = (_a = props.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (customSettingPanel) => customSettingPanel.name === menuItem.label)) === null || _c === void 0 ? void 0 : _c.icon) !== null && _d !== void 0 ? _d : null;
+            const dataName = menuItem.module === 'CustomSettingsPanel'
+                ? `CSP-${menuItem.label}`
+                : (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label;
             return (React.createElement("li", { className: className, key: menuItem.label },
                 React.createElement("button", { type: "button", className: `${baseClassName}__Button`, onClick: () => {
                         dispatch(menuItem.reduxAction);
-                    }, "data-name": (_e = menuItem.module) !== null && _e !== void 0 ? _e : menuItem.label },
+                    }, "data-name": dataName },
                     menuItem.icon && (React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: menuItem.icon, iconClassName: `${baseClassName}__Icon` })),
                     customIcon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: customIcon }),
                     menuItem.label)));

package/src/View/Components/Popups/AdaptablePopup/useMenuItems.js

@@ -21,6 +21,7 @@ const useMenuItems = () => {
             }
         }
         const visibleItems = allMenuItems.filter((item) => item.module !== 'General' &&
+            item.module !== 'CustomSettingsPanel' &&
             !DefaultSettingsPanel_1.STANDALONE_MODULE_POPUPS.includes(item.module) &&
             item.isVisible);
         return navigationItems
@@ -32,7 +33,9 @@ const useMenuItems = () => {
             const customSettingsPanel = (_b = (_a = settingsPanelOptions === null || settingsPanelOptions === void 0 ? void 0 : settingsPanelOptions.customSettingsPanels) === null || _a === void 0 ? void 0 : _a.find) === null || _b === void 0 ? void 0 : _b.call(_a, (panel) => panel.name === moduleName);
             let customPanelMenuItem = null;
             if (customSettingsPanel) {
+                // @ts-ignore
                 customPanelMenuItem = {
+                    module: 'CustomSettingsPanel',
                     label: customSettingsPanel.name,
                     isVisible: true,
                     reduxAction: PopupRedux.PopupShowScreen(null, customSettingsPanel.name),

package/src/View/Components/Popups/WindowPopups/WindowPopups.d.ts

@@ -5,4 +5,5 @@ export interface WindowPopupChildProps {
     popupProps: any;
     api: AdaptableApi;
 }
+export declare const CUSTOM_WINDOW_FACTORY_ID = "CUSTOM_WINDOW_FACTORY_ID";
 export declare const WindowPopups: React.FunctionComponent;

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

@@ -1,18 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.WindowPopups = void 0;
+exports.WindowPopups = exports.CUSTOM_WINDOW_FACTORY_ID = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_redux_1 = require("react-redux");
 const Dialog_1 = tslib_1.__importDefault(require("../../../../components/Dialog"));
 const PopupRedux_1 = require("../../../../Redux/ActionsReducers/PopupRedux");
 const AdaptableContext_1 = require("../../../AdaptableContext");
+const ExternalRenderer_1 = require("../../ExternalRenderer");
 const PanelWithImage_1 = require("../../Panels/PanelWithImage");
 const Utilities_1 = require("../Utilities");
 const windowFactory_1 = require("./windowFactory");
 const NoopComponent = () => {
     return React.createElement(React.Fragment, null);
 };
+exports.CUSTOM_WINDOW_FACTORY_ID = 'CUSTOM_WINDOW_FACTORY_ID';
 const WindowPopups = () => {
     const [windowModalSettings, setWindowModalSettings] = React.useState({});
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
@@ -20,7 +22,15 @@ const WindowPopups = () => {
     const windowItems = (0, react_redux_1.useSelector)((state) => state.Popup.WindowPopup.PopupList);
     return (React.createElement(React.Fragment, null, windowItems === null || windowItems === void 0 ? void 0 : windowItems.map((windowItem) => {
         var _a, _b, _c, _d, _e, _f;
-        const Component = (_a = windowFactory_1.windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : NoopComponent;
+        let Component = (_a = windowFactory_1.windowFactory[windowItem.FactoryId]) !== null && _a !== void 0 ? _a : null;
+        if (!Component &&
+            (windowItem.PopupProps.render || windowItem.PopupProps.frameworkComponent)) {
+            // check if it is custom window
+            Component = () => (React.createElement(ExternalRenderer_1.ExternalRenderer, { render: windowItem.PopupProps.render, frameworkComponent: windowItem.PopupProps.frameworkComponent, onDestroy: windowItem.PopupProps.onFrameworkComponentDestroyed }));
+        }
+        else {
+            Component = Component !== null && Component !== void 0 ? Component : NoopComponent;
+        }
         const _g = (_b = windowItem === null || windowItem === void 0 ? void 0 : windowItem.PopupProps) !== null && _b !== void 0 ? _b : {}, { windowModalProps } = _g, restPopupProps = tslib_1.__rest(_g, ["windowModalProps"]);
         const handleDismiss = () => {
             dispatch((0, PopupRedux_1.PopupHideWindow)(windowItem.Id));

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

@@ -41,7 +41,7 @@ class ColumnSelector extends React.Component {
         return (React.createElement("div", { "data-name": 'column-selector' },
             React.createElement(FormLayout_1.default, { columns: [{ name: 'columnSelector', style: { display: 'flex' } }], style: this.props.style },
                 React.createElement(FormLayout_1.FormRow, null,
-                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, className: "ab-DashboardToolbar__Layout__select", items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
+                    React.createElement(DropdownButton_1.default, { marginRight: 2, columns: ['label'], showClearButton: currentColumnName != 'Select a column', onClear: () => this.onClearButton(), style: { width: '100%', fontSize: 'small' }, items: sortedColumnOptions, disabled: this.props.disabled || sortedColumnOptions.length == 0 }, currentColumnName)))));
     }
     onClearButton() {
         this.props.onColumnChange([]);

package/src/View/DataImport/DataImportPopup.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { ModuleViewPopupProps } from '../Components/SharedProps/ModuleViewPopupProps';
+interface DataImportPopupProps extends ModuleViewPopupProps<null> {
+}
+export declare const DataImportPopup: React.FunctionComponent<DataImportPopupProps>;
+export {};

package/src/View/DataImport/DataImportPopup.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataImportPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../components/HelpBlock"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../../components/SimpleButton"));
+const PopupPanel_1 = require("../Components/Popups/AdaptablePopup/PopupPanel");
+const DataImportWizard_1 = require("./DataImportWizard");
+const DataImportPopup = (props) => {
+    const [isWizardOpen, setIsWizardOpen] = React.useState(false);
+    React.useEffect(() => {
+        var _a, _b;
+        if (((_a = props.popupParams) === null || _a === void 0 ? void 0 : _a.action) === 'New' && ((_b = props.popupParams) === null || _b === void 0 ? void 0 : _b.source) !== 'ModuleMenu') {
+            setIsWizardOpen(true);
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Data Import', glyphicon: 'import' },
+            React.createElement(rebass_1.Box, null,
+                React.createElement(HelpBlock_1.default, { mb: 2, fontSize: 3 }, "Click the 'Import Data' button to insert or update data into AdapTable"),
+                React.createElement(SimpleButton_1.default, { icon: "import", variant: "raised", onClick: () => setIsWizardOpen(true) }, "Import Data"))),
+        isWizardOpen && (React.createElement(DataImportWizard_1.DataImportWizard, { onClose: () => {
+                var _a;
+                setIsWizardOpen(false);
+                if (['Toolbar', 'ContextMenu', 'ColumnMenu', 'ModuleButton'].includes((_a = props === null || props === void 0 ? void 0 : props.popupParams) === null || _a === void 0 ? void 0 : _a.source)) {
+                    props.onClosePopup();
+                }
+            } }))));
+};
+exports.DataImportPopup = DataImportPopup;

package/src/View/DataImport/DataImportWizard/DataImportWizard.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { DataImportValidationError } from '../../../types';
+export interface ValidationErrorsMap {
+    [key: string]: DataImportValidationError[] | null;
+}
+export declare const DataImportWizard: (props: {
+    onClose: () => void;
+}) => JSX.Element;

package/src/View/DataImport/DataImportWizard/DataImportWizard.js

@@ -0,0 +1,176 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataImportWizard = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../components/HelpBlock"));
+const Tag_1 = require("../../../components/Tag");
+const ObjectFactory_1 = require("../../../Utilities/ObjectFactory");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
+const systemFileHandlers_1 = require("../systemFileHandlers");
+const UploadSection_1 = require("./sections/UploadSection");
+const ValidationSection_1 = require("./sections/ValidationSection");
+const DataImportWizard = (props) => {
+    var _a;
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const dataImportOptions = adaptable.api.optionsApi.getDataImportOptions();
+    const module = adaptable.ModuleService.getModuleById('DataImport');
+    const [rowData, setRowData] = React.useState(null);
+    const [file, setFile] = React.useState(null);
+    const [text, setText] = React.useState('');
+    const [importType, setImportType] = React.useState('file');
+    const handleRowDataChange = React.useCallback((data) => {
+        if (Array.isArray(data)) {
+            setRowData(data);
+        }
+        else {
+            setRowData(null);
+        }
+    }, []);
+    const handleChangeImportType = React.useCallback((importType) => {
+        setImportType(importType);
+        // clear data
+        handleRowDataChange(null);
+        setFile(null);
+        setText('');
+    }, []);
+    // ---- FILE HANDLERS ----
+    const fileHandlers = React.useMemo(() => {
+        var _a, _b;
+        const userDefinedHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
+        return [...userDefinedHandlers, ...systemFileHandlers_1.systemFileHandlers];
+    }, []);
+    const supportedFileFormats = React.useMemo(() => {
+        return fileHandlers.map((h) => h.fileExtension).join(', ');
+    }, [fileHandlers]);
+    const readFile = React.useCallback(async (file) => {
+        var _a, _b;
+        const userDefinedFileHandlers = (_b = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.fileHandlers) !== null && _b !== void 0 ? _b : [];
+        const fileExtension = `.${file.name.split('.').pop()}`;
+        const handler = [...userDefinedFileHandlers, ...systemFileHandlers_1.systemFileHandlers].find((fh) => fh.fileExtension === fileExtension);
+        if (!handler) {
+            adaptable.api.logError(`No file handler found for file extension ${fileExtension}. Please provide a file handler in Data Import Options.`);
+            return;
+        }
+        try {
+            const data = await handler.handleFile(file);
+            setFile(file);
+            handleRowDataChange(data);
+            return data;
+        }
+        catch (_c) {
+            adaptable.api.logError(`Error reading file ${file.name}. Please check the file is valid.`);
+        }
+    }, [adaptable]);
+    const fileMessage = file ? (React.createElement(HelpBlock_1.default, { mb: 2 },
+        "File ",
+        React.createElement(Tag_1.Tag, null, file.name),
+        " is ready to be imported.")) : (React.createElement(HelpBlock_1.default, { mb: 2 },
+        "Supported file types: ",
+        supportedFileFormats));
+    // ---- TEXT IMPORT ----
+    const [textError, setTextError] = React.useState(null);
+    const handleTextChange = React.useCallback(async (text) => {
+        var _a;
+        //
+        let textHandler = (_a = adaptable.api.optionsApi.getDataImportOptions()) === null || _a === void 0 ? void 0 : _a.textHandler;
+        if (!textHandler) {
+            // regex to test for json
+            const jsonRegex = /^\s*[\[{]/;
+            if (text && jsonRegex.test(text)) {
+                textHandler = JSON.parse;
+            }
+            else {
+                textHandler = systemFileHandlers_1.parseCSV;
+            }
+        }
+        setText(text);
+        let textRawData = null;
+        if (!text || text === '') {
+            setTextError(null);
+        }
+        else {
+            try {
+                textRawData = await textHandler(text);
+                if (Array.isArray(textRawData)) {
+                    handleRowDataChange(textRawData);
+                    setTextError('');
+                }
+                else {
+                    throw 'Error parsing text';
+                }
+            }
+            catch (_b) {
+                handleRowDataChange(null);
+                setTextError('Error parsing text');
+            }
+        }
+    }, []);
+    const textMessage = textError !== null && textError !== void 0 ? textError : (!rowData ? 'Paste your data here' : '');
+    // ---- VALIDATION ----
+    const errors = (_a = React.useMemo(() => {
+        var _a;
+        if (!(dataImportOptions === null || dataImportOptions === void 0 ? void 0 : dataImportOptions.validate)) {
+            return null;
+        }
+        if (!rowData) {
+            return null;
+        }
+        return (_a = rowData === null || rowData === void 0 ? void 0 : rowData.reduce) === null || _a === void 0 ? void 0 : _a.call(rowData, (acc, rowData) => {
+            const error = dataImportOptions.validate(Object.assign({ rowData }, (0, ObjectFactory_1.createBaseContext)(adaptable.api)));
+            if (error && rowData[primaryKey] && error.length) {
+                acc[rowData[primaryKey]] = error;
+            }
+            return acc;
+        }, {});
+    }, [rowData])) !== null && _a !== void 0 ? _a : {};
+    const [skipInvalidRows, setSkipInvalidRows] = React.useState(false);
+    const handleValidationDataChange = (data) => {
+        handleRowDataChange(data);
+    };
+    const handleFinish = () => {
+        const validData = rowData.filter((row) => {
+            const rowErrors = errors[row[primaryKey]];
+            return !rowErrors || rowErrors.length === 0;
+        });
+        adaptable.api.dataImportApi.internalApi.importData(validData);
+    };
+    return (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { data: null, moduleInfo: module.moduleInfo, finishText: "Import", onFinish: () => {
+            handleFinish();
+            props.onClose();
+        }, onHide: () => {
+            props.onClose();
+        }, sections: [
+            {
+                title: 'Upload',
+                isValid: () => {
+                    return rowData ? true : 'No valid data uploaded';
+                },
+                details: 'Upload the data',
+                render: () => {
+                    return (React.createElement(UploadSection_1.UploadSection, { importType: importType, onImportTypeChange: handleChangeImportType, 
+                        // FILE
+                        readFile: readFile, supportedFileFormats: supportedFileFormats, fileMessage: fileMessage, 
+                        // TEXT
+                        text: text, onTextChange: handleTextChange, textMessage: textMessage }));
+                },
+            },
+            {
+                title: 'Validation',
+                details: 'Check the Data is Valid',
+                isValid: () => {
+                    if (errors && Object.keys(errors).length > 0) {
+                        if (!skipInvalidRows)
+                            return 'There are errors in the data.';
+                    }
+                    return true;
+                },
+                render: () => {
+                    return (React.createElement(ValidationSection_1.ValidationSection, { errors: errors, data: rowData, onDataChange: handleValidationDataChange, skipInvalidRows: skipInvalidRows, onSkipInvalidRowsChange: setSkipInvalidRows }));
+                },
+            },
+        ] }));
+};
+exports.DataImportWizard = DataImportWizard;

package/src/View/DataImport/DataImportWizard/index.d.ts

@@ -0,0 +1 @@
+export * from './DataImportWizard';

package/src/View/DataImport/DataImportWizard/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./DataImportWizard"), exports);

package/src/View/DataImport/DataImportWizard/sections/DataPreview.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { ValidationErrorsMap } from '../DataImportWizard';
+interface DataPreviewProps {
+    data?: Record<string, unknown>[];
+    onDataChange?: (data: Record<string, unknown>[]) => void;
+    errors: ValidationErrorsMap | null;
+    editable?: boolean;
+}
+export declare const DataPreview: React.FunctionComponent<DataPreviewProps>;
+export {};