#30 Сделал добавление локальной задачи при клике на пустую клетку

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

-import { Grid } from "@mui/material";
+import { Grid, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, onClick}) => {
+const CalendarStandartCell = ({children, xs, onClick, currentTask, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+    const [isThisCell, setIsThisCell] = useState(false)
+    useEffect(()=>{
+        if(!modal) {
+            setIsThisCell(false);
+        }
+    }, [modal])
     return <>
         <Grid  
             item xs={xs} 
             sx={{borderRight: '1px solid black'}} 
-            onClick={onClick}>
+            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
             {children}
+        {isThisCell ?  
+        <Grid
+            sx={{backgroundColor: 'lightgreen'}} 
+        >
+            <span>
+                {currentTask.title}
+            </span>
+        </Grid> : null}
         </Grid>
     </>
 };

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

@@ -2,8 +2,6 @@ import { Grid, TextField } from "@mui/material";
 import React, { useEffect, useState } from "react";
 
 const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange, hourFormat, handleOpen}) => {
-
-  
   const getTaskInDayCell = (tasks, day, hours) => {
     const hour = parseInt(hours.split(':')[0])
     let hourDiffEnd
@@ -27,7 +25,6 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
     })
     return tasksCell
   }
-  
   const tasksCell = getTaskInDayCell(tasks, day, hours)
 
   return (<> 
@@ -48,8 +45,8 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, onChange,
           </TextField>
       </Grid>
       )}
-      ) : null }
-      
+      ) 
+      : null}
   </>)
 };
 

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

-import { FormControl, FormControlLabel, InputLabel, MenuItem, Select, Switch, TextField } from "@mui/material";
+import { Button, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Switch, TextField } from "@mui/material";
 import { useEffect, useState } from "react";
 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";
-import { TextFieldsRounded } from "@mui/icons-material";
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, setCurrentTask, hourFormat, setHourFormat}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChangeCellTaskTitle, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler}) {
   
   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, 
+    setModal( {
       open: true, 
       yPage: e.pageY, 
       xPage: e.pageX, 
@@ -25,7 +23,9 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
       xDiv: e.target.offsetWidth,
     })
   };
