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),
+);

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

@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
 import getServerSchedules, { Schedule } from '@/api/server/schedules/getServerSchedules';
 import { ServerContext } from '@/state/server';
 import Spinner from '@/components/elements/Spinner';
-import { Link, RouteComponentProps } from 'react-router-dom';
+import { RouteComponentProps } from 'react-router-dom';
 import FlashMessageRender from '@/components/FlashMessageRender';
 import ScheduleRow from '@/components/server/schedules/ScheduleRow';
 import { httpErrorToHuman } from '@/api/http';
@@ -14,8 +14,9 @@ interface Params {
     schedule?: string;
 }
 
-export default ({ history, match, location: { hash } }: RouteComponentProps<Params>) => {
+export default ({ history, match }: RouteComponentProps<Params>) => {
     const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
+    const [ active, setActive ] = useState(0);
     const [ schedules, setSchedules ] = useState<Schedule[] | null>(null);
     const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
 
@@ -29,7 +30,9 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
             });
     }, [ setSchedules ]);
 
-    const matched = (schedules || []).find(schedule => schedule.id === Number(hash.match(/\d+$/) || 0));
+    const matched = useMemo(() => {
+        return schedules?.find(schedule => schedule.id === active);
+    }, [ active ]);
 
     return (
         <div className={'my-10 mb-6'}>
@@ -38,13 +41,13 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
                 <Spinner size={'large'} centered={true}/>
                 :
                 schedules.map(schedule => (
-                    <Link
+                    <div
                         key={schedule.id}
-                        to={`/server/${id}/schedules/#/schedule/${schedule.id}`}
-                        className={'grey-row-box'}
+                        onClick={() => setActive(schedule.id)}
+                        className={'grey-row-box cursor-pointer'}
                     >
                         <ScheduleRow schedule={schedule}/>
-                    </Link>
+                    </div>
                 ))
             }
             {matched &&
@@ -52,7 +55,7 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
                 schedule={matched}
                 visible={true}
                 appear={true}
-                onDismissed={() => history.push(match.url)}
+                onDismissed={() => setActive(0)}
             />
             }
         </div>