Merge branch 'task-85-feature/create_week_calendar' into 'development'

Task 85 feature/create week calendar

See merge request !60

planner-front/src/App.js

@@ -10,6 +10,7 @@ import ForgottenPassword from "./containers/ForgottenPassword/ForgottenPassword"
 import Projects from "./containers/Projects/Projects";
 import FullProject from "./containers/FullProject/FullProject";
 import NewProject from "./containers/NewProject/NewProject";
+import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
 
 const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
   const user = useSelector(state => state.users?.user);
@@ -56,7 +57,7 @@ const App = () => {
                   isAllowed={user}
                   redirectUrl={"/sign-in"}
               >
-                  <h1>week page</h1>
+                  <WeekCalendar/>
               </ProtectedRoute>
             }/>
 
@@ -65,7 +66,7 @@ const App = () => {
                   isAllowed={user}
                   redirectUrl={"/sign-in"}
               >
-                  <h1>week page</h1>
+                  <WeekCalendar/>
               </ProtectedRoute>
             }/>
 
@@ -74,7 +75,7 @@ const App = () => {
                   isAllowed={user}
                   redirectUrl={"/sign-in"}
               >
-                  <MonthCalendar>month page</MonthCalendar>
+                  <MonthCalendar></MonthCalendar>
               </ProtectedRoute>
             }/>
 

planner-front/src/components/MonthCalendarBody/CalendarRow/CalendarRow.js → planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow.js

 import { Grid } from "@mui/material";
 
