Merge branch 'task-130-feature/check_other_weekly_calendar' into 'development'

Task 130 feature/check other weekly calendar

See merge request !103

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

 import { Grid } from "@mui/material";
 import { memo, useMemo } from "react";
 import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
-import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandartCell";
+import CalendarStandartCell from "../../../UI/CalendarStandartCell/CalendarStandartCell";
 import CalendarTask from "../CalendarTask/CalendarTask";
 import EmptyBox from "./EmptyBox/EmptyBox";
 import { getBoxesInLine } from "./Helpers";

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

 import { Grid } from "@mui/material";
 import React, { memo, useEffect, useState } from "react";
-import DefaultTask from "../../../../DefaultTask/DefaultTask";
+import DefaultTask from "../../../../UI/DefaultTask/DefaultTask";
 
 const EmptyBox = ({ hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask }) => {
 

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

 import { Box, FormControlLabel, Switch } from "@mui/material";
 import { useCallback, useState } from "react";
-import CalendarRow from "../../CalendarRow/CalendarRow";
-import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
-import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
-import ModalTask from "../../ModalTask/ModalTask"
-import MonthCalendarModalContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
+import CalendarRow from "../../UI/CalendarRow/CalendarRow";
+import CalendarSmallCell from "../../UI/CalendarSmallCell/CalendarSmallCell";
+import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandartCell";
+import ModalTask from "../../UI/ModalTask/ModalTask"
+import MonthCalendarModalContent from "../../UI/CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 import { useSelector } from "react-redux";
 

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

 import { AppBar, Button, Toolbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
+import ButtonSwapCalendar from '../../UI/ButtonSwapCalendar/ButtonSwapCalendar';
+import CalendarUserDisplayName from '../../UI/CalendarUserDisplayName/CalendarUserDisplayName';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
 
 function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, year, handleOpen, currentCalendarDisplayName, user, userId}) {
@@ -11,9 +13,11 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
           <Toolbar>
 
             <Box>
-              <Typography variant="h5" sx={{ margin: "20px 0 20px 0" }}>
-                Календарь:  {currentCalendarDisplayName}
-              </Typography>
+              
+              <CalendarUserDisplayName
+                currentCalendarDisplayName={currentCalendarDisplayName}
+              />
+
               <MonthAndYearInfo
                 currentMonthString={currentMonthString}
                 decrementMonth={decrementMonth}
@@ -21,14 +25,12 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
                 year={year}
               />
             </Box>
-            <Button
-              onClick={() => { handleOpen() }}
-              color="inherit"
-              size="large"
-              sx={{ marginLeft: 'auto' }}
-            >
-              {user.id === userId ? 'Выбрать сотрудника' : 'Вернуться назад'}
-            </Button>
+
+             <ButtonSwapCalendar
+              user={user}
+              userId={userId}
+              handleOpen={handleOpen}
+             />
           </Toolbar>
         </AppBar>
       </Box>

planner-front/src/components/Calendars/UI/ButtonSwapCalendar/ButtonSwapCalendar.js

+import {Button} from '@mui/material';
+
+function ButtonSwapCalendar({ handleOpen, user, userId }) {
+
+  return (
+    <>
+      <Button
+        onClick={() => { handleOpen() }}
+        color="inherit"
+        size="large"
+        sx={{ marginLeft: 'auto', marginBottom: 'auto', marginTop: '20px' }}
+      >
+        {user.id === userId ? 'Выбрать сотрудника' : 'Вернуться назад'}
+      </Button>
+    </>
+  );
+}
+
+export default ButtonSwapCalendar;
\ No newline at end of file

planner-front/src/components/Calendars/CalendarModalTaskContent/CalendarModalTaskContent.js → planner-front/src/components/Calendars/UI/CalendarModalTaskContent/CalendarModalTaskContent.js

 import { Button, TextField } from "@mui/material";
 import { memo } from "react";
 import { useSelector } from "react-redux";
-import { priorities } from "../../../constants";
-import CustomSelect from '../../UI/СustomSelect/СustomSelect'
+import { priorities } from "../../../../constants";
+import CustomSelect from '../../../UI/СustomSelect/СustomSelect'
 import { isValidate } from "./Helpers";
 
 

planner-front/src/components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent.js → planner-front/src/components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent.js

-import { Autocomplete, Button, TextField } from "@mui/material";
+import { Button } from "@mui/material";
 import { memo } from "react";
-import CustomAutocomplete from "../../UI/CustomAutocomplete/CustomAutocomplete";
+import CustomAutocomplete from '../../../UI/CustomAutocomplete/CustomAutocomplete'
 
 
 function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, onChangeWorkerHandler, workerInfo, workers, handleClose, onChangeCalendarUser }) {

planner-front/src/components/Calendars/UI/CalendarUserDisplayName/CalendarUserDisplayName.js

+import { Typography } from '@mui/material';
+
+function CalendarUserDisplayName({currentCalendarDisplayName}) {
+
+  return (
+    <>
+      <Typography variant="h5" sx={{ marginTop: "20px" }}>
+        Календарь:  {currentCalendarDisplayName}
+      </Typography>
+    </>
+  );
+}
+
+export default CalendarUserDisplayName;
\ No newline at end of file

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

@@ -29,7 +29,7 @@ export default function ModalTask({ modal, handleClose, children, week }) {
       if (windowDimenion.winHeight > modal.yClickСordinates + 470) {
         return modal.yClickСordinates - modal.yDivClick
       } else {
-        return modal.yClickСordinates - 470 
+        return modal.yClickСordinates - 480 
       }
     } else {
       if (windowDimenion.winHeight > modal.yClickСordinates + 470) {

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

 import { useMemo } from "react";
 import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
-import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandartCell";
+import CalendarStandartCell from "../../../UI/CalendarStandartCell/CalendarStandartCell";
 import { useEffect, useRef, useState } from "react";
 import { Grid } from "@mui/material";
 import CalendarWeekTask from "./CalendarWeekTask/CalendarWeekTask";

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

 import { Grid } from "@mui/material";
 import { Box } from "@mui/system";
 import { useCallback, useState } from "react";
-import ModalTask from "../../ModalTask/ModalTask";
-import CalendarModalTaskContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
-import CalendarRow from "../../CalendarRow/CalendarRow";
-import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
-import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
-import HourFormatSwitch from "../../HourFormatSwitch/HourFormatSwitch";
+import ModalTask from "../../UI/ModalTask/ModalTask";
+import CalendarModalTaskContent from "../../UI/CalendarModalTaskContent/CalendarModalTaskContent";
+import CalendarRow from "../../UI/CalendarRow/CalendarRow";
+import CalendarSmallCell from "../../UI/CalendarSmallCell/CalendarSmallCell";
+import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandartCell";
+import HourFormatSwitch from "../../UI/HourFormatSwitch/HourFormatSwitch";
 import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
 import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
 

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

 import { AppBar, Toolbar } from '@mui/material';
 import { Box } from '@mui/system';
 import { memo } from 'react';
+import ButtonSwapCalendar from '../../UI/ButtonSwapCalendar/ButtonSwapCalendar';
+import CalendarUserDisplayName from '../../UI/CalendarUserDisplayName/CalendarUserDisplayName';
 import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
 import WeekGoal from './WeekGoal/WeekGoal';
 import WeekPriorities from './WeekPriorities/WeekPriorities';
@@ -8,7 +10,7 @@ import WeekPriorities from './WeekPriorities/WeekPriorities';
 
 
 
-function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler, weekPriorities, onChangeWeekPrioritiesHandler }) {
+function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler, weekPriorities, onChangeWeekPrioritiesHandler, handleOpen, currentCalendarDisplayName, user, userId }) {
 
   return (
     <>
@@ -16,28 +18,37 @@ function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal,
         <AppBar position="static">
           <Toolbar>
             <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-            <WeekGoal
-              weekGoal={weekGoal}
-              onChangeWeekGoalHandler={onChangeWeekGoalHandler}
-            />
-
-            <WeekPriorities
-              weekPriorities={weekPriorities}
-              onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
-            />
-
-            <WeekCalendarHeaderInfo
-              decrementWeek={decrementWeek}
-              incrementWeek={incrementWeek}
-              weekInfo={weekInfo}
-              weekGoal={weekGoal}
-              onChangeWeekGoalHandler={onChangeWeekGoalHandler}
-            />
-
-          </Box>
-        </Toolbar>
-      </AppBar>
-    </Box>
+
+              <CalendarUserDisplayName
+                currentCalendarDisplayName={currentCalendarDisplayName}
+              />
+              <WeekGoal
+                weekGoal={weekGoal}
+                onChangeWeekGoalHandler={onChangeWeekGoalHandler}
+              />
+
+              <WeekPriorities
+                weekPriorities={weekPriorities}
+                onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
+              />
+
+              <WeekCalendarHeaderInfo
+                decrementWeek={decrementWeek}
+                incrementWeek={incrementWeek}
+                weekInfo={weekInfo}
+                weekGoal={weekGoal}
+                onChangeWeekGoalHandler={onChangeWeekGoalHandler}
+              />
+
+            </Box>
+            <ButtonSwapCalendar
+              user={user}
+              userId={userId}
+              handleOpen={handleOpen}
+             />
+          </Toolbar>
+        </AppBar>
+      </Box>
     </>
   );
 }

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

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import CalendarModalWorkerContent from '../../components/Calendars/CalendarModalWorkerContent/CalendarModalWorkerContent';
+import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
 import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
 import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';

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

 import moment from 'moment';
 import { useEffect, useState, useMemo, useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import CalendarModalWorkerContent from '../../components/Calendars/UI/CalendarModalWorkerContent/CalendarModalWorkerContent';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
+import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
 import { fetchAllUserProjects } from '../../store/actions/projectsActions';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
+import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersActions';
 
 
 function WeekCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
-  const { allUserProjects } = useSelector(state => state.projects)
-  const user = useSelector(state => state.users?.user);
+  const { user, currentCalendarDisplayName } = useSelector(state => state.users);
+  const { allUserProjects, project } = useSelector(state => state.projects)
 
-  const [copyTask, setCopyTask] = useState(null)
   const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
   const [weekPriorities, setWeekPriorities] = useState({ priorityOne: 'Один', priorityTwo: 'Два', priorityThree: 'Три' })
+  const [workerInfo, setWorkerInfo] = useState({ project: '', worker: '' });
   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 [copyTask, setCopyTask] = useState(null)
+  const [userCalendarId, setUserCalendarId] = useState(null)
+  const [modal, setModal] = useState(false)
   const [userId, setUserId] = useState('')
 
   useEffect(() => {
@@ -29,9 +35,22 @@ function WeekCalendar() {
     setDateNow({ year: year, month: month, currentDay: currentDay })
     dispatch(fetchCalendarTasks(user.id))
     dispatch(fetchAllUserProjects())
-    setUserId(user.id)
   }, [dispatch, user.id])
 
+  useEffect(() => {
+    if (userCalendarId) {
+      setUserId(userCalendarId)
+      dispatch(fetchCalendarTasks(userCalendarId))
+      dispatch(fetchCurrentCalendarDisplayName(userCalendarId))
+      dispatch(fetchAllUserProjects())
+    } else {
+      setUserId(user.id)
+      dispatch(fetchCalendarTasks(user.id))
+      dispatch(fetchCurrentCalendarDisplayName(user.id))
+      dispatch(fetchAllUserProjects())
+    }
+  }, [userCalendarId, dispatch, user.id])
+
   const hoursInDay = useMemo(() => {
     let arr
     if (hourFormat) {
@@ -64,11 +83,20 @@ function WeekCalendar() {
     })
   }, [])
 
+  const onChangeProjectHandler = useCallback((e, value) => {
+    setWorkerInfo((prevState) => { return { ...prevState, project: value } });
+  }, []);
+
+  const onChangeWorkerHandler = useCallback((e, value) => {
+    setWorkerInfo((prevState) => { return { ...prevState, worker: value } });
+  }, []);
+
   const onChangeWeekGoalHandler = useCallback((e) => {
     setWeekGoal((prevState) => {
       return e.target.value
     })
   }, [])
+
   const onChangeWeekPrioritiesHandler = useCallback((e) => {
     const { name, value } = e.target;
     setWeekPriorities((prevState) => {
@@ -102,6 +130,12 @@ function WeekCalendar() {
     }
   }, []);
 
+  const onChangeCalendarUser = useCallback(() => {
+    setModal(false)
+    setUserCalendarId(workerInfo.worker.user.id)
+    setWorkerInfo({ project: '', worker: '' })
+  }, [workerInfo?.worker?.user?.id])
+
   const createTaskInCellHandler = useCallback((dayNumber, dayHour, month) => {
     let hour
     if (!isNaN(dayHour)) {
@@ -211,8 +245,39 @@ function WeekCalendar() {
     dispatch(deleteCalendarTask(taskId, userId))
   }, [dispatch, userId])
 
+  const handleClose = useCallback(() => {
+    setModal(false)
+    setWorkerInfo({ project: '', worker: '' })
+  }, [])
+
+  const handleOpen = useCallback(async () => {
+    if (user.id === userId) {
+      await dispatch(fetchAllUserProjects())
+      setModal(true)
+    } else {
+      setUserCalendarId(null)
+    }
+  }, [dispatch, user.id, userId])
+
+  console.log(project)
+
   return (
     <>
+      <DefaultModal
+        modal={modal}
+        handleClose={() => { handleClose() }}
+      >
+        <CalendarModalWorkerContent
+          workerInfo={workerInfo}
+          allUserProjects={allUserProjects}
+          workers={project?.project?.members}
+          onChangeProjectHandler={onChangeProjectHandler}
+          onChangeWorkerHandler={onChangeWorkerHandler}
+          handleClose={handleClose}
+          onChangeCalendarUser={onChangeCalendarUser}
+        />
+      </DefaultModal>
+
       <WeekCalendarHeader
         incrementWeek={incrementWeek}
         decrementWeek={decrementWeek}
@@ -221,6 +286,10 @@ function WeekCalendar() {
         onChangeWeekGoalHandler={onChangeWeekGoalHandler}
         weekPriorities={weekPriorities}
         onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
+        handleOpen={handleOpen}
+        currentCalendarDisplayName={currentCalendarDisplayName}
+        user={user}
+        userId={userId}
       />
       <WeekCalendarBody
         deleteTaskHandler={deleteTaskHandler}