Merge branch 'development' of…

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-68-feature/DateTimeTask_model

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

 import { Grid } from "@mui/material";
-import { memo, useEffect, useMemo, useState } from "react";
+import { memo, useMemo} from "react";
 import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
 import EmptyBox from "./EmptyBox/EmptyBox";
 import { getAvailableTasks, getBoxesInLine, getLinesInDay, getSortedTasks } from "./Helpers";
 
-const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) => {
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) => {
 
   const hours = useMemo(()=>{ 
     return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
@@ -68,11 +68,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
                        hour={parseInt(hours[index])}
                        line={day.dayNumber}
                        task={box.task}
-                       hourFormat={hourFormat}
                        setCurrentTask={setCurrentTask} 
                        handleOpen={handleOpen}
-                       increaseTaskHandler={increaseTaskHandler} 
-                       reduceTaskHandler={reduceTaskHandler}
                        setCopyTask={setCopyTask}
                        />
                     </Grid>)

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

@@ -38,6 +38,7 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
         height: '35px', 
         backgroundColor: 'rgb(0,0,0,0)', 
         zIndex: '6',
+        cursor: copyTask ? 'pointer' : 'default'
         }}>
       {isThisCell ?  
         <DefaultTask/> : null}

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

-import { Button, Grid} from "@mui/material";
-import React, { memo, useEffect, useRef, useState} from "react";
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Grid} from "@mui/material";
+import React, { memo, useEffect, useState} from "react";
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 
-const arrowClass = {
-  height: '20px',
-  cursor: 'pointer',
-  transition: '0.5s',
-  "&:hover": { 
-  transition: '0.5s',
-  transform: 'scale(1.2)'
-  }
-}
-
-const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, increaseTaskHandler, reduceTaskHandler,  hourFormat, setCopyTask}) => {
+const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask}) => {
 
   const [color, setColor] = useState('')
   useEffect(() => {
@@ -28,7 +17,15 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
 
   const onClickTaskHandler = (e, task) => {
     e.stopPropagation(); 
-    setCurrentTask(task); 
+    setCurrentTask((prevState)=>{
+      return {
+        ...task, 
+        infoForCell: {
+          ...task.infoForCell, 
+          endHour: task.infoForCell.endHour + 1
+        }
+      }
+    }); 
     handleOpen(e)
   }
   
@@ -49,45 +46,16 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, i
         onDragLeave={(e)=>{dragLeaveHandler(e)}}
         onDragStart={(e)=>{dragStartHandler(e, line, task)}}
         onDragEnd={(e)=>{dragEndHandler(e)}}
-        sx={{ position: 'relative', height: '30px', backgroundColor: color, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5', justifyContent: 'space-between'}} 
+        sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px'}} 
         onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
-      {task.infoForCell.endHour === task.infoForCell.startHour && hourFormat ?  
-      <>
-        <div tyle={{display: 'flex', alignItems: 'center'}}>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-              <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
-              <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
-              <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
-              <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
-            </div>
-        </div>
-        <div>
-          <span>
+        <span style={{maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>
           {task.title}
-         </span>
-        </div>
-      </>
-      
+        </span>
+      <ContentCopyIcon sx={{width: '20px', cursor: 'pointer'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
+      </ContentCopyIcon>
+
       
-      :
-        <>
-          <div style={{display: 'flex', alignItems: 'center'}}>
-            <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, true)}}/>
-            <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, true)}}/>
-            </div>
-              <span>
-                {task.title}
-              </span>
-            <div style={{display: 'flex', alignItems: 'center'}}>
-            <Button sx={{color:'black', fontWeight:'600'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}>
-                Copy
-            </Button>
-            <ArrowBackIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); reduceTaskHandler(line, task, false)}}/>
-            <ArrowForwardIcon sx={arrowClass} onClick={(e)=>{e.stopPropagation(); increaseTaskHandler(line, task, false)}}/>
-          </div>
-        </>
-        }
     </Grid>
   </>)
 };

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