-const CalendarRow = ({children}) => {
+const CalendarRow = ({children, week}) => {
     return <>
         <Grid 
           container 
           align='center'
-          sx={{borderBottom: '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
+          sx={{borderBottom: week ? null : '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
           >
             {children}
           </Grid>

planner-front/src/components/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell.js → planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell.js

 import { Grid } from "@mui/material";
 import { memo } from "react";
 
-const CalendarSmallCell = ({children, xs}) => {
+const CalendarSmallCell = ({children, xs, week}) => {
     return <>
-        <Grid align='center' item xs={xs} sx={{borderRight: '1px solid black'}}>
+        <Grid align='center' item xs={xs} sx={{borderRight: week ? null : '1px solid black', height: week ? '40px' : null, borderBottom: week ? '1px solid black' : null,}}>
           {children}
         </Grid>
     </>

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

@@ -4,13 +4,16 @@ import DefaultTask from "../DefaultTask/DefaultTask";
 
 
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week}) => {
     const [isThisCell, setIsThisCell] = useState(false)
+
     const cellClass = {
         position: 'relative', 
-        height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${35}px`,
+        height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${40}px`,
         borderRight: '1px solid black',
+        borderBottom: week ?'1px solid black' : null,
     }
+
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
@@ -27,7 +30,7 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCell
         dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
     }
     const onClickHandler = (e) => {
-        if (!linesInDay?.length) {
+        if (linesInDay?.length) {
             createTaskInCellHandler(dayNumber, hours); 
             setIsThisCell(true); 
             handleOpen(e)

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

@@ -3,7 +3,7 @@ import { useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
-import ModalTask from "../UI/ModalTask/ModalTask";
+import ModalTask from "../../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js → planner-front/src/components/MonthCalendar/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js

 
 import { Box, Typography } from '@mui/material';
 import { memo } from 'react';
-import MonthDecrementButton from './MonthDecrementButton/MonthDecrementButton';
-import MonthIncrementButton from './MonthIncrementButton/MonthIncrementButton';
+import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
+import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
 function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMonth}) {
   
   return ( 
@@ -15,8 +15,8 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo
           gap: '10px'
         }}
         >
-          <MonthDecrementButton
-            decrementMonth={decrementMonth}
+          <ArrowDecrementButton
+            onClick={decrementMonth}
           />
           <Box sx={{ flexBasis: '150px' }}>
             <Typography
@@ -30,8 +30,8 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo
             </Typography>
             <Typography align='center'>{year}</Typography>
           </Box>
-          <MonthIncrementButton
-            incrementMonth={incrementMonth}
+          <ArrowIncrementButton
+            onClick={incrementMonth}
           />   
       </Box>
   </> );

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

 import { AppBar, Toolbar} from '@mui/material';
 import { Box } from '@mui/system';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
-import СustomSelect from '../UI/СustomSelect/СustomSelect'
+import СustomSelect from '../../UI/СustomSelect/СustomSelect'
 
 const workers = [{value: '', text: '--выберите сотрудника--'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}]
 const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}]

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

 import { Button, TextField } from "@mui/material";
 import { memo } from "react";
-import CustomSelect from '../UI/СustomSelect/СustomSelect'
+import CustomSelect from '../../UI/СustomSelect/СustomSelect'
 
 const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
 

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthDecrementButton/MonthDecrementButton.js → planner-front/src/components/UI/ArrowDecrementButton/ArrowDecrementButton.js

@@ -13,15 +13,15 @@ const arrowClass = {
 }
 
 
-function MonthDecrementButton({decrementMonth}) {
+function ArrowDecrementButton({onClick}) {
   
   return ( 
   <>
     <ArrowBackIcon
       sx={arrowClass}
-      onClick={decrementMonth}
+      onClick={onClick}
     />  
   </> );
 }
 
-export default memo(MonthDecrementButton);
\ No newline at end of file
+export default memo(ArrowDecrementButton);
\ No newline at end of file

planner-front/src/components/MonthCalendarHeader/MonthAndYearInfo/MonthIncrementButton/MonthIncrementButton.js → planner-front/src/components/UI/ArrowIncrementButton/ArrowIncrementButton.js

@@ -13,15 +13,15 @@ const arrowClass = {
 }
 
 
-function MonthIncrementButton({incrementMonth}) {
+function ArrowIncrementButton({onClick}) {
   
   return ( 
   <>
     <ArrowForwardIcon
       sx={arrowClass}
-      onClick={incrementMonth}
+      onClick={onClick}
     />  
   </> );
 }
 
-export default memo(MonthIncrementButton);
\ No newline at end of file
+export default memo(ArrowIncrementButton);
\ No newline at end of file

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

+export const getCurrentWeekDayString = (dayNumber) => {
+  if (dayNumber <= 6 && dayNumber >= 0) {
+    return ["ПН","ВТ","СР","ЧТ","ПТ","СБ","ВС"][dayNumber];
+  } else {
+    return null
+  }
+}
\ No newline at end of file

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

+import { FormControlLabel, Grid, Switch } from "@mui/material";
+import { Box } from "@mui/system";
+import CalendarRow from "../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow";
+import CalendarSmallCell from "../../MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell";
+import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
+import { getCurrentWeekDayString } from "./Helpers";
+
+function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat}) {
+  
+  return (
+    <>
+        <Box style={{marginBottom: '30px'}}>
+          <Box style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
+            <CalendarRow
+                    >
+                <CalendarSmallCell xs={1}> 
+                <FormControlLabel
+                    control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>}
+                    label="1 час"
+                    labelPlacement="end"
+                  />
+                </CalendarSmallCell>
+                {week?.map((weekDay, i)=>{
+                  return (
+                    <CalendarStandartCell key={i} xs={11/week.length}>
+                      <span style={{display: 'block', fontWeight: "600"}}>{weekDay}</span>
+                      <span style={{marginBottom: '10px'}}>{getCurrentWeekDayString(i)}</span>
+                    </CalendarStandartCell>
+                    ) 
+                  })}
+            </CalendarRow>
+          </Box>
+
+          <Grid container>
+          <CalendarRow week={true}>
+            <Grid item xs={0.995} flexDirection='column'>
+              {hoursInDay?.map((hour, i)=>{
+                return (
+                  <CalendarSmallCell key={i} week={true}>
+                    {hour}
+                  </CalendarSmallCell>)
+              })}
+            </Grid>
+
+            <Grid item xs={11.005}>
+              <CalendarRow week={true}>
+                {week?.map((weekDay, i)=>{
+                    return (
+                      <Grid item key={i} xs={12/week.length}>
+                          {hoursInDay?.map((hour, i)=>{
+                            return (
+                              <CalendarStandartCell key={i} week={true}>
+                                
+                              </CalendarStandartCell>)
+                          })}
+                      </Grid>) 
+                    })}
+              </CalendarRow>
+            </Grid>
+          </CalendarRow>
+          </Grid>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarBody;
\ No newline at end of file

planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js

+import { AppBar, Toolbar} from '@mui/material';
+import { Box } from '@mui/system';
+import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
+
+
+
+
+function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) {
+  
+  return (
+    <>
+        <Box sx={{ flexGrow: 1 }}>
+          <AppBar position="static">
+            <Toolbar>
+
+                  <WeekCalendarHeaderInfo
+                    decrementWeek={decrementWeek}
+                    incrementWeek={incrementWeek}
+                    weekInfo={weekInfo}
+                  />
+
+            </Toolbar>
+          </AppBar>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarHeader;
\ No newline at end of file

planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js

+import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
+import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
+import { Box } from '@mui/system';
+import {Typography} from '@mui/material';
+
+
+
+function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
+  
+  return (
+    <>
+        <Box sx={{width: '40%', marginBottom: '15px'}}>
+          <h2>Цель недели: Наладить режим сна</h2>
+          <Box sx={{display: 'flex', alignItems: 'center'}}>
+            <ArrowDecrementButton
+              onClick={()=>{decrementWeek()}}
+            />
+              <Typography
+                variant="h6" 
+                sx={{  
+                  flexBasis: '250px',
+                  display: 'flex',
+                  justifyContent: 'center',
+                }}
+              >
+                {weekInfo}
+              </Typography>
+            <ArrowIncrementButton
+              onClick={()=>{incrementWeek()}}
+            />
+          </Box>
+        </Box>
+    </>
+  );
+}
+
+export default WeekCalendarHeaderInfo;
\ No newline at end of file

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

 import { useEffect, useCallback, useState, useMemo  } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import MonthCalendarBody from '../../components/MonthCalendarBody/MonthCalendarBody';
-import MonthCalendarHeader from '../../components/MonthCalendarHeader/MonthCalendarHeader';
+import MonthCalendarBody from '../../components/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
+import MonthCalendarHeader from '../../components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks} from '../../store/actions/tasksActions';
 
@@ -47,8 +47,8 @@ function MonthCalendar() {
   }, [dateNow])
 
   const currentMonthString = useMemo(() => {
-    return getCurrentMonthString(dateNow)
-  }, [dateNow])
+    return getCurrentMonthString(dateNow.month)
+  }, [dateNow.month])
 
   const onChangeWorkerHandler = useCallback((event) => {
     setWorker(event.target.value);

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

+import moment from 'moment';
+import { useEffect, useState, useMemo, useCallback  } from 'react';
+import WeekCalendarBody from '../../components/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
+import WeekCalendarHeader from '../../components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
+import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
+
+
+function WeekCalendar() {
+
+  const [date, setDate] = useState({year: '', month: '', currentDay: ''})
+  const [hourFormat, setHourFormat] = useState(false);
+
+  useEffect(()=>{
+    const year = new Date().getFullYear()
+    const month = new Date().getMonth()
+    const currentDay = moment().date()
+    setDate({year: year, month: month, currentDay: currentDay})
+  }, [])
+
+  const hoursInDay = useMemo(()=>{
+    let arr
+    if (hourFormat) {
+      arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00']
+    } else {
+      arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
+    }
+    return arr
+  }, [hourFormat])
+
+  const week = useMemo(()=>{
+    return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
+  }, [date])
+
+  const incrementWeek = useCallback(() => {
+    setDate((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)=>{
+      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])
+  
+  return (
+    <>
+      <WeekCalendarHeader
+        incrementWeek={incrementWeek}
+        decrementWeek={decrementWeek}
+        weekInfo={weekInfo}
+      />
+      <WeekCalendarBody
+        week={week}
+        hourFormat={hourFormat}
+        setHourFormat={setHourFormat}
+        hoursInDay={hoursInDay}
+      />
+    </>
+  );
+}
+
+export default WeekCalendar;
\ No newline at end of file

planner-front/src/helpers/CalendarHelpers.js

+import moment from "moment"
+
 export const getDaysInMonth = (dateNow) => {
   if (dateNow.month <= 11 && dateNow.month >= 0) {
     const newDaysInMonth = []
@@ -13,9 +15,9 @@ export const getDaysInMonth = (dateNow) => {
   }
 }
 
-export const getCurrentMonthString = (dateNow) => {
-  if (dateNow.month <= 11 && dateNow.month >= 0) {
-    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][dateNow.month];
+export const getCurrentMonthString = (month) => {
+  if (month <= 11 && month >= 0) {
+    return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month];
   } else {
     return null
   }
@@ -31,4 +33,36 @@ export const dateToISOLikeButLocal = (date) => {
   } else {
     return null
   }
+}
+
+export const getWeekFromCurrentDate = (year, month, curDay) => {
+  const week = [0, 0, 0, 0, 0, 0, 0]
+    const currentDayWeek = moment(new Date(year, month, curDay)).isoWeekday()
+    for (let i = 1; i <= 7; i++) {
+      if (currentDayWeek > i ) {
+        const day = moment(new Date(year, month, curDay - i)).date()
+        const dayWeek = moment(new Date(year, month, curDay - i)).isoWeekday()
+        week[dayWeek - 1] = day
+      } else if (currentDayWeek === i) {
+        const day = moment(new Date(year, month, curDay)).date()
+        const dayWeek = moment(new Date(year, month, curDay)).isoWeekday()
+        week[dayWeek - 1] = day
+      } else {
+        const day = moment(new Date(year, month, curDay + i - moment(new Date(year, month, curDay)).isoWeekday())).date()
+        const dayWeek = i - moment(new Date(year, month, curDay)).isoWeekday() + moment(new Date(year, month, curDay)).isoWeekday()
+        week[dayWeek - 1] = day
+      }
+    }
+    return week
+}
+
+export const getWeekInfoString = (week, date) => {
+  if (week[0] > week[6]) {
+    if (date.month === 11) {
+      return getCurrentMonthString(date.month) + ' - ' + getCurrentMonthString(0) +  ' ' + date.year
+    }
+    return getCurrentMonthString(date.month) + ' - ' + getCurrentMonthString(date.month + 1) +  ' ' + date.year
+  } else {
+    return getCurrentMonthString(date.month) +  ' ' + date.year
+  }
 }
\ No newline at end of file