Merge branch 'task-129-feature/add_project_in_modal_task' into 'development'

Task 129 feature/add project in modal task

See merge request !102

planner-api/src/routers/copyTasks.ts

@@ -22,7 +22,7 @@ router.post("/make-copy",auth,authAuthorOrExecutorOfTask, async(req:Request, res
 /** change date time of copy of task in calendar view */
 router.put("/change-copy/:dateTimeTaskId",auth, authAuthorOrExecutorOfTask, async(req:Request, res: Response):Promise<Response>=>{
     const {dateTimeTaskId} = req.params
-    const {executorStatus,authorStatus, task, dateTimeStart, dateTimeDue, description, title, priority} = req.body
+    const {executorStatus,authorStatus, task, dateTimeStart, dateTimeDue, description, title, priority, project} = req.body
     if(authorStatus){
         task.title = title;
         task.description = description;
@@ -73,6 +73,7 @@ router.put("/change-copy/:dateTimeTaskId",auth, authAuthorOrExecutorOfTask, asyn
     task.title = title; 
     task.description = description;
     task.priority = priority;
+    task.project = project
     await task.save()
     return res.send({task}) 
 })

planner-front/src/components/Calendars/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 { isValidate } from "./Helpers";
 
 
-function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour, id }) {
+function CalendarModalTaskContent({ title, onChangeCurrentTaskHandler, description, priority, project, sendNewTaskHandler, deleteTaskHandler, startHour, endHour, id }) {
 
-  return (<>
-    <TextField
-      id="task-description-title"
-      value={title}
-      label="Название"
-      variant="outlined"
-      sx={{ marginBottom: '30px' }}
-      name='title'
-      onChange={(e) => { onChangeCurrentTaskHandler(e) }}
-    />
-    <TextField
-      id="task-description"
-      multiline
-      rows={4}
-      value={description}
-      label="Описание"
-      variant="outlined"
-      sx={{ marginBottom: '30px' }}
-      name='description'
-      onChange={(e) => { onChangeCurrentTaskHandler(e) }}
-    />
-    <CustomSelect
-      defaultValue={null}
-      value={priority}
-      name={'priority'}
-      variant={'outlined'}
-      onChange={(e) => { onChangeCurrentTaskHandler(e) }}
-      label={'Приоритет'}
-      id={'priority-type'}
-      items={priorities}
-    />
-    <div style={{ display: 'flex', gap: '20px', margin: '20px 0' }}>
+  const { allUserProjectsForModalTask } = useSelector(state => state.projects)
+
+  return (
+    <>
       <TextField
-        id="task-startHour"
-        value={startHour}
-        label="От"
+        id="task-description-title"
+        value={title}
+        label="Название"
         variant="outlined"
-        name='startHour'
+        sx={{ marginBottom: '30px' }}
+        name='title'
         onChange={(e) => { onChangeCurrentTaskHandler(e) }}
       />
       <TextField
-        id="task-endHour"
-        value={endHour}
-        label="До"
+        id="task-description"
+        multiline
+        rows={4}
+        value={description}
+        label="Описание"
         variant="outlined"
-        name='endHour'
+        sx={{ marginBottom: '30px' }}
+        name='description'
         onChange={(e) => { onChangeCurrentTaskHandler(e) }}
       />
-    </div>
-    <div style={{ display: 'flex', gap: '20px', margin: '10px 0' }}>
-      <Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate(title, startHour, endHour)}>Сохранить</Button>
-      <Button onClick={deleteTaskHandler} disabled={!id}>Удалить</Button>
-    </div>
-  </>);
+      <div style={{ display: 'flex', gap: '20px', margin: '20px 0' }}>
+        <CustomSelect
+          defaultValue={null}
+          value={priority}
+          name={'priority'}
+          variant={'outlined'}
+          onChange={(e) => { onChangeCurrentTaskHandler(e) }}
+          label={'Приоритет'}
+          id={'priority-type'}
+          items={priorities}
+        />
+        <CustomSelect
+          value={project}
+          name={'project'}
+          variant={'outlined'}
+          onChange={(e) => { onChangeCurrentTaskHandler(e) }}
+          label={'Проект'}
+          id={'project'}
+          items={allUserProjectsForModalTask}
+        />
+      </div>
+      <div style={{ display: 'flex', gap: '20px', margin: '20px 0' }}>
+        <TextField
+          id="task-startHour"
+          value={startHour}
+          label="От"
+          variant="outlined"
+          name='startHour'
+          onChange={(e) => { onChangeCurrentTaskHandler(e) }}
+        />
+        <TextField
+          id="task-endHour"
+          value={endHour}
+          label="До"
+          variant="outlined"
+          name='endHour'
+          onChange={(e) => { onChangeCurrentTaskHandler(e) }}
+        />
+      </div>
+      <div style={{ display: 'flex', justifyContent: 'space-between', margin: '10px 0' }}>
+        <Button id='test_button_save_task' onClick={sendNewTaskHandler} disabled={!isValidate(title, project, startHour, endHour)}>Сохранить</Button>
+        <Button onClick={deleteTaskHandler} disabled={!id}>Удалить</Button>
+      </div>
+    </>);
 }
 
 export default memo(CalendarModalTaskContent);
\ No newline at end of file

planner-front/src/components/Calendars/CalendarModalTaskContent/Helpers.js

-export const isValidate = (title, startHour, endHour) => {
-  if (title) {
+export const isValidate = (title, project, startHour, endHour) => {
+  if (title && project) {
     const startHourInt = parseInt(startHour)
     const endHourInt = parseInt(endHour)
     if (startHourInt >= 8 && startHourInt <= 24) {

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

@@ -26,16 +26,16 @@ export default function ModalTask({ modal, handleClose, children, week }) {
 
   const getYCordinatesToModal = useCallback(() => {
     if (week) {
-      if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
+      if (windowDimenion.winHeight > modal.yClickСordinates + 470) {
         return modal.yClickСordinates - modal.yDivClick
       } else {
-        return modal.yClickСordinates - 450 
+        return modal.yClickСordinates - 470 
       }
     } else {
-      if (windowDimenion.winHeight > modal.yClickСordinates + 450) {
+      if (windowDimenion.winHeight > modal.yClickСordinates + 470) {
         return modal.yClickСordinates - modal.yDiv - modal.yDivClick
       } else {
-        return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 450) - windowDimenion.winHeight) - 30
+        return modal.yClickСordinates - modal.yDiv - modal.yDivClick - ((modal.yClickСordinates + 470) - windowDimenion.winHeight) - 30
       }
     }
   }, [windowDimenion.winHeight, modal])
@@ -55,7 +55,7 @@ export default function ModalTask({ modal, handleClose, children, week }) {
     top: getYCordinatesToModal(),
     left: getXCordinatesToModal(),
     width: 270,
-    height: 450,
+    height: 470,
     bgcolor: 'background.paper',
     border: '2px solid #000',
     boxShadow: 24,

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

@@ -6,10 +6,11 @@ import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCel
 import ModalTask from "../../ModalTask/ModalTask"
 import MonthCalendarModalContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
+import { useSelector } from "react-redux";
 
 
-function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) {
-
+function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
+  
   const [currentLine, setCurrentLine] = useState('')
   const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
   const handleOpen = useCallback((e) => {
@@ -89,6 +90,7 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
           title={currentTask.title}
           description={currentTask.description}
           priority={currentTask.priority}
+          project={currentTask.project}
           id={currentTask.id}
           startHour={currentTask.infoForCell?.startHour}
           endHour={currentTask.infoForCell?.endHour}

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

@@ -2,7 +2,7 @@ import { Grid } from "@mui/material";
 import { Box } from "@mui/system";
 import { useCallback, useState } from "react";
 import ModalTask from "../../ModalTask/ModalTask";
-import MonthCalendarModalContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
+import CalendarModalTaskContent from "../../CalendarModalTaskContent/CalendarModalTaskContent";
 import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
@@ -98,13 +98,14 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
         handleClose={() => { handleClose() }}
         week={true}
       >
-        <MonthCalendarModalContent
+        <CalendarModalTaskContent
           title={currentTask.title}
           description={currentTask.description}
           priority={currentTask.priority}
           id={currentTask.id}
           startHour={currentTask.infoForCell?.startHour}
           endHour={currentTask.infoForCell?.endHour}
+          project={currentTask.project}
           onChangeCurrentTaskHandler={(e) => { onChangeCurrentTaskHandler(e) }}
           sendNewTaskHandler={() => { sendNewTaskHandler(); handleClose() }}
           deleteTaskHandler={() => { deleteTaskHandler(currentTask.id); handleClose() }}

planner-front/src/components/UI/СustomSelect/СustomSelect.js

@@ -5,7 +5,7 @@ function СustomSelect({ value, onChange, label, variant = 'standard', items, id
 
   return (
     <>
-      <FormControl variant={variant} sx={{ m: 0, minWidth: 120 }}>
+      <FormControl variant={variant} sx={{ m: 0, minWidth: 125 }}>
         <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
           labelId={`${id}-select-label`}

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

@@ -38,10 +38,12 @@ function MonthCalendar() {
       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])
 
@@ -145,10 +147,11 @@ function MonthCalendar() {
         startHour: hour,
         endHour: hourDue,
         startDay: dayNumber
-      }
+      },
+      project: allUserProjects[0].id
     }
     setCurrentTask((newTask))
-  }, [dateNow.month, dateNow.year, hourFormat])
+  }, [dateNow.month, dateNow.year, hourFormat, allUserProjects])
 
   const dragTaskHandler = useCallback(async (dayNumber, hour) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
@@ -294,6 +297,7 @@ function MonthCalendar() {
         createCopyTask={createCopyTask}
         copyTask={copyTask}
         setCopyTask={setCopyTask}
+        allUserProjects={allUserProjects}
       />
 
     </>

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

@@ -4,14 +4,17 @@ import { useDispatch, useSelector } from 'react-redux';
 import WeekCalendarBody from '../../components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
 import WeekCalendarHeader from '../../components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader';
 import { getWeekInfoString, getWeekFromCurrentDate, dateToISOLikeButLocal } from '../../helpers/CalendarHelpers';
+import { fetchAllUserProjects } from '../../store/actions/projectsActions';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
 
 
 function WeekCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
-  const [copyTask, setCopyTask] = useState(null)
+  const { allUserProjects } = useSelector(state => state.projects)
   const user = useSelector(state => state.users?.user);
+
+  const [copyTask, setCopyTask] = useState(null)
   const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
   const [weekPriorities, setWeekPriorities] = useState({ priorityOne: 'Один', priorityTwo: 'Два', priorityThree: 'Три' })
   const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' })
@@ -25,6 +28,7 @@ function WeekCalendar() {
     const currentDay = moment().date()
     setDateNow({ year: year, month: month, currentDay: currentDay })
     dispatch(fetchCalendarTasks(user.id))
+    dispatch(fetchAllUserProjects())
     setUserId(user.id)
   }, [dispatch, user.id])
 
@@ -122,10 +126,11 @@ function WeekCalendar() {
         endHour: hourDue,
         startDay: dayNumber,
         month: month
-      }
+      },
+      project: allUserProjects[0]?.id
     }
     setCurrentTask((newTask))
-  },  [dateNow.year, hourFormat])
+  }, [dateNow.year, hourFormat, allUserProjects])
 
   const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour

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

-import {DELETE_MEMBER_FAILURE, DELETE_MEMBER_REQUEST, DELETE_MEMBER_SUCCESS, DELETE_PROJECT_FAILURE, DELETE_PROJECT_REQUEST, DELETE_PROJECT_SUCCESS, FETCH_ALL_USER_PROJECTS_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, DELETE_PROJECT_FAILURE, DELETE_PROJECT_REQUEST, DELETE_PROJECT_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, 
-    error: null
-  };
-  
-  const projectsReducer = (state = initialState, action) => {
-    switch (action.type) {
-      case FETCH_PROJECTS_REQUEST:
-        return {...state, loading: true};
-      case FETCH_PROJECTS_SUCCESS:
-        return {...state, loading: false, projects: action.projects};
-      case FETCH_PROJECTS_ERROR:
-        return {...state, loading: false, error: action.error};
-      case FETCH_PROJECT_SUCCESS:
-          return {...state, loading: false, project: action.project}
-      case DELETE_MEMBER_SUCCESS:
-          return {...state, loading: false};
-      case DELETE_MEMBER_REQUEST:
-          return {...state, loading: true};
-      case DELETE_MEMBER_FAILURE:
-          return {...state, loading: false, error: action.error};
-      case DELETE_PROJECT_SUCCESS:
-          return {...state, loading: false};
-      case DELETE_PROJECT_REQUEST:
-          return {...state, loading: true};
-      case DELETE_PROJECT_FAILURE:
-          return {...state, loading: false, error: action.error};
-      case FETCH_ALL_USER_PROJECTS_SUCCESS:
-          return {...state, loading: false, allUserProjects: action.projects}
-      default:
-        return state;
-    }
-  };
-  
-  export default projectsReducer;
+  allUserProjectsForModalTask: [],
+  allUserProjects: [],
+  projects: [],
+  project: "",
+  loading: false,
+  error: null
+};
+
+const projectsReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case FETCH_PROJECTS_REQUEST:
+      return { ...state, loading: true };
+    case FETCH_PROJECTS_SUCCESS:
+      return { ...state, loading: false, projects: action.projects };
+    case FETCH_PROJECTS_ERROR:
+      return { ...state, loading: false, error: action.error };
+    case FETCH_PROJECT_SUCCESS:
+      return { ...state, loading: false, project: action.project }
+    case DELETE_MEMBER_SUCCESS:
+      return { ...state, loading: false };
+    case DELETE_MEMBER_REQUEST:
+      return { ...state, loading: true };
+    case DELETE_MEMBER_FAILURE:
+      return { ...state, loading: false, error: action.error };
+    case DELETE_PROJECT_SUCCESS:
+      return { ...state, loading: false };
+    case DELETE_PROJECT_REQUEST:
+      return { ...state, loading: true };
+    case DELETE_PROJECT_FAILURE:
+      return { ...state, loading: false, error: action.error };
+    case FETCH_ALL_USER_PROJECTS_SUCCESS:
+      const newArr = action.projects.map((project)=>{
+        return {value: project.id, text: project.title}
+      })
+      return { ...state, loading: false, allUserProjects: action.projects,  allUserProjectsForModalTask: newArr}
+    default:
+      return state;
\ No newline at end of file
+  }
+};
+
+export default projectsReducer;
\ No newline at end of file

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

@@ -38,6 +38,7 @@ const tasksReduсer = (state = initialState, action) => {
         for (let copy of task.dateTimeTasks) {
           newTasksWithoutInfoForCell.push({
             ...copy,
+            project: task?.project?.id,
             mainTaskId: task.id,
             executor: task.executor,
             author: task.author,