@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
262 lines (261 loc) • 15.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import * as React from 'react';
import * as LayoutRedux from '../../../Redux/ActionsReducers/LayoutRedux';
import { OnePageAdaptableWizard, OnePageWizardSummary } from '../../Wizard/OnePageAdaptableWizard';
import { cloneObject } from '../../../Utilities/Helpers/Helper';
import { SettingsSection, SettingsSectionSummary } from './sections/SettingsSection';
import { useAdaptable } from '../../AdaptableContext';
import { useDispatch } from 'react-redux';
import { ColumnsSection, ColumnsSectionSummary } from './sections/ColumnsSection';
import { PivotColumnsSection, PivotColumnsSectionSummary } from './sections/PivotColumnsSection';
import { RowGroupingSection, RowGroupingSectionSummary } from './sections/RowGroupingSection';
import { AggregationsSection, AggregationsSectionSummary, isAggregationsSectionValid, } from './sections/AggregationsSection';
import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
import { areSummaryRowsValid, RowSummarySection, RowSummarySectionSummary, } from './sections/RowSummarySection';
import { RowSelectionSection, RowSelectionSectionSummary } from './sections/RowSelectionSection';
import { WEIGHTED_AVERAGE_AGGREGATED_FUNCTION } from '../../../AdaptableState/Common/RowSummary';
import { isPivotLayout } from '../../../Utilities/isPivotLayout';
import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
import { isPivotAggregationsSectionValid, PivotAggregationsSection, PivotAggregationsSectionSummary, } from './sections/PivotAggregationsSection';
import { Box } from '../../../components/Flex';
const getLayoutWizardTitle = (layout, moduleFriendlyName) => {
const layoutName = layout.Name?.trim();
return layoutName ? `${moduleFriendlyName} (${layoutName})` : moduleFriendlyName;
};
const getLayoutWizardMode = (popupParams, initialLayout) => {
const action = popupParams?.action;
if (action === 'Edit') {
return 'edit';
}
if (action === 'New' || action === 'Clone') {
return 'create';
}
return initialLayout ? 'edit' : 'create';
};
export const LayoutWizard = (props) => {
const dispatch = useDispatch();
const adaptable = useAdaptable();
const allLayouts = adaptable.api.layoutApi.getLayouts();
const initialLayout = props.data ?? props.popupParams?.value;
const layoutWizardMode = getLayoutWizardMode(props.popupParams, initialLayout);
const [layout, setLayout] = React.useState(() => {
let preparedLayout = null;
if (initialLayout) {
preparedLayout = cloneObject(initialLayout);
if (props?.popupParams?.action === 'Clone') {
preparedLayout = {
...adaptable.api.layoutApi.internalApi.cloneLayout(preparedLayout),
Name: '',
};
}
}
else {
const shouldCreatePivot = props.popupParams?.config?.layoutType === 'pivot' ||
props.abObjectType?.name?.toLowerCase().includes('pivot') ||
false;
preparedLayout = adaptable.api.layoutApi.internalApi.buildInitialLayout({ Name: '' }, shouldCreatePivot ? 'pivot' : 'table');
}
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 };
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();
const wizardTitle = getLayoutWizardTitle(layout, props.moduleInfo.FriendlyName);
return isPivotLayout(layout) ? (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, 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: () => _jsx(SettingsSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Pivot Row Groups',
isVisible: () => layoutSupportedFeatures.PivotColumns && layoutSupportedFeatures.RowGroupedColumns,
details: 'Configure Pivot Row Grouping',
renderSummary: (data) => _jsx(PivotRowGroupingSectionSummary, { layout: data }),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotRowGroupingSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => {
setLayout(newLayout);
} }) })),
},
{
title: 'Pivot Columns',
details: 'Select Pivot Columns and Column Sorting',
isVisible: () => layoutSupportedFeatures.PivotColumns,
renderSummary: () => _jsx(PivotColumnsSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Pivot Aggregations',
isVisible: () => layoutSupportedFeatures.PivotAggregationColumns && layoutSupportedFeatures.PivotColumns,
details: 'Select Pivot Column Aggregations',
renderSummary: (data) => _jsx(PivotAggregationsSectionSummary, { layout: data }),
isValid: (data) => isPivotAggregationsSectionValid(data),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(PivotAggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
const newLayout = cloneObject(layout);
setLayout(newLayout);
} }) })),
},
{
title: 'Column Filters',
isVisible: () => layoutSupportedFeatures.ColumnFilters,
isValid: (layout) => isColumnFiltersValid(layout),
details: 'Set Aggregated Column Filters',
renderSummary: () => _jsx(FilterSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Grid Filter',
isVisible: () => layoutSupportedFeatures.GridFilter,
isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
details: 'Set Grid Filter',
renderSummary: () => _jsx(GridFilterSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Row Selection',
details: 'Configure Row Selection',
renderSummary: () => _jsx(RowSelectionSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
'-',
{
details: 'Review your Pivot Layout',
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
title: 'Summary',
},
] })) : (_jsx(OnePageAdaptableWizard, { defaultCurrentSectionName: props.defaultCurrentSectionName, moduleInfo: props.moduleInfo, moduleName: wizardTitle, 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: () => _jsx(SettingsSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(SettingsSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Row Groups',
isVisible: () => layoutSupportedFeatures.RowGroupedColumns,
details: 'Configure Row Grouping and Display Behaviour',
renderSummary: (data) => _jsx(RowGroupingSectionSummary, { layout: data }),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowGroupingSection, { onChange: setLayout, layoutWizardMode: layoutWizardMode }) })),
},
{
title: 'Columns',
details: 'Configure Column Visibility, Order, Pinning, Sizing and Sorting',
isVisible: () => true,
renderSummary: (data) => _jsx(ColumnsSectionSummary, { layout: data }),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(ColumnsSection, { layoutWizardMode: layoutWizardMode, onChange: setLayout }) })),
},
{
title: 'Aggregations',
isVisible: () => layoutSupportedFeatures.TableAggregationColumns,
details: 'Select Aggregation Columns and Behaviour',
renderSummary: (data) => _jsx(AggregationsSectionSummary, { layout: data }),
isValid: (data) => isAggregationsSectionValid(data),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(AggregationsSection, { layoutWizardMode: layoutWizardMode, onChange: (layout) => {
let newLayout = cloneObject(layout);
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 (aggFunc === WEIGHTED_AVERAGE_AGGREGATED_FUNCTION &&
aggColsMap[columnId] &&
(typeof aggColsMap[columnId] !== 'object' ||
aggColsMap[columnId].weightColumnId)) {
return acc;
}
acc[columnId] = aggFunc;
return acc;
}, {}),
};
});
}
setLayout(newLayout);
} }) })),
},
{
title: 'Row Summaries',
details: 'Configure Row Summaries',
renderSummary: () => _jsx(RowSummarySectionSummary, {}),
isVisible: () => layoutSupportedFeatures.RowSummaries,
isValid: areSummaryRowsValid,
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(RowSummarySection, { onChange: setLayout }) })),
},
{
title: 'Column Filters',
isVisible: () => layoutSupportedFeatures.ColumnFilters,
isValid: (layout) => isColumnFiltersValid(layout),
details: 'Set Column Filters',
renderSummary: () => _jsx(FilterSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(FilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Grid Filter',
isVisible: () => layoutSupportedFeatures.GridFilter,
isValid: (layout) => isGridFiltersValid(layout, adaptable.api),
details: 'Set Grid Filter',
renderSummary: () => _jsx(GridFilterSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2 twa:h-full", children: _jsx(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
{
title: 'Row Selection',
details: 'Configure Row Selection',
renderSummary: () => _jsx(RowSelectionSectionSummary, {}),
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }) })),
},
'-',
{
details: 'Review your Table Layout',
render: () => (_jsx(Box, { className: "twa:p-2", children: _jsx(OnePageWizardSummary, {}) })),
title: 'Summary',
},
] }));
};