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