upgrade LinkedItems component

src/components/LinkedItems.tsx

@@ -3,6 +3,7 @@ import {Stack, Typography, Button, FormControl, Grid, Box, Accordion, AccordionS
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import axios from 'axios'
 import {BACKEND_URL} from '../lib/constants'
+import {Link} from 'react-router'
 
 type Field<T> = {
   label: string
@@ -142,22 +143,53 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
             ) : linkedItems.length > 0 ? (
               linkedItems.map((item, index) => (
                 <Box
+                  component={Link}
+                  to={`/${childResource}/show/${item.id}`}
                   key={index}
                   sx={{
                     marginTop: '8px',
                     padding: '14px',
                     borderRadius: 2,
                     border: `2px solid ${theme.palette.divider}`,
+                    width: childResource === 'article' ? '100%' : 'auto',
+                    textDecoration: 'none',
+                    color: 'inherit',
+                    display: 'block',
+                    '&:hover': {
+                      backgroundColor: theme.palette.action.hover,
+                    },
                   }}
                 >
                   <Stack gap={0.25}>
+                    {childResource === 'media' && item.id && (
+                      <img
+                        src={`https://wn.krbl.ru/media/${item.id}/download`}
+                        alt={String(item.filename)}
+                        style={{
+                          width: '100%',
+                          height: '120px',
+                          objectFit: 'contain',
+                          marginBottom: '8px',
+                          borderRadius: 4,
+                        }}
+                      />
+                    )}
                     {fields.map(({label, data}) => (
                       <Typography variant="body2" color="textSecondary" key={String(data)}>
                         <strong>{label}:</strong> {item[data]}
                       </Typography>
                     ))}
                     {type === 'edit' && (
-                      <Button variant="outlined" color="error" size="small" onClick={() => deleteItem(item.id)} sx={{mt: 1.5}}>
+                      <Button
+                        variant="outlined"
+                        color="error"
+                        size="small"
+                        onClick={(e) => {
+                          e.preventDefault()
+                          deleteItem(item.id)
+                        }}
+                        sx={{mt: 1.5}}
+                      >
                         Отвязать
                       </Button>
                     )}
@@ -165,7 +197,7 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
                 </Box>
               ))
             ) : (
-              <Typography>{title} не найдены</Typography>
+              <Typography color="textSecondary">{title} не найдены</Typography>
             )}
           </Grid>
 
@@ -181,7 +213,15 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
                 renderInput={(params) => <TextField {...params} label={`Выберите ${title}`} fullWidth />}
                 isOptionEqualToValue={(option, value) => option.id === value?.id}
                 filterOptions={(options, {inputValue}) => {
-                  return options.filter((option) => String(option[fields[0].data]).toLowerCase().startsWith(inputValue.toLowerCase()))
+                  // return options.filter((option) => String(option[fields[0].data]).toLowerCase().includes(inputValue.toLowerCase()))
+                  const searchWords = inputValue
+                    .toLowerCase()
+                    .split(' ')
+                    .filter((word) => word.length > 0)
+                  return options.filter((option) => {
+                    const optionWords = String(option[fields[0].data]).toLowerCase().split(' ')
+                    return searchWords.every((searchWord) => optionWords.some((word) => word.startsWith(searchWord)))
+                  })
                 }}
               />
 

src/pages/route/edit.tsx

@@ -111,13 +111,16 @@ export const RouteEdit = () => {
                 }
               }}
               error={!!error}
-              helperText={error?.message || 'Формат: [[lat1,lon1], [lat2,lon2], ...]'}
+              helperText={error?.message} // 'Формат: [[lat1,lon1], [lat2,lon2], ...]'
               margin="normal"
               fullWidth
               InputLabelProps={{shrink: true}}
               type="text"
               label={'Координаты маршрута'}
               placeholder="[[1.1, 2.2], [2.1, 4.5]]"
+              sx={{
+                marginBottom: 2,
+              }}
             />
           )}
         />