@@ -8,15 +8,15 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 
-function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, increaseTaskHandler, reduceTaskHandler, createCopyTask, setCopyTask, copyTask}) {
+function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
 
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({open:false, y: 0, x: 0,});
   const handleOpen = (e) => {
     setModal( {
       open: true, 
-      yPage: e.clientY, 
-      xPage: e.clientX, 
+      yClickСordinates: e.clientY, 
+      xClickСordinates: e.clientX, 
       yDivClick: e.nativeEvent.offsetY,
       xDivClick: e.nativeEvent.offsetX,
       yDiv: e.target.offsetHeight,
@@ -31,23 +31,25 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
 
   return (
     <Box style={{marginBottom: '30px'}}>
-    <CalendarRow
-            >
-        <CalendarSmallCell xs={1.2}> 
-         <FormControlLabel
-            control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
-            label="1 час"
-            labelPlacement="end"
-          />
-        </CalendarSmallCell>
-        {hoursInDay?.map((hours, i)=>{
-          return (
-            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
-              {hours}
-            </CalendarStandartCell>
-            ) 
-          })}
-    </CalendarRow>
+      <div style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
+        <CalendarRow
+                >
+            <CalendarSmallCell xs={1.2}> 
+            <FormControlLabel
+                control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
+                label="1 час"
+                labelPlacement="end"
+              />
+            </CalendarSmallCell>
+            {hoursInDay?.map((hours, i)=>{
+              return (
+                <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
+                  {hours}
+                </CalendarStandartCell>
+                ) 
+              })}
+        </CalendarRow>
+    </div>
       {daysInMonth?.map((day, i)=>{
         return (
           <CalendarRow
@@ -71,8 +73,6 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
                 tasks={tasks}
                 day={day}
                 hourFormat={hourFormat}
-                increaseTaskHandler={increaseTaskHandler} 
-                reduceTaskHandler={reduceTaskHandler}
                 createCopyTask={createCopyTask}
                 copyTask={copyTask}
                 setCopyTask={setCopyTask}
@@ -89,6 +89,8 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         title={currentTask.title}
         description={currentTask.description}
         priority={currentTask.priority}
+        startHour={currentTask.infoForCell?.startHour}
+        endHour={currentTask.infoForCell?.endHour}
         onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}}
         sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}}
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}

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

@@ -27,7 +27,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
                 id={'worker'}
                 items={workers}
               />
-
+            <div style={{marginLeft: '20px'}}>
               <СustomSelect
                 value={calendarType}
                 onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
@@ -35,6 +35,7 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
                 id={'calendar-type'}
                 items={types}
               />
+            </div>
             </Toolbar>
           </AppBar>
         </Box>

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

-import { Button, FormControl, InputLabel, MenuItem, Select, TextField } from "@mui/material";
+import { Button, TextField } from "@mui/material";
 import { memo } from "react";
 import CustomSelect from '../UI/СustomSelect/СustomSelect'
 
-const priorities = [{value: '', text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
+const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
 
 
-function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler}) {
+function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour}) {
   return (<>
     <TextField 
       id="task-description-title" 
@@ -27,9 +27,8 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
       name='description'
       onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
     />
-
     <CustomSelect
-      defaultValue={''}
+      defaultValue={null}
       value={priority}
       name={'priority'}
       variant={'outlined'}
@@ -38,8 +37,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
       id={'priority-type'}
       items={priorities}
     />
-  <Button sx={{marginRight: '40px'}} onClick={sendNewTaskHandler}>Сохранить</Button>
-  <Button onClick={deleteTaskHandler}>Удалить</Button>
+    <div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
+      <TextField 
+        id="task-startHour" 
+        value={startHour}
+        label="От" 
+        variant="outlined" 
+        name='startHour'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+      <TextField 
+        id="task-endHour" 
+        value={endHour}
+        label="До" 
+        variant="outlined" 
+        name='endHour'
+        onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
+      />
+    </div>
+    <div style={{display: 'flex', gap: '20px', margin: '10px 0'}}>
+      <Button onClick={sendNewTaskHandler}>Сохранить</Button>
+      <Button onClick={deleteTaskHandler}>Удалить</Button>
+    </div>
   </>);
 }
 

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

 import Box from '@mui/material/Box';
 import Modal from '@mui/material/Modal';
+import { useEffect, useRef, useState } from 'react';
 
 
 export default function ModalTask({modal, handleClose, children}) {
 
+  const [windowDimenion, detectHW] = useState({
+    winWidth: window.innerWidth,
+    winHeight: window.innerHeight,
+  })
+
+  const detectSize = () => {
+    detectHW({
+      winWidth: window.innerWidth,
+      winHeight: window.innerHeight,
+    })
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', detectSize)
+    return () => {
+      window.removeEventListener('resize', detectSize)
+    }
+  }, [windowDimenion])
+  const modalRef = useRef('')
+
+
+  const getYCordinatesToModal = () => {
+    if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick
+    } else {
+      return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 450) - windowDimenion.winHeight) - 30
+    }
+  }
+  const getXCordinatesToModal = () => {
+    if (windowDimenion.winWidth > modal.xClickСordinates + 270 + modal.xDiv) {
+      return modal.xClickСordinates + modal.xDiv - modal.xDivClick + 10
+    } else {
+      return windowDimenion.winWidth - (windowDimenion.winWidth - modal.xClickСordinates) - modal.xDivClick - 270 - 80
+    }
+  }
   const style = {
+    display: 'flex',
+    flexDirection: 'column',
     position: 'absolute',
-    top: modal.yPage - modal.yDiv - modal.yDivClick,
-    left: modal.xPage + modal.xDiv - modal.xDivClick + 10,
-    width: 250,
-    height: 350,
+    top: getYCordinatesToModal(),
+    left: getXCordinatesToModal(),
+    width: 270,
+    height: 450,
     bgcolor: 'background.paper',
     border: '2px solid #000',
     boxShadow: 24,
@@ -24,7 +62,7 @@ export default function ModalTask({modal, handleClose, children}) {
         aria-describedby="modal-modal-description"
         BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
       >
-        <Box sx={style}>
+        <Box sx={style} ref={modalRef}>
           {children}
         </Box>
       </Modal>

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

@@ -8,7 +8,7 @@ import Select from "@mui/material/Select";
 export default function BasicSelect({value,label,name,onChange,task,items}) {
 
   return (
-    <Box sx={{ minWidth: 60 }}>
+    <Box sx={{ minWidth: 60, m: 0}}>
       <FormControl fullWidth>
         <InputLabel id="demo-simple-select-label"></InputLabel>
         <Select

planner-front/src/components/UI/СustomSelect/СustomSelect.js

@@ -5,7 +5,7 @@ function СustomSelect({value, onChange, label, variant='standard', items, id,
   
   return ( 
   <>
-    <FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
+    <FormControl variant={variant} sx={{ m: 0, minWidth: 120 }}>
         <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
           labelId={`${id}-select-label`}

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

@@ -13,7 +13,7 @@ function MonthCalendar() {
   const [dateNow, setDateNow] = useState({month: '', year: ''})
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
-  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
+  const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, infoForCell: {startHour: null, endHour: null}})
   const [copyTask, setCopyTask] = useState(null)
   const [cellSizes, setCellSizes] = useState({})
 
@@ -65,7 +65,7 @@ function MonthCalendar() {
       return {...prevState, month: prevState.month + 1}
     })
   }, [])
-
+  console.log(currentTask)
   const decrementMonth = useCallback(() => {
     setDateNow((prevState)=>{
       if (prevState.month - 1 === -1) {
@@ -77,12 +77,24 @@ function MonthCalendar() {
 
   const onChangeCurrentTaskHandler = useCallback((e) => {
     const {name, value} = e.target;
-    setCurrentTask((prevState) => {
+    if (name === 'startHour' || name === 'endHour') {
+      setCurrentTask((prevState) => {
+        return {
+            ...prevState,
+            infoForCell: {
+              ...prevState.infoForCell,
+              [name]: parseInt(value) 
+            }
+        }
+      });
+    } else {
+      setCurrentTask((prevState) => {
         return {
             ...prevState,
             [name]: value
         }
-    });
+      });
+    }
   }, []);
 
   const createTaskInCellHandler = (dayNumber, dayHour) => {
@@ -94,9 +106,9 @@ function MonthCalendar() {
     }
     let hourDue
     if (hourFormat) {
-      hourDue = hour + 0
-    } else {
       hourDue = hour + 1
+    } else {
+      hourDue = hour + 2
     }
     const newTask = {
       title:"Задача",
@@ -104,6 +116,11 @@ function MonthCalendar() {
       priority: null,
       dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
       dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
+      infoForCell: {
+        startHour: hour,
+        endHour: hourDue,
+        startDay: dayNumber
+      }
     }
     setCurrentTask((newTask))
   }
@@ -128,85 +145,22 @@ function MonthCalendar() {
     setCurrentTask({})
   }
 
-  const increaseTaskHandler = async (dayNumber, task, isStartTask) => {
-    const timeEndHour = task.infoForCell.endHour
-    const timeStartHour = task.infoForCell.startHour
-    let hourDiff
-    if (hourFormat) {
-      hourDiff = 1
-    } else {
-      hourDiff = 2
-    }
-    let due
-    let start 
-    if (isStartTask) {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
-      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour - hourDiff, 0))
-    } else {
-      due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour + hourDiff, 59))
-      start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
-    }
-    const newObj = {
-      ...task,
+  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))
+    const newTask = {
+      ...currentTask,
       dateTimeStart: start,
       dateTimeDue: due
     }
-    delete newObj.infoForCell
-    await dispatch(editCalendarTask(newObj))
-    setCurrentTask({})
-
-  }
-
-  const reduceTaskHandler = async (dayNumber, task, isStartTask) => {
-    const timeEndHour = task.infoForCell.endHour
-    const timeStartHour = task.infoForCell.startHour
-    let hourDiff
-    let hourDiffCheck
-    if (hourFormat) {
-      hourDiff = 1
-      hourDiffCheck = 0
-    } else {
-      hourDiff = 2
-      hourDiffCheck = 1
-    }
-    let due
-    let start
-    if (task.infoForCell.endHour - task.infoForCell.startHour - hourDiffCheck !== 0) {
-      if (isStartTask) {
-        due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour, 59))
-        start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour + hourDiff, 0))
-      } else {
-        due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeEndHour - hourDiff, 59))
-        start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, timeStartHour, 0))
-      }
-      const newObj = {
-        ...task,
-        dateTimeStart: start,
-        dateTimeDue: due
-      }
-      delete newObj.infoForCell
-      await dispatch(editCalendarTask(newObj))
-      setCurrentTask({})
-    }
-  }
-
-  const sendNewTaskHandler = async () => {
+    delete newTask.infoForCell
     if (currentTask.id) {
-      delete currentTask.infoForCell
-      setCurrentTask(() => {
-        return{
-        ...currentTask,
-      }}
-      )
-      await dispatch(editCalendarTask(currentTask))
+      await dispatch(editCalendarTask(newTask))
     } else {
-      setCurrentTask(() => {
-        return{
-        ...currentTask,
-      }}
-      )
-      delete currentTask.infoForCell
-      await dispatch(addCalendarTask(currentTask))
+      await dispatch(addCalendarTask(newTask))
     }
   }
 
@@ -263,8 +217,6 @@ function MonthCalendar() {
         hoursInDay={hoursInDay}
         daysInMonth={daysInMonth}
         dragTaskHandler={dragTaskHandler}
-        increaseTaskHandler={increaseTaskHandler}
-        reduceTaskHandler={reduceTaskHandler}
         createCopyTask={createCopyTask}
         copyTask={copyTask}
         setCopyTask={setCopyTask}