@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
321 lines (320 loc) • 16.9 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { OnePageAdaptableWizard, OnePageWizardSummary, } from '../../Wizard/OnePageAdaptableWizard';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import * as StyledColumnRedux from '../../../Redux/ActionsReducers/StyledColumnRedux';
import { getStyledColumnWizardTitle, renderStyledColumnSettingsSummary, StyledColumnWizardTypeSection, } from './StyledColumnWizardTypeSection';
import { isValidStyledColumnScope, renderStyledColumnScopeSummary, StyledColumnWizardScopeSection, } from './StyledColumnWizardScopeSection';
import { renderStyledColumnRangesSummary, renderStyledColumnStyleSummary, StyledColumnWizardRangesSection, StyledColumnWizardStyleSection, } from './StyledColumnWizardStyleSection';
import { renderStyledColumnGradientStyleSummary, StyledColumnWizardGradientSection, } from './StyledColumnWizardGradientSection';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { isValidSparklineSettings, renderSparklineSummary, StyledColumnSparklineSettingsSection, } from './StyledColumnSparklineSettingsSection';
import { renderStyledColumnBulletRangesSummary, renderStyledColumnBulletStyleSummary, StyledColumnWizardBulletSection, } from './StyledColumnWizardBulletSection';
import { isValidRatingStyle, renderStyledColumnRatingSummary, StyledColumnWizardRatingSection, } from './StyledColumnWizardRatingSection';
import { isValidRangeBarBounds, renderStyledColumnRangeBarDisplayStepSummary, renderStyledColumnRangeBarRangeStepSummary, StyledColumnWizardRangeBarSection, } from './StyledColumnWizardRangeBarSection';
import { isValidIconStyleMappings, renderStyledColumnIconStyleSummary, renderStyledColumnIconMappingsSummary, StyledColumnWizardIconSection, } from './StyledColumnWizardIconSection';
import { ObjectTagsWizardSection, renderObjectTagsSummary, } from '../../Wizard/ObjectTagsWizardSection';
import { renderBadgeStyleSummary, renderBadgeSummary, StyledColumnBadgeStyleSection, StyledColumnBadgeSection, } from './StyledColumnBadgeSection';
import { Box } from '../../../components/Flex';
import { StyledColumnGradientPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnGradientPreview';
import { StyledColumnPercentBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnPercentBarPreview';
import { StyledColumnBadgePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBadgePreview';
import { StyledColumnRatingPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRatingPreview';
import { StyledColumnIconPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnIconPreview';
import { StyledColumnBulletPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnBulletPreview';
import { StyledColumnRangeBarPreview } from './StyledColumnWizardStyleSection/Components/StyledColumnRangeBarPreview';
import { StyledColumnSparklinePreview } from './StyledColumnWizardStyleSection/Components/StyledColumnSparklinePreview';
const computeDefaultStyledColumnName = (sc) => {
let typeKey = '';
if (sc.GradientStyle)
typeKey = 'Gradient';
else if (sc.PercentBarStyle)
typeKey = 'PercentBar';
else if (sc.SparklineStyle)
typeKey = 'Sparkline';
else if (sc.BadgeStyle)
typeKey = 'Badge';
else if (sc.BulletChartStyle)
typeKey = 'BulletChart';
else if (sc.RatingStyle)
typeKey = 'Rating';
else if (sc.RangeBarStyle)
typeKey = 'RangeBar';
else if (sc.IconStyle)
typeKey = 'Icon';
if (!typeKey) {
return '';
}
return `${typeKey}-${sc.ColumnId || 'column'}`;
};
export const getStyledColumnEditDefaultSectionName = (styledColumn) => {
if (styledColumn.BadgeStyle) {
return 'Badges';
}
if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
return 'Ranges';
}
if (styledColumn.BulletChartStyle) {
return 'Ranges';
}
if (styledColumn.RangeBarStyle) {
return 'Style';
}
if (styledColumn.IconStyle) {
return 'Mappings';
}
return 'Style';
};
export const StyledColumnWizard = (props) => {
const data = props.data ?? props.popupParams?.value;
const popupDefaultCurrentSectionName = props?.popupParams?.config?.defaultCurrentSectionName ?? undefined;
const hasExistingData = Boolean(data);
const isEdit = hasExistingData && props.popupParams?.action !== 'New';
const defaultCurrentSectionName = props.defaultCurrentSectionName ??
popupDefaultCurrentSectionName ??
(isEdit ? getStyledColumnEditDefaultSectionName(data) : undefined);
const allStyledColumns = useSelector((state) => state.StyledColumn?.StyledColumns ?? []);
const [styledColumn, setStyledColumn] = useState(() => {
if (data) {
const cloned = cloneObject(data);
const isNew = props.popupParams?.action === 'New';
if (!isNew && !cloned.Name) {
cloned.Name = computeDefaultStyledColumnName(cloned);
}
return cloned;
}
const newData = ObjectFactory.CreateEmptyStyledColumn();
newData.BadgeStyle = {
Badges: [ObjectFactory.CreateDefaultStyledColumnBadge()],
};
if (props.popupParams?.column && props.popupParams?.action === 'New') {
newData.ColumnId = props.popupParams.column.columnId;
if (props.popupParams.column.dataType.includes('Array')) {
newData.SparklineStyle = {};
delete newData.BadgeStyle;
}
}
return newData;
});
const dispatch = useDispatch();
const handleFinish = () => {
if (props?.popupParams?.action === 'New' || !data) {
dispatch(StyledColumnRedux.StyledColumnAdd(styledColumn));
}
else {
dispatch(StyledColumnRedux.StyledColumnEdit(styledColumn));
}
props.onFinishWizard(styledColumn);
};
const specificSteps = [];
if (styledColumn.SparklineStyle) {
specificSteps.push({
title: 'Style',
details: 'Configure the Sparkline chart type, theming, axis and tooltip',
isValid: () => isValidSparklineSettings(styledColumn),
renderSummary: () => renderSparklineSummary(styledColumn),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnSparklineSettingsSection, { onChange: setStyledColumn }) })),
});
}
else if (styledColumn.GradientStyle || styledColumn.PercentBarStyle) {
specificSteps.push({
details: 'Select type of Cell Range and configure contents',
renderSummary: renderStyledColumnRangesSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangesSection, { onChange: setStyledColumn }) })),
title: 'Ranges',
isValid: () => {
const columnComparison = styledColumn.GradientStyle?.ColumnComparison ??
styledColumn.PercentBarStyle?.ColumnComparison;
if (columnComparison) {
return columnComparison.MaxValue == undefined && columnComparison.MinValue == undefined
? 'Define Min and Max Values for the Column Comparison'
: columnComparison.MaxValue == undefined
? 'Define a Max Value for the Column Comparison'
: columnComparison.MinValue == undefined
? 'Define a Min Value for the Column Comparison'
: true;
}
const gs = styledColumn.GradientStyle;
if (gs) {
const hasCellRanges = !!gs.CellRanges?.length;
const hasZeroCentred = !!gs.ZeroCentred;
if (!hasCellRanges && !hasZeroCentred) {
return 'Define cell ranges, zero-centred colours, or a column comparison';
}
}
return true;
},
});
if (styledColumn.PercentBarStyle) {
specificSteps.push({
details: 'Configure the Percent Bar appearance',
renderSummary: renderStyledColumnStyleSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardStyleSection, { onChange: setStyledColumn }) })),
title: 'Style',
});
}
if (styledColumn.GradientStyle) {
specificSteps.push({
details: 'Set the Style for the Gradient',
renderSummary: renderStyledColumnGradientStyleSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardGradientSection, { onChange: setStyledColumn }) })),
title: 'Style',
});
}
}
else if (styledColumn.BulletChartStyle) {
specificSteps.push({
title: 'Ranges',
details: 'Create Cell Ranges',
renderSummary: renderStyledColumnBulletRangesSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "ranges", onChange: setStyledColumn }) })),
isValid: () => {
const bs = styledColumn.BulletChartStyle;
if (!bs?.CellRanges?.length) {
return 'Define at least one band for the qualitative scale';
}
return true;
},
});
specificSteps.push({
title: 'Style',
details: 'Target, bar appearance, cell text, tooltip, background and font',
renderSummary: renderStyledColumnBulletStyleSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardBulletSection, { variant: "style", onChange: setStyledColumn }) })),
isValid: () => true,
});
}
else if (styledColumn.RatingStyle) {
specificSteps.push({
title: 'Style',
details: 'Configure the Icon, Text and Cell styles',
isValid: () => isValidRatingStyle(styledColumn),
renderSummary: renderStyledColumnRatingSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRatingSection, { onChange: setStyledColumn }) })),
});
}
else if (styledColumn.RangeBarStyle) {
specificSteps.push({
title: 'Style',
details: 'Set Bounds and optional Ranges',
isValid: () => isValidRangeBarBounds(styledColumn),
renderSummary: renderStyledColumnRangeBarRangeStepSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "range", onChange: setStyledColumn }) })),
});
specificSteps.push({
title: 'Display',
details: 'Configure the Display for the Range Bar',
isValid: () => true,
renderSummary: renderStyledColumnRangeBarDisplayStepSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardRangeBarSection, { variant: "appearance", onChange: setStyledColumn }) })),
});
}
else if (styledColumn.IconStyle) {
specificSteps.push({
title: 'Mappings',
details: 'Select a preset or define key → icon mappings',
isValid: () => isValidIconStyleMappings(styledColumn),
renderSummary: renderStyledColumnIconMappingsSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "mappings", onChange: setStyledColumn }) })),
});
specificSteps.push({
title: 'Style',
details: 'Set Styles for sizing, cell text, tooltips, font and cell',
isValid: () => true,
renderSummary: renderStyledColumnIconStyleSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnWizardIconSection, { variant: "style", onChange: setStyledColumn }) })),
});
}
else if (styledColumn.BadgeStyle) {
specificSteps.push({
title: 'Badges',
details: 'Create Badge(s) and apply Styles',
isValid: () => {
if (styledColumn.BadgeStyle.Badges?.length === 0) {
return 'Define at least one Badge';
}
const badgesWithNoRules = styledColumn.BadgeStyle.Badges.filter((b) => b.Expression == undefined && b.Predicate == undefined);
if (badgesWithNoRules.length > 1) {
return 'Only one Badge can have no Rule';
}
return true;
},
renderSummary: renderBadgeSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeSection, { onChange: setStyledColumn }) })),
});
specificSteps.push({
title: 'Style',
details: 'Set Cell Density and Cell Style',
renderSummary: renderBadgeStyleSummary,
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(StyledColumnBadgeStyleSection, { onChange: setStyledColumn }) })),
});
}
let headerPreview = null;
if (styledColumn.GradientStyle) {
headerPreview = _jsx(StyledColumnGradientPreview, { data: styledColumn });
}
else if (styledColumn.PercentBarStyle) {
headerPreview = _jsx(StyledColumnPercentBarPreview, { data: styledColumn });
}
else if (styledColumn.BadgeStyle) {
headerPreview = _jsx(StyledColumnBadgePreview, { data: styledColumn });
}
else if (styledColumn.RatingStyle) {
headerPreview = _jsx(StyledColumnRatingPreview, { data: styledColumn });
}
else if (styledColumn.IconStyle) {
headerPreview = _jsx(StyledColumnIconPreview, { data: styledColumn });
}
else if (styledColumn.BulletChartStyle) {
headerPreview = _jsx(StyledColumnBulletPreview, { data: styledColumn });
}
else if (styledColumn.RangeBarStyle) {
headerPreview = _jsx(StyledColumnRangeBarPreview, { data: styledColumn });
}
else if (styledColumn.SparklineStyle) {
headerPreview = _jsx(StyledColumnSparklinePreview, { data: styledColumn });
}
return (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: getStyledColumnWizardTitle(styledColumn), data: styledColumn, headerPreview: headerPreview, onFinish: handleFinish, onHide: props.onCloseWizard, sections: [
{
details: 'Enter a Name and select a Styled Column Type',
isValid: (data) => {
if (!data.Name) {
return 'Styled Column Name cannot be blank';
}
if (allStyledColumns.some((sc) => sc.Name === data.Name && sc.Uuid !== data.Uuid)) {
return 'A Styled Column already exists with that name';
}
return true;
},
renderSummary: renderStyledColumnSettingsSummary,
render: () => {
return _jsx(StyledColumnWizardTypeSection, { onChange: setStyledColumn });
},
title: 'Settings',
},
{
isValid: isValidStyledColumnScope,
renderSummary: renderStyledColumnScopeSummary,
details: 'Select the Column and Rows where Style should render',
render: () => (_jsx(StyledColumnWizardScopeSection, { isNew: props.isNew, onChange: setStyledColumn })),
title: 'Scope',
},
...specificSteps,
{
details: 'Select Format Column Tags',
title: 'Tags',
isVisible: (_, api) => api.internalApi.shouldDisplayTagSections(),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(ObjectTagsWizardSection, { onChange: setStyledColumn }) })),
renderSummary: renderObjectTagsSummary,
},
'-',
{
title: 'Summary',
details: 'Review your Styled Column',
render: () => {
return (_jsx(Box, { className: "twa:p-2 twa:flex twa:flex-col twa:gap-3", children: _jsx(OnePageWizardSummary, {}) }));
},
},
] }));
};