@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
276 lines (275 loc) • 16.8 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.LayoutWizard = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const LayoutRedux = tslib_1.__importStar(require("../../../Redux/ActionsReducers/LayoutRedux"));
const OnePageAdaptableWizard_1 = require("../../Wizard/OnePageAdaptableWizard");
const ObjectFactory_1 = tslib_1.__importDefault(require("../../../Utilities/ObjectFactory"));
const Helper_1 = require("../../../Utilities/Helpers/Helper");
const SettingsSection_1 = require("./sections/SettingsSection");
const rebass_1 = require("rebass");
const AdaptableContext_1 = require("../../AdaptableContext");
const react_redux_1 = require("react-redux");
const ColumnsSection_1 = require("./sections/ColumnsSection");
const PivotColumnsSection_1 = require("./sections/PivotColumnsSection");
const RowGroupingSection_1 = require("./sections/RowGroupingSection");
const AggregationsSection_1 = require("./sections/AggregationsSection");
const SortSection_1 = require("./sections/SortSection");
const FilterSection_1 = require("./sections/FilterSection");
const GridFilterSection_1 = require("./sections/GridFilterSection");
const RowSummarySection_1 = require("./sections/RowSummarySection");
const RowSummary_1 = require("../../../AdaptableState/Common/RowSummary");
const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
const PivotAggregationsSection_1 = require("./sections/PivotAggregationsSection");
const LayoutWizard = (props) => {
const dispatch = (0, react_redux_1.useDispatch)();
const adaptable = (0, AdaptableContext_1.useAdaptable)();
const allLayouts = adaptable.api.layoutApi.getLayouts();
const initialLayout = props.data ?? props.popupParams?.value;
const [layout, setLayout] = React.useState(() => {
let preparedLayout = null;
if (initialLayout) {
preparedLayout = (0, Helper_1.cloneObject)(initialLayout);
if (props?.popupParams?.action === 'Clone') {
preparedLayout.Name = '';
delete preparedLayout.Uuid;
}
}
else {
const shouldCreatePivot = props.popupParams?.config?.layoutType === 'pivot' ||
props.abObjectType?.name?.toLowerCase().includes('pivot') ||
false;
preparedLayout = shouldCreatePivot
? ObjectFactory_1.default.CreateEmptyPivotLayout({ Name: '' })
: ObjectFactory_1.default.CreateEmptyLayout({ Name: '' });
}
if (preparedLayout.SuppressAggFuncInHeader === undefined) {
preparedLayout.SuppressAggFuncInHeader =
!!adaptable.api.agGridApi.getGridOption('suppressAggFuncInHeader');
}
return preparedLayout;
});
const handleFinish = () => {
let action = props?.popupParams?.action;
if (!action) {
action = initialLayout ? 'Edit' : 'New';
}
switch (action) {
case 'Edit':
const currentLayout = adaptable.api.layoutApi.getCurrentLayout();
dispatch(LayoutRedux.LayoutSave(layout));
if (currentLayout.Uuid === layout.Uuid) {
dispatch(LayoutRedux.LayoutSelect(layout.Name));
}
break;
case 'Clone':
const clonedLayout = { ...layout };
delete clonedLayout.Uuid;
dispatch(LayoutRedux.LayoutAdd(clonedLayout));
dispatch(LayoutRedux.LayoutSelect(clonedLayout.Name));
break;
case 'New':
dispatch(LayoutRedux.LayoutAdd(layout));
dispatch(LayoutRedux.LayoutSelect(layout.Name));
}
props.onFinishWizard(layout);
};
const layoutSupportedFeatures = adaptable.api.layoutApi.internalApi.getLayoutSupportedFeatures();
return (0, isPivotLayout_1.isPivotLayout)(layout) ? (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
{
title: 'Settings',
details: 'Configure Pivot Layout',
isValid: () => {
if (!layout.Name) {
return 'Pivot Layout Name cannot be blank';
}
if (allLayouts.some((layoutItem) => layoutItem.Name === layout.Name && layoutItem.Uuid !== layout.Uuid)) {
return 'A Pivot Layout already exists with that name';
}
return true;
},
renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Pivot Row Groups',
isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
details: 'Configure Pivot Row Grouping',
renderSummary: () => React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(PivotRowGroupingSection_1.PivotRowGroupingSection, { onChange: (newLayout) => {
setLayout(newLayout);
} }))),
},
{
title: 'Pivot Columns',
details: 'Select Pivot Columns',
isVisible: () => layoutSupportedFeatures.PivotColumns,
renderSummary: () => React.createElement(PivotColumnsSection_1.PivotColumnsSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(PivotColumnsSection_1.PivotColumnsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Pivot Aggregations',
isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
details: 'Select Pivot Column Aggregations',
renderSummary: () => React.createElement(PivotAggregationsSection_1.PivotAggregationsSectionSummary, null),
isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
let newLayout = (0, Helper_1.cloneObject)(layout);
setLayout(newLayout);
} }))),
},
{
title: 'Sort',
isVisible: () => layoutSupportedFeatures.ColumnSorts,
renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
details: 'Configure Aggregated Column Sorts',
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Column Filters',
isVisible: () => layoutSupportedFeatures.ColumnFilters,
isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
details: 'Set Aggregated Column Filters',
renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Grid Filter',
isVisible: () => layoutSupportedFeatures.GridFilter,
isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
details: 'Set Grid Filter',
renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
'-',
{
details: 'Review your Pivot Layout',
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
title: 'Summary',
},
] })) : (React.createElement(OnePageAdaptableWizard_1.OnePageAdaptableWizard, { titleContainerStyle: { width: 180 }, defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, data: layout, onHide: props.onCloseWizard, onFinish: handleFinish, sections: [
{
title: 'Settings',
details: 'Configure Table Layout',
isValid: () => {
if (!layout.Name) {
return 'Layout Name cannot be blank';
}
if (allLayouts.some((layoutItem) => layoutItem.Name === layout.Name && layoutItem.Uuid !== layout.Uuid)) {
return 'A Layout already exists with that name';
}
return true;
},
renderSummary: () => React.createElement(SettingsSection_1.SettingsSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(SettingsSection_1.SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Row Groups',
isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
isValid: RowSummarySection_1.areSummaryRowsValid,
details: 'Configure Row Grouping',
renderSummary: () => React.createElement(RowGroupingSection_1.RowGroupingSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(RowGroupingSection_1.RowGroupingSection, { onChange: setLayout }))),
},
{
title: 'Columns',
details: 'Select Columns',
isVisible: () => true,
renderSummary: () => React.createElement(ColumnsSection_1.ColumnsSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(ColumnsSection_1.ColumnsSection, { onChange: setLayout }))),
},
{
title: 'Aggregations',
isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
details: 'Select Column Aggregations',
renderSummary: () => React.createElement(AggregationsSection_1.AggregationsSectionSummary, null),
isValid: (data) => (0, AggregationsSection_1.isAggregationsSectionValid)(data),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(AggregationsSection_1.AggregationsSection, { onChange: (layout) => {
let newLayout = (0, Helper_1.cloneObject)(layout);
// if we do not have an weighted avg col, we need to clear the row summary if one exists
if (newLayout.RowSummaries) {
const aggColsMap = (newLayout.TableAggregationColumns || []).reduce((acc, { ColumnId, AggFunc }) => {
acc[ColumnId] = AggFunc;
return acc;
}, {});
newLayout.RowSummaries = newLayout.RowSummaries.map((rowSummary) => {
return {
...rowSummary,
ColumnsMap: Object.entries(rowSummary.ColumnsMap).reduce((acc, [columnId, aggFunc]) => {
if (
// see if it is weighted avg
aggFunc === RowSummary_1.WEIGHTED_AVERAGE_AGGREGATED_FUNCTION &&
// see if we have a weight in the agg columns
aggColsMap[columnId] &&
(typeof aggColsMap[columnId] !== 'object' ||
aggColsMap[columnId].weightColumnId)) {
// need to remove the row summary
return acc;
}
acc[columnId] = aggFunc;
return acc;
}, {}),
};
});
}
setLayout(newLayout);
} }))),
},
{
title: 'Row Summaries',
details: 'Configure Row Summaries',
renderSummary: () => React.createElement(RowSummarySection_1.RowSummarySectionSummary, null),
isVisible: () => layoutSupportedFeatures.RowSummaries,
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(RowSummarySection_1.RowSummarySection, { onChange: setLayout }))),
},
{
title: 'Sort',
isVisible: () => layoutSupportedFeatures.ColumnSorts,
renderSummary: () => React.createElement(SortSection_1.SortSectionSummary, null),
details: 'Configure Column Sorts',
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(SortSection_1.SortSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Column Filters',
isVisible: () => layoutSupportedFeatures.ColumnFilters,
isValid: (layout) => (0, FilterSection_1.isColumnFiltersValid)(layout),
details: 'Set Column Filters',
renderSummary: () => React.createElement(FilterSection_1.FilterSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(FilterSection_1.FilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
{
title: 'Grid Filter',
isVisible: () => layoutSupportedFeatures.GridFilter,
isValid: (layout) => (0, GridFilterSection_1.isGridFiltersValid)(layout, adaptable.api),
details: 'Set Grid Filter',
renderSummary: () => React.createElement(GridFilterSection_1.GridFilterSectionSummary, null),
render: () => (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' } },
React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
},
'-',
{
details: 'Review your Table Layout',
render: () => (React.createElement(rebass_1.Box, { padding: 2 },
React.createElement(OnePageAdaptableWizard_1.OnePageWizardSummary, null))),
title: 'Summary',
},
] }));
};
exports.LayoutWizard = LayoutWizard;