cpvalente/ontime
1
0
Fork 0
mirror of https://github.com/cpvalente/ontime.git synced 2026-08-14 03:43:50 +00:00
Code Issues Packages Projects Releases 10 Wiki Activity

modal manager

Browse Source 
- Create a modal with tabs for reusability
This commit is contained in:
cv
2021-10-02 16:42:51 +02:00
parent 260b0fc97f
commit de44ea81d3
5 changed files with 166 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/features/modals/ModalManager.jsx
+58
View File
@@ -0,0 +1,58 @@
import PropTypes from 'prop-types';
import {
Modal,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/modal';
import { Tab, TabList, TabPanel, TabPanels, Tabs } from '@chakra-ui/tabs';
import SettingsModal from './SettingsModal';
export default function ModalManager(props) {
const { isOpen, onClose } = props;
return (
<Modal
isOpen={isOpen}
onClose={onClose}
closeOnOverlayClick={false}
motionPreset={'slideInBottom'}
>
<ModalOverlay />
<ModalContent>
<ModalHeader>Ontime Settings</ModalHeader>
<ModalCloseButton />
<Tabs size='sm' isLazy>
<TabList>
<Tab>Event Settings</Tab>
<Tab>Application Settings</Tab>
<Tab>URL Aliases</Tab>
</TabList>
<TabPanels>
<TabPanel>
<SettingsModal onClose={onClose} />
</TabPanel>
<TabPanel>
<p>Application settings will be here!</p>
<p>Set port</p>
<p>Set end message</p>
</TabPanel>
<TabPanel>
<p>You will be able to define URL aliases here!</p>
<p>List existing aliases</p>
<p>List existing aliases</p>
<p>List existing aliases</p>
<p>Add new alias input + button</p>
</TabPanel>
</TabPanels>
</Tabs>
</ModalContent>
</Modal>
);
}
ModalManager.propTypes = {
isOpen: PropTypes.bool.isRequired,
onClose: PropTypes.bool.isRequired,
};
client/src/features/modals/SettingsModal.jsx
+103 -128
View File
@@ -1,12 +1,4 @@
import {
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/modal';
import { ModalBody } from '@chakra-ui/modal';
import {
FormLabel,
FormControl,
@@ -19,7 +11,7 @@ import { useEffect, useState } from 'react';
import { useFetch } from 'app/hooks/useFetch';
import { EVENT_TABLE } from 'app/api/apiConstants';
export default function SettingsModal(props) {
export default function SettingsModal() {
const { data, status, isError } = useFetch(EVENT_TABLE, fetchEvent);
const [formData, setFormData] = useState({
title: '',
@@ -28,7 +20,6 @@ export default function SettingsModal(props) {
backstageInfo: '',
});
const [submitting, setSubmitting] = useState(false);
const { isOpen, onClose } = props;
useEffect(() => {
if (data == null) return;
@@ -45,128 +36,112 @@ export default function SettingsModal(props) {
event.preventDefault();
setSubmitting(true);
await postEvent(formData).then(setSubmitting(false)).then(onClose);
await postEvent(formData).then(setSubmitting(false));
};
return (
<Modal
isOpen={isOpen}
onClose={onClose}
closeOnOverlayClick={false}
motionPreset={'slideInBottom'}
>
<ModalOverlay />
<ModalContent>
<form onSubmit={submitHandler}>
<ModalHeader>Event Main Info</ModalHeader>
<ModalCloseButton />
<ModalBody>
{status === 'success' && (
<>
<FormControl id='title'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='title'
>
Event Title
</FormLabel>
<Input
size='sm'
name='title'
placeholder='Event Title'
autoComplete='off'
value={formData.title}
onChange={(event) =>
setFormData({ ...formData, title: event.target.value })
}
isDisabled={submitting}
/>
</FormControl>
<>
<form onSubmit={submitHandler}>
<ModalBody>
{status === 'success' && (
<>
<FormControl id='title'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='title'
>
Event Title
</FormLabel>
<Input
size='sm'
name='title'
placeholder='Event Title'
autoComplete='off'
value={formData.title}
onChange={(event) =>
setFormData({ ...formData, title: event.target.value })
}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='url'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='url'
>
Event URL
</FormLabel>
<Input
size='sm'
name='url'
placeholder='www.onsite.no'
autoComplete='off'
value={formData.url}
onChange={(event) =>
setFormData({ ...formData, url: event.target.value })
}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='url'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='url'
>
Event URL
</FormLabel>
<Input
size='sm'
name='url'
placeholder='www.onsite.no'
autoComplete='off'
value={formData.url}
onChange={(event) =>
setFormData({ ...formData, url: event.target.value })
}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='pubInfo'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='pubInfo'
>
Public Info
</FormLabel>
<Textarea
size='sm'
name='pubInfo'
placeholder='Information to be shown on public screens'
autoComplete='off'
value={formData.publicInfo}
onChange={(event) =>
setFormData({
...formData,
publicInfo: event.target.value,
})
}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='pubInfo'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='pubInfo'
>
Public Info
</FormLabel>
<Textarea
size='sm'
name='pubInfo'
placeholder='Information to be shown on public screens'
autoComplete='off'
value={formData.publicInfo}
onChange={(event) =>
setFormData({
...formData,
publicInfo: event.target.value,
})
}
isDisabled={submitting}
/>
</FormControl>
<FormControl id='backstageInfo'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='backstageInfo'
>
Backstage Info
</FormLabel>
<Textarea
size='sm'
name='backstageInfo'
placeholder='Information to be shown on backstage screens'
autoComplete='off'
value={formData.backstageInfo}
onChange={(event) =>
setFormData({
...formData,
backstageInfo: event.target.value,
})
}
isDisabled={submitting}
/>
</FormControl>
</>
)}
</ModalBody>
<ModalFooter>
<Button
colorScheme='blue'
mr={3}
isLoading={submitting}
type='submit'
>
Save
</Button>
<Button variant='ghost' onClick={onClose} disabled={submitting}>
Cancel
</Button>
</ModalFooter>
</form>
</ModalContent>
</Modal>
<FormControl id='backstageInfo'>
<FormLabel
style={{ fontWeight: 400, paddingTop: '1em' }}
htmlFor='backstageInfo'
>
Backstage Info
</FormLabel>
<Textarea
size='sm'
name='backstageInfo'
placeholder='Information to be shown on backstage screens'
autoComplete='off'
value={formData.backstageInfo}
onChange={(event) =>
setFormData({
...formData,
backstageInfo: event.target.value,
})
}
isDisabled={submitting}
/>
</FormControl>
</>
)}
<Button
colorScheme='blue'
mr={3}
isLoading={submitting}
type='submit'
>
Save
</Button>
</ModalBody>
</form>
</>
);
}