templates editor #62
This commit is contained in:
226
frontend/src/components/TemplatesEditor.tsx
Normal file
226
frontend/src/components/TemplatesEditor.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
import AddIcon from '@mui/icons-material/Add'
|
||||
import CloseIcon from '@mui/icons-material/Close'
|
||||
import DeleteIcon from '@mui/icons-material/Delete'
|
||||
import {
|
||||
AppBar,
|
||||
Backdrop,
|
||||
Box,
|
||||
Button,
|
||||
Dialog,
|
||||
Grid,
|
||||
IconButton,
|
||||
Paper,
|
||||
Slide,
|
||||
TextField,
|
||||
Toolbar,
|
||||
Typography
|
||||
} from '@mui/material'
|
||||
import { TransitionProps } from '@mui/material/transitions'
|
||||
import { matchW } from 'fp-ts/lib/Either'
|
||||
import { pipe } from 'fp-ts/lib/function'
|
||||
import { forwardRef, useEffect, useState, useTransition } from 'react'
|
||||
import { useRecoilValue } from 'recoil'
|
||||
import { serverURL } from '../atoms/settings'
|
||||
import { useToast } from '../hooks/toast'
|
||||
import { useI18n } from '../hooks/useI18n'
|
||||
import { ffetch } from '../lib/httpClient'
|
||||
import { CustomTemplate } from '../types'
|
||||
|
||||
const Transition = forwardRef(function Transition(
|
||||
props: TransitionProps & {
|
||||
children: React.ReactElement
|
||||
},
|
||||
ref: React.Ref<unknown>,
|
||||
) {
|
||||
return <Slide direction="up" ref={ref} {...props} />
|
||||
})
|
||||
|
||||
interface Props extends React.HTMLAttributes<HTMLBaseElement> {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const TemplatesEditor: React.FC<Props> = ({ open, onClose }) => {
|
||||
const [templateName, setTemplateName] = useState('')
|
||||
const [templateContent, setTemplateContent] = useState('')
|
||||
|
||||
const serverAddr = useRecoilValue(serverURL)
|
||||
const [isPending, startTransition] = useTransition()
|
||||
|
||||
const [templates, setTemplates] = useState<CustomTemplate[]>([])
|
||||
|
||||
const { i18n } = useI18n()
|
||||
const { pushMessage } = useToast()
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
getTemplates()
|
||||
}
|
||||
}, [open])
|
||||
|
||||
const getTemplates = async () => {
|
||||
const task = ffetch<CustomTemplate[]>(`${serverAddr}/api/v1/template/all`)
|
||||
const either = await task()
|
||||
|
||||
pipe(
|
||||
either,
|
||||
matchW(
|
||||
(l) => pushMessage(l),
|
||||
(r) => setTemplates(r)
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const addTemplate = async () => {
|
||||
const task = ffetch<unknown>(`${serverAddr}/api/v1/template`, {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({
|
||||
name: templateName,
|
||||
content: templateContent,
|
||||
})
|
||||
})
|
||||
|
||||
const either = await task()
|
||||
|
||||
pipe(
|
||||
either,
|
||||
matchW(
|
||||
(l) => pushMessage(l, 'warning'),
|
||||
() => {
|
||||
pushMessage('Added template')
|
||||
getTemplates()
|
||||
setTemplateName('')
|
||||
setTemplateContent('')
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
const deleteTemplate = async (id: string) => {
|
||||
const task = ffetch<unknown>(`${serverAddr}/api/v1/template/${id}`, {
|
||||
method: 'DELETE',
|
||||
})
|
||||
|
||||
const either = await task()
|
||||
|
||||
pipe(
|
||||
either,
|
||||
matchW(
|
||||
(l) => pushMessage(l, 'warning'),
|
||||
() => {
|
||||
pushMessage('Deleted template')
|
||||
getTemplates()
|
||||
}
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
fullScreen
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
TransitionComponent={Transition}
|
||||
>
|
||||
<Backdrop
|
||||
sx={{ color: '#fff', zIndex: (theme) => theme.zIndex.drawer + 1 }}
|
||||
open={isPending}
|
||||
/>
|
||||
<AppBar sx={{ position: 'relative' }}>
|
||||
<Toolbar>
|
||||
<IconButton
|
||||
edge="start"
|
||||
color="inherit"
|
||||
onClick={onClose}
|
||||
aria-label="close"
|
||||
>
|
||||
<CloseIcon />
|
||||
</IconButton>
|
||||
<Typography sx={{ ml: 2, flex: 1 }} variant="h6" component="div">
|
||||
{i18n.t('templatesEditor')}
|
||||
</Typography>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
<Box sx={{
|
||||
backgroundColor: (theme) => theme.palette.background.default,
|
||||
minHeight: (theme) => `calc(99vh - ${theme.mixins.toolbar.minHeight}px)`
|
||||
}}>
|
||||
<Grid container spacing={2} sx={{ p: 4 }}>
|
||||
<Grid item xs={12}>
|
||||
<Paper
|
||||
elevation={4}
|
||||
sx={{
|
||||
p: 2,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
>
|
||||
<Grid container spacing={2} justifyContent="center" alignItems="center">
|
||||
<Grid item xs={3}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t('templatesEditorNameLabel')}
|
||||
onChange={e => setTemplateName(e.currentTarget.value)}
|
||||
value={templateName}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t('templatesEditorContentLabel')}
|
||||
onChange={e => setTemplateContent(e.currentTarget.value)}
|
||||
value={templateContent}
|
||||
InputProps={{
|
||||
endAdornment: <Button
|
||||
variant='contained'
|
||||
onClick={() => startTransition(() => { addTemplate() })}
|
||||
>
|
||||
<AddIcon />
|
||||
</Button>
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
{templates.map(template => (
|
||||
<Grid
|
||||
container
|
||||
spacing={2}
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
key={template.id}
|
||||
sx={{ mt: 1 }}
|
||||
>
|
||||
<Grid item xs={3}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t('templatesEditorNameLabel')}
|
||||
value={template.name}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={9}>
|
||||
<TextField
|
||||
fullWidth
|
||||
label={i18n.t('templatesEditorContentLabel')}
|
||||
value={template.content}
|
||||
InputProps={{
|
||||
endAdornment: <Button
|
||||
variant='contained'
|
||||
onClick={() => {
|
||||
startTransition(() => { deleteTemplate(template.id) })
|
||||
}}>
|
||||
<DeleteIcon />
|
||||
</Button>
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
))}
|
||||
</Paper>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Dialog >
|
||||
)
|
||||
}
|
||||
|
||||
export default TemplatesEditor
|
||||
Reference in New Issue
Block a user