#103 Реализовал автоселект для выбора проекта

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

+import { Autocomplete, TextField } from "@mui/material";
+import { memo } from "react";
+
+
+function CalendarModalWorkerContent({ allUserProjects, onChangeProjectHandler, workerInfo }) {
+  console.log(workerInfo)
+  return (<>
+    <Autocomplete
+      id="choose-project"
+      freeSolo
+      options={allUserProjects}
+      getOptionLabel={(item) => item.title || ""}
+      onChange={onChangeProjectHandler}
+      name={"userId"}
+      value={workerInfo.project}
+      renderInput={(params) => <TextField
+        style={{ margin: "5px" }}
+        label={"Проект"}
+        state={workerInfo.project}
+        {...params} />}
+    />
+    {workerInfo.project ?
+      <Autocomplete
+        id="choose-worker"
+        freeSolo
+        options={allUserProjects}
+        getOptionLabel={(item) => item.title || ""}
+        onChange={(e, value)=>{ onChangeProjectHandler(e, value)}}
+        name={"userId"}
+        value={workerInfo.project}
+        renderInput={(params) => <TextField
+          style={{ margin: "5px" }}
+          label={"Проект"}
+          state={workerInfo.project}
+          {...params} />}
+      />
+      : null}
+  </>);
+}
+
+export default memo(CalendarModalWorkerContent);
\ No newline at end of file

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

