d2coreui 23.0.13 → 23.0.15

package/components/grid/config/columnTransfer.tsx

@@ -0,0 +1,258 @@
+import React from "react";
+import {Transfer, Tree, TreeDataNode} from 'antd'
+import _head from "lodash/head";
+import i18n from "d2core/i18n/i18n"
+import DragSortingTable from "d2coreui/components/table/dragSortingTable";
+import {ColDef, ColumnState, GridApi} from "ag-grid-community";
+import {TableRowSelection} from "antd/es/table/interface";
+import {TransferItem} from "antd/lib/transfer";
+import difference from "lodash/difference";
+
+// Customize ColumnNode Transfer
+const isChecked = (selectedKeys: React.Key[], eventKey: string) => {
+    return selectedKeys.indexOf(eventKey) !== -1;
+};
+
+type TreeNodeType = TreeDataNode & ColumnNode;
+
+function generateTree(treeNodes: ColumnNode[] = [], checkedKeys: string[] = []): TreeNodeType[] {
+    return treeNodes.map(({children, ...props}): TreeNodeType => ({
+        ...props,
+        key: props.key as string,
+        disabled: checkedKeys.includes(props.key as string),
+        children: generateTree(children, checkedKeys),
+    }));
+}
+
+function generateSimpleTree(treeNodes: ColumnNode[] = []): TreeNodeType[] {
+    return treeNodes.map(({children, ...props}) => ({
+        ...props,
+        key: props.key as string,
+        children: generateSimpleTree(children)
+    }));
+}
+
+function getColumns(columnDefinitions: ColDef[]): ColumnNode[] {
+    // noinspection UnnecessaryLocalVariableJS
+    const columns = columnDefinitions.map((columnDef) => {
+        const id = columnDef.colId ? columnDef.colId : (columnDef.field ? columnDef.field : "");
+        const group = (columnDef as any).group;
+        return {
+            key: id,
+            title: columnDef.headerName ? columnDef.headerName : "unknown",
+            description: columnDef.headerTooltip,
+            group: group
+        };
+    });
+    return columns;
+}
+
+function getColumnsTree(columns: ColumnNode[], filteredItems: ColumnNode[] | undefined = undefined): ColumnNode[] {
+    const columnsDefinitionTree: ColumnNode[] = [];
+    columns.forEach((column) => {
+        const itemPresent = filteredItems ? (filteredItems.filter((filteredItem) => {
+            return filteredItem.key === column.key
+        }).length > 0) : true;
+        if (!itemPresent) {
+            return;
+        }
+        let parent = _head(columnsDefinitionTree.filter((parentNode) => parentNode.key === ("_group_" + column.group)));
+        if (!parent) {
+            parent = {key: "_group_" + column.group, title: column.group ? column.group : "unknown"};
+            columnsDefinitionTree.push(parent)
+        }
+        if (!parent.children) {
+            parent.children = [];
+        }
+        parent.children.push({key: column.key, title: column.title});
+    });
+    return columnsDefinitionTree;
+}
+
+interface ColumnNode extends TransferItem {
+    group?: string
+    children?: ColumnNode[]
+}
+
+export const enum ColumnTransferType {
+    SIMPLE = "simple",
+    FULL = "full"
+}
+
+export interface ColumnTransferProps {
+    columnDefinitions: ColDef[]
+    columnModel: ColumnState[]
+    gridApi: GridApi
+    type?: ColumnTransferType,
+    height?: number
+}
+
+export default class ColumnTransfer extends React.Component<ColumnTransferProps> {
+    public static defaultProps = {
+        type: ColumnTransferType.FULL
+    };
+
+    constructor(props: Readonly<ColumnTransferProps>) {
+        super(props);
+        this.onChange = this.onChange.bind(this);
+    }
+
+    onChange(_: React.Key[], direction: string, moveKeys: React.Key[]) {
+        moveKeys.forEach((columnKey) => {
+            if (typeof columnKey === "string") {
+                if (columnKey.indexOf("_group_") >= 0) {
+                    const columnsTree: ColumnNode[] = getColumnsTree(getColumns(this.props.columnDefinitions));
+                    const columnGroup: ColumnNode | undefined = _head(columnsTree.filter((columnGroup) => {
+                        return columnGroup.key === columnKey;
+                    }));
+                    if (columnGroup && columnGroup.children) {
+                        columnGroup.children.forEach((column) => {
+                            this.props.gridApi.setColumnsVisible([column.key as string], direction === "right");
+                        });
+                    }
+                } else {
+                    this.props.gridApi.setColumnsVisible([columnKey], direction === "right");
+                }
+            }
+        });
+    };
+
+    render() {
+        const {columnDefinitions, columnModel, gridApi, type, ...restProps} = this.props;
+        const columns = getColumns(columnDefinitions);
+        const visibleColumnIds = columnModel.filter((column) => !column.hide).map((column) => column.colId) as string[];
+        if (type === ColumnTransferType.SIMPLE) {
+            const columnsTree = getColumnsTree(columns);
+            return (<Tree<TreeNodeType>
+                blockNode
+                checkable
+                defaultExpandAll
+                checkedKeys={visibleColumnIds}
+                onCheck={(selectedKeys, {node,},) => {
+                    const selectedColumnId: string = (node as any).props?.eventKey ? (node as any).props.eventKey : "";
+                    const visible = Array.isArray(selectedKeys) && selectedKeys.indexOf(selectedColumnId) >= 0;
+                    if (selectedColumnId.indexOf("_group_") >= 0) {
+                        const columnGroup: ColumnNode | undefined = _head(columnsTree.filter((columnGroup) => {
+                            return columnGroup.key === selectedColumnId;
+                        }));
+                        if (columnGroup && columnGroup.children) {
+                            columnGroup.children.forEach((column) => {
+                                this.props.gridApi.setColumnsVisible([column.key as string], visible);
+                            });
+                        }
+                    } else {
+                        this.props.gridApi.setColumnsVisible([selectedColumnId], visible);
+                    }
+                }}
+                treeData={generateSimpleTree(columnsTree)}
+            />);
+        } else {
+            const titles = [<b>{i18n("Hidden Columns")}:</b>, <b>{i18n("Shown Columns")}:</b>] as unknown as string[]; // special hack to overcome typescript titles attribute in Transfer component could be also [ReactElement, ReactElement]
+            return (
+                <Transfer {...restProps}
+                          style={{height: this.props.height, minHeight: 100}}
+                          locale={{
+                              itemUnit: "",
+                              itemsUnit: "",
+                              notFoundContent: i18n('The column list is empty'),
+                              searchPlaceholder: i18n('Column Name')
+                          }}
+                          targetKeys={visibleColumnIds}
+                          dataSource={columns}
+                          className="tree-transfer"
+                          render={item => item.title ? item.title : null}
+                          showSelectAll={true}
+                          titles={titles}
+                          filterOption={(inputValue, item) => !!item.title && item.title.toLowerCase().indexOf(inputValue.toLowerCase()) > -1}
+                          showSearch
+                          onChange={this.onChange}>
+                    {({direction, onItemSelect, selectedKeys, filteredItems, onItemSelectAll}) => {
+                        if (direction === 'left') {
+                            const checkedKeys = [...selectedKeys];
+                            const columnsTree = getColumnsTree(columns, filteredItems);
+                            return (
+                                <div style={{
+                                    overflowY: "auto",
+                                    height: (this.props.height ? this.props.height : 100) - 100
+                                }}>
+                                    <Tree<TreeNodeType>
+                                        blockNode
+                                        checkable
+                                        defaultExpandAll
+                                        checkedKeys={checkedKeys}
+                                        onCheck={(_, {node,},) => {
+                                            if ((node as any).props?.eventKey) {
+                                                onItemSelect((node as any).props.eventKey, !isChecked(checkedKeys, (node as any).props.eventKey));
+                                            }
+                                        }}
+                                        onSelect={(_, {node},) => {
+                                            if ((node as any).props?.eventKey) {
+                                                onItemSelect((node as any).props.eventKey, !isChecked(checkedKeys, (node as any).props.eventKey));
+                                            }
+                                        }}
+                                        treeData={generateTree(columnsTree, visibleColumnIds)}
+                                    />
+                                </div>
+                            );
+                        } else {
+                            const rowSelection: TableRowSelection<ColumnNode> = {
+                                getCheckboxProps: item => {
+                                    return {disabled: !!item.disabled};
+                                },
+                                onSelectAll(selected, selectedRows) {
+                                    const treeSelectedKeys = selectedRows
+                                        .filter(item => !item.disabled)
+                                        .map(({key}) => key);
+                                    let diffKeys: any;
+                                    if (selected) {
+                                        diffKeys = difference(treeSelectedKeys, selectedKeys);
+                                    } else {
+                                        diffKeys = difference(selectedKeys, treeSelectedKeys);
+                                    }
+                                    onItemSelectAll(diffKeys, selected);
+                                },
+                                onSelect({key}, selected) {
+                                    onItemSelect(key as string, selected);
+                                },
+                                selectedRowKeys: selectedKeys,
+                            };
+
+                            return (
+                                <div style={{
+                                    overflowY: "auto",
+                                    height: (this.props.height ? this.props.height : 100) - 100
+                                }}>
+                                    <DragSortingTable<ColumnNode>
+                                        showHeader={false}
+                                        pagination={false}
+                                        rowSelection={rowSelection}
+                                        columns={[
+                                            {
+                                                dataIndex: 'title',
+                                                title: 'Name',
+                                            },
+                                        ]}
+                                        dataSource={filteredItems}
+                                        size="small"
+                                        onRow={({key, disabled: itemDisabled}) => ({
+                                            onClick: () => {
+                                                if (itemDisabled) {
+                                                    return;
+                                                }
+                                                onItemSelect(key as string, !selectedKeys.includes(key as string));
+                                            },
+                                        })}
+                                        onMoveRow={(column: ColumnNode, _: number, toIndex: number) => {
+                                            this.props.gridApi.moveColumns([column.key as string], toIndex);
+                                        }}
+                                    />
+                                </div>
+                            );
+                        }
+                    }}
+                </Transfer>
+            );
+        }
+    };
+}
+

