@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
123 lines (122 loc) • 8.69 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { isRuleBasedAlertDefinition } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CheckBox } from '../../../components/CheckBox';
import { CodeBlock } from '../../../components/CodeBlock';
import { StyleComponent } from '../../Components/StyleComponent';
import ObjectFactory from '../../../Utilities/ObjectFactory';
import { useAdaptable } from '../../AdaptableContext';
import { StylePreview } from '../../../components/StylePreview';
import Panel from '../../../components/Panel';
import { AlertType } from '../Utilities/getAlertType';
import { Box, Flex } from '../../../components/Flex';
import { Tag, TagBox } from '../../../components/Tag/Tag';
import { SingleSelect } from '../../../components/NewSelect';
import { Card } from '../../../components/Card';
const HighlightStyle = (props) => {
const adaptable = useAdaptable();
const options = [
{
label: 'Use Message Type',
value: 'system',
},
{
label: 'Custom Style',
value: 'custom',
},
];
return (_jsxs(Box, { "data-name": props.dataName, children: [_jsxs(Flex, { children: [_jsx(CheckBox, { className: "twa:mr-2 twa:items-start", checked: Boolean(props.highlight), onChange: (checked) => {
props.onChange(checked);
}, children: props.label }), Boolean(props.highlight) && (_jsx(SingleSelect, { items: options, value: typeof props.highlight === 'boolean' ? 'system' : 'custom', onValueChange: (value) => {
if (value === 'system') {
props.onChange(true);
}
else {
const initialStyle = ObjectFactory.CreateEmptyStyle();
props.onChange(initialStyle);
}
} }))] }), typeof props.highlight === 'object' && (_jsx(Panel, { className: "twa:m-2", children: _jsx(Box, { className: "twa:pl-3", children: _jsx(StyleComponent, { headless: true, api: adaptable.api, Style: props.highlight, UpdateStyle: (style) => {
props.onChange(style);
} }) }) }))] }));
};
export const renderAlertBehaviourSummary = (alert, api, allowWrap = false) => {
const { AlertProperties = {} } = alert;
const ruleProperties = isRuleBasedAlertDefinition(alert)
? AlertProperties
: {};
const values = [
ruleProperties.PreventEdit ? { label: 'Prevent Cell Edit', id: 'preventCellEdit' } : null,
ruleProperties.HighlightCell ? { label: 'Highlight Cell', id: 'highlightCell' } : null,
ruleProperties.HighlightRow ? { label: 'Highlight Row', id: 'highlightRow' } : null,
ruleProperties.JumpToCell ? { label: 'Jump To Cell', id: 'jumptocell' } : null,
ruleProperties.JumpToRow ? { label: 'Jump To Row', id: 'jumptorow' } : null,
AlertProperties.ShowInDiv
? {
label: (_jsxs(_Fragment, { children: ["Show in ", _jsx(CodeBlock, { className: "twa:p-0 twa:ml-1", children: `<div />` })] })),
id: 'showInDiv',
}
: null,
AlertProperties.LogToConsole ? { label: 'Log To Console', id: 'logtoconsole' } : null,
AlertProperties.DisplaySystemStatusMessage
? { label: 'System Status Message', id: 'systemStatusMessage' }
: null,
].filter(Boolean);
if (!values.length) {
values.push({
label: 'No ' + api.internalApi.getCorrectEnglishVariant('Behaviour') + ' Selected',
id: 'none',
});
}
return (_jsx(_Fragment, { children: _jsx(TagBox, { children: values.map((x) => {
let label = _jsx(Box, { className: "twa:flex twa:items-center", children: x.label });
if (x.id === 'highlightCell' && typeof ruleProperties.HighlightCell === 'object') {
label = (_jsx(StylePreview, { styleObject: ruleProperties.HighlightCell, className: "twa:mt-0 twa:p-0", children: "Highlight Cell" }));
}
if (x.id === 'highlightRow' && typeof ruleProperties.HighlightRow === 'object') {
label = (_jsx(StylePreview, { styleObject: ruleProperties.HighlightRow, className: "twa:mt-0 twa:p-0", children: "Highlight Row" }));
}
return _jsx(Tag, { children: label }, x.id);
}) }) }));
};
export const AlertBehaviourWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const behaviourSpellingVariant = api.internalApi.getCorrectEnglishVariant('Behaviour');
const presentationProperties = data.AlertProperties ?? {};
const ruleProperties = isRuleBasedAlertDefinition(data)
? (data.AlertProperties ?? {})
: {};
const isScheduled = props.alertType === AlertType.Scheduled;
const rowRemovedAlert = api.alertApi.internalApi.isAlertDefinitionForRemovedRowChangeEvent(data);
const hasPreventCellEdit = !isScheduled && props.alertType === 'Validation';
const hasHighlightCell = !isScheduled && props.alertType !== 'RowChange';
const hasHighlightRow = !isScheduled && !rowRemovedAlert;
const hasJumpToCell = !isScheduled && props.alertType !== 'RowChange';
const hasJumpToRow = !isScheduled && !rowRemovedAlert;
const showInSeparateDiv = true;
const logToConsole = true;
const showSystemStatusMessage = true;
const onChange = (alertProperties) => {
props.onChange({
...data,
AlertProperties: {
...data.AlertProperties,
...alertProperties,
},
});
};
return (_jsx(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: behaviourSpellingVariant }), _jsxs(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: ["Configure ", behaviourSpellingVariant.toLowerCase(), "s for the Alert when it fires"] })] }), _jsxs(Card.Body, { className: "twa:gap-1", children: [hasPreventCellEdit && (_jsxs(CheckBox, { "data-name": "prevent-cell-edit", style: { alignItems: 'flex-start' }, checked: ruleProperties.PreventEdit, disabled: true, children: ["Prevent Cell Edit", _jsx(Box, { className: "twa:text-2 twa:mt-1", children: "(automatically undo data change which triggered Alert)" })] })), hasHighlightCell && (_jsx(HighlightStyle, { dataName: "highlight-cell", highlight: ruleProperties.HighlightCell, label: "Highlight Cell", onChange: (HighlightCell) => {
onChange({ HighlightCell });
} })), hasHighlightRow && (_jsx(HighlightStyle, { dataName: "highlight-row", highlight: ruleProperties.HighlightRow, label: "Highlight Row", onChange: (HighlightRow) => {
onChange({ HighlightRow });
} })), hasJumpToCell && (_jsx(CheckBox, { "data-name": "jump-to-cell", checked: ruleProperties.JumpToCell, onChange: (JumpToCell) => {
onChange({ JumpToCell });
}, children: "Jump To Cell" })), hasJumpToRow && (_jsx(CheckBox, { "data-name": "jump-to-row", checked: ruleProperties.JumpToRow, onChange: (JumpToRow) => {
onChange({ JumpToRow });
}, children: "Jump To Row" })), showInSeparateDiv && (_jsxs(CheckBox, { "data-name": "show-in-div", checked: presentationProperties.ShowInDiv, onChange: (ShowInDiv) => {
onChange({ ShowInDiv });
}, children: ["Show in separate ", _jsx(CodeBlock, { children: `<div />` }), " element"] })), logToConsole && (_jsx(CheckBox, { "data-name": "log-to-console", checked: presentationProperties.LogToConsole, onChange: (LogToConsole) => {
onChange({ LogToConsole });
}, children: "Log To Console" })), showSystemStatusMessage && (_jsx(CheckBox, { "data-name": "system-status-message", checked: presentationProperties.DisplaySystemStatusMessage, onChange: (DisplaySystemStatusMessage) => {
onChange({ DisplaySystemStatusMessage });
}, children: "Show as System Status Message" }))] })] }) }));
};