@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
132 lines (131 loc) • 6.99 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { CheckBox } from '../../../../components/CheckBox';
import { NewDropdownButton, } from '../../../../components/DropdownButton';
import HelpBlock from '../../../../components/HelpBlock';
import { Icon } from '../../../../components/icons';
import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
import { Tag } from '../../../../components/Tag';
import { useAdaptable } from '../../../AdaptableContext';
import { AdaptablePopover } from '../../../AdaptablePopover';
import UIHelper from '../../../UIHelper';
import { Box, Flex } from '../../../../components/Flex';
import { Card } from '../../../../components/Card';
const tableDOMProps = {
style: {
height: '100%',
minWidth: '10rem',
minHeight: 300,
flex: 1,
},
};
export const ColumnsSection = (props) => {
const { api } = useAdaptable();
const primaryKey = api.optionsApi.getPrimaryKey();
const allColumns = React.useMemo(() => {
return api.columnApi
.getUIAvailableColumns()
.filter((col) => col.field)
.map((column) => ({
label: column.friendlyName,
value: column,
}));
}, []);
const handleColumnMapChange = (newColMap) => {
props.onColumnsChange(props.columnsMap?.map((cm) => {
if (cm.field === newColMap.field) {
return { ...cm, ...newColMap };
}
return cm;
}));
};
const columns = React.useMemo(() => {
return {
include: {
field: 'include',
header: 'Included',
maxWidth: 110,
align: 'center',
render: (params) => {
return (_jsx(CheckBox, { disabled: params.data?.abColumn?.field === primaryKey, onChange: (checked) => {
handleColumnMapChange({
...params.data,
include: checked,
});
}, checked: Boolean(params.data.include) }));
},
},
field: {
field: 'field',
header: 'Data Field',
},
abColumn: {
header: 'AdapTable Column',
render: (params) => {
console.log(params.data, allColumns);
const columnItems = allColumns
.filter((c) => !props.columnsMap?.find((cm) => cm.abColumn === c.value))
.map((col) => ({
label: col.label,
onClick: () => {
handleColumnMapChange({
...params.data,
abColumn: col.value,
include: true,
});
},
}));
const items = params.data?.abColumn
? [
{
label: 'Clear',
onClick: () => {
handleColumnMapChange({
...params.data,
abColumn: null,
include: false,
});
},
},
{ separator: true },
...(columnItems.length
? columnItems
: [{ label: 'No other columns available', disabled: true }]),
]
: columnItems.length
? columnItems
: [{ label: 'No other columns available', disabled: true }];
return (_jsx(NewDropdownButton, { className: "twa:w-full", items: items, children: params.data?.abColumn?.friendlyName ??
params.data?.abColumn?.columnId ??
'Select Column' }));
},
},
valid: {
header: 'Valid',
maxWidth: 100,
minWidth: 90,
align: 'center',
render: (row) => {
if (!row.data.abColumn) {
return (_jsx(AdaptablePopover, { popoverMinWidth: 200, showEvent: "mouseenter", hideEvent: "mouseleave", headerText: 'Validation Error', bodyText: ['Select Column'], MessageType: 'Error' }));
}
const successColor = UIHelper.getColorByMessageType('Success');
return _jsx(Icon, { name: "check", style: { color: successColor, fill: 'currentColor' } });
},
},
};
}, [props.columnsMap]);
if (!props.columnsMap) {
return (_jsx(Box, { className: "twa:p-3", children: _jsxs(HelpBlock, { className: "twa:text-destructive", children: ["No data has been imported. Go to the ", _jsx(Tag, { children: "Upload" }), " step and provide data."] }) }));
}
return (_jsxs(Flex, { flexDirection: "column", className: "twa:h-full", children: [_jsxs(Flex, { flexDirection: "row", alignItems: "center", className: "twa:p-2 twa:gap-3 twa:border-b twa:mb-2 twa:border-b-foreground/20", children: [_jsx(Box, { className: "twa:text-5 twa:font-medium", children: "Columns" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:max-w-[520px]", children: "Map imported fields to AdapTable columns and choose which to include" })] }), _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:p-3", children: _jsxs(Card, { shadow: false, className: "twa:h-full twa:min-h-[300px]", children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Column Mapping" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Match each data field to an AdapTable column. The primary key column cannot be excluded." })] }), _jsx(Card.Body, { className: "twa:flex-1 twa:min-h-0", children: _jsx(DataSource, { data: props.columnsMap, primaryKey: 'field', children: _jsx(InfiniteTableGrid, { columnPinning: {
valid: 'end',
type: 'end',
}, columnTypes: {
default: {
minWidth: 100,
defaultFlex: 1,
},
}, domProps: tableDOMProps, columns: columns }) }) })] }) })] }));
};
ColumnsSection.displayName = 'ColumnsSection';