package/components/grid/config/dataGridEditor.tsx

@@ -0,0 +1,328 @@
+import React from "react";
+import {DownloadOutlined, SaveOutlined, SettingOutlined} from "@ant-design/icons";
+import {Button, Collapse, CollapseProps, Drawer, InputNumber, notification, Space, Switch} from 'antd';
+import i18n from "d2core/i18n/i18n"
+import ColumnTransfer, {ColumnTransferType} from "./columnTransfer";
+import RowStylePicker from "./rowStylePicker";
+import cloneDeep from "lodash/cloneDeep"
+import {RowStyleRule} from "d2coreui/components/grid/cell/tableDefaultRowStyleRules";
+import {ColDef, ColumnState, GridApi} from "ag-grid-community";
+import {DataGridColDef} from "../dataGrid";
+import {ModalDialog, ModalDialogMode} from "d2coreui/components/modal/modalDialog";
+import {UndoIcon} from "d2coreui/components/icons/undoIcon";
+import PlatformSpecific from "d2coreui/components/platformSpecific";
+
+const REVERT_BUTTON_STYLE = {marginTop: -5};
+
+interface DataGridEditorProps {
+    dataGrid: any
+    gridApi: GridApi
+    columnDefinitions: DataGridColDef[]
+    columnModel: ColumnState[]
+
+    currentPageSize: number
+    paginationPageSize: number
+    paginationDefaultPageSize?: number
+    showMilliseconds: boolean
+    defaultShowMilliseconds: boolean
+    showYear: boolean
+    defaultShowYear: boolean
+
+    defaultRowStyleRules?: RowStyleRule[]
+    rowStyleRules: RowStyleRule[]
+
+    onChangeRowStyleRules?(rowStyleRules: RowStyleRule[]): void
+
+    visible: boolean
+
+    onTableConfigVisible(visible: boolean): void
+}
+
+interface DataGridEditorState {
+    targetKeys: string[]
+    initialPageSize: number
+    windowName: string
+    configurationChangesDisabled: boolean
+}
+
+export default class DataGridEditor extends React.Component<DataGridEditorProps, DataGridEditorState> {
+    constructor(props: Readonly<DataGridEditorProps>) {
+        super(props);
+        this.state = {
+            targetKeys: [],
+            initialPageSize: props.currentPageSize,
+            windowName: "",
+            configurationChangesDisabled: PlatformSpecific.INSTANCE.configurationChangesDisabled()
+        };
+        this.onChange = this.onChange.bind(this);
+    }
+
+    componentDidMount() {
+        this.setState({
+            initialPageSize: this.props.currentPageSize,
+            windowName: PlatformSpecific.INSTANCE.getCurrentWindowName()
+        });
+    }
+
+    onChange(targetKeys: string[]) {
+        this.setState({targetKeys});
+    };
+
+    render() {
+        return (
+            <Drawer
+                title={<div style={{width: "100%", paddingRight: 24}}>
+                    <SettingOutlined/> {i18n("Advanced Settings")}
+                </div>}
+                placement="right"
+                closable={true}
+                mask={true}
+                width={340}
+                onClose={() => {
+                    this.props.onTableConfigVisible(false);
+                }}
+                open={this.props.visible}
+                style={{borderTop: "1px solid #ddd"}}
+                styles={{
+                    body: {padding: 0},
+                    mask: {background: "transparent"}
+                }}
+            >
+                <Collapse defaultActiveKey={[]}
+                          bordered={false}
+                          items={[
+                              this.getWindowSettingsPanel(),
+                              this.renderTableGeneralSettingsPanel(),
+                              this.renderTableColumnSettingsPanel(),
+                              this.props.rowStyleRules && this.renderRowsPanel(),
+                          ]} />
+            </Drawer>
+        );
+    }
+
+    getWindowSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
+        return {
+            key: "window-settings",
+            label: <span style={{fontWeight: 500}}>{i18n("Window") + " \"" + this.state.windowName + " \""}</span>,
+            extra: (
+                <Button
+                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>} key="revert"
+                    style={REVERT_BUTTON_STYLE}
+                    danger
+                    ghost
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.nativeEvent.stopImmediatePropagation();
+                        PlatformSpecific.INSTANCE.reloadPageInPredefinedState();
+                    }}/>
+            ),
+            children: (
+                <>
+                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
+                        <Button type="primary" style={{width: "100%"}}
+                                disabled={this.state.configurationChangesDisabled}
+                                title={i18n("Save current window configuration for current user")}
+                                onClick={() => {
+                                    ModalDialog.confirm({
+                                        mode: ModalDialogMode.YES_NO,
+                                        title: <span
+                                            style={{whiteSpace: "nowrap"}}>{i18n("Save Window Configuration") + "?"}</span>,
+                                        width: 400,
+                                        onOk: () => {
+                                            PlatformSpecific.INSTANCE.saveWindowConfiguration();
+                                            notification['success']({
+                                                message: i18n("Window configuration saved successfully"),
+                                            })
+                                        },
+                                    });
+
+                                }}>
+                            <SaveOutlined/>{i18n("Save Window Configuration")}
+                        </Button>
+                    </div>
+                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
+                        <Button style={{width: "100%"}}
+                                title={i18n("Export current window configuration to file")}
+                                onClick={() => {
+                                    PlatformSpecific.INSTANCE.exportWindowConfiguration();
+                                }}>
+                            <DownloadOutlined/>{i18n("Export Window Configuration")}
+                        </Button>
+                    </div>
+                    <div style={{paddingRight: 16, paddingLeft: 16, paddingBottom: 8}}>
+                        <Button danger ghost
+                                style={{width: "100%"}}
+                                onClick={() => {
+                                    PlatformSpecific.INSTANCE.reloadPageInFactoryState();
+                                }}>
+                            <UndoIcon/>{i18n("Revert to factory configuration")}
+                        </Button>
+                    </div>
+                </>
+            )
+        };
+    }
+
+    renderTableGeneralSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
+        const paginationEnabled = this.props.paginationPageSize >= 0;
+        const automaticPagination = this.props.paginationPageSize === 0;
+        return {
+            key: "general",
+            label: <span style={{fontWeight: 500}}>{i18n("Table - General Settings")}</span>,
+            extra: (
+                <Button
+                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
+                    key="revert"
+                    style={REVERT_BUTTON_STYLE}
+                    danger
+                    ghost
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.nativeEvent.stopImmediatePropagation();
+                        if (this.props.paginationDefaultPageSize !== undefined) {
+                            this.props.dataGrid.changePagination(this.props.paginationDefaultPageSize);
+                        } else {
+                            this.props.dataGrid.changePagination(0);
+                        }
+                        this.props.dataGrid.showMilliseconds(this.props.defaultShowMilliseconds);
+                        this.props.dataGrid.showYear(this.props.defaultShowYear);
+                    }}/>
+            ),
+            children: (
+                <Space direction="vertical" style={{width: "100%"}}>
+                    <div style={{width: "100%"}}>
+                        <span>{i18n("Pagination")}</span>
+                        <span style={{float: "right"}}>
+                            <Switch checkedChildren={i18n("Enabled") + " "}
+                                    unCheckedChildren={i18n(" " + i18n("Disabled"))}
+                                    checked={paginationEnabled}
+                                    onChange={(checked) => {
+                                        this.props.dataGrid.changePagination(checked ? 0 : -1);
+                                    }}/>
+                        </span>
+                    </div>
+                    <div style={{width: "100%"}}>
+                        <span>{i18n("Page Size")}</span>
+                        <span style={{float: "right"}}>
+                            <InputNumber
+                                size="small"
+                                style={{
+                                    width: 70,
+                                    display: !paginationEnabled || automaticPagination ? "none" : "",
+                                    marginLeft: 8
+                                }}
+                                placeholder="size"
+                                className="custom"
+                                value={this.props.currentPageSize}
+                                onChange={(pageSize) => {
+                                    if (pageSize) {
+                                        this.props.dataGrid.changePagination(pageSize);
+                                    }
+                                }}
+                            />
+                           <Switch disabled={!paginationEnabled}
+                                   style={{minWidth: 100}}
+                                   checkedChildren={i18n("Automatic") + " "}
+                                   unCheckedChildren={i18n(" " + i18n("Fixed"))}
+                                   checked={!paginationEnabled || automaticPagination}
+                                   onChange={(checked) => {
+                                       this.props.dataGrid.changePagination(checked ? 0 : (this.state.initialPageSize > 1 ? this.state.initialPageSize : 20));
+                                   }}/>
+                        </span>
+                    </div>
+                    <div style={{width: "100%"}}>
+                        <span>{i18n("Show time with year")}</span>
+                        <span style={{float: "right"}}>
+                            <Switch checkedChildren={i18n("Yes") + " "}
+                                    unCheckedChildren={i18n(" " + i18n("No"))}
+                                    checked={this.props.showYear}
+                                    onChange={(checked) => {
+                                        this.props.dataGrid.showYear(checked);
+                                    }}/>
+                        </span>
+                    </div>
+                    <div style={{width: "100%"}}>
+                        <span>{i18n("Show time with milliseconds")}</span>
+                        <span style={{float: "right"}}>
+                            <Switch checkedChildren={i18n("Yes") + " "}
+                                    unCheckedChildren={i18n(" " + i18n("No"))}
+                                    checked={this.props.showMilliseconds}
+                                    onChange={(checked) => {
+                                        this.props.dataGrid.showMilliseconds(checked);
+                                    }}/>
+                        </span>
+                    </div>
+                </Space>
+            )
+        };
+    }
+
+    renderTableColumnSettingsPanel(): NonNullable<CollapseProps['items']>[number] {
+        return {
+            key: "columns",
+            label: <span style={{fontWeight: 500}}>{i18n("Table - Columns")}</span>,
+            extra: (
+                <Button
+                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
+                    key="revert"
+                    style={REVERT_BUTTON_STYLE}
+                    danger
+                    ghost
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.nativeEvent.stopImmediatePropagation();
+                        this.props.gridApi.resetColumnState();
+                    }}/>
+            ),
+            children: (
+                <ColumnTransfer
+                    columnDefinitions={this.props.columnDefinitions as ColDef[]}
+                    columnModel={this.props.columnModel}
+                    type={ColumnTransferType.SIMPLE}
+                    gridApi={this.props.gridApi}
+                />
+            )
+        };
+    }
+
+    renderRowsPanel(): NonNullable<CollapseProps['items']>[number] {
+        return {
+            key: "rows",
+            label: <span style={{fontWeight: 500}}>{i18n("Table - Rows Styling")}</span>,
+            extra: (
+                <Button
+                    title={i18n("Revert configuration to predefined state")} icon={<UndoIcon/>}
+                    key="revert"
+                    style={REVERT_BUTTON_STYLE}
+                    danger
+                    ghost
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        e.nativeEvent.stopImmediatePropagation();
+                        if (this.props.defaultRowStyleRules) {
+                            const rowStyleRules = cloneDeep(this.props.defaultRowStyleRules);
+                            if (this.props.onChangeRowStyleRules) {
+                                this.props.onChangeRowStyleRules(rowStyleRules);
+                            }
+                        }
+                    }}/>
+            ),
+            children: (
+                <div>
+                    {this.props.rowStyleRules.map((rowStyleRule, index) => this.renderRowStyleRule(rowStyleRule, index))}
+                </div>
+            )
+        };
+    }
+
+    renderRowStyleRule(rowStyleRule: RowStyleRule, index: number) {
+        return (
+            <RowStylePicker key={"row-style-picker-" + index} rowStyleRule={rowStyleRule} onChange={(rowStyleRule) => {
+                this.props.rowStyleRules[index] = rowStyleRule;
+                if (this.props.onChangeRowStyleRules) {
+                    this.props.onChangeRowStyleRules(this.props.rowStyleRules);
+                }
+            }}/>
+        );
+    }
+}

