@adaptabletools/adaptable 16.0.9 → 16.1.0-canary.0

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

@@ -0,0 +1,154 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DataPreview = void 0;
+const tslib_1 = require("tslib");
+const lodash_1 = require("lodash");
+const React = tslib_1.__importStar(require("react"));
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const icons_1 = require("../../../../components/icons");
+const InfiniteTable_1 = require("../../../../components/InfiniteTable");
+const Tag_1 = require("../../../../components/Tag");
+const AdaptableContext_1 = require("../../../AdaptableContext");
+const AdaptablePopover_1 = require("../../../AdaptablePopover");
+const UIHelper_1 = tslib_1.__importDefault(require("../../../UIHelper"));
+const tableDOMProps = {
+    style: {
+        height: '100%',
+        minWidth: '10rem',
+        minHeight: 300,
+        flex: 1,
+    },
+};
+const getRowErrors = (errors, primaryKeyValue) => {
+    if (!errors) {
+        return null;
+    }
+    if (!errors[primaryKeyValue]) {
+        return null;
+    }
+    return errors[primaryKeyValue];
+};
+const getCellError = (errors, primaryKeyValue, columnId) => {
+    var _a, _b;
+    return (_b = (_a = getRowErrors(errors, primaryKeyValue)) === null || _a === void 0 ? void 0 : _a.find((e) => e.columnId === columnId)) !== null && _b !== void 0 ? _b : null;
+};
+const DataPreview = (props) => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    if (!props.data) {
+        return (React.createElement(HelpBlock_1.default, { color: 'var(--ab-color-error)' },
+            "No Data has been Imported. Go to ",
+            React.createElement(Tag_1.Tag, null, "Upload"),
+            " step and provide Data"));
+    }
+    const primaryKey = adaptable.api.optionsApi.getPrimaryKey();
+    const dataSample = props.data[0];
+    const columns = React.useMemo(() => {
+        if (!dataSample) {
+            return {};
+        }
+        const adaptableColumnsInData = adaptable.api.columnApi.getColumns().filter((c) => {
+            var _a;
+            return dataSample && ((_a = c.field) !== null && _a !== void 0 ? _a : c.columnId) in dataSample;
+        });
+        const mapDataType = (dataType) => {
+            switch (dataType) {
+                case 'Boolean':
+                    return 'boolean';
+                case 'Date':
+                    return 'date';
+                case 'String':
+                    return 'number';
+            }
+            return dataType;
+        };
+        const infiniteColumns = adaptableColumnsInData.reduce((acc, column) => {
+            const isPrimaryKey = column.columnId === primaryKey;
+            let editable = !isPrimaryKey;
+            if (props.editable !== undefined && !isPrimaryKey) {
+                editable = props.editable;
+            }
+            acc[column.columnId] = {
+                field: column.field,
+                header: adaptable.api.columnApi.getFriendlyNameForColumnId(column.columnId),
+                dataType: mapDataType(column.dataType),
+                defaultEditable: editable,
+                valueGetter: (params) => {
+                    if (column.dataType === 'Boolean') {
+                        return params.data[column.columnId] ? 'True' : 'False';
+                    }
+                    else {
+                        return params.data[params.field];
+                    }
+                },
+            };
+            return acc;
+        }, {});
+        infiniteColumns['valid'] = {
+            header: 'Valid',
+            maxWidth: 100,
+            minWidth: 90,
+            align: 'center',
+            renderValue: (params) => {
+                const cellErrors = getRowErrors(props.errors, params.data[primaryKey]);
+                const successColor = UIHelper_1.default.getColorByMessageType('Success');
+                if (!cellErrors || cellErrors.length === 0) {
+                    return React.createElement(icons_1.Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
+                }
+                const errorsStr = cellErrors.map((e) => e.error).join(', ');
+                return (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: [errorsStr], MessageType: 'Error' }));
+            },
+        };
+        infiniteColumns['type'] = {
+            header: 'Type',
+            maxWidth: 100,
+            minWidth: 90,
+            renderValue: (params) => {
+                try {
+                    const isExistingRow = adaptable.api.gridApi.getRowNodeForPrimaryKey(params.data[primaryKey]);
+                    return isExistingRow ? 'Update' : 'New';
+                }
+                catch (error) {
+                    // empty
+                }
+                return React.createElement(React.Fragment, null);
+            },
+        };
+        return infiniteColumns;
+    }, [props.data]);
+    const getCellErrorStyle = (columnId, primaryKeyValue) => {
+        const cellError = getCellError(props.errors, primaryKeyValue, columnId);
+        if (!cellError) {
+            return {};
+        }
+        return {
+            border: 'var(--ab-Dataimport-validation-error__border)',
+        };
+    };
+    return (React.createElement(InfiniteTable_1.DataSource, { data: props.data, primaryKey: primaryKey, onDataMutations: (params) => {
+            const newRowData = [...props.data];
+            const mutationsList = (0, lodash_1.flatten)(Array.from(params.mutations.values()));
+            if (!mutationsList.length) {
+                return;
+            }
+            mutationsList.forEach((mutation) => {
+                const index = newRowData.findIndex((row) => row[primaryKey] === mutation.primaryKey);
+                if (index !== -1) {
+                    newRowData[index] = Object.assign(Object.assign({}, newRowData[index]), mutation.data);
+                }
+            });
+            props.onDataChange(newRowData);
+        } },
+        React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+                valid: 'end',
+                type: 'end',
+            }, columnTypes: {
+                default: {
+                    style: (params) => {
+                        return getCellErrorStyle(params.column.id, params.rowInfo.id);
+                    },
+                    minWidth: 100,
+                    defaultFlex: 1,
+                },
+            }, domProps: tableDOMProps, columns: columns })));
+};
+exports.DataPreview = DataPreview;

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const check_box_1 = tslib_1.__importDefault(require("../../../../components/icons/check-box"));
+const Tabs_1 = require("../../../../components/Tabs");
+const DataPreview_1 = require("./DataPreview");
+const ImportSection = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(check_box_1.default, null))))),
+        React.createElement(Tabs_1.Tabs, { flex: 1 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(DataPreview_1.DataPreview, { onDataChange: props.onDataChange, data: props.data, errors: props.errors, editable: false })))));
+};
+exports.ImportSection = ImportSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ImportFileSectionProps {
+    readFile: (data: File) => Promise<Record<string, unknown>[]>;
+    supportedFileFormats: string;
+    message: React.ReactNode;
+}
+export declare const ImportFileSection: React.FunctionComponent<ImportFileSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadFileSection.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportFileSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../../../../../components/FileDroppable/index"));
+const index_2 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
+const ImportFileSection = (props) => {
+    return (React.createElement(index_1.default, { loadingText: React.createElement(index_2.default, { mb: 2 }, "File loaded , file ready to be imported."), message: props.message, helpText: "Data Import", defaultText: "Click here to select a file to load, or drag it here", dragOverText: "Drop file here to start Data Import", height: "100%", fileAccept: props.supportedFileFormats, readFile: props.readFile }));
+};
+exports.ImportFileSection = ImportFileSection;

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

