Skip to content

Commit 3820d4e

Browse files
DaneEverittDaneEveritt
committed
Add view for editing the details of a schedule
1 parent f180e3e commit 3820d4e

File tree

11 files changed

+334
-53
lines changed

11 files changed

+334
-53
lines changed

‎resources/scripts/.eslintrc.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ rules:
2929
"react-hooks/exhaustive-deps": 0
3030
"@typescript-eslint/explicit-function-return-type": 0
3131
"@typescript-eslint/explicit-member-accessibility": 0
32+
"@typescript-eslint/ban-ts-ignore": 0
3233
"@typescript-eslint/no-unused-vars": 0
3334
"@typescript-eslint/no-explicit-any": 0
3435
"@typescript-eslint/no-non-null-assertion": 0

‎resources/scripts/components/elements/Checkbox.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react';
2+
import { Field, FieldProps } from 'formik';
3+
4+
interface Props {
5+
name: string;
6+
value: string;
7+
}
8+
9+
type OmitFields = 'name' | 'value' | 'type' | 'checked' | 'onChange';
10+
11+
type InputProps = Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, OmitFields>;
12+
13+
const Checkbox = ({ name, value, ...props }: Props & InputProps) => (
14+
<Field name={name}>
15+
{({ field, form }: FieldProps) => {
16+
if (!Array.isArray(field.value)) {
17+
console.error('Attempting to mount a checkbox using a field value that is not an array.');
18+
19+
return null;
20+
}
21+
22+
return (
23+
<input
24+
{...field}
25+
{...props}
26+
type={'checkbox'}
27+
checked={(field.value || []).includes(value)}
28+
onClick={() => form.setFieldTouched(field.name, true)}
29+
onChange={e => {
30+
const set = new Set(field.value);
31+
set.has(value) ? set.delete(value) : set.add(value);
32+
33+
field.onChange(e);
34+
form.setFieldValue(field.name, Array.from(set));
35+
}}
36+
/>
37+
);
38+
}}
39+
</Field>
40+
);
41+
42+
export default Checkbox;

‎resources/scripts/components/elements/FormikFieldWrapper.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import { Field, FieldProps } from 'formik';
3+
import classNames from 'classnames';
4+
import InputError from '@/components/elements/InputError';
5+
6+
interface Props {
7+
name: string;
8+
children: React.ReactNode;
9+
className?: string;
10+
label?: string;
11+
description?: string;
12+
validate?: (value: any) => undefined | string | Promise<any>;
13+
}
14+
15+
const FormikFieldWrapper = ({ name, label, className, description, validate, children }: Props) => (
16+
<Field name={name} validate={validate}>
17+
{
18+
({ field, form: { errors, touched } }: FieldProps) => (
19+
<div className={classNames(className, { 'has-error': touched[field.name] && errors[field.name] })}>
20+
{label && <label htmlFor={name}>{label}</label>}
21+
{children}
22+
<InputError errors={errors} touched={touched} name={field.name}>
23+
{description ? <p className={'input-help'}>{description}</p> : null}
24+
</InputError>
25+
</div>
26+
)
27+
}
28+
</Field>
29+
);
30+
31+
export default FormikFieldWrapper;

‎resources/scripts/components/elements/InputError.tsx‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from 'react';
2+
import capitalize from 'lodash-es/capitalize';
3+
import { FormikErrors, FormikTouched } from 'formik';
4+
5+
interface Props {
6+
errors: FormikErrors<any>;
7+
touched: FormikTouched<any>;
8+
name: string;
9+
children?: React.ReactNode;
10+
}
11+
12+
const InputError = ({ errors, touched, name, children }: Props) => (
13+
touched[name] && errors[name] ?
14+
<p className={'input-help error'}>
15+
{typeof errors[name] === 'string' ?
16+
capitalize(errors[name] as string)
17+
:
18+
capitalize((errors[name] as unknown as string[])[0])
19+
}
20+
</p>
21+
:
22+
<React.Fragment>
23+
{children}
24+
</React.Fragment>
25+
);
26+
27+
export default InputError;