-  const handleClose = () => setModal({...modal, open: false});
+  const handleClose = () => {
+    setModal({...modal, open: false})
+  };
 
 
   useEffect(()=>{
@@ -112,7 +112,12 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
                 <CalendarStandartCell 
                   key={i} 
                   item xs={cellSizes.standarCell}
-                  onClick={()=>{createTaskInCellHandler(day.dayNumber, hours)}}
+                  createTaskInCellHandler={createTaskInCellHandler}
+                  hours={hours}
+                  dayNumber={day.dayNumber}
+                  currentTask={currentTask}
+                  handleOpen={handleOpen}
+                  modal={modal.open}
                   >
                     <CalendarTask
                       setCurrentTask={setCurrentTask}
@@ -135,22 +140,48 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, onChang
       modal={modal}
       handleClose={()=>{handleClose()}}
     >
-      <TextField id="outlined-basic" label="title" variant="standard" sx={{marginBottom: '30px'}}/>
-      <TextField id="outlined-basic" label="desctiption" variant="standard" sx={{marginBottom: '30px'}} />
-      <FormControl variant="standard" sx={{width: '120px'}}>
+      <TextField 
+        id="task-description-title" 
+        value={currentTask.title}
+        label="Название" 
+        variant="outlined" 
+        sx={{marginBottom: '30px'}}
+        name='title'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+      <TextField 
+        id="task-description" 
+        multiline
+        rows={4}
+        value={currentTask.description}
+        label="Описание" 
+        variant="outlined" 
+        sx={{marginBottom: '30px'}} 
+        name='description'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+      <FormControl variant="outlined" sx={{width: '160px', marginBottom: '30px'}}>
         <InputLabel id="calendar-type-label">Приоритет</InputLabel>
           <Select
-            variant="standard"
             labelId="calendar-type-label"
             id="calendar-type"
             onChange={()=>{}}
-            label="Type"
+            label="Приоритет"
+            sx={{width: '160px'}}
+            value={currentTask.priority}
+            name='priority'
+            // onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
           >
+            <MenuItem value="">
+                    <em>-- Выберите Приоритет --</em>
+            </MenuItem>
             <MenuItem value={"C"}>C</MenuItem>
             <MenuItem value={"B"}>B</MenuItem>
             <MenuItem value={"A"}>A</MenuItem>
           </Select>
       </FormControl>
+      <Button sx={{marginRight: '40px'}}>Сохранить</Button>
+      <Button>Удалить</Button>
     </ModalTask>
     </>
   );

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

@@ -9,14 +9,14 @@ export default function ModalTask({modal, handleClose, children}) {
     top: modal.yPage - modal.yDiv - modal.yDivClick,
     left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
     width: 250,
-    height: 300,
+    height: 350,
     bgcolor: 'background.paper',
     border: '2px solid #000',
     boxShadow: 24,
     p: 4,
   };
   return (
-    <div>
+    <>
       <Modal
         open={modal.open}
         onClose={handleClose}
@@ -28,6 +28,6 @@ export default function ModalTask({modal, handleClose, children}) {
           {children}
         </Box>
       </Modal>
-    </div>
+    </>
   );
 }
\ No newline at end of file

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

@@ -14,7 +14,7 @@ function MonthCalendar() {
   const [year, setYear] = useState('')
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({})
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
   
   useEffect(()=>{
     setMonth(new Date().getMonth())
@@ -62,6 +62,16 @@ function MonthCalendar() {
     return iso;
   }
 
+  const onChangeCurrentTaskHandler = (e) => {
+    const {name, value} = e.target;
+    setCurrentTask((prevState) => {
+        return {
+            ...prevState,
+            [name]: value
+        }
+    });
+  };
+
   const createTaskInCellHandler = (dayNumber, dayHour) => {
     const hour = parseInt(dayHour.split(':')[0])
     let hourDue
@@ -73,11 +83,11 @@ function MonthCalendar() {
     const newTask = {
       title:"Задача",
       description:"описание",
+      priority: "C",
       dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
     }
-    console.log(newTask)
-    dispatch(addTask(newTask))
+    // dispatch(addTask(newTask))
     setCurrentTask((newTask))
   }
 
@@ -90,7 +100,6 @@ function MonthCalendar() {
 
   return (
     <>
-    <Container>
       <MonthCalendarHeader
         month={month}
         year={year}
@@ -111,8 +120,9 @@ function MonthCalendar() {
         setCurrentTask={setCurrentTask}
         hourFormat={hourFormat} 
         setHourFormat={setHourFormat}
+        currentTask={currentTask}
+        onChangeCurrentTaskHandler={onChangeCurrentTaskHandler}
       />
-    </Container>
     </>
   );
 }

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

@@ -56,7 +56,7 @@ const Register = () => {
             }
         });
     };
-
+    console.log(state)
     const submitHandler = async (e) => {
         e.preventDefault();
         const formData = new FormData();

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

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

planner-front/src/store/reducers/tasksReducer.js

@@ -3,7 +3,7 @@ import { FETCH_TASKS_FAILURE, FETCH_TASKS_REQUEST, FETCH_TASKS_SUCCESS} from "..
 const initialState = {
     tasks: [],
     loading: false,
-    error: null
+    error: null,
 };
 
 const tasksReduсer = (state = initialState, action) => {
@@ -14,7 +14,7 @@ const tasksReduсer = (state = initialState, action) => {
         const newArr = []
         action.tasks.forEach((task)=>{
             if (task.dateTimeStart && task.dateTimeDue) {
-              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (4 * 3600000)) {
+              if (new Date(task.dateTimeDue).getTime() - new Date(task.dateTimeStart).getTime() < (10 * 3600000)) {
               const dateStart = task.dateTimeStart.split('T')[0]
               const timeStart = task.dateTimeStart.split('T')[1]
               const timeEnd = task.dateTimeDue.split('T')[1]