@@ -0,0 +1,13 @@
+import React, { ReactNode } from 'react';
+declare type UploadSectionProps = {
+    readFile: (data: File) => Promise<Record<string, unknown>[]>;
+    supportedFileFormats: string;
+    fileMessage: ReactNode;
+    onTextChange: (text: string) => void;
+    text?: string;
+    textMessage?: string;
+    importType: 'file' | 'text';
+    onImportTypeChange: (importType: 'file' | 'text') => void;
+};
+export declare const UploadSection: React.FC<UploadSectionProps>;
+export {};

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UploadSection = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const index_1 = tslib_1.__importDefault(require("../../../../../components/Radio/index"));
+const index_2 = require("../../../../../components/Tabs/index");
+const UploadFileSection_1 = require("./UploadFileSection");
+const UploadTextSection_1 = require("./UploadTextSection");
+const UploadSection = (props) => {
+    return (react_1.default.createElement(rebass_1.Flex, { p: 2, height: "100%", flexDirection: "column" },
+        react_1.default.createElement(index_2.Tabs, { mb: 2 },
+            react_1.default.createElement(index_2.Tabs.Tab, null, "Import Type"),
+            react_1.default.createElement(index_2.Tabs.Content, null,
+                react_1.default.createElement(rebass_1.Flex, { flexDirection: "column" },
+                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('file'), checked: props.importType === 'file' }, "File"),
+                    react_1.default.createElement(index_1.default, { onClick: () => props.onImportTypeChange('text'), checked: props.importType === 'text' }, "Text")))),
+        react_1.default.createElement(index_2.Tabs, { flex: 1 },
+            react_1.default.createElement(index_2.Tabs.Tab, null, props.importType === 'file' ? 'File Upload' : 'Text'),
+            react_1.default.createElement(index_2.Tabs.Content, null, props.importType === 'file' ? (react_1.default.createElement(UploadFileSection_1.ImportFileSection, { readFile: props.readFile, supportedFileFormats: props.supportedFileFormats, message: props.fileMessage })) : (react_1.default.createElement(UploadTextSection_1.ImportTextSection, { message: props.textMessage, text: props.text, onTextChange: props.onTextChange }))))));
+};
+exports.UploadSection = UploadSection;

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+interface ImportTextSectionProps {
+    text?: string;
+    onTextChange: (text: string) => void;
+    message?: string;
+}
+export declare const ImportTextSection: React.FunctionComponent<ImportTextSectionProps>;
+export {};

