@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
127 lines (126 loc) • 5.13 kB
JavaScript
import * as React from 'react';
import { Box } from 'rebass';
import { CheckBox } from '../../../components/CheckBox';
import FormLayout, { FormRow } from '../../../components/FormLayout';
import Radio from '../../../components/Radio';
import { Tabs } from '../../../components/Tabs';
import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
import AdaptableInput from '../../Components/AdaptableInput';
import { useOnePageAdaptableWizardContext } from '../../Wizard/OnePageAdaptableWizard';
export const isScheduleValid = (schedule, isOneOff) => {
if (!schedule.Schedule) {
return 'Schedule is not specified';
}
if (schedule.Schedule.Hour === null || schedule.Schedule.Minute === null) {
return 'Schedule Time is not specified';
}
if (isOneOff && !schedule.Schedule.OneOffDate) {
return 'Schedule Date is not specified';
}
if (!isOneOff && ArrayExtensions.IsEmpty(schedule?.Schedule?.DaysOfWeek)) {
return 'Schedule Days are not specified';
}
return true;
};
const daysMap = [
{
label: 'Monday',
value: 'Monday',
},
{
label: 'Tuesday',
value: 'Tuesday',
},
{
label: 'Wednesday',
value: 'Wednesday',
},
{
label: 'Thursday',
value: 'Thursday',
},
{
label: 'Friday',
value: 'Friday',
},
{
label: 'Saturday',
value: 'Saturday',
},
{
label: 'Sunday',
value: 'Sunday',
},
];
export const ScheduleScheduleWizard = (props) => {
const { data } = useOnePageAdaptableWizardContext();
const handleIsOneOfChange = (isOneOffNew) => {
props.onSetIsOneOff(isOneOffNew);
const OneOffDate = !isOneOffNew ? null : data?.Schedule?.OneOffDate;
const DaysOfWeek = isOneOffNew ? [] : data?.Schedule?.DaysOfWeek;
props.onChange({
...data,
Schedule: {
...data.Schedule,
OneOffDate,
DaysOfWeek,
},
});
};
const handleTimeChange = (event) => {
const [hours, minutes] = (event.target.value || '00:00')
?.split(':')
?.map((item) => parseInt(item, 10));
props.onChange({
...data,
Schedule: {
...data.Schedule,
Hour: hours,
Minute: minutes,
},
});
};
const handleDayChange = (checked, day) => {
let newDays = data.Schedule.DaysOfWeek || [];
if (checked) {
newDays = [...newDays, day];
}
else {
newDays = newDays.filter((previousDay) => previousDay !== day);
}
props.onChange({
...data,
Schedule: {
...data.Schedule,
DaysOfWeek: newDays,
},
});
};
const handleOneOfDateChange = (event) => {
props.onChange({
...data,
Schedule: {
...data.Schedule,
OneOffDate: event.target.value,
},
});
};
let timeValue = '00:00';
if (typeof data.Schedule?.Hour === 'number' || typeof data?.Schedule?.Minute === 'number') {
const hours = `${data.Schedule?.Hour}` || '00';
const minute = `${data.Schedule?.Minute}` || '00';
timeValue = `${hours.padStart(2, '0')}:${minute.padStart(2, '0')}`;
}
return (React.createElement(Box, { "data-name": "schedule-setup" },
React.createElement(Tabs, { autoFocus: false },
React.createElement(Tabs.Tab, null, "Schedule"),
React.createElement(Tabs.Content, null,
React.createElement(FormLayout, null,
React.createElement(FormRow, { label: "Frequency" },
React.createElement(Radio, { "data-name": "frequency-recurring", mr: 2, value: "recurring", checked: !props.isOneOff, onChange: (checked) => checked && handleIsOneOfChange(false) }, "Recurring Days"),
React.createElement(Radio, { "data-name": "frequency-one-off", checked: props.isOneOff, value: "oneoff", onChange: (checked) => checked && handleIsOneOfChange(true) }, "One-Off Date")),
props.isOneOff ? (React.createElement(FormRow, { label: "Date" },
React.createElement(AdaptableInput, { "data-name": "one-off-date", width: 300, type: "date", placeholder: "Date", onChange: handleOneOfDateChange, value: data.Schedule?.OneOffDate || '' }))) : (React.createElement(FormRow, { label: "Days" }, daysMap.map((day) => (React.createElement(CheckBox, { "data-name": `day-${day.value}`, width: "33%", ml: 2, value: day.value, checked: data.Schedule?.DaysOfWeek?.includes(day.value), key: day.value, onChange: (checked) => handleDayChange(checked, day.value) }, day.label))))),
React.createElement(FormRow, { label: "Time" },
React.createElement(AdaptableInput, { "data-name": "time", width: 300, value: timeValue, type: "time", onChange: handleTimeChange })))))));
};