integrate LinkedItems into /sight pages

src/components/LinkedItems.tsx

@@ -1,5 +1,5 @@
 import {useState, useEffect} from 'react'
-import {Stack, Typography, Button, MenuItem, Select, FormControl, InputLabel, Grid, Box, Accordion, AccordionSummary, AccordionDetails, useTheme} from '@mui/material'
+import {Stack, Typography, Button, MenuItem, Select, FormControl, InputLabel, Grid, Box, Accordion, AccordionSummary, AccordionDetails, useTheme, TextField} from '@mui/material'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import axios from 'axios'
 import {BACKEND_URL} from '../lib/constants'
@@ -22,6 +22,7 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
   const [items, setItems] = useState<T[]>([])
   const [linkedItems, setLinkedItems] = useState<T[]>([])
   const [selectedItemId, setSelectedItemId] = useState<number | ''>('')
+  const [pageNum, setPageNum] = useState<number>(1)
   const [isLoading, setIsLoading] = useState<boolean>(true)
   const theme = useTheme()
 
@@ -55,18 +56,35 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
     }
   }, [childResource, type])
 
+  useEffect(() => {
+    if (childResource === 'article' && parentResource === 'sight') {
+      setPageNum(linkedItems.length + 1)
+    }
+  }, [linkedItems, childResource, parentResource])
+
   const availableItems = items.filter((item) => !linkedItems.some((linked) => linked.id === item.id))
 
   const linkItem = () => {
     if (selectedItemId) {
+      const requestData =
+        childResource === 'article'
+          ? {
+              [`${childResource}_id`]: selectedItemId,
+              page_num: pageNum,
+            }
+          : {
+              [`${childResource}_id`]: selectedItemId,
+            }
+
       axios
-        .post(`${BACKEND_URL}/${parentResource}/${parentId}/${childResource}`, {
-          [`${childResource}_id`]: selectedItemId,
-        })
+        .post(`${BACKEND_URL}/${parentResource}/${parentId}/${childResource}`, requestData)
         .then(() => {
           axios.get(`${BACKEND_URL}/${parentResource}/${parentId}/${childResource}`).then((response) => {
             setLinkedItems(response?.data || [])
             setSelectedItemId('')
+            if (childResource === 'article') {
+              setPageNum(pageNum + 1)
+            }
           })
         })
         .catch((error) => {
@@ -98,7 +116,7 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
         }}
       >
         <Typography variant="subtitle1" fontWeight="bold">
-          {type === 'show' ? `Привязанные ${title}` : title}
+          Привязанные {title}
         </Typography>
       </AccordionSummary>
 
@@ -138,11 +156,11 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
           </Grid>
 
           {type === 'edit' && (
-            <>
+            <Stack gap={2}>
+              <Typography variant="subtitle1">Добавить {title}</Typography>
               <FormControl fullWidth>
-                <InputLabel>{title}</InputLabel>
-
-                <Select value={selectedItemId} onChange={(e) => setSelectedItemId(Number(e.target.value))} label={title} fullWidth>
+                <InputLabel>Выберите {title}</InputLabel>
+                <Select value={selectedItemId} onChange={(e) => setSelectedItemId(Number(e.target.value))} label={`Выберите ${title}`} fullWidth>
                   {availableItems.map((item) => (
                     <MenuItem key={item.id} value={item.id}>
                       {item[fields[0].data]}
@@ -151,10 +169,28 @@ export const LinkedItems = <T extends {id: number; [key: string]: any}>({parentI
                 </Select>
               </FormControl>
 
+              {childResource === 'article' && (
+                <FormControl fullWidth>
+                  <TextField
+                    type="number"
+                    label="Номер страницы"
+                    name="page_num"
+                    value={pageNum}
+                    onChange={(e) => {
+                      const newValue = Number(e.target.value)
+                      const minValue = linkedItems.length + 1 // page number on articles lenght
+                      setPageNum(newValue < minValue ? minValue : newValue)
+                    }}
+                    fullWidth
+                    InputLabelProps={{shrink: true}}
+                  />
+                </FormControl>
+              )}
+
               <Button variant="contained" onClick={linkItem} disabled={!selectedItemId}>
                 Добавить
               </Button>
-            </>
+            </Stack>
           )}
         </Stack>
       </AccordionDetails>