package/src/View/DataImport/DataImportWizard/sections/UploadSection/UploadTextSection.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ImportTextSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const index_1 = tslib_1.__importDefault(require("../../../../../components/HelpBlock/index"));
+const index_2 = tslib_1.__importDefault(require("../../../../../components/Textarea/index"));
+const ImportTextSection = (props) => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(index_2.default, { value: props.text, onChange: (event) => props.onTextChange(event.target.value), height: "100%" }),
+        props.message && React.createElement(index_1.default, null, props.message)));
+};
+exports.ImportTextSection = ImportTextSection;

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

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

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

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

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

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

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ValidationSection = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const CheckBox_1 = require("../../../../components/CheckBox");
+const FormLayout_1 = tslib_1.__importStar(require("../../../../components/FormLayout"));
+const Tabs_1 = require("../../../../components/Tabs");
+const DataPreview_1 = require("./DataPreview");
+const getRowErrors = (errors, primaryKeyValue) => {
+    if (!errors) {
+        return null;
+    }
+    if (!errors[primaryKeyValue]) {
+        return null;
+    }
+    return errors[primaryKeyValue];
+};
+const ValidationSection = (props) => {
+    return (React.createElement(rebass_1.Flex, { flexDirection: "column", p: 2, height: "100%" },
+        React.createElement(Tabs_1.Tabs, { mb: 2 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Import Options"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(FormLayout_1.default, null,
+                    React.createElement(FormLayout_1.FormRow, { label: "Exclude Invalid Rows" },
+                        React.createElement(CheckBox_1.CheckBox, { onChange: () => {
+                                props.onSkipInvalidRowsChange(!props.skipInvalidRows);
+                            }, checked: props.skipInvalidRows }))))),
+        React.createElement(Tabs_1.Tabs, { flex: 1 },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Preview"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(DataPreview_1.DataPreview, { data: props.data, errors: props.errors, editable: true, onDataChange: props.onDataChange })))));
+};
+exports.ValidationSection = ValidationSection;

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

@@ -0,0 +1,3 @@
+import { DataImportFileHandler } from '../../types';
+export declare const parseCSV: (content: string) => Record<string, unknown>[];
+export declare const systemFileHandlers: DataImportFileHandler<Record<string, unknown>>[];

package/src/View/DataImport/systemFileHandlers.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.systemFileHandlers = exports.parseCSV = void 0;
+const FileDroppable_1 = require("../../components/FileDroppable");
+const jsonHandler = {
+    fileExtension: '.json',
+    handleFile: (file) => (0, FileDroppable_1.readJSONFile)(file),
+};
+const parseCSV = (content) => {
+    const lines = content.split('\n');
+    const headers = lines[0].split(',');
+    const data = [];
+    if (lines.length <= 1) {
+        return null;
+    }
+    for (let i = 1; i < lines.length; i++) {
+        const values = lines[i].split(',');
+        if (values.length === headers.length) {
+            const item = {};
+            for (let j = 0; j < headers.length; j++) {
+                const value = values[j];
+                item[headers[j]] = isNaN(Number(value)) ? value : Number(value);
+            }
+            data.push(item);
+        }
+    }
+    return data;
+};
+exports.parseCSV = parseCSV;
+const csvFileHandler = {
+    fileExtension: '.csv',
+    handleFile: (file) => {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                var _a;
+                const content = (_a = event.target) === null || _a === void 0 ? void 0 : _a.result;
+                resolve((0, exports.parseCSV)(content));
+            };
+            reader.readAsText(file);
+        });
+    },
+};
+exports.systemFileHandlers = [jsonHandler, csvFileHandler];

