Skip to content

Commit a288374

Browse files
DaneEverittDaneEveritt
committed
Update schedule page
1 parent f358605 commit a288374

File tree

12 files changed

+180
-168
lines changed

12 files changed

+180
-168
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const ConfirmationModal = ({ title, appear, children, visible, buttonText, onCon
1818
showSpinnerOverlay={showSpinnerOverlay}
1919
onDismissed={() => onDismissed()}
2020
>
21-
<h3 css={tw`mb-6`}>{title}</h3>
21+
<h2 css={tw`text-2xl mb-6`}>{title}</h2>
2222
<p css={tw`text-sm`}>{children}</p>
2323
<div css={tw`flex items-center justify-end mt-8`}>
2424
<Button isSecondary onClick={() => onDismissed()}>

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import styled, { css } from 'styled-components/macro';
2+
import tw from 'twin.macro';
3+
4+
interface Props {
5+
hideDropdownArrow?: boolean;
6+
}
7+
8+
const Select = styled.select<Props>`
9+
${tw`shadow-none block p-3 pr-8 rounded border w-full text-sm transition-colors duration-150 ease-linear`};
10+
11+
&, &:hover:not(:disabled), &:focus {
12+
${tw`outline-none`};
13+
}
14+
15+
-webkit-appearance: none;
16+
-moz-appearance: none;
17+
background-size: 1rem;
18+
background-repeat: no-repeat;
19+
background-position-x: calc(100% - 0.75rem);
20+
background-position-y: center;
21+
22+
&::-ms-expand {
23+
display: none;
24+
}
25+
26+
${props => !props.hideDropdownArrow && css`
27+
${tw`bg-neutral-600 border-neutral-500 text-neutral-200`};
28+
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='%23C3D1DF' d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3e%3c/svg%3e ");
29+
30+
&:hover:not(:disabled), &:focus {
31+
${tw`border-neutral-400`};
32+
}
33+
`};
34+
`;
35+
36+
export default Select;

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import React, { useMemo } from 'react';
22
import styled from 'styled-components/macro';
33
import v4 from 'uuid/v4';
44
import tw from 'twin.macro';
5+
import Label from '@/components/elements/Label';
6+
import Input from '@/components/elements/Input';
57

68
const ToggleContainer = styled.div`
79
${tw`relative select-none w-12 leading-normal`};
@@ -50,29 +52,28 @@ const Switch = ({ name, label, description, defaultChecked, onChange, children }
5052
<div css={tw`flex items-center`}>
5153
<ToggleContainer css={tw`flex-none`}>
5254
{children
53-
|| <input
55+
|| <Input
5456
id={uuid}
5557
name={name}
5658
type={'checkbox'}
5759
onChange={e => onChange && onChange(e)}
5860
defaultChecked={defaultChecked}
5961
/>
6062
}
61-
<label htmlFor={uuid}/>
63+
<Label htmlFor={uuid}/>
6264
</ToggleContainer>
6365
{(label || description) &&
6466
<div css={tw`ml-4 w-full`}>
6567
{label &&
66-
<label
68+
<Label
6769
css={[ tw`cursor-pointer`, !!description && tw`mb-0` ]}
68-
className={'input-dark-label'}
6970
htmlFor={uuid}
7071
>
7172
{label}
72-
</label>
73+
</Label>
7374
}
7475
{description &&
75-
<p className={'input-help'}>
76+
<p css={tw`text-neutral-400 text-sm mt-2`}>
7677
{description}
7778
</p>
7879
}

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

Lines changed: 0 additions & 26 deletions
This file was deleted.

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

Lines changed: 12 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import React, { useState } from 'react';
2-
import Modal from '@/components/elements/Modal';
32
import deleteSchedule from '@/api/server/schedules/deleteSchedule';
43
import { ServerContext } from '@/state/server';
54
import { Actions, useStoreActions } from 'easy-peasy';
65
import { ApplicationStore } from '@/state';
76
import { httpErrorToHuman } from '@/api/http';
7+
import tw from 'twin.macro';
8+
import Button from '@/components/elements/Button';
9+
import ConfirmationModal from '@/components/elements/ConfirmationModal';
810

911
interface Props {
1012
scheduleId: number;
@@ -36,34 +38,19 @@ export default ({ scheduleId, onDeleted }: Props) => {
3638

3739
return (
3840
<>
39-
<Modal
41+
<ConfirmationModal
42+
title={'Delete schedule?'}
43+
buttonText={'Yes, delete schedule'}
44+
onConfirmed={onDelete}
4045
visible={visible}
4146
onDismissed={() => setVisible(false)}
42-
showSpinnerOverlay={isLoading}
4347
>
44-
<h3 className={'mb-6'}>Delete schedule</h3>
45-
<p className={'text-sm'}>
46-
Are you sure you want to delete this schedule? All tasks will be removed and any running processes
47-
will be terminated.
48-
</p>
49-
<div className={'mt-6 flex justify-end'}>
50-
<button
51-
className={'btn btn-secondary btn-sm mr-4'}
52-
onClick={() => setVisible(false)}
53-
>
54-
Cancel
55-
</button>
56-
<button
57-
className={'btn btn-red btn-sm'}
58-
onClick={() => onDelete()}
59-
>
60-
Yes, delete schedule
61-
</button>
62-
</div>
63-
</Modal>
64-
<button className={'btn btn-red btn-secondary btn-sm mr-4'} onClick={() => setVisible(true)}>
48+
Are you sure you want to delete this schedule? All tasks will be removed and any running processes
49+
will be terminated.
50+
</ConfirmationModal>
51+
<Button css={tw`mr-4`} color={'red'} isSecondary onClick={() => setVisible(true)}>
6552
Delete
66-
</button>
53+
</Button>
6754
</>
6855
);
6956
};

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

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import { httpErrorToHuman } from '@/api/http';
1010
import FlashMessageRender from '@/components/FlashMessageRender';
1111
import useServer from '@/plugins/useServer';
1212
import useFlash from '@/plugins/useFlash';
13+
import tw from 'twin.macro';
14+
import Button from '@/components/elements/Button';
1315

1416
type Props = {
1517
schedule?: Schedule;
@@ -29,43 +31,43 @@ const EditScheduleModal = ({ schedule, ...props }: Omit<Props, 'onScheduleUpdate
2931

3032
return (
3133
<Modal {...props} showSpinnerOverlay={isSubmitting}>
32-
<h3 className={'mb-6'}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
33-
<FlashMessageRender byKey={'schedule:edit'} className={'mb-6'}/>
34+
<h3 css={tw`mb-6`}>{schedule ? 'Edit schedule' : 'Create new schedule'}</h3>
35+
<FlashMessageRender byKey={'schedule:edit'} css={tw`mb-6`}/>
3436
<Form>
3537
<Field
3638
name={'name'}
3739
label={'Schedule name'}
3840
description={'A human readable identifer for this schedule.'}
3941
/>
40-
<div className={'flex mt-6'}>
41-
<div className={'flex-1 mr-4'}>
42+
<div css={tw`flex mt-6`}>
43+
<div css={tw`flex-1 mr-4`}>
4244
<Field name={'dayOfWeek'} label={'Day of week'}/>
4345
</div>
44-
<div className={'flex-1 mr-4'}>
46+
<div css={tw`flex-1 mr-4`}>
4547
<Field name={'dayOfMonth'} label={'Day of month'}/>
4648
</div>
47-
<div className={'flex-1 mr-4'}>
49+
<div css={tw`flex-1 mr-4`}>
4850
<Field name={'hour'} label={'Hour'}/>
4951
</div>
50-
<div className={'flex-1'}>
52+
<div css={tw`flex-1`}>
5153
<Field name={'minute'} label={'Minute'}/>
5254
</div>
5355
</div>
54-
<p className={'input-help'}>
56+
<p css={tw`text-neutral-400 text-xs mt-2`}>
5557
The schedule system supports the use of Cronjob syntax when defining when tasks should begin
5658
running. Use the fields above to specify when these tasks should begin running.
5759
</p>
58-
<div className={'mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded'}>
60+
<div css={tw`mt-6 bg-neutral-700 border border-neutral-800 shadow-inner p-4 rounded`}>
5961
<FormikSwitch
6062
name={'enabled'}
6163
description={'If disabled, this schedule and it\'s associated tasks will not run.'}
6264
label={'Enabled'}
6365
/>
6466
</div>
65-
<div className={'mt-6 text-right'}>
66-
<button className={'btn btn-sm btn-primary'} type={'submit'}>
67+
<div css={tw`mt-6 text-right`}>
68+
<Button type={'submit'}>
6769
{schedule ? 'Save changes' : 'Create schedule'}
68-
</button>
70+
</Button>
6971
</div>
7072
</Form>
7173
</Modal>

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, { useState } from 'react';
22
import { Schedule } from '@/api/server/schedules/getServerSchedules';
33
import TaskDetailsModal from '@/components/server/schedules/TaskDetailsModal';
4+
import Button from '@/components/elements/Button';
45

56
interface Props {
67
schedule: Schedule;
@@ -17,9 +18,9 @@ export default ({ schedule }: Props) => {
1718
onDismissed={() => setVisible(false)}
1819
/>
1920
}
20-
<button className={'btn btn-primary btn-sm'} onClick={() => setVisible(true)}>
21+
<Button onClick={() => setVisible(true)}>
2122
New Task
22-
</button>
23+
</Button>
2324
</>
2425
);
2526
};

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

Lines changed: 15 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ import Can from '@/components/elements/Can';
1111
import useServer from '@/plugins/useServer';
1212
import useFlash from '@/plugins/useFlash';
1313
import PageContentBlock from '@/components/elements/PageContentBlock';
14+
import tw from 'twin.macro';
15+
import GreyRowBox from '@/components/elements/GreyRowBox';
16+
import Button from '@/components/elements/Button';
1417

1518
export default ({ match, history }: RouteComponentProps) => {
1619
const { uuid } = useServer();
@@ -34,45 +37,38 @@ export default ({ match, history }: RouteComponentProps) => {
3437

3538
return (
3639
<PageContentBlock>
37-
<FlashMessageRender byKey={'schedules'} className={'mb-4'}/>
40+
<FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
3841
{(!schedules.length && loading) ?
39-
<Spinner size={'large'} centered={true}/>
42+
<Spinner size={'large'} centered/>
4043
:
4144
<>
4245
{
4346
schedules.length === 0 ?
44-
<p className={'text-sm text-center text-neutral-400'}>
47+
<p css={tw`text-sm text-center text-neutral-400`}>
4548
There are no schedules configured for this server.
4649
</p>
4750
:
4851
schedules.map(schedule => (
49-
<a
52+
<GreyRowBox
53+
as={'a'}
5054
key={schedule.id}
5155
href={`${match.url}/${schedule.id}`}
52-
className={'grey-row-box cursor-pointer mb-2'}
53-
onClick={e => {
56+
css={tw`cursor-pointer mb-2`}
57+
onClick={(e: any) => {
5458
e.preventDefault();
5559
history.push(`${match.url}/${schedule.id}`, { schedule });
5660
}}
5761
>
5862
<ScheduleRow schedule={schedule}/>
59-
</a>
63+
</GreyRowBox>
6064
))
6165
}
6266
<Can action={'schedule.create'}>
63-
<div className={'mt-8 flex justify-end'}>
64-
{visible && <EditScheduleModal
65-
appear={true}
66-
visible={true}
67-
onDismissed={() => setVisible(false)}
68-
/>}
69-
<button
70-
type={'button'}
71-
className={'btn btn-sm btn-primary'}
72-
onClick={() => setVisible(true)}
73-
>
67+
<div css={tw`mt-8 flex justify-end`}>
68+
{visible && <EditScheduleModal appear visible onDismissed={() => setVisible(false)}/>}
69+
<Button type={'button'} onClick={() => setVisible(true)}>
7470
Create schedule
75-
</button>
71+
</Button>
7672
</div>
7773
</Can>
7874
</>

0 commit comments

Comments
 (0)