4a234af7a3
Changes CopyOnClick to allow any. Allows database information to be copied on click. Changes layouts on database/backups to match the network tab. Changes text to lighten it one level from 400 to 300 for easier visibility. Moves database api endpoints to their own folder for some organization.
77 lines
3.5 KiB
TypeScript
77 lines
3.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import getServerSchedules from '@/api/server/schedules/getServerSchedules';
|
|
import { ServerContext } from '@/state/server';
|
|
import Spinner from '@/components/elements/Spinner';
|
|
import { RouteComponentProps } from 'react-router-dom';
|
|
import FlashMessageRender from '@/components/FlashMessageRender';
|
|
import ScheduleRow from '@/components/server/schedules/ScheduleRow';
|
|
import { httpErrorToHuman } from '@/api/http';
|
|
import EditScheduleModal from '@/components/server/schedules/EditScheduleModal';
|
|
import Can from '@/components/elements/Can';
|
|
import useFlash from '@/plugins/useFlash';
|
|
import tw from 'twin.macro';
|
|
import GreyRowBox from '@/components/elements/GreyRowBox';
|
|
import Button from '@/components/elements/Button';
|
|
import ServerContentBlock from '@/components/elements/ServerContentBlock';
|
|
|
|
export default ({ match, history }: RouteComponentProps) => {
|
|
const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
|
|
const { clearFlashes, addError } = useFlash();
|
|
const [ loading, setLoading ] = useState(true);
|
|
const [ visible, setVisible ] = useState(false);
|
|
|
|
const schedules = ServerContext.useStoreState(state => state.schedules.data);
|
|
const setSchedules = ServerContext.useStoreActions(actions => actions.schedules.setSchedules);
|
|
|
|
useEffect(() => {
|
|
clearFlashes('schedules');
|
|
getServerSchedules(uuid)
|
|
.then(schedules => setSchedules(schedules))
|
|
.catch(error => {
|
|
addError({ message: httpErrorToHuman(error), key: 'schedules' });
|
|
console.error(error);
|
|
})
|
|
.then(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<ServerContentBlock title={'Schedules'}>
|
|
<FlashMessageRender byKey={'schedules'} css={tw`mb-4`}/>
|
|
{(!schedules.length && loading) ?
|
|
<Spinner size={'large'} centered/>
|
|
:
|
|
<>
|
|
{
|
|
schedules.length === 0 ?
|
|
<p css={tw`text-sm text-center text-neutral-300`}>
|
|
There are no schedules configured for this server.
|
|
</p>
|
|
:
|
|
schedules.map(schedule => (
|
|
<GreyRowBox
|
|
as={'a'}
|
|
key={schedule.id}
|
|
href={`${match.url}/${schedule.id}`}
|
|
css={tw`cursor-pointer mb-2 flex-wrap`}
|
|
onClick={(e: any) => {
|
|
e.preventDefault();
|
|
history.push(`${match.url}/${schedule.id}`, { schedule });
|
|
}}
|
|
>
|
|
<ScheduleRow schedule={schedule}/>
|
|
</GreyRowBox>
|
|
))
|
|
}
|
|
<Can action={'schedule.create'}>
|
|
<div css={tw`mt-8 flex justify-end`}>
|
|
{visible && <EditScheduleModal appear visible onDismissed={() => setVisible(false)}/>}
|
|
<Button type={'button'} onClick={() => setVisible(true)}>
|
|
Create schedule
|
|
</Button>
|
|
</div>
|
|
</Can>
|
|
</>
|
|
}
|
|
</ServerContentBlock>
|
|
);
|
|
};
|