#130 Реализовал переход на другой календарь в недельном календаре

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';
 
@@ -12,9 +13,11 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
           <Toolbar>
 
             <Box>
+              
               <CalendarUserDisplayName
                 currentCalendarDisplayName={currentCalendarDisplayName}
               />
+
               <MonthAndYearInfo
                 currentMonthString={currentMonthString}
                 decrementMonth={decrementMonth}
@@ -22,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/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

@@ -4,7 +4,7 @@ function CalendarUserDisplayName({currentCalendarDisplayName}) {
 
   return (
     <>
-      <Typography variant="h5" sx={{ margin: "20px 0 20px 0" }}>
+      <Typography variant="h5" sx={{ marginTop: "20px" }}>
         Календарь:  {currentCalendarDisplayName}
       </Typography>
     </>

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/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';
@@ -15,13 +17,15 @@ function WeekCalendar() {
   const { user, currentCalendarDisplayName } = useSelector(state => state.users);
   const { allUserProjects, project } = useSelector(state => state.projects)
 
-  const [copyTask, setCopyTask] = useState(null)
   const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
-  const [userCalendarId, setUserCalendarId] = useState(null)
   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(() => {
@@ -79,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) => {
@@ -117,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)) {
@@ -226,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}
@@ -236,6 +286,10 @@ function WeekCalendar() {
         onChangeWeekGoalHandler={onChangeWeekGoalHandler}
         weekPriorities={weekPriorities}
         onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
+        handleOpen={handleOpen}
+        currentCalendarDisplayName={currentCalendarDisplayName}
+        user={user}
+        userId={userId}
       />
       <WeekCalendarBody
         deleteTaskHandler={deleteTaskHandler}