package/src/View/FlashingCell/Wizard/FlashingCellWizard.js

@@ -22,7 +22,7 @@ const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection"
 const FlashingCellWizard = (props) => {
     const { api } = (0, AdaptableContext_1.useAdaptable)();
     const [flashingCell, setFlashingCell] = (0, react_1.useState)(() => {
-        var _a, _b;
+        var _a, _b, _c, _d;
         let flashingCell = props.data
             ? (0, Helper_1.cloneObject)(props.data)
             : ObjectFactory_1.default.CreateEmptyFlashingCellDefinition();
@@ -31,6 +31,11 @@ const FlashingCellWizard = (props) => {
         if (!flashingCell.Rule.BooleanExpression && !((_b = (_a = flashingCell.Rule) === null || _a === void 0 ? void 0 : _a.Predicates) === null || _b === void 0 ? void 0 : _b.length)) {
             flashingCell.Rule.BooleanExpression = '';
         }
+        if (((_c = props.popupParams) === null || _c === void 0 ? void 0 : _c.column) && ((_d = props.popupParams) === null || _d === void 0 ? void 0 : _d.action) === 'New') {
+            flashingCell.Scope = {
+                ColumnIds: [props.popupParams.column.columnId],
+            };
+        }
         return flashingCell;
     });
     const updateProperty = (propName) => {

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

@@ -20,6 +20,7 @@ const ObjectTagsWizardSection_1 = require("../../Wizard/ObjectTagsWizardSection"
 const Utilities_1 = require("../../Components/EntityRulesEditor/Utilities");
 const FormatColumnRuleWizardSection_1 = require("./FormatColumnRuleWizardSection");
 const constants_1 = require("./constants");
+const ObjectExtensions_1 = require("../../../Utilities/Extensions/ObjectExtensions");
 const adjustDisplayFormat = (formatColumn, api) => {
     formatColumn = Object.assign({}, formatColumn);
     const formatDataType = (0, FormatColumnFormatWizardSection_1.getFormatDisplayTypeForScope)(formatColumn.Scope, api);
@@ -76,6 +77,14 @@ function FormatColumnWizard(props) {
     }, []);
     const dispatch = (0, react_redux_1.useDispatch)();
     const handleFinish = () => {
+        var _a, _b;
+        if (((_a = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.DisplayFormat) === null || _a === void 0 ? void 0 : _a.Options) &&
+            (0, ObjectExtensions_1.isObjectEmpty)((_b = formatColumn === null || formatColumn === void 0 ? void 0 : formatColumn.DisplayFormat) === null || _b === void 0 ? void 0 : _b.Options)) {
+            delete formatColumn.DisplayFormat;
+        }
+        if (formatColumn.Style && (0, ObjectExtensions_1.isObjectEmpty)(formatColumn.Style)) {
+            delete formatColumn.Style;
+        }
         if (data) {
             dispatch(FormatColumnRedux.FormatColumnEdit(formatColumn));
         }

package/src/View/GridInfo/{AdaptableObjectsSummary.js → GridInfoPopup/AdaptableObjectsSummary.js}

@@ -5,8 +5,8 @@ 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 AdaptableContext_1 = require("../AdaptableContext");
-const AdaptableObjectList_1 = require("../Components/AdaptableObjectList");
+const AdaptableContext_1 = require("../../AdaptableContext");
+const AdaptableObjectList_1 = require("../../Components/AdaptableObjectList");
 const AdaptableObjectsSummary = () => {
     const state = (0, react_redux_1.useSelector)((state) => state);
     const adaptable = (0, AdaptableContext_1.useAdaptable)();

package/src/View/GridInfo/{AdaptableOptionsComponent.d.ts → GridInfoPopup/AdaptableOptionsComponent.d.ts}

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { AdaptableApi } from '../../Api/AdaptableApi';
+import { AdaptableApi } from '../../../Api/AdaptableApi';
 interface AdaptableOptionsComponentProps {
     api: AdaptableApi;
 }

package/src/View/GridInfo/{AdaptableOptionsComponent.js → GridInfoPopup/AdaptableOptionsComponent.js}

@@ -4,12 +4,12 @@ exports.AdaptableOptionsComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const react_1 = require("react");
-const PanelWithButton_1 = require("../Components/Panels/PanelWithButton");
-const ButtonMinimise_1 = require("../Components/Buttons/ButtonMinimise");
-const ButtonMaximise_1 = require("../Components/Buttons/ButtonMaximise");
-const AdaptableObjectCollection_1 = require("../Components/AdaptableObjectCollection");
-const AdaptableObjectRow_1 = require("../Components/AdaptableObjectRow");
-const AdaptablePopover_1 = require("../AdaptablePopover");
+const PanelWithButton_1 = require("../../Components/Panels/PanelWithButton");
+const ButtonMinimise_1 = require("../../Components/Buttons/ButtonMinimise");
+const ButtonMaximise_1 = require("../../Components/Buttons/ButtonMaximise");
+const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
+const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
+const AdaptablePopover_1 = require("../../AdaptablePopover");
 const rebass_1 = require("rebass");
 const AdaptableOptionsComponent = (props) => {
     const { api } = props;

package/src/View/GridInfo/GridInfoPopup/GridInfoPopup.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ModuleViewPopupProps } from '../../Components/SharedProps/ModuleViewPopupProps';
+interface GridInfoPopupProps extends ModuleViewPopupProps<any> {
+}
+export declare const GridInfoPopup: (props: GridInfoPopupProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridInfoPopup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const version_1 = tslib_1.__importDefault(require("../../../../version"));
+const Panel_1 = tslib_1.__importDefault(require("../../../components/Panel"));
+const Tabs_1 = require("../../../components/Tabs");
+const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
+const Helper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpers/Helper"));
+const AdaptablePopover_1 = require("../../AdaptablePopover");
+const AdaptableObjectCollection_1 = require("../../Components/AdaptableObjectCollection");
+const AdaptableObjectRow_1 = require("../../Components/AdaptableObjectRow");
+const PopupPanel_1 = require("../../Components/Popups/AdaptablePopup/PopupPanel");
+const AdaptableObjectsSummary_1 = require("./AdaptableObjectsSummary");
+const GridInfoPopup = (props) => {
+    const CreateGridSummaries = (colItems) => {
+        var _a;
+        const returnRows = [];
+        const calcColumns = props.api.calculatedColumnApi
+            .getCalculatedColumns()
+            .map((c) => c.ColumnId);
+        const actionColumns = props.api.actionColumnApi
+            .getActionColumns()
+            .map((ac) => ac.columnId);
+        const freeTextColumns = props.api.freeTextColumnApi
+            .getFreeTextColumns()
+            .map((c) => c.ColumnId);
+        const columnFilterDescription = props.api.filterApi.internalApi.columnFiltersToString(props.api.filterApi.getColumnFilters());
+        const sorts = ArrayExtensions_1.default.IsNotNullOrEmpty(props.api.gridApi.getColumnSorts())
+            ? props.api.gridApi.getColumnSorts().map((gs) => {
+                return props.api.columnApi.getFriendlyNameForColumnId(gs.ColumnId) + ': ' + gs.SortOrder;
+            })
+            : null;
+        const selectedRowInfo = props.api.gridApi.getSelectedRowInfo();
+        if ((_a = props.api.optionsApi.getUserInterfaceOptions()) === null || _a === void 0 ? void 0 : _a.showAdapTableVersion) {
+            returnRows.push(createReadOnlyColItem(colItems, 'AdapTable Version', version_1.default));
+        }
+        returnRows.push(createReadOnlyColItem(colItems, 'Sorted Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(sorts) ? sorts.join('; ') : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Column Filters', columnFilterDescription));
+        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()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Visible Columns', props.api.gridApi.getVisibleColumnCount()));
+        returnRows.push(createReadOnlyColItem(colItems, 'Calculated Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(calcColumns) ? calcColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Free Text Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(freeTextColumns) ? freeTextColumns : 'None'));
+        returnRows.push(createReadOnlyColItem(colItems, 'Action Columns', ArrayExtensions_1.default.IsNotNullOrEmpty(actionColumns) ? actionColumns : 'None'));
+        return returnRows;
+    };
+    const createReadOnlyColItem = (colItems, item1, item2, item3) => {
+        let rowColItems = Helper_1.default.cloneObject(colItems);
+        rowColItems[0].Content = item1;
+        rowColItems[1].Content = item2;
+        if (item3) {
+            let infoButton = React.createElement(AdaptablePopover_1.AdaptablePopover, { headerText: null, bodyText: [item3] });
+            rowColItems[2].Content = infoButton;
+        }
+        return rowColItems;
+    };
+    let propValueColItems = [
+        { Content: 'Property', Size: 5 },
+        { Content: 'Value', Size: 7 },
+    ];
+    let gridSummaries = CreateGridSummaries(propValueColItems).map((x, index) => {
+        return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
+    });
+    const baseClassName = 'ab-GridInfo';
+    return (React.createElement(PopupPanel_1.PopupPanel, { className: baseClassName, headerText: 'Grid Info', glyphicon: 'info' },
+        React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1, height: "100%" },
+            React.createElement(Panel_1.default, { flex: 1 },
+                React.createElement(Tabs_1.Tabs, null,
+                    React.createElement(Tabs_1.Tabs.Tab, null, "Info"),
+                    React.createElement(Tabs_1.Tabs.Tab, null, "Objects"),
+                    React.createElement(Tabs_1.Tabs.Content, null,
+                        React.createElement(AdaptableObjectCollection_1.AdaptableObjectCollection, { margin: 2, colItems: propValueColItems, items: gridSummaries })),
+                    React.createElement(Tabs_1.Tabs.Content, null,
+                        React.createElement(AdaptableObjectsSummary_1.AdaptableObjectsSummary, null)))))));
+};
+exports.GridInfoPopup = GridInfoPopup;

package/src/View/GridInfo/GridInfoPopup/index.d.ts

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

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

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

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

@@ -151,7 +151,7 @@ const AggregationsSection = (props) => {
         props.onChange(Object.assign(Object.assign({}, layout), { SuppressAggFuncInHeader: checked }));
     };
     return (React.createElement(Tabs_1.Tabs, { style: { height: '100%' } },
-        React.createElement(Tabs_1.Tabs.Tab, null, "Columns Aggregations"),
+        React.createElement(Tabs_1.Tabs.Tab, null, "Column Aggregations"),
         React.createElement(Tabs_1.Tabs.Content, null,
             React.createElement(rebass_1.Flex, null,
                 React.createElement(FormLayout_1.default, null,

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

@@ -163,7 +163,7 @@ const ColumnRow = (props) => {
         React.createElement(rebass_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header", mt: 1, mb: 1, onClick: () => setIsExpanded(!isExpanded) },
             React.createElement(rebass_1.Flex, { mr: 2, alignItems: "center" }, initialHeader),
             props.column.columnGroup && props.column.columnGroup.groupCount > 1 ? (React.createElement(rebass_1.Box, { className: "ab-Layout-Wizard__ColumnRow__Title", ml: 2, mr: 2, padding: 1 },
-                "Group: ",
+                "Column Group: ",
                 props.column.columnGroup.friendlyName)) : null,
             React.createElement(rebass_1.Flex, { mr: 2 },
                 React.createElement(ColumnLabels_1.ColumnLabels, { showTitle: false, sortable: props.column.sortable, filterable: props.column.filterable, pivotable: props.column.pivotable, moveable: props.column.moveable, groupable: props.column.groupable, aggregatable: props.column.aggregatable })),

package/src/View/Notes/NotesListing.d.ts

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