#30 Реализовал оторажение модального окна рядом с задачей

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

 import { Grid, TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat}) => {
+const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat, handleOpen}) => {
+
   
   const getTaskInDayCell = (tasks, day, hours) => {
     const hour = parseInt(hours.split(':')[0])
     let hourDiffEnd
-    let hourDiffStart
     if (hourFormat) {
       hourDiffEnd = hour + 1
     } else {
       hourDiffEnd = hour + 2
     }
-    if (hourFormat) {
-      hourDiffStart = hour - 1
-    } else {
-      hourDiffStart = hour - 2
-    }
     const tasksCell = tasks.filter(task=> {
     if (year === task.infoForCell.startYear) {
       if (month + 1 === task.infoForCell.startMonth) {
@@ -39,17 +34,22 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
       {tasksCell.length ? tasksCell.map((task, i)=>
       {
       return (
-      <Grid  key={task.id} sx={{backgroundColor: 'lightgreen'}}>
+      <Grid  
+        key={task.id} 
+        sx={{backgroundColor: 'lightgreen'}} 
+        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
+        >
           <TextField 
           id={task.title} 
           variant="standard" 
           value={task.title} 
           name='title' 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task)}}
           onChange={onChange}>
           </TextField>
-      </Grid>)}
+      </Grid>
+      )}
       ) : null }
+      
   </>)
 };
 

planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js

@@ -4,12 +4,29 @@ import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "./CalendarTask/CalendarTask";
+import ModalTask from "../UI/ModalTask/ModalTask";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask, hourFormat, setHourFormat}) {
   
   const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'])
   const [daysInMonth, setDaysInMonth] = useState([])
   const [cellSizes, setCellSizes] = useState({})
+  const [modal, setModal] = useState({open:false, y: 0, x: 0,});
+  const handleOpen = (e) => {
+    console.log(e.nativeEvent.offsetX)
+    setModal( {...modal, 
+      open: true, 
+      yPage: e.pageY, 
+      xPage: e.pageX, 
+      yDivClick: e.nativeEvent.offsetY,
+      xDivClick: e.nativeEvent.offsetX,
+      yDiv: e.target.offsetHeight,
+      xDiv: e.target.offsetWidth,
+    })
+  };
+  const handleClose = () => setModal({...modal, open: false});
+
+
   useEffect(()=>{
     const cells = hoursInDay.length
     const xs = 10.8/cells
@@ -105,6 +122,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                       day={day}
                       hours={hours}
                       hourFormat={hourFormat}
+                      handleOpen={handleOpen}
                     />               
                 </CalendarStandartCell>
                 ) 
@@ -112,6 +130,10 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
         </CalendarRow>
       )
     })}
+    <ModalTask
+      modal={modal}
+      handleClose={()=>{handleClose()}}
+    />
     </>
   );
 }

planner-front/src/components/UI/ModalTask/ModalTask.js

+import Box from '@mui/material/Box';
+import Modal from '@mui/material/Modal';
+
+
+export default function ModalTask({modal, handleClose, children}) {
+  const style = {
+    position: 'absolute',
+    top: modal.yPage - modal.yDiv - modal.yDivClick,
+    left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
+    width: 250,
+    height: 300,
+    bgcolor: 'background.paper',
+    border: '2px solid #000',
+    boxShadow: 24,
+    p: 4,
+  };
+  return (
+    <div>
+      <Modal
+        open={modal.open}
+        onClose={handleClose}
+        aria-labelledby="modal-modal-title"
+        aria-describedby="modal-modal-description"
+        BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
+      >
+        <Box sx={style}>
+          {children}
+        </Box>
+      </Modal>
+    </div>
+  );
+}
\ No newline at end of file

planner-front/src/store/actions/tasksActions.js

@@ -44,7 +44,7 @@ export const addTask = (task) => {
       try {
         await axios.post("/tasks", task, {
           headers: {
-            'Authorization': 'yjBjcPCQwytwrYo9rRuiK'
+            'Authorization': '5uJ4ub517ba9IReG6ltFR'
           }
         });
         dispatch(addTaskSuccess())