KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update show for /article route

Browse Source
This commit is contained in:
maxim 2025-02-21 22:15:16 +03:00
parent 3a912e5494
commit 80bc179b69
2 changed files with 47 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/App.tsx
View File

@ -259,9 +259,10 @@ function App() {
<RefineKbar />
<UnsavedChangesNotifier />
<DocumentTitleHandler
handler={(title) => {
const cleanedTitle = title.autoGeneratedTitle.split('|')[0].trim()
return `${cleanedTitle} — Белые ночи`
handler={() => {
// const cleanedTitle = title.autoGeneratedTitle.split('|')[0].trim()
// return `${cleanedTitle} — Белые ночи`
return 'Белые ночи'
}}
/>
</Refine>

93
src/pages/article/show.tsx
View File

@ -1,4 +1,4 @@
import {Stack, Typography, Box, Grid2 as Grid, Button, MenuItem, Select, FormControl, InputLabel, TextField} from '@mui/material'
import {Stack, Typography, Grid2 as Grid, Button, MenuItem, Select, FormControl, InputLabel, TextField, Card, CardMedia, CardContent, CardActions} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent} from '@refinedev/mui'
@ -72,6 +72,7 @@ export const ArticleShow = () => {
.then((response) => {
setLinkedMedia(response?.data || [])
setMediaOrder(mediaOrder + 1)
setSelectedMediaId('')
})
.catch(() => {
setLinkedMedia([])
@ -113,7 +114,7 @@ export const ArticleShow = () => {
<Stack gap={4}>
{fields.map(({label, data}) => (
<Stack key={data} gap={1}>
<Typography variant="body1" fontWeight="bold">
<Typography variant="h6" fontWeight="bold">
{label}
</Typography>
<TextFieldComponent value={record?.[data] || ''} />
@ -121,65 +122,57 @@ export const ArticleShow = () => {
))}
<Stack gap={2}>
<Typography variant="body1" fontWeight="bold">
<Typography variant="h6" fontWeight="bold">
Медиа
</Typography>
<Grid container gap={2}>
<Grid container spacing={2}>
{mediaLoading ? (
<Typography>Loading media...</Typography>
<Typography>Загрузка медиа...</Typography>
) : linkedMedia.length > 0 ? (
linkedMedia.map((mediaItem, index) => (
<Box key={index} sx={{border: '2px solid #dddddd25', padding: '20px', marginBottom: '8px'}}>
{record && (
<Box sx={{display: 'flex', justifyContent: 'center', alignItems: 'center', marginBottom: '20px'}}>
<img src={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} style={{maxWidth: '100%', height: '20vh', objectFit: 'contain', borderRadius: 8}} />
</Box>
)}
<Stack gap={0.5}>
{mediaFields.map(({label, data}) => (
<Typography key={data}>
<strong>{label}:</strong> {mediaItem?.[data]}
</Typography>
))}
<Button variant="outlined" color="error" onClick={() => deleteMedia(mediaItem?.id)} sx={{mt: 2}}>
Отвязать
</Button>
</Stack>
</Box>
linkedMedia.map((mediaItem) => (
<Grid key={mediaItem.id}>
<Card sx={{backgroundColor: '#1e1e1e', borderRadius: 2}}>
<CardMedia component="img" height="200" image={`${BACKEND_URL}/media/${mediaItem?.id}/download`} alt={mediaItem?.filename} sx={{objectFit: 'contain', backgroundColor: '#2e2e2e'}} />
<CardContent>
{mediaFields.map(({label, data}) => (
<Typography key={data} variant="body2" color="textSecondary">
<strong>{label}:</strong> {mediaItem?.[data]}
</Typography>
))}
</CardContent>
<CardActions>
<Button variant="outlined" color="error" onClick={() => deleteMedia(mediaItem?.id)} fullWidth>
Отвязать
</Button>
</CardActions>
</Card>
</Grid>
))
) : (
<Typography>Медиа не найдены</Typography>
<Typography>Нет привязанных медиа</Typography>
)}
</Grid>
<Stack gap={2}>
<Typography variant="body1" fontWeight="bold">
{/* sx={{width: '650px'}} */}
<Stack gap={2} mt={4}>
{' '}
<Typography variant="h6" fontWeight="bold">
Привязать медиа
</Typography>
<Stack gap={2.5}>
<FormControl fullWidth>
<InputLabel>Медиа</InputLabel>
<Select value={selectedMediaId} onChange={(e) => setSelectedMediaId(e.target.value)} fullWidth>
{availableMedia.map((mediaItem) => (
<MenuItem key={mediaItem.id} value={mediaItem.id}>
{mediaItem.filename}
</MenuItem>
))}
</Select>
</FormControl>
<FormControl fullWidth>
<TextField type="number" label="Порядок отображения медиа" name="heading" value={mediaOrder} onChange={(e) => setMediaOrder(Number(e.target.value))} fullWidth InputLabelProps={{shrink: true}} />
</FormControl>
<Button variant="contained" onClick={linkMedia} disabled={!selectedMediaId}>
Привязать
</Button>
</Stack>
<FormControl fullWidth>
<InputLabel>Медиа</InputLabel>
<Select value={selectedMediaId} onChange={(e) => setSelectedMediaId(e.target.value)} fullWidth>
{availableMedia.map((mediaItem) => (
<MenuItem key={mediaItem.id} value={mediaItem.id}>
{mediaItem.filename}
</MenuItem>
))}
</Select>
</FormControl>
<TextField type="number" label="Порядок отображения медиа" value={mediaOrder} onChange={(e) => setMediaOrder(Number(e.target.value))} fullWidth InputLabelProps={{shrink: true}} />
<Button variant="contained" onClick={linkMedia} disabled={!selectedMediaId}>
Привязать
</Button>
</Stack>
</Stack>
</Stack>