#24 Реализована большая часть функционала месячного календаря

planner-front/src/App.js

@@ -5,6 +5,7 @@ import AppToolbar from "./components/UI/AppToolBar/AppToolBar";
 import MyTasks from './containers/MyTasks/MyTasks';
 import Login from './containers/Login/Login';
 import Register from './containers/Register/Register';
+import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
 
 const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
   const user = useSelector(state => state.users?.user);
@@ -53,7 +54,7 @@ const App = () => {
                   isAllowed={user}
                   redirectUrl={"/sign-in"}
               >
-                  <h1>month page</h1>
+                  <MonthCalendar>month page</MonthCalendar>
               </ProtectedRoute>
             }/>
 

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

+import { Grid, TextField } from "@mui/material";
+import { useEffect, useState } from "react";
+
+const exampleTasks=[
+  {
+    user:"first",
+    title:"задача1",
+    description:"описание задачи11111",
+    priority:"A",
+    author:"Ivan",
+    executor:"Arman",
+    dateTimeStart:"26.12.2022 20:00:00",
+    dateTimeDue:"27.10.2022 14:20:00",
+    id:1,
+    dateCreated:"26.10.2022"
+  }, {
+    user:"first",
+    title:"задача2",
+    description:"описание задачи11111",
+    priority:"A",
+    author:"Ivan",
+    executor:"Arman",
+    dateTimeStart:"1.12.2022 9:00:00",
+    dateTimeDue:"27.10.2022 15:20:00",
+    id:1,
+    dateCreated:"26.10.2022"
+  },{
+    user:"first",
+    title:"задача3",
+    description:"описание задачи11111",
+    priority:"A",
+    author:"Ivan",
+    executor:"Arman",
+    dateTimeStart:"5.12.2022 16:00:00",
+    dateTimeDue:"27.10.2022 14:20:00",
+    id:1,
+    dateCreated:"26.10.2022"
+  },{
+    user:"first",
+    title:"задача на 4 xfcf",
+    description:"описание задачи11111",
+    priority:"A",
+    author:"Ivan",
+    executor:"Arman",
+    dateTimeStart:"5.11.2022 16:00:00",
+    dateTimeDue:"5.11.2022 21:20:00",
+    id:1,
+    dateCreated:"26.10.2022"
+  }
+]
+
+
+function MonthCalendarBody({month, year}) {
+  
+  const [hoursInDay, setHoursInDay] = useState(['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '6:00'])
+  const [daysInMonth, setDaysInMonth] = useState([])
+  const [tasksForCell, setTasksForCell] = useState([])
+
+  useEffect(()=>{
+    setNewMonthDays(month, year)
+    setNewTasksWithInfoForCell(exampleTasks, month, year)
+  }, [month, year])
+
+  const getDaysInMonth = (month, year) => { 
+    return new Date(year, month + 1, 0).getDate();
+  }
+
+   const getDayOfWeekString = (day) => {
+    return ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][day];
+  }
+
+  const getDayOfWeekNumber = (month, year, day) => {
+    return new Date(year, month, day).getDay()
+  }
+
+  const setNewTasksWithInfoForCell = (tasks, month, year) => {
+    const newArr = tasks.map((task)=>{
+      const dateStart = task.dateTimeStart.split(' ')[0]
+      const timeStart = task.dateTimeStart.split(' ')[1]
+      const timeEnd = task.dateTimeDue.split(' ')[1]
+      const dayStart = parseInt(dateStart.split('.')[0])
+      const dayOfWeekStartNumber = getDayOfWeekNumber(month, year, dayStart)
+      const dayOfWeekStartString = getDayOfWeekString(dayOfWeekStartNumber)
+      const monthStartNumber =  parseInt(dateStart.split('.')[1])
+      const yearStartNumber =  parseInt(dateStart.split('.')[2])
+      const timeStartHour = parseInt(timeStart.split(':')[0])
+      const timeEndHour = parseInt(timeEnd.split(':')[0])
+      return {...task, 
+        startDay: dayStart, 
+        startDayOfWeek: dayOfWeekStartString, 
+        startHour: timeStartHour, 
+        startMonth: monthStartNumber,
+        startYear: yearStartNumber,
+        endHour: timeEndHour,
+      } 
+    })
+    setTasksForCell(newArr)
+  }
+
+  const createTaskInCellHandler = (month, year, dayOfWeek, dayNumber, dayHour) => {
+    const newTasks = [...tasksForCell]
+    const newTask = {
+      user:"first",
+      title:"Новая",
+      description:"описание задачи11111",
+      priority:"A",
+      author:"Ivan",
+      executor:"Arman",
+      dateTimeStart:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0])}:00:00`,
+      dateTimeDue:`${dayNumber}.${month+1}.${year} ${parseInt(dayHour.split(':')[0]) + 1}:00:00`,
+    }
+    newTasks.push(newTask)
+    exampleTasks.push(newTask)
+    setNewTasksWithInfoForCell(newTasks, month, year)
+  }
+
+  const getTaskInDayCell = (tasks, day, hours, month, year) => {
+    const task = tasks.find(task=> {
+    if (year === task.startYear) {
+      if (month + 1 === task.startMonth) {
+        if (day.dayNumber === task.startDay && task.startDayOfWeek === day.dayOfWeek ) {
+          if ((task.endHour <= parseInt(hours.split(':')[0]) || task.startHour <= parseInt(hours.split(':')[0])) && (task.endHour >= parseInt(hours.split(':')[0]))) {
+            return task
+          }
+        }
+      }      
+    }
+    })
+    return task
+  }
+  
+
+  const setNewMonthDays = (month, year) => {
+    const newDaysInMonth = []
+    for (let i = 1; i <= getDaysInMonth(month, year); i++) {
+      const dayOfWeekNumber = getDayOfWeekNumber(month, year, i)
+      newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString(dayOfWeekNumber)})
+    }
+    setDaysInMonth(newDaysInMonth)
+  }
+  
+  const onChangeCellTaskTitle = (e, id) => {
+    const {name, value} = e.target;
+  }
+
+  return (
+    <>
+    <Grid
+      container
+      align='center'
+      sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+      >
+        <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
+          {' '}
+        </Grid>
+        <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
+          {' '}
+        </Grid>
+        {hoursInDay.map((hours, i)=>{
+          return (
+            <Grid key={i} item xs={1.2222} sx={{borderRight: '1px solid black'}}>
+              {hours}
+            </Grid>
+            ) 
+          })}
+    </Grid>
+    {daysInMonth.map((day, i)=>{
+      return (
+        <Grid 
+          key={i}
+          container 
+          align='center'
+          sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+          >
+            <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
+              {day.dayNumber}
+            </Grid>
+            <Grid align='center' item xs={0.5} sx={{borderRight: '1px solid black'}}>
+              {day.dayOfWeek}
+            </Grid>
+            {hoursInDay.map((hours, i)=>{
+              const task = getTaskInDayCell(tasksForCell, day, hours, month, year)
+              return (
+                <Grid  
+                  key={i} 
+                  item xs={1.2222} 
+                  sx={{borderRight: '1px solid black'}} 
+                  onClick={()=>{createTaskInCellHandler(month, year, day.dayOfWeek, day.dayNumber, hours)}}>
+                  { task ? 
+                    <Grid  key={i} sx={{backgroundColor: 'lightgreen'}}>
+                        <TextField 
+                        id={task.title} 
+                        variant="standard" 
+                        value={task.title} 
+                        name='title' 
+                        onChange={(e)=>{onChangeCellTaskTitle(e)}}></TextField>
+                    </Grid> : null}
+                </Grid>
+                ) 
+              })}
+        </Grid>
+      )
+    })}
+    </>
+  );
+}
+
+export default MonthCalendarBody;
\ No newline at end of file

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

+import { AppBar, FormControl, InputLabel, MenuItem, Select, Toolbar, Typography } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import { Box } from '@mui/system';
+
+const arrowClass = {
+  borderRadius: '50%',
+  cursor: 'pointer',
+  transition: '0.5s',
+  "&:hover": { 
+  
+  background: 'rgb(48, 154, 252, 0.65)',
+  transition: '0.5s',
+  transform: 'scale(1.2)'
+  }
+}
+
+
+function MonthCalendarHeader({month, getCurrentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) {
+  
+  return (
+    <>
+        <Box sx={{ flexGrow: 1 }}>
+          <AppBar position="static">
+            <Toolbar>
+              <Box
+                sx={{ 
+                  flexGrow: 1, 
+                  display: 'flex',
+                  alignItems: 'center',
+                  gap: '10px'
+                }}
+                >
+                  <ArrowBackIcon
+                    onClick={()=>{decrementMonth()}}
+                    sx={arrowClass}
+                  />
+                  <Box sx={{ flexBasis: '150px' }}>
+                  <Typography
+                    variant="h6" 
+                    sx={{  
+                      display: 'flex',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    {getCurrentMonthString(month)}
+                  </Typography>
+                  <Typography align='center'>{year}</Typography>
+                  </Box>
+                  <ArrowForwardIcon
+                    sx={arrowClass}
+                    onClick={()=>{incrementMonth()}}
+                  />     
+              </Box>
+
+              <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+                <InputLabel id="worker-select-label">Сотрудник</InputLabel>
+                <Select
+                  labelId="worker-select-label"
+                  id="worker-select"
+                  value={worker}
+                  onChange={(e)=>{onChangeWorkerHandler(e)}}
+                  label="Worker"
+                >
+                  <MenuItem value="">
+                    <em>-- Выберите сотрудника --</em>
+                  </MenuItem>
+                  <MenuItem value={"Василий"}>Василий</MenuItem>
+                  <MenuItem value={"Никита"}>Никита</MenuItem>
+                  <MenuItem value={"Артем"}>Артем</MenuItem>
+                </Select>
+              </FormControl>
+
+              <FormControl variant="standard" sx={{ m: 1, minWidth: 120 }}>
+                <InputLabel id="calendar-type-label">Календарь</InputLabel>
+                <Select
+                  labelId="calendar-type-label"
+                  id="calendar-type"
+                  value={calendarType}
+                  onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
+                  label="Type"
+                >
+                  <MenuItem value={"Месяц"}>Месяц</MenuItem>
+                  <MenuItem value={"Неделя"}>Неделя</MenuItem>
+                </Select>
+              </FormControl>
+
+            </Toolbar>
+          </AppBar>
+        </Box>
+    </>
+  );
+}
+
+export default MonthCalendarHeader;
\ No newline at end of file

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

+import { Container } from '@mui/material';
+import { useEffect, useState } from 'react';
+import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
+import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
+
+function MonthCalendar() {
+  const [month, setMonth] = useState('')
+  const [year, setYear] = useState('')
+  const [worker, setWorker] = useState('');
+  const [calendarType, setCalendarType] = useState('Месяц');
+
+  
+  useEffect(()=>{
+    setMonth(new Date().getMonth())
+    setYear(new Date().getFullYear())
+  },[])
+  const onChangeWorkerHandler = (event) => {
+    setWorker(event.target.value);
+  };
+
+  const onChangeCalendarTypeHandler = (event) => {
+    setCalendarType(event.target.value);
+  };
+
+  const getCurrentMonthString = (month) => {
+    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
+  }
+
+  const incrementMonth = () => {
+    setMonth((prevState)=>{
+      if (prevState + 1 === 12 ) { 
+        setYear(prevState=>prevState+1)
+        return 0 
+      }
+      return prevState + 1
+    })
+  }
+
+  const decrementMonth = () => {
+    setMonth((prevState)=>{
+      if (prevState - 1 === -1) {
+        setYear(prevState=>prevState-1)
+        return 11
+      }
+      return prevState - 1 
+    })
+  }
+
+  return (
+    <>
+    <Container>
+      <MonthCalendarHeader
+        month={month}
+        year={year}
+        getCurrentMonthString={getCurrentMonthString} 
+        decrementMonth={decrementMonth}
+        incrementMonth={incrementMonth}
+        onChangeCalendarTypeHandler={onChangeCalendarTypeHandler}
+        onChangeWorkerHandler={onChangeWorkerHandler}
+        worker={worker}
+        calendarType={calendarType}
+      />
+      <MonthCalendarBody
+        month={month}
+        year={year}
+      />
+    </Container>
+    </>
+  );
+}
+
+export default MonthCalendar;