Add view for editing the details of a schedule

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

@@ -1,15 +1,98 @@
 import React from 'react';
 import { Schedule } from '@/api/server/schedules/getServerSchedules';
 import Modal, { RequiredModalProps } from '@/components/elements/Modal';
+import Field from '@/components/elements/Field';
+import { connect } from 'react-redux';
+import { Form, FormikProps, withFormik } from 'formik';
+import { Actions } from 'easy-peasy';
+import { ApplicationStore } from '@/state';
+import Switch from '@/components/elements/Switch';
+import { boolean, object, string } from 'yup';
 
-type Props = {
-    schedule?: Schedule;
-} & RequiredModalProps;
+type OwnProps = { schedule: Schedule } & RequiredModalProps;
 
-export default ({ schedule, ...props }: Props) => {
+interface ReduxProps {
+    addError: ApplicationStore['flashes']['addError'];
+}
+
+type ComponentProps = OwnProps & ReduxProps;
+
+interface Values {
+    name: string;
+    dayOfWeek: string;
+    dayOfMonth: string;
+    hour: string;
+    minute: string;
+    enabled: boolean;
+}
+
+const EditScheduleModal = ({ values, schedule, ...props }: ComponentProps & FormikProps<Values>) => {
     return (
         <Modal {...props}>
-            <p>Testing</p>
+            <Form>
+                <Field
+                    name={'name'}
+                    label={'Schedule name'}
+                    description={'A human readable identifer for this schedule.'}
+                />
+                <div className={'flex mt-6'}>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'dayOfWeek'} label={'Day of week'}/>
+                    </div>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'dayOfMonth'} label={'Day of month'}/>
+                    </div>
+                    <div className={'flex-1 mr-4'}>
+                        <Field name={'hour'} label={'Hour'}/>
+                    </div>
+                    <div className={'flex-1'}>
+                        <Field name={'minute'} label={'Minute'}/>
+                    </div>
+                </div>
+                <p className={'input-help'}>
+                    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 className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
+                    <Switch
+                        name={'enabled'}
+                        description={'If disabled, this schedule and it\'s associated tasks will not run.'}
+                        label={'Enabled'}
+                    />
+                </div>
+                <div className={'mt-6 text-right'}>
+                    <button className={'btn btn-lg btn-primary'} type={'button'}>
+                        Save
+                    </button>
+                </div>
+            </Form>
         </Modal>
     );
 };
+
+export default connect(
+    null,
+    // @ts-ignore
+    (dispatch: Actions<ApplicationStore>) => ({
+        addError: dispatch.flashes.addError,
+    }),
+)(
+    withFormik<ComponentProps, Values>({
+        handleSubmit: (values, { props }) => {
+        },
+
+        mapPropsToValues: ({ schedule }) => ({
+            name: schedule.name,
+            dayOfWeek: schedule.cron.dayOfWeek,
+            dayOfMonth: schedule.cron.dayOfMonth,
+            hour: schedule.cron.hour,
+            minute: schedule.cron.minute,
+            enabled: schedule.isActive,
+        }),
+
+        validationSchema: object().shape({
+            name: string().required(),
+            enabled: boolean().required(),
+        }),
+    })(EditScheduleModal),
+);