feat: remove admin info page CRUD
This commit is contained in:
Kirill
@@ -1 +0,0 @@
|
||||
export { AdminInfoPage } from './ui/AdminInfoPage'
|
||||
@@ -1,216 +0,0 @@
|
||||
import Alert from '@mui/material/Alert'
|
||||
import Box from '@mui/material/Box'
|
||||
import Button from '@mui/material/Button'
|
||||
import Dialog from '@mui/material/Dialog'
|
||||
import DialogActions from '@mui/material/DialogActions'
|
||||
import DialogContent from '@mui/material/DialogContent'
|
||||
import DialogTitle from '@mui/material/DialogTitle'
|
||||
import FormControlLabel from '@mui/material/FormControlLabel'
|
||||
import Stack from '@mui/material/Stack'
|
||||
import Switch from '@mui/material/Switch'
|
||||
import Table from '@mui/material/Table'
|
||||
import TableBody from '@mui/material/TableBody'
|
||||
import TableCell from '@mui/material/TableCell'
|
||||
import TableHead from '@mui/material/TableHead'
|
||||
import TableRow from '@mui/material/TableRow'
|
||||
import TextField from '@mui/material/TextField'
|
||||
import Typography from '@mui/material/Typography'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Controller, useForm } from 'react-hook-form'
|
||||
import {
|
||||
createInfoBlock,
|
||||
deleteInfoBlock,
|
||||
fetchAdminInfoBlocks,
|
||||
type InfoPageBlock,
|
||||
updateInfoBlock,
|
||||
} from '@/entities/info'
|
||||
import { getErrorMessage } from '@/shared/lib/get-error-message'
|
||||
import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
|
||||
import { useEditDialogState } from '@/shared/lib/use-edit-dialog-state'
|
||||
import { EntityRowActions } from '@/shared/ui/EntityRowActions'
|
||||
|
||||
type FormState = {
|
||||
key: string
|
||||
title: string
|
||||
body: string
|
||||
sort: string
|
||||
published: boolean
|
||||
}
|
||||
|
||||
const emptyForm = (): FormState => ({ key: '', title: '', body: '', sort: '0', published: true })
|
||||
|
||||
export function AdminInfoPage() {
|
||||
const qc = useQueryClient()
|
||||
const { dialogOpen, editing, openCreateDialog, openEditDialog, closeDialog } = useEditDialogState<InfoPageBlock>()
|
||||
const form = useForm<FormState>({ defaultValues: emptyForm(), mode: 'onChange' })
|
||||
|
||||
const blocksQuery = useQuery({
|
||||
queryKey: ['admin', 'info-page', 'blocks'],
|
||||
queryFn: fetchAdminInfoBlocks,
|
||||
})
|
||||
|
||||
const saveMut = useMutation({
|
||||
mutationFn: async () => {
|
||||
const values = form.getValues()
|
||||
const payload = {
|
||||
key: values.key.trim(),
|
||||
title: values.title.trim(),
|
||||
body: values.body.trim(),
|
||||
sort: Number(values.sort || 0),
|
||||
published: values.published,
|
||||
}
|
||||
if (editing) return updateInfoBlock(editing.id, payload)
|
||||
return createInfoBlock(payload)
|
||||
},
|
||||
onSuccess: async () => {
|
||||
closeDialog()
|
||||
form.reset(emptyForm())
|
||||
await invalidateQueryKeys(qc, [
|
||||
['admin', 'info-page', 'blocks'],
|
||||
['info-page', 'public', 'blocks'],
|
||||
])
|
||||
},
|
||||
})
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: (id: string) => deleteInfoBlock(id),
|
||||
onSuccess: async () => {
|
||||
await invalidateQueryKeys(qc, [
|
||||
['admin', 'info-page', 'blocks'],
|
||||
['info-page', 'public', 'blocks'],
|
||||
])
|
||||
},
|
||||
})
|
||||
|
||||
const openCreate = () => {
|
||||
form.reset(emptyForm())
|
||||
openCreateDialog()
|
||||
}
|
||||
|
||||
const openEdit = (item: InfoPageBlock) => {
|
||||
openEditDialog(item)
|
||||
form.reset({
|
||||
key: item.key,
|
||||
title: item.title,
|
||||
body: item.body,
|
||||
sort: String(item.sort),
|
||||
published: item.published,
|
||||
})
|
||||
}
|
||||
|
||||
const items = blocksQuery.data?.items ?? []
|
||||
const err = saveMut.error ?? deleteMut.error
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Stack direction="row" sx={{ mb: 2, alignItems: 'center', justifyContent: 'space-between' }}>
|
||||
<Typography variant="h4">Информационная страница</Typography>
|
||||
<Button variant="contained" onClick={openCreate}>
|
||||
Новый блок
|
||||
</Button>
|
||||
</Stack>
|
||||
|
||||
<Typography color="text.secondary" sx={{ mb: 2 }}>
|
||||
Управление блоками страницы с процессом покупки, оплаты и доставки.
|
||||
</Typography>
|
||||
|
||||
{blocksQuery.isError && <Alert severity="error">Не удалось загрузить блоки.</Alert>}
|
||||
{err && (
|
||||
<Alert severity="error" sx={{ mb: 2 }}>
|
||||
{getErrorMessage(err)}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Table size="small">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>Key</TableCell>
|
||||
<TableCell>Заголовок</TableCell>
|
||||
<TableCell>Порядок</TableCell>
|
||||
<TableCell>Опубликован</TableCell>
|
||||
<TableCell align="right">Действия</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{items.map((item) => (
|
||||
<TableRow key={item.id} hover>
|
||||
<TableCell>{item.key}</TableCell>
|
||||
<TableCell>{item.title}</TableCell>
|
||||
<TableCell>{item.sort}</TableCell>
|
||||
<TableCell>{item.published ? 'Да' : 'Нет'}</TableCell>
|
||||
<TableCell align="right">
|
||||
<EntityRowActions
|
||||
onEdit={() => openEdit(item)}
|
||||
onDelete={() => deleteMut.mutate(item.id)}
|
||||
deleteDisabled={deleteMut.isPending}
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{items.length === 0 && !blocksQuery.isLoading && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} sx={{ color: 'text.secondary' }}>
|
||||
Блоков пока нет.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
|
||||
<Dialog open={dialogOpen} onClose={closeDialog} fullWidth maxWidth="md">
|
||||
<DialogTitle>{editing ? 'Редактировать блок' : 'Новый блок'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<Stack spacing={2} sx={{ mt: 1 }}>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="key"
|
||||
render={({ field }) => <TextField label="Key (латиница, цифры, _-)" fullWidth required {...field} />}
|
||||
/>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="title"
|
||||
render={({ field }) => <TextField label="Заголовок" fullWidth required {...field} />}
|
||||
/>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="body"
|
||||
render={({ field }) => (
|
||||
<TextField label="Содержимое" fullWidth multiline minRows={5} required {...field} />
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="sort"
|
||||
render={({ field }) => <TextField label="Порядок сортировки" fullWidth {...field} />}
|
||||
/>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="published"
|
||||
render={({ field }) => (
|
||||
<FormControlLabel
|
||||
control={<Switch checked={field.value} onChange={(_, v) => field.onChange(v)} />}
|
||||
label="Показывать на публичной странице"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</Stack>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button onClick={closeDialog}>Отмена</Button>
|
||||
<Button
|
||||
variant="contained"
|
||||
onClick={() => saveMut.mutate()}
|
||||
disabled={
|
||||
saveMut.isPending ||
|
||||
!form.watch('key').trim() ||
|
||||
!form.watch('title').trim() ||
|
||||
!form.watch('body').trim()
|
||||
}
|
||||
>
|
||||
{editing ? 'Сохранить' : 'Создать'}
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user