‎resources/scripts/components/elements/Switch.tsx‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
import React, { useMemo } from 'react';
2+
import styled from 'styled-components';
3+
import v4 from 'uuid/v4';
4+
import classNames from 'classnames';
5+
import FormikFieldWrapper from '@/components/elements/FormikFieldWrapper';
6+
import { Field, FieldProps } from 'formik';
7+
8+
const ToggleContainer = styled.div`
9+
${tw`relative select-none w-12 leading-normal`};
10+
11+
& > input[type="checkbox"] {
12+
${tw`hidden`};
13+
14+
&:checked + label {
15+
${tw`bg-primary-500 border-primary-700 shadow-none`};
16+
}
17+
18+
&:checked + label:before {
19+
right: 0.125rem;
20+
}
21+
}
22+
23+
& > label {
24+
${tw`mb-0 block overflow-hidden cursor-pointer bg-neutral-400 border border-neutral-700 rounded-full h-6 shadow-inner`};
25+
transition: all 75ms linear;
26+
27+
&::before {
28+
${tw`absolute block bg-white border h-5 w-5 rounded-full`};
29+
top: 0.125rem;
30+
right: calc(50% + 0.125rem);
31+
//width: 1.25rem;
32+
//height: 1.25rem;
33+
content: "";
34+
transition: all 75ms ease-in;
35+
}
36+
}
37+
`;
38+
39+
interface Props {
40+
name: string;
41+
description?: string;
42+
label: string;
43+
enabled?: boolean;
44+
}
45+
46+
const Switch = ({ name, label, description }: Props) => {
47+
const uuid = useMemo(() => v4(), []);
48+
49+
return (
50+
<FormikFieldWrapper name={name}>
51+
<div className={'flex items-center'}>
52+
<ToggleContainer className={'mr-4 flex-none'}>
53+
<Field name={name}>
54+
{({ field, form }: FieldProps) => (
55+
<input
56+
id={uuid}
57+
name={name}
58+
type={'checkbox'}
59+
onChange={() => {
60+
form.setFieldTouched(name);
61+
form.setFieldValue(field.name, !field.value);
62+
}}
63+
defaultChecked={field.value}
64+
/>
65+
)}
66+
</Field>
67+
<label htmlFor={uuid}/>
68+
</ToggleContainer>
69+
<div className={'w-full'}>
70+
<label
71+
className={classNames('input-dark-label cursor-pointer', { 'mb-0': !!description })}
72+
htmlFor={uuid}
73+
>{label}</label>
74+
{description &&
75+
<p className={'input-help'}>
76+
{description}
77+
</p>
78+
}
79+
</div>
80+
</div>
81+
</FormikFieldWrapper>
82+
);
83+
};
84+
85+
export default Switch;

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

Lines changed: 88 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,98 @@
11
import React from 'react';
22
import { Schedule } from '@/api/server/schedules/getServerSchedules';
33
import Modal, { RequiredModalProps } from '@/components/elements/Modal';
4+
import Field from '@/components/elements/Field';
5+
import { connect } from 'react-redux';
6+
import { Form, FormikProps, withFormik } from 'formik';
7+
import { Actions } from 'easy-peasy';
8+
import { ApplicationStore } from '@/state';
9+
import Switch from '@/components/elements/Switch';
10+
import { boolean, object, string } from 'yup';
411

5-
type Props = {
6-
schedule?: Schedule;
7-
} & RequiredModalProps;
12+
type OwnProps = { schedule: Schedule } & RequiredModalProps;
813

