From 80bc179b692632a416288fde50b8fabffe9e0e08 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Fri, 21 Feb 2025 22:15:16 +0300
Subject: [PATCH] update `show` for `/article` route

---
 src/App.tsx                |  7 +--
 src/pages/article/show.tsx | 93 ++++++++++++++++++--------------------
 2 files changed, 47 insertions(+), 53 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 73c6f5d..ef051bc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
diff --git a/src/pages/article/show.tsx b/src/pages/article/show.tsx
index 0737c67..fba0f4a 100644
--- a/src/pages/article/show.tsx
+++ b/src/pages/article/show.tsx
@@ -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>