#149 реализовал поля для формы новой задачи

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

 import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
 import { memo } from 'react';
 
-function СustomSelect({ value, onChange, label, variant = 'standard', items, id, defaultValue, name }) {
+function СustomSelect({ value, onChange, label, variant = 'standard', items, id, defaultValue, name, sx}) {
 
   return (
     <>
-      <FormControl variant={variant} sx={{ m: 0, minWidth: 125 }}>
+      <FormControl variant={variant} sx={ sx?.width ? sx : { m: 0, minWidth: 125}}>
         <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
           labelId={`${id}-select-label`}
@@ -30,7 +30,7 @@ function СustomSelect({ value, onChange, label, variant = 'standard', items, id
 }
 
 export default memo(СustomSelect, (prevProps, nextProps) => {
-  if (prevProps.value !== nextProps.value) {
+  if (prevProps.value !== nextProps.value || prevProps.items !== nextProps.items) {
     return false
   } else {
     return true

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/DateTimePicker/DateTimePicker.js

+import React, {useState} from "react";
+import TextField from "@mui/material/TextField";
+import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
+import { DateTimePicker } from "@mui/x-date-pickers/DateTimePicker";
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import moment from "moment";
+
+
+
+
+
+export default function MaterialUIPickers({task, name,onChange, }) {
+  const [state, setState]=useState(null)
+  let fullYear = new Date().getFullYear()
+  let month = new Date().getMonth() 
+  let day = new Date().getDate();
+
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterMoment}
+      sx={{ width: "100%", fontSize: 5, fontWeight: "200" }}
+      adapterLocale={'ru-RU'}
+    >
+      <DateTimePicker
+      minTime={moment({year:fullYear,month:month,day:day ,hour:11,minute:0})}
+      maxTime={moment({year:fullYear,month:month,day:day ,hour:20,minute:0})}
+      disablePast={true}
+      showTimeSelect={true}
+      minutesStep={60}
+      ampm={false}
+      ampmInClock={false}
+        inputFormat="DD/MM/YY HH:mm"
+        renderInput={(params) =>{  return (
+          <TextField
+            {...params}
+            sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
+            name={name}
+          />
+        )}}
+        value={state}
+        onChange={(newValue) => {
+          setState(newValue)
+          onChange(newValue, name);
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/NewTaskForm/NewTaskForm.js

-import { Box, Divider, Grid, Table, TableCell, TableContainer, TextField, Typography, } from "@mui/material";
-import { memo } from "react";
+import { Box, Divider, Grid, IconButton, TextField, Typography, } from "@mui/material";
+import { memo, useMemo } from "react";
+import { priorities } from "../../../../constants";
+import CustomSelect from "../../../UI/СustomSelect/СustomSelect"
+import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
+import { Save } from "@mui/icons-material";
+
+function NewTaskForm({ addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange }) {
+  const workers = useMemo(()=>{
+    if (newTask?.project) {
+      return newTask?.project?.members.map((member)=>{return {value: member.user, text: member.user.displayName}})
+    } else {
+      return [{value: '', text: 'Выберите проект'}]
+    }
+  },[newTask?.project])
 
-function NewTaskForm({ addFormStatus }) {
 
   return (
-    <Box sx={{height: addFormStatus ? '200px' : '0px', transition: 'all 0.3s linear', visibility: addFormStatus ? 'visible' : 'hidden', transform: addFormStatus ? 'translateY(0)' : 'translateY(-20vh)'}}>
+    <Box sx={{
+      height: addFormStatus ? '200px' : '0px',
+      transition: 'all 0.3s linear',
+      visibility: addFormStatus ? 'visible' : 'hidden',
+      transform: addFormStatus ? 'translateY(0)' : 'translateY(-20vh)'
+    }}>
       <Box>
         <Divider>
           <Typography variant="overline">Добавить новую задачу</Typography>
         </Divider>
-        <Box container sx={{
+        <Box sx={{
           backgroundColor: "#E8E8E8",
           marginBottom: "2em",
         }}>
@@ -21,24 +38,62 @@ function NewTaskForm({ addFormStatus }) {
             <Grid item xs={3}>Дедлайн</Grid>
             <Grid item xs={0.5}></Grid>
           </Grid>
-          <Grid container padding={2}>
+          <Grid container padding={2} alignItems='center'>
             <Grid item xs={1}>
-              <TextField sx={{width: '90%'}}/>
+              <CustomSelect
+                defaultValue={priorities[0]?.value}
+                value={newTask.priority}
+                name={'priority'}
+                variant={'outlined'}
+                onChange={onChangeNewTaskHandler}
+                id={'priority-type'}
+                items={priorities}
+                sx={{ width: '90%' }}
+              />
             </Grid>
             <Grid item xs={3.5}>
-              <TextField sx={{width: '90%'}}/>
+              <TextField
+                id="task-title"
+                value={newTask.title}
+                variant="outlined"
+                name='title'
+                sx={{ width: '90%' }}
+                onChange={onChangeNewTaskHandler}
+              />
             </Grid>
             <Grid item xs={2}>
-              <TextField sx={{width: '90%'}}/>
+              <CustomSelect
+                value={newTask.project}
+                name={'project'}
+                variant={'outlined'}
+                onChange={onChangeNewTaskHandler}
+                id={'project'}
+                items={allUserProjectsForModalTask}
+                sx={{ width: '90%' }}
+              />
             </Grid>
             <Grid item xs={2}>
-              <TextField sx={{width: '90%'}}/>
+              <CustomSelect
+                value={newTask.executor}
+                name={'executor'}
+                variant={'outlined'}
+                onChange={onChangeNewTaskHandler}
+                id={'executor'}
+                items={workers}
+                sx={{ width: '90%' }}
+              />
             </Grid>
             <Grid item xs={3}>
-              <TextField sx={{width: '90%'}}/>
+              <MaterialUIPickers
+                task={newTask}
+                name="dateTimeDeadLine"
+                onChange={onDateChange}
+              />
             </Grid>
-            <Grid item xs={0.5}>
-              X
+            <Grid item xs={0.5} >
+              <IconButton disabled={!newTask.title}>
+                <Save />
+              </IconButton>
             </Grid>
           </Grid>
           <Grid container></Grid>

planner-front/src/components/UsersTasksCompoments/UsersTasksTableContainer/UsersTasksTableContainer.js

-import { Box, Table, TableCell, TableContainer, } from "@mui/material";
+import {Table, TableContainer, } from "@mui/material";
 import { memo } from "react";
 import NewTaskForm from "./NewTaskForm/NewTaskForm";
 import UsersTasksTableBody from "./UsersTasksTableBody/UsersTasksTableBody";
 import UsersTasksTableHead from "./UsersTasksTableHead/UsersTasksTableHead";
 
-function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus }) {
-  console.log(addFormStatus)
+
+function UsersTasksTableContainer({ order, orderBy, handleRequestSort, rows, page, rowsPerPage, addFormStatus, onChangeNewTaskHandler, newTask, allUserProjectsForModalTask, onDateChange}) {
   return (
     <TableContainer>
       <NewTaskForm
-        addFormStatus={addFormStatus} />
+        addFormStatus={addFormStatus}
+        onChangeNewTaskHandler={(e)=>{onChangeNewTaskHandler(e)}}
+        newTask={newTask}
+        allUserProjectsForModalTask={allUserProjectsForModalTask}
+        onDateChange={onDateChange}
+      />
       <Table
         sx={{ minWidth: 750 }}
         aria-labelledby="tableTitle"

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

@@ -5,24 +5,59 @@ import UsersTasksTableContainer from '../../components/UsersTasksCompoments/User
 import { fetchAllTasksByMembership } from '../../store/actions/tasksActions';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { useEffect, useState } from 'react';
+import { fetchAllUserProjects } from '../../store/actions/projectsActions';
+import moment from 'moment';
 
 export default function EnhancedTable() {
   const dispatch = useDispatch();
 
-  const {tasks} = useSelector((state) => state.tasks, shallowEqual);
-  const projects = useSelector((state) => state.tasks.projects);
-  const user = useSelector((state) => state.users.user);
+  const { tasks } = useSelector((state) => state.tasks);
+  const { allUserProjectsForModalTask } = useSelector(state => state.projects, shallowEqual)
 
+  const user = useSelector((state) => state.users.user);
+  const [newTask, setNewTask] = useState({
+    priority: '',
+    title: '',
+    project: '',
+    description: '',
+    executor: '',
+    dateTimeDeadLine: '',
+  })
   const [order, setOrder] = useState('asc');
-  const [orderBy, setOrderBy] =useState('createdAt');
+  const [orderBy, setOrderBy] = useState('createdAt');
   const [page, setPage] = useState(0);
   const [rowsPerPage, setRowsPerPage] = useState(10);
   const [addFormStatus, setAddFormStatus] = useState(false);
 
   useEffect(() => {
     dispatch(fetchAllTasksByMembership());
+    dispatch(fetchAllUserProjects())
   }, [dispatch]);
 
+  useEffect(() => {
+    dispatch(fetchAllUserProjects())
+  }, [dispatch])
+
+  const onChangeNewTaskHandler = (e) => {
+    const { value, name } = e.target;
+    setNewTask((prevState => {
+      return {
+        ...prevState,
+        [name]: value
+      }
+    }));
+  };
+
+  const onDateChange = (value, property) => {
+    const utcAvoidoffset = moment(value).utcOffset(0, true).format()
+    setNewTask((prevState => {
+      return {
+        ...prevState,
+        [property]: utcAvoidoffset
+      }
+    }));
+  };
+
   const handleRequestSort = (event, property) => {
     const isAsc = orderBy === property && order === 'asc';
     setOrder(isAsc ? 'desc' : 'asc');
@@ -39,7 +74,7 @@ export default function EnhancedTable() {
   };
 
   const createTaskFromButtonHandler = () => {
-    setAddFormStatus((prevState)=>{return !prevState})
+    setAddFormStatus((prevState) => { return !prevState })
   }
 
   return (
@@ -56,6 +91,10 @@ export default function EnhancedTable() {
         page={page}
         rowsPerPage={rowsPerPage}
         addFormStatus={addFormStatus}
+        onChangeNewTaskHandler={onChangeNewTaskHandler}
+        newTask={newTask}
+        allUserProjectsForModalTask={allUserProjectsForModalTask}
+        onDateChange={onDateChange}
       />
       <UsersTasksTablePagination
         count={tasks.length}

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

@@ -87,7 +87,7 @@ function WeekCalendar() {
   }, [])
 
   const onChangeProjectHandler = useCallback((e, value) => {
-    setWorkerInfo((prevState) => { return { ...prevState, project: value } });
+    setWorkerInfo((prevState) => { return { ...prevState, project: value.id } });
   }, []);
 
   const onChangeWorkerHandler = useCallback((e, value) => {

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

@@ -33,7 +33,7 @@ const projectsReducer = (state = initialState, action) => {
       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 { value: project, text: project.title }
       })
       return { ...state, loading: false, allUserProjects: action.projects, allUserProjectsForModalTask: newArr }
     case CHANGE_MEMBER_ROLE_SUCCESS: