@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
127 lines (126 loc) • 9.88 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { NewScopeComponent } from '../../Components/NewScopeComponent';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { useAdaptable } from '../../AdaptableContext';
import { getColumnTypeFriendlyName } from '../../../AdaptableState/Common/AdaptableColumn';
import { isScopeColumnIds } from '../../../AdaptableState/Common/ColumnScope';
import { Box, Flex } from '../../../components/Flex';
import { CheckBox } from '../../../components/CheckBox';
import { ColumnTag, Tag } from '../../../components/Tag';
import { CollapsibleWizardCard, CollapsibleWizardValueSummary, getWizardAccordionSectionClassName, renderCompactColumnTags, useWizardCardAccordion, } from '../../Wizard/CollapsibleWizardCard';
import { cn } from '../../../lib/utils';
const FORMAT_COLUMN_ROW_KINDS = ['Data', 'Group', 'Summary', 'Total'];
const ROW_KIND_LABELS = {
Data: 'Data (leaf) Rows',
Group: 'Group Rows',
Summary: 'Summary Rows',
Total: 'Total Rows',
};
const ROW_KIND_EXCLUDE_KEY = {
Data: 'ExcludeDataRows',
Group: 'ExcludeGroupRows',
Summary: 'ExcludeSummaryRows',
Total: 'ExcludeTotalRows',
};
const isRowKindIncluded = (data, kind) => {
return !data.RowScope?.[ROW_KIND_EXCLUDE_KEY[kind]];
};
const collectIncludedRowKinds = (data) => {
return FORMAT_COLUMN_ROW_KINDS.filter((k) => isRowKindIncluded(data, k));
};
const isFormatColumnColumnsScopeConfigured = (scope, scopeApi) => {
if (scopeApi.scopeIsAll(scope)) {
return true;
}
if ('ColumnIds' in scope) {
return scope.ColumnIds.length > 0;
}
if ('DataTypes' in scope) {
return scope.DataTypes.length > 0;
}
return false;
};
const FormatColumnScopeSummaryContent = ({ data, }) => {
const adaptable = useAdaptable();
const scopeApi = adaptable.api.columnScopeApi;
const scope = data.Scope;
const columnsInScope = scopeApi.getColumnsInScope(scope);
const showRows = data.Target === 'cell';
const includedKinds = collectIncludedRowKinds(data);
const allKinds = includedKinds.length === 4;
return (_jsxs(Box, { className: "twa:flex twa:flex-col twa:gap-3", children: [_jsx(Box, { children: scopeApi.scopeIsAll(scope) ? (_jsxs(_Fragment, { children: ["Columns ", _jsx(Tag, { children: "All" })] })) : 'ColumnIds' in scope ? (_jsxs(_Fragment, { children: ["Columns", ' ', columnsInScope.length ? (columnsInScope.map((column) => (_jsx(ColumnTag, { className: "twa:mr-1", children: column.friendlyName }, column.columnId)))) : (_jsx(Tag, { children: "None" }))] })) : 'DataTypes' in scope ? (_jsxs(_Fragment, { children: ["Data Types", ' ', scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:mr-1", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" }))] })) : null }), showRows && (_jsxs(Box, { children: ["Rows", ' ', allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (includedKinds.map((k) => (_jsx(Tag, { className: "twa:mr-1", children: k }, k))))] }))] }));
};
export const renderFormatColumnScopeSummary = (data) => {
return _jsx(FormatColumnScopeSummaryContent, { data: data });
};
const FormatColumnColumnsScopeSummary = ({ data, }) => {
const adaptable = useAdaptable();
const scopeApi = adaptable.api.columnScopeApi;
const scope = data.Scope;
const columnsInScope = scopeApi.getColumnsInScope(scope);
if (scopeApi.scopeIsAll(scope)) {
return _jsx(CollapsibleWizardValueSummary, { value: _jsx(Tag, { children: "All columns in the row" }) });
}
if ('ColumnIds' in scope) {
return (_jsx(CollapsibleWizardValueSummary, { value: columnsInScope.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: columnsInScope.map((column) => (_jsx(ColumnTag, { children: column.friendlyName }, column.columnId))) })) : (_jsx(Tag, { children: "None" })) }));
}
if ('DataTypes' in scope) {
return (_jsx(CollapsibleWizardValueSummary, { value: scope.DataTypes.length ? (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: scope.DataTypes.map((dataType) => (_jsx(Tag, { children: getColumnTypeFriendlyName(dataType) }, dataType))) })) : (_jsx(Tag, { children: "None" })) }));
}
return null;
};
const FormatColumnRowsScopeSummary = ({ data, }) => {
const includedKinds = collectIncludedRowKinds(data);
const allKinds = includedKinds.length === 4;
return (_jsx(CollapsibleWizardValueSummary, { value: allKinds ? (_jsx(Tag, { children: "All" })) : includedKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { flexWrap: "wrap", className: "twa:gap-1", children: includedKinds.map((kind) => (_jsx(Tag, { children: ROW_KIND_LABELS[kind] }, kind))) })) }));
};
const FormatColumnRowScopePanel = ({ data, onRowKindChange, }) => (_jsx(Flex, { flexDirection: "column", className: "twa:items-start twa:px-1 twa:py-1", style: { rowGap: 'calc(var(--ab-base-space) * 2)' }, children: FORMAT_COLUMN_ROW_KINDS.map((kind) => (_jsx(CheckBox, { "data-name": `include-${kind.toLowerCase()}-rows-checkbox`, checked: isRowKindIncluded(data, kind), onChange: (checked) => onRowKindChange(kind, checked), children: ROW_KIND_LABELS[kind] }, kind))) }));
export const FormatColumnScopeWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const adaptable = useAdaptable();
const scopeApi = adaptable.api.columnScopeApi;
const handleScopeChange = (Scope) => {
const newData = { ...data, Scope };
const wholeRow = api.columnScopeApi.scopeIsAll(Scope);
if (newData.Rule?.Predicates?.length) {
if (wholeRow) {
delete newData.Rule.Predicates;
newData.Rule.BooleanExpression = '';
}
else {
const validPredicateIds = new Set(api.formatColumnApi.internalApi.getFormatColumnDefsForScope(Scope).map((def) => def.id));
newData.Rule = {
Predicates: newData.Rule.Predicates.filter((p) => validPredicateIds.has(p.PredicateId)).filter((predicate) => {
if (isScopeColumnIds(Scope) && Scope.ColumnIds.length > 1) {
return predicate.PredicateId !== 'In' && predicate.PredicateId !== 'NotIn';
}
return true;
}),
};
}
}
props.onChange(newData);
};
const handleRowKindChange = (kind, include) => {
props.onChange({
...data,
RowScope: {
...data.RowScope,
[ROW_KIND_EXCLUDE_KEY[kind]]: !include,
},
});
};
const showRowToggles = data.Target === 'cell';
const scope = data.Scope;
const columnsScopeConfigured = isFormatColumnColumnsScopeConfigured(scope, scopeApi);
const includedRowKinds = collectIncludedRowKinds(data);
const allRowKindsIncluded = includedRowKinds.length === 4;
const initialExpandedCardId = columnsScopeConfigured ? null : 'columns';
const { bindCard, hasExpandedCard, expandedFillsSpace } = useWizardCardAccordion(initialExpandedCardId, { fillExpandedCard: true });
const columnsCompactSummary = scopeApi.scopeIsAll(scope) ? (_jsx(Tag, { children: "All columns" })) : 'ColumnIds' in scope ? (renderCompactColumnTags(scope.ColumnIds, (columnId) => adaptable.api.columnApi.getFriendlyNameForColumnId(columnId), { emptyLabel: 'No columns' })) : 'DataTypes' in scope ? (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: scope.DataTypes.length ? (scope.DataTypes.map((dataType) => (_jsx(Tag, { className: "twa:shrink-0", children: getColumnTypeFriendlyName(dataType) }, dataType)))) : (_jsx(Tag, { children: "None" })) })) : null;
const rowsCompactSummary = allRowKindsIncluded ? (_jsx(Tag, { children: "All" })) : includedRowKinds.length === 0 ? (_jsx(Tag, { children: "None" })) : (_jsx(Flex, { alignItems: "center", className: "twa:gap-1 twa:min-w-0 twa:overflow-hidden", children: includedRowKinds.map((kind) => (_jsx(Tag, { className: "twa:shrink-0", children: kind }, kind))) }));
return (_jsxs(Box, { className: cn(getWizardAccordionSectionClassName(hasExpandedCard, expandedFillsSpace), 'twa:p-2'), children: [_jsx(CollapsibleWizardCard, { ...bindCard('columns', { fillAvailable: true }), surface: "panel", "data-name": "format-column-scope-columns", title: "Columns", help: "Which Columns the Format Column will be applied to", collapsedHelp: "Columns the Format Column applies to", compactSummary: columnsCompactSummary, summary: _jsx(FormatColumnColumnsScopeSummary, { data: data }), className: "twa:overflow-hidden twa:flex twa:flex-col", bodyClassName: "twa:min-h-[200px] twa:max-h-[420px] twa:overflow-hidden twa:flex twa:flex-col twa:!pt-0 twa:!pb-0 twa:px-1", children: _jsx(Box, { className: "twa:flex-1 twa:min-h-0 twa:overflow-auto twa:h-full", children: _jsx(NewScopeComponent, { descriptions: {
rowScope: 'Format all Columns in the Row',
columnScope: 'Select Columns to format',
}, scope: data.Scope, updateScope: handleScopeChange }) }) }), showRowToggles && (_jsx(CollapsibleWizardCard, { ...bindCard('rows'), surface: "panel", "data-name": "format-column-scope-rows", title: "Rows", help: "Which kinds of Rows the Format Column will be applied to", collapsedHelp: "Row kinds the Format Column applies to", compactSummary: rowsCompactSummary, summary: _jsx(FormatColumnRowsScopeSummary, { data: data }), children: _jsx(FormatColumnRowScopePanel, { data: data, onRowKindChange: handleRowKindChange }) }))] }));
};