#11 Реализовал логику модалки и нажатия

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js

@@ -7,7 +7,7 @@ import CalendarWeekTask from "./CalendarWeekTask/CalendarWeekTask";
 
 
 
-function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat }) {
+function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask }) {
   const [columnDayHeight, setColumnDayHeight] = useState(0)
 
   const dayColumnRef = useRef('')
@@ -19,19 +19,6 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     return getHoursInDayNumbers(hoursInDay)
   }, [hoursInDay])
 
-  const taskStyle = {
-    backgroundColor: 'red',
-    height: `${columnDayHeight / hours.length}px`,
-    width: '96%',
-    margin: '0 auto',
-    position: 'absolute',
-    bottom: 0,
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    left: '0',
-    right: '0',
-  }
-
   const availableTasks = useMemo(() => {
     return getAvailableTasks(tasks, year, month, day)
   }, [tasks, month, year, day])
@@ -82,7 +69,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
       return boxes
     }
   }
-  const arr = ['red', 'blue', 'yellow', 'purple', 'green']
+
   
   return (<>
     <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative'}}>
@@ -104,6 +91,8 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
                 task={task.task}
                 top={task.top}
                 zIndex={zIndex}
+                handleOpen={handleOpen} 
+                setCurrentTask={setCurrentTask}
               >
 
               </CalendarWeekTask>

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js

@@ -2,7 +2,7 @@ import { Box } from "@mui/material"
 import { useEffect, useState } from "react"
 
 
-function CalendarWeekTask({ height, width, left, top, task, zIndex }) {
+function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask}) {
 
   const [color, setColor] = useState('')
   useEffect(() => {
@@ -15,6 +15,20 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex }) {
     }
   }, [task])
 
+  const onClickTaskHandler = (e, task) => {
+    e.stopPropagation();
+    setCurrentTask((prevState) => {
+      return {
+        ...task,
+        infoForCell: {
+          ...task.infoForCell,
+          endHour: task.infoForCell.endHour + 1
+        }
+      }
+    });
+    handleOpen(e)
+  }
+
   const styles = {
     borderRadius: '5px',
     border: '1px solid white',
@@ -39,6 +53,7 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex }) {
 
   return (
     <Box
+      onClick={(e)=>{onClickTaskHandler(e, task)}}
       sx={styles}>
         <span style={{textOverflow: 'ellipsis', padding: '5px 0 0 5px'}}>
           {task.title} 

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js

 import { FormControlLabel, Grid, Switch } from "@mui/material";
 import { Box } from "@mui/system";
+import { useState } from "react";
+import ModalTask from "../../../UI/ModalTask/ModalTask";
+import MonthCalendarModalContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString } from "./Helpers";
 
-function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks }) {
+function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler }) {
+  const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
+  const handleOpen = (e) => {
+    setModal({
+      open: true,
+      yClickСordinates: e.clientY,
+      xClickСordinates: e.clientX,
+      yDivClick: e.nativeEvent.offsetY,
+      xDivClick: e.nativeEvent.offsetX,
+      yDiv: e.target.offsetHeight,
+      xDiv: e.target.offsetWidth,
+    })
+  };
+
+  const handleClose = () => {
+    setModal({ ...modal, open: false })
+    setCurrentTask({})
+  };
 
 
   return (
@@ -48,15 +68,17 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
               <CalendarRow week={true}>
                 {week?.map((weekDay, i) => {
                   return (
-                      <CalendarColumnDayWeek
-                        key={i}
-                        hoursInDay={hoursInDay}
-                        tasks={tasks}
-                        month={date.month}
-                        year={date.year}
-                        day={weekDay}
-                        hourFormat={hourFormat}
-                      />
+                    <CalendarColumnDayWeek
+                      key={i}
+                      hoursInDay={hoursInDay}
+                      tasks={tasks}
+                      month={date.month}
+                      year={date.year}
+                      day={weekDay}
+                      hourFormat={hourFormat}
+                      setCurrentTask={setCurrentTask}
+                      handleOpen={handleOpen}
+                    />
                   )
                 })}
               </CalendarRow>
@@ -65,6 +87,23 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
           </CalendarRow>
         </Grid>
       </Box>
+
+      <ModalTask
+        modal={modal}
+        handleClose={() => { handleClose() }}
+      >
+        <MonthCalendarModalContent
+          title={currentTask.title}
+          description={currentTask.description}
+          priority={currentTask.priority}
+          id={currentTask.id}
+          startHour={currentTask.infoForCell?.startHour}
+          endHour={currentTask.infoForCell?.endHour}
+          onChangeCurrentTaskHandler={(e) => { onChangeCurrentTaskHandler(e) }}
+          sendNewTaskHandler={() => { sendNewTaskHandler(); handleClose() }}
+          deleteTaskHandler={() => { deleteTaskHandler(currentTask.id); handleClose() }}
+        />
+      </ModalTask>
     </>
   );
 }

