Add underlying data changes necessary for new task & schedule features

resources/scripts/components/elements/Field.tsx

@@ -17,7 +17,7 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
     <FormikField innerRef={ref} name={name} validate={validate}>
         {
             ({ field, form: { errors, touched } }: FieldProps) => (
-                <>
+                <div>
                     {label &&
                     <Label htmlFor={id} isLight={light}>{label}</Label>
                     }
@@ -35,7 +35,7 @@ const Field = forwardRef<HTMLInputElement, Props>(({ id, name, light = false, la
                         :
                         description ? <p className={'input-help'}>{description}</p> : null
                     }
-                </>
+                </div>
             )
         }
     </FormikField>

resources/scripts/components/server/schedules/EditScheduleModal.tsx

@@ -1,8 +1,7 @@
-import React, { useEffect, useState } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
-import Modal, { RequiredModalProps } from '@/components/elements/Modal';
 import Field from '@/components/elements/Field';
-import { Form, Formik, FormikHelpers, useFormikContext } from 'formik';
+import { Form, Formik, FormikHelpers } from 'formik';
 import FormikSwitch from '@/components/elements/FormikSwitch';
 import createOrUpdateSchedule from '@/api/server/schedules/createOrUpdateSchedule';
 import { ServerContext } from '@/state/server';
@@ -11,10 +10,12 @@ import FlashMessageRender from '@/components/FlashMessageRender';
 import useFlash from '@/plugins/useFlash';
 import tw from 'twin.macro';
 import Button from '@/components/elements/Button';
+import ModalContext from '@/context/ModalContext';
+import asModal from '@/hoc/asModal';
 
-type Props = {
+interface Props {
     schedule?: Schedule;
-} & RequiredModalProps;
+}
 
 interface Values {
     name: string;
@@ -24,70 +25,21 @@ interface Values {
     hour: string;
     minute: string;
     enabled: boolean;
+    onlyWhenOnline: boolean;
 }
 
-const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdated'>) => {
-    const { isSubmitting } = useFormikContext();
-
-    return (
-        <Modal {...props} showSpinnerOverlay={isSubmitting}>
-            <h3 css={tw`text-2xl mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
-            <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
-            <Form>
-                <Field
-                    name={'name'}
-                    label={'Schedule name'}
-                    description={'A human readable identifer for this schedule.'}
-                />
-                <div css={tw`grid grid-cols-2 sm:grid-cols-5 gap-4 mt-6`}>
-                    <div>
-                        <Field name={'minute'} label={'Minute'}/>
-                    </div>
-                    <div>
-                        <Field name={'hour'} label={'Hour'}/>
-                    </div>
-                    <div>
-                        <Field name={'dayOfMonth'} label={'Day of month'}/>
-                    </div>
-                    <div>
-                        <Field name={'month'} label={'Month'}/>
-                    </div>
-                    <div>
-                        <Field name={'dayOfWeek'} label={'Day of week'}/>
-                    </div>
-                </div>
-                <p css={tw`text-neutral-400 text-xs mt-2`}>
-                    The schedule system supports the use of Cronjob syntax when defining when tasks should begin
-                    running. Use the fields above to specify when these tasks should begin running.
-                </p>
-                <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
-                    <FormikSwitch
-                        name={'enabled'}
-                        description={'If disabled, this schedule and it\'s associated tasks will not run.'}
-                        label={'Enabled'}
-                    />
-                </div>
-                <div css={tw`mt-6 text-right`}>
-                    <Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
-                        {schedule ? 'Save changes' : 'Create schedule'}
-                    </Button>
-                </div>
-            </Form>
-        </Modal>
-    );
-};
-
-export default ({ schedule, visible, ...props }: Props) => {
-    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+const EditScheduleModal = ({ schedule }: Props) => {
     const { addError, clearFlashes } = useFlash();
-    const [ modalVisible, setModalVisible ] = useState(visible);
+    const { dismiss } = useContext(ModalContext);
 
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
     const appendSchedule = ServerContext.useStoreActions(actions => actions.schedules.appendSchedule);
 
     useEffect(() => {
-        setModalVisible(visible);
-        clearFlashes('schedule:edit');
-    }, [ visible ]);
+        return () => {
+            clearFlashes('schedule:edit');
+        };
+    }, []);
 
     const submit = (values: Values, { setSubmitting }: FormikHelpers<Values>) => {
         clearFlashes('schedule:edit');
@@ -101,12 +53,13 @@ export default ({ schedule, visible, ...props }: Props) => {
                 month: values.month,
                 dayOfMonth: values.dayOfMonth,
             },
+            onlyWhenOnline: values.onlyWhenOnline,
             isActive: values.enabled,
         })
             .then(schedule => {
                 setSubmitting(false);
                 appendSchedule(schedule);
-                setModalVisible(false);
+                dismiss();
             })
             .catch(error => {
                 console.error(error);
@@ -128,13 +81,50 @@ export default ({ schedule, visible, ...props }: Props) => {
                 dayOfWeek: schedule?.cron.dayOfWeek || '*',
                 enabled: schedule ? schedule.isActive : true,
             } as Values}
-            validationSchema={null}
         >
-            <EditScheduleModal
-                visible={modalVisible}
-                schedule={schedule}
-                {...props}
-            />
+            {({ isSubmitting }) => (
+                <Form>
+                    <h3 css={tw`text-2xl mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
+                    <FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
+                    <Field
+                        name={'name'}
+                        label={'Schedule name'}
+                        description={'A human readable identifer for this schedule.'}
+                    />
+                    <div css={tw`grid grid-cols-2 sm:grid-cols-5 gap-4 mt-6`}>
+                        <Field name={'minute'} label={'Minute'}/>
+                        <Field name={'hour'} label={'Hour'}/>
+                        <Field name={'dayOfMonth'} label={'Day of month'}/>
+                        <Field name={'month'} label={'Month'}/>
+                        <Field name={'dayOfWeek'} label={'Day of week'}/>
+                    </div>
+                    <p css={tw`text-neutral-400 text-xs mt-2`}>
+                        The schedule system supports the use of Cronjob syntax when defining when tasks should begin
+                        running. Use the fields above to specify when these tasks should begin running.
+                    </p>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <FormikSwitch
+                            name={'only_when_online'}
+                            description={'If disabled this schedule will always run, regardless of the server\'s current power state.'}
+                            label={'Only When Server Is Online'}
+                        />
+                    </div>
+                    <div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
+                        <FormikSwitch
+                            name={'enabled'}
+                            description={'If disabled this schedule and it\'s associated tasks will not run.'}
+                            label={'Schedule Enabled'}
+                        />
+                    </div>
+                    <div css={tw`mt-6 text-right`}>
+                        <Button css={tw`w-full sm:w-auto`} type={'submit'} disabled={isSubmitting}>
+                            {schedule ? 'Save changes' : 'Create schedule'}
+                        </Button>
+                    </div>
+                </Form>
+            )}
         </Formik>
     );
 };
+
+export default asModal<Props>()(EditScheduleModal);