@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
138 lines (137 loc) • 9.83 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { cn } from '../../../lib/utils';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
import { CheckBox } from '../../../components/CheckBox';
import { AdaptablePopupAlert } from '../../Components/Popups/AdaptablePopupAlert';
import { AlertButtonsEditor } from './AlertButtonsEditor';
import { AlertType } from '../Utilities/getAlertType';
import { isScheduledAlertDefinition, scheduledAlertIncludeSuspendButton, } from '../../../Utilities/Helpers/Scheduling/ScheduledAlertHelper';
import { resolveAlertFormForDefinition } from '../../../Utilities/Helpers/AlertHelper';
import { Box, Flex } from '../../../components/Flex';
import { Card } from '../../../components/Card';
export const renderAlertNotificationSummary = (data, api) => {
if (!data.AlertProperties?.DisplayNotification) {
return _jsx(Box, { className: "twa:text-2", children: "No Alert Notification will be displayed" });
}
return _jsx(AlertPreview, { api: api, alertDefinition: data });
};
export const AlertPreview = ({ alertDefinition, api, focusFirstButton, ...boxProps }) => {
const mapButtons = React.useCallback((button) => {
let buttonStyle = button.ButtonStyle;
if (buttonStyle && buttonStyle.tone == null && alertDefinition?.MessageType) {
return {
...button,
ButtonStyle: {
tone: alertDefinition.MessageType.toLowerCase(),
...buttonStyle,
},
};
}
return button;
}, [alertDefinition?.MessageType]);
const alertToPreview = React.useMemo(() => {
const defaultForm = api.alertApi.internalApi.getDefaultAlertNotificationForm();
const alertForm = resolveAlertFormForDefinition(alertDefinition, defaultForm);
if (typeof alertForm !== 'string') {
alertForm.Buttons = (alertForm.Buttons ?? []).map(mapButtons);
}
const result = {
alertType: 'generic',
header: alertDefinition.MessageHeader ??
api.alertApi.internalApi.getAlertMessageHeaderForDataChange(alertDefinition),
message: alertDefinition.MessageText ??
api.alertApi.internalApi.getAlertDescriptionForDataChange(alertDefinition),
alertDefinition: isScheduledAlertDefinition(alertDefinition)
? alertDefinition
: {
...alertDefinition,
AlertForm: alertForm,
},
};
return result;
}, [alertDefinition, api, mapButtons]);
return (_jsx(Box, { ...boxProps, className: cn('ab-AlertPreview', boxProps.className), style: {
border: '1px solid var(--ab-color-input-border)',
...boxProps.style,
}, children: _jsx(AdaptablePopupAlert, { headless: true, focusFirstButton: focusFirstButton, adaptableAlert: alertToPreview, onClose: () => { } }) }));
};
export const AlertNotificationWizardSection = (props) => {
const { data, api } = useOnePageAdaptableWizardContext();
const isScheduled = props.alertType === AlertType.Scheduled;
const scheduledData = isScheduledAlertDefinition(data) ? data : null;
const includeSuspendButton = scheduledData
? scheduledAlertIncludeSuspendButton(scheduledData)
: false;
const adaptableAlert = {
alertType: 'generic',
header: data.MessageHeader ?? data.MessageType,
message: data.MessageText ?? '',
alertDefinition: data,
};
const updateScheduledProperties = (partial) => {
if (!scheduledData) {
return;
}
props.onChange({
...scheduledData,
AlertProperties: {
...scheduledData.AlertProperties,
...partial,
},
});
};
return (_jsxs(Flex, { flexDirection: "column", className: "twa:gap-3 twa:p-3", children: [_jsx(Box, { "data-name": "display-options", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Notification Options" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Choose whether to display a notification when the Alert fires" })] }), _jsxs(Card.Body, { children: [_jsxs(Flex, { flexDirection: "column", alignItems: "flex-start", className: isScheduled ? 'twa:gap-4' : undefined, children: [_jsx(CheckBox, { className: isScheduled ? 'twa:my-0' : undefined, checked: data.AlertProperties?.DisplayNotification, onChange: (DisplayNotification) => {
if (isScheduled && scheduledData) {
updateScheduledProperties({ DisplayNotification });
return;
}
const ruleData = data;
const newAlertDefinition = {
...ruleData,
AlertProperties: {
...ruleData.AlertProperties,
DisplayNotification,
},
};
if (!DisplayNotification && typeof newAlertDefinition.AlertForm === 'object') {
delete newAlertDefinition.AlertForm.Buttons;
}
if (DisplayNotification) {
newAlertDefinition.AlertForm =
newAlertDefinition.AlertForm ??
api.alertApi.internalApi.getDefaultAlertNotificationForm();
}
if (DisplayNotification &&
typeof newAlertDefinition.AlertForm === 'object' &&
(!newAlertDefinition.AlertForm?.Buttons ||
newAlertDefinition.AlertForm?.Buttons?.length === 0)) {
newAlertDefinition.AlertForm.Buttons = [
api.alertApi.internalApi.getDefaultButton(),
];
}
props.onChange(newAlertDefinition);
}, children: isScheduled
? 'Display a Notification when the Schedule is triggered'
: 'Display a Notification when Alert is triggered (with action buttons)' }), isScheduled && scheduledData && data.AlertProperties?.DisplayNotification ? (_jsx(CheckBox, { className: "twa:my-0", checked: includeSuspendButton, onChange: (IncludeSuspendButton) => {
updateScheduledProperties({ IncludeSuspendButton });
}, children: "Include Suspend button on notification" })) : null] }), data.AlertProperties?.DisplayNotification && !isScheduled
? (() => {
const ruleData = data;
const alertForm = ruleData.AlertForm;
if (typeof alertForm === 'string') {
return (_jsx(Box, { className: "twa:text-2 twa:mt-3", children: "Alert buttons cannot be customized because form is dynamically driven" }));
}
return (_jsx(AlertButtonsEditor, { alertType: props.alertType, AlertButtons: alertForm?.Buttons, api: api, adaptableAlert: adaptableAlert, onChange: (buttons) => {
props.onChange({
...ruleData,
AlertForm: {
...(alertForm ?? { fields: [] }),
Buttons: buttons,
},
});
} }));
})()
: null] })] }) }), data.AlertProperties?.DisplayNotification ? (_jsx(Box, { "data-name": "alert-preview", children: _jsxs(Card, { shadow: false, children: [_jsxs(Card.Title, { children: [_jsx(Box, { className: "twa:font-medium", children: "Alert Preview" }), _jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal twa:max-w-[520px]", children: "Preview how the notification will appear when triggered" })] }), _jsx(Card.Body, { children: !isScheduled &&
typeof data.AlertForm === 'string' ? (_jsx(Box, { className: "twa:text-2", children: "Preview not available because form is dynamically driven" })) : (_jsx(AlertPreview, { alertDefinition: data, api: api, focusFirstButton: false })) })] }) })) : null] }));
};