@@ -2,7 +2,7 @@ import { AppBar, Button, Toolbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
 
-function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year, setModal, currentCalendarDisplayName }) {
+function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, year, handleOpen, currentCalendarDisplayName }) {
 
   return (
     <>
@@ -22,10 +22,10 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
               />
             </Box>
             <Button
-              onClick={() => { setModal((prevState) => !prevState) }}
+              onClick={() => { handleOpen() }}
               color="inherit"
               size="large"
-              sx={{marginLeft: 'auto'}}
+              sx={{ marginLeft: 'auto' }}
             >
               Выбрать сотрудника
             </Button>

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

@@ -16,9 +16,7 @@ const style = {
   p: 4,
 };
 
-export default function DefaultModal({modal, setModal}) {
-  
-  const handleClose = () => setModal(false);
+export default function DefaultModal({ modal, handleClose, children }) {
 
   return (
     <div>
@@ -29,7 +27,7 @@ export default function DefaultModal({modal, setModal}) {
         aria-describedby="modal-modal-description"
       >
         <Box sx={style}>
-          <>lol</>
+          {children}
         </Box>
       </Modal>
     </div>

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

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
+import CalendarModalWorkerContent from '../../components/Calendars/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';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } 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 MonthCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
-  const {user, currentCalendarDisplayName} = useSelector(state => state.users);
+  const { user, currentCalendarDisplayName } = useSelector(state => state.users);
+  const { allUserProjects } = useSelector(state => state.projects)
   const params = useParams()
 
   const [hourFormat, setHourFormat] = useState(false);
   const [dateNow, setDateNow] = useState({ month: '', year: '' })
-  const [worker, setWorker] = useState('');
-  const [calendarType, setCalendarType] = useState('Месяц');
+  const [workerInfo, setWorkerInfo] = useState({project: '', worker: ''});
   const [currentTask, setCurrentTask] = useState({ title: '', description: '', priority: null, infoForCell: { startHour: null, endHour: null } })
   const [copyTask, setCopyTask] = useState(null)
   const [cellSizes, setCellSizes] = useState({})
@@ -64,12 +66,11 @@ function MonthCalendar() {
     return getCurrentMonthString(dateNow.month)
   }, [dateNow.month])
 
-  const onChangeWorkerHandler = useCallback((event) => {
-    setWorker(event.target.value);
+  const onChangeProjectHandler = useCallback((e, value) => {
+    setWorkerInfo((prevState)=>{return {...prevState, project: value}});
   }, []);
-
-  const onChangeCalendarTypeHandler = useCallback((event) => {
-    setCalendarType(event.target.value);
+  const onChangeWorkerHandler = useCallback((e, value) => {
+    setWorkerInfo((prevState)=>{return {...prevState, worker: value}});
   }, []);
 
   const incrementMonth = useCallback(() => {
@@ -216,24 +217,34 @@ function MonthCalendar() {
     dispatch(deleteCalendarTask(taskId, userId))
   }
 
+  const handleClose = () => {
+    setModal(false)
+  }
+  const handleOpen = async () => {
+    await dispatch(fetchAllUserProjects())
+    setModal(true)
+  }
+
   return (
     <>
       <DefaultModal
         modal={modal}
-        setModal={setModal}
+        handleClose={() => { handleClose() }}
       >
-
+        <CalendarModalWorkerContent
+          workerInfo={workerInfo}
+          allUserProjects={allUserProjects}
+          onChangeProjectHandler={onChangeProjectHandler}
+          onChangeWorkerHandler={onChangeWorkerHandler}
+        />
       </DefaultModal>
+
       <MonthCalendarHeader
         year={dateNow.year}
         currentMonthString={currentMonthString}
         decrementMonth={decrementMonth}
         incrementMonth={incrementMonth}
-        onChangeCalendarTypeHandler={onChangeCalendarTypeHandler}
-        onChangeWorkerHandler={onChangeWorkerHandler}
-        worker={worker}
-        setModal={setModal}
-        calendarType={calendarType}
+        handleOpen={handleOpen}
         currentCalendarDisplayName={currentCalendarDisplayName}
       />
       <MonthCalendarBody

planner-front/src/store/actionTypes/projectsActionTypes.js

@@ -9,4 +9,6 @@ export const CREATE_MEMBER_SUCCESS = "CREATE_MEMBER_SUCCESS";
 
 export const DELETE_MEMBER_REQUEST = "DELETE_MEMBER_REQUEST";
 export const DELETE_MEMBER_SUCCESS = "DELETE_MEMBER_SUCCESS";
-export const DELETE_MEMBER_FAILURE = "DELETE_MEMBER_FAILURE";
+export const DELETE_MEMBER_FAILURE = "DELETE_MEMBER_FAILURE";
\ No newline at end of file
+
+export const FETCH_ALL_USER_PROJECTS_SUCCESS = "FETCH_ALL_USER_PROJECTS_SUCCESS";
\ No newline at end of file

planner-front/src/store/actions/projectsActions.js

 import axios from "../../axiosPlanner";
-import { CREATE_MEMBER_SUCCESS, CREATE_PROJECT_SUCCESS, DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_MEMBERS_ERROR, FETCH_MEMBERS_REQUEST, FETCH_MEMBERS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+import { CREATE_MEMBER_SUCCESS, CREATE_PROJECT_SUCCESS, DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_ALL_USER_PROJECTS_SUCCESS, FETCH_MEMBERS_ERROR, FETCH_MEMBERS_REQUEST, FETCH_MEMBERS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 import { showNotification } from "./commonActions";
 
 const fetchProjectsRequest = () => {
@@ -104,3 +104,19 @@ export const createMember = (memberData, navigate) => {
     };
 }
 
+const fetchAllUserProjectsSuccess = (projects) => {
+    return {type: FETCH_ALL_USER_PROJECTS_SUCCESS, projects};
+};
+
+export const fetchAllUserProjects = () => {
+    return async dispatch => {
+        dispatch(fetchProjectsRequest());
+        try {
+            const response = await axios.get("/projects/my");
+            dispatch(fetchAllUserProjectsSuccess(response.data.projects));
+        } catch (e) {
+            dispatch(fetchProjectsError(e));
+        }
+    }
+}
+

planner-front/src/store/reducers/projectsReducer.js

-import {DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
+import {DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, FETCH_ALL_USER_PROJECTS_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
 
 const initialState = {
+    allUserProjects: [],
     projects: [],
     project: "",
     loading: false, 
@@ -23,6 +24,8 @@ const initialState = {
           return {...state, loading: true};
       case DELETE_MEMBER_FAILURE:
           return {...state, loading: false, error: action.error};
+      case FETCH_ALL_USER_PROJECTS_SUCCESS:
+          return {...state, loading: false, allUserProjects: action.projects}
       default:
         return state;
     }