planner-front/src/containers/WeekCalendar/WeekCalendar.js

@@ -3,23 +3,26 @@ import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
-import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
-import { fetchCalendarTasks } from '../../store/actions/tasksActions';
+import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
+import { addCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 
 
 function WeekCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
   const user = useSelector(state => state.users?.user);
-  const [date, setDate] = useState({ year: '', month: '', currentDay: '' })
+  const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' })
+  const [currentTask, setCurrentTask] = useState({ title: '', description: '', priority: null, infoForCell: { startHour: null, endHour: null } })
   const [hourFormat, setHourFormat] = useState(false);
+  const [userId, setUserId] = useState('')
 
   useEffect(() => {
     const year = new Date().getFullYear()
     const month = new Date().getMonth()
     const currentDay = moment().date()
-    setDate({ year: year, month: month, currentDay: currentDay })
-    // dispatch(fetchCalendarTasks())
+    setDateNow({ year: year, month: month, currentDay: currentDay })
+    dispatch(fetchCalendarTasks(user.id))
+    setUserId(user.id)
   }, [])
   
   const hoursInDay = useMemo(() => {
@@ -33,26 +36,82 @@ function WeekCalendar() {
   }, [hourFormat])
 
   const week = useMemo(() => {
-    return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
-  }, [date])
+    return getWeekFromCurrentDate(dateNow.year, dateNow.month, dateNow.currentDay)
+  }, [dateNow])
+
+  const weekInfo = useMemo(() => {
+    return getWeekInfoString(week, dateNow)
+  }, [dateNow, week])
 
   const incrementWeek = useCallback(() => {
-    setDate((prevState) => {
+    setDateNow((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7)
       return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
   const decrementWeek = useCallback(() => {
-    setDate((prevState) => {
+    setDateNow((prevState) => {
       const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
       return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
     })
   }, [])
 
-  const weekInfo = useMemo(() => {
-    return getWeekInfoString(week, date)
-  }, [date, week])
+  const onChangeCurrentTaskHandler = useCallback((e) => {
+    const { name, value } = e.target;
+    if (name === 'startHour' || name === 'endHour') {
+      setCurrentTask((prevState) => {
+        return {
+          ...prevState,
+          infoForCell: {
+            ...prevState.infoForCell,
+            [name]: value
+          }
+        }
+      });
+    } else {
+      setCurrentTask((prevState) => {
+        return {
+          ...prevState,
+          [name]: value
+        }
+      });
+    }
+  }, []);
+
+  const sendNewTaskHandler = async () => {
+    const timeEndHour = currentTask.infoForCell.endHour
+    const timeStartHour = currentTask.infoForCell.startHour
+    const day = currentTask.infoForCell.startDay
+    const due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeEndHour - 1, 59))
+    const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, day, timeStartHour, 0))
+    if (currentTask.id) {
+      const newTask = {
+        ...currentTask,
+        dateTimeStart: start,
+        dateTimeDue: due,
+        taskId: currentTask.mainTaskId
+      }
+      delete newTask.infoForCell
+      await dispatch(editCalendarTask(newTask, currentTask.id, userId))
+    } else {
+      const newTask = {
+        ...currentTask,
+        dateTimeStart: start,
+        dateTimeDue: due,
+        executor: userId,
+        author: user.id,
+        dateTimeDeadLine: due,
+      }
+      delete newTask.infoForCell
+      delete newTask.id
+      await dispatch(addCalendarTask(newTask, userId))
+    }
+  }
+
+  const deleteTaskHandler = async (taskId) => {
+    dispatch(deleteCalendarTask(taskId, userId))
+  }
 
   return (
     <>
@@ -62,8 +121,13 @@ function WeekCalendar() {
         weekInfo={weekInfo}
       />
       <WeekCalendarBody
+        deleteTaskHandler={deleteTaskHandler}
+        sendNewTaskHandler={sendNewTaskHandler}
+        onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
+        currentTask={currentTask}
+        setCurrentTask={setCurrentTask}
         tasks={calendarTasks}
-        date={date}
+        date={dateNow}
         week={week}
         hourFormat={hourFormat}
         setHourFormat={setHourFormat}