9-
export default ({ schedule, ...props }: Props) => {
14+
interface ReduxProps {
15+
addError: ApplicationStore['flashes']['addError'];
16+
}
17+
18+
type ComponentProps = OwnProps & ReduxProps;
19+
20+
interface Values {
21+
name: string;
22+
dayOfWeek: string;
23+
dayOfMonth: string;
24+
hour: string;
25+
minute: string;
26+
enabled: boolean;
27+
}
28+
29+
const EditScheduleModal = ({ values, schedule, ...props }: ComponentProps & FormikProps<Values>) => {
1030
return (
1131
<Modal {...props}>
12-
<p>Testing</p>
32+
<Form>
33+
<Field
34+
name={'name'}
35+
label={'Schedule name'}
36+
description={'A human readable identifer for this schedule.'}
37+
/>
38+
<div className={'flex mt-6'}>
39+
<div className={'flex-1 mr-4'}>
40+
<Field name={'dayOfWeek'} label={'Day of week'}/>
41+
</div>
42+
<div className={'flex-1 mr-4'}>
43+
<Field name={'dayOfMonth'} label={'Day of month'}/>
44+
</div>
45+
<div className={'flex-1 mr-4'}>
46+
<Field name={'hour'} label={'Hour'}/>
47+
</div>
48+
<div className={'flex-1'}>
49+
<Field name={'minute'} label={'Minute'}/>
50+
</div>
51+
</div>
52+
<p className={'input-help'}>
53+
The schedule system supports the use of Cronjob syntax when defining when tasks should begin
54+
running. Use the fields above to specify when these tasks should begin running.
55+
</p>
56+
<div className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
57+
<Switch
58+
name={'enabled'}
59+
description={'If disabled, this schedule and it\'s associated tasks will not run.'}
60+
label={'Enabled'}
61+
/>
62+
</div>
63+
<div className={'mt-6 text-right'}>
64+
<button className={'btn btn-lg btn-primary'} type={'button'}>
65+
Save
66+
</button>
67+
</div>
68+
</Form>
1369
</Modal>
1470
);
1571
};
72+
73+
export default connect(
74+
null,
75+
// @ts-ignore
76+
(dispatch: Actions<ApplicationStore>) => ({
77+
addError: dispatch.flashes.addError,
78+
}),
79+
)(
80+
withFormik<ComponentProps, Values>({
81+
handleSubmit: (values, { props }) => {
82+
},
83+
84+
mapPropsToValues: ({ schedule }) => ({
85+
name: schedule.name,
86+
dayOfWeek: schedule.cron.dayOfWeek,
87+
dayOfMonth: schedule.cron.dayOfMonth,
88+
hour: schedule.cron.hour,
89+
minute: schedule.cron.minute,
90+
enabled: schedule.isActive,
91+
}),
92+
93+
validationSchema: object().shape({
94+
name: string().required(),
95+
enabled: boolean().required(),
96+
}),
97+
})(EditScheduleModal),
98+
);

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

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
22
import getServerSchedules, { Schedule } from '@/api/server/schedules/getServerSchedules';
33
import { ServerContext } from '@/state/server';
44
import Spinner from '@/components/elements/Spinner';
5-
import { Link, RouteComponentProps } from 'react-router-dom';
5+
import { RouteComponentProps } from 'react-router-dom';
66
import FlashMessageRender from '@/components/FlashMessageRender';
77
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
88
import { httpErrorToHuman } from '@/api/http';
@@ -14,8 +14,9 @@ interface Params {
1414
schedule?: string;
1515
}
1616

17-
export default ({ history, match, location: { hash } }: RouteComponentProps<Params>) => {
17+
export default ({ history, match }: RouteComponentProps<Params>) => {
1818
const { id, uuid } = ServerContext.useStoreState(state => state.server.data!);
19+
const [ active, setActive ] = useState(0);
1920
const [ schedules, setSchedules ] = useState<Schedule[] | null>(null);
2021
const { clearFlashes, addError } = useStoreActions((actions: Actions<ApplicationStore>) => actions.flashes);
2122

@@ -29,7 +30,9 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
2930
});
3031
}, [ setSchedules ]);
3132

32-
const matched = (schedules || []).find(schedule => schedule.id === Number(hash.match(/\d+$/) || 0));
33+
const matched = useMemo(() => {
34+
return schedules?.find(schedule => schedule.id === active);
35+
}, [ active ]);
3336

3437
return (
3538
<div className={'my-10 mb-6'}>
@@ -38,21 +41,21 @@ export default ({ history, match, location: { hash } }: RouteComponentProps<Para
3841
<Spinner size={'large'} centered={true}/>
3942
:
4043
schedules.map(schedule => (
41-
<Link
44+
<div
4245
key={schedule.id}
43-
to={`/server/${id}/schedules/#/schedule/${schedule.id}`}
44-
className={'grey-row-box'}
46+
onClick={() => setActive(schedule.id)}
47+
className={'grey-row-box cursor-pointer'}
4548
>
4649
<ScheduleRow schedule={schedule}/>
47-
</Link>
50+
</div>
4851
))
4952
}
5053
{matched &&
5154
<EditScheduleModal
5255
schedule={matched}
5356
visible={true}
5457
appear={true}
55-
onDismissed={() => history.push(match.url)}
58+
onDismissed={() => setActive(0)}
5659
/>
5760
}
5861
</div>

0 commit comments

Comments
 (0)