package/components/grid/config/rowHeightCalculator.tsx

@@ -0,0 +1,29 @@
+import {RGBColor} from "react-color";
+
+export const GRID_DEFAULT_ROW_HEIGHT_DELTA = 8;
+
+export const GRID_DEFAULT_FONT_SIZE = 12;
+
+export const calculateRowHeight = (fontSize: string | number | RGBColor | null, rowHeightDelta: string | number | RGBColor | null) => {
+    const currentFontSize: number = fontSize && typeof fontSize === "number" ? fontSize : GRID_DEFAULT_FONT_SIZE;
+    const currentRowHeightDelta: number = rowHeightDelta && typeof rowHeightDelta === "number" ? rowHeightDelta : GRID_DEFAULT_ROW_HEIGHT_DELTA;
+    return currentFontSize + 2 * currentRowHeightDelta;
+}
+
+export const calculateLineHeight = (fontSize: string | number | RGBColor | null, rowHeightDelta: string | number | RGBColor | null) => {
+    return calculateRowHeight(fontSize, rowHeightDelta) - 2;
+}
+
+export const getLineHeight = (rowHeight: number) => {
+    return rowHeight - 2;
+}
+
+export const getFontSize = (fontSize: string | number | RGBColor) => {
+    return fontSize && typeof fontSize === "number" ? fontSize : GRID_DEFAULT_FONT_SIZE;
+}
+
+export const getRowHeightDelta = (rowHeightDelta: string | number | RGBColor) => {
+    return rowHeightDelta && typeof rowHeightDelta === "number" ? rowHeightDelta : GRID_DEFAULT_ROW_HEIGHT_DELTA;
+}
+
+