Merge branch 'development' of…

Merge branch 'development' of ssh://git.attractor-school.com:30022/apollo64/crm-team-one into task-41-feature/project_list_front

planner-api/src/fixtures.ts

@@ -39,6 +39,7 @@ const loadFixtures = async () => {
       await user.save();
       users.push(user)
     }
+
     const tasks:Task[] = []
     type taskFinishType = "opened" | "done" |"failed";
     type priorityType = "A" | "B" |"C";
@@ -71,15 +72,22 @@ const loadFixtures = async () => {
         tasks.push(newTask)
       }
     }
+
+    const projects:Project[] = []
     for (let i = 0; i < 5; i++) {
         const newProject = new Project();
         newProject.title = `Project ${faker.random.words(1)}`;
-        newProject.color = faker.random.words(4);
+        newProject.color = faker.random.words(1);
         newProject.admin = faker.helpers.arrayElement(users);
+        newProject.tasks= faker.helpers.arrayElements(tasks, randomIntFromInterval(1, 3));
         newProject.workers = faker.helpers.arrayElements(users, randomIntFromInterval(1, 3));
-        newProject.tasks = faker.helpers.arrayElements(tasks, randomIntFromInterval(0, 19));
         await newProject.save();
+        projects.push(newProject)
     }
+
+
+
+
     console.log('========================== ' + '\n' + 'Fixtures done!' +'\n' + '==========================')
   
   })

planner-api/src/models/Project.ts

@@ -12,15 +12,7 @@ import {
   import {User} from './User';
   import {Task} from './Task';
 
-  // type IncomingData={
-  //   title: string | null;
-  //   color: string
-  //   admin:User
-  //   workers?: User[]
-  //   tasks?: Task[]
-  //   dateDue?:Date
-  //   department?:boolean
-  // }
+
 
   interface IProject{
     id: string;
@@ -36,17 +28,10 @@ import {
 
   @Entity({ name: 'Project' })
   export class Project extends BaseEntity implements IProject{
-    // data: IncomingData;
-    // constructor(data:IncomingData){
-    //   super();
-    //   this.data = data
-    // }
+
     @PrimaryGeneratedColumn('uuid')
     id!: string
 
-    // @Column({ name: 'title', type: 'varchar', length:100,nullable: false, default: this.data.title })
-    // title!: string
-
     @Column({ name: 'title', type: 'varchar', length:100,nullable: false})
     title!: string
 
@@ -65,7 +50,7 @@ import {
     @ManyToOne(() => User, (user: { projects: Project[]; }) => user.projects,{eager : true})
     admin!: User;
     
-    @OneToMany(() => Task, (task: { project: Project; })=>task.project,{eager : true})
+    @OneToMany(() => Task, (task: { project: Project; })=>task.project)
     tasks!:Task[]|null;
         
     @ManyToMany(() => User, (user: { projects: Project[]; }) => user.projects,{eager : true,cascade: true,  onUpdate:'CASCADE',onDelete: 'CASCADE'})

planner-api/src/models/Task.ts

@@ -64,10 +64,10 @@ import {
     @ManyToOne(() => User, (user: { tasks: Task[]; }) => user.tasks,{eager : true})
       author!: User;
 
-    @ManyToMany(() => User,{eager : true, cascade: true, onUpdate:'CASCADE',onDelete: 'CASCADE'})
+    @ManyToMany(() => User,{eager : true, cascade: true, onUpdate:'CASCADE'})
     @JoinTable()
     executors!: User[];
     
-    @ManyToOne(()=>Project,(project:{tasks: Task[]}) => project.tasks)
-    project!: Project | null;
+    @ManyToOne(()=>Project,(project:{tasks: Task[]}) => project.tasks,{eager : true,nullable: true,onUpdate:'CASCADE'})
+    project!: Project;
   }

planner-api/src/routers/tasks.ts

@@ -12,7 +12,6 @@ router.get('/', async(req:Request, res:Response):Promise<Response> => {
 .find()
     return res.send({tasks})
 })
-export default router;
 
 router.post('/', async(req:Request, res:Response):Promise<Response>=>{
     const token = req.get('Authorization');
@@ -81,6 +80,7 @@ router.delete('/:taskId',async (req: Request, res: Response):Promise<Response>=>
 
 router.put('/',async(req:Request, res:Response)=> {
     const token = req.get('Authorization');
+
     const user = await dataSource
     .createQueryBuilder()
     .select("user")
@@ -95,6 +95,7 @@ router.put('/',async(req:Request, res:Response)=> {
     .from(Task, "task")
     .where("task.id = :id", { id })
     .getOne()
+
     if (!task) return res.status(404).send({Message:'task not found'})
     task.title= title
     task.description= description
@@ -108,3 +109,6 @@ router.put('/',async(req:Request, res:Response)=> {
     await task.save()
     res.send({message:'update task successfully'})
 })
+
+
+export default router;

planner-api/src/routers/users.ts

@@ -35,9 +35,7 @@ return res.send({users})
 
 
 router.post('/', upload.single("avatar"), async (req : Request, res : Response):Promise<object> => {
-    console.log(req.body)
     const {name,surname,password,email, role} = req.body;
-    console.log(req.body)
     const displayName = surname+' '+name[0]+'.'
     const user = new User();
     user.name = name;
@@ -47,13 +45,10 @@ router.post('/', upload.single("avatar"), async (req : Request, res : Response):
     user.email = email;
     user.role = role;
     user.generateToken()
-    console.log("user " + user)
     await user.save();
-    console.log("saved")
     const userToFront:User|null = await dataSource.manager.findOneBy(User, {
         email: user.email
     })
-    console.log("userToFront " + userToFront)
     return res.send({userToFront})
 })
 

planner-front/src/App.js

@@ -21,6 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
 
 const App = () => {
     const user = useSelector(state => state.users?.user);
+    console.log(user)
     return (
     <BrowserRouter>
       <Routes>

planner-front/src/components/MonthCalendarBody/CalendarRow/CalendarRow.js

 import { Grid } from "@mui/material";
-import { memo } from "react";
 
 const CalendarRow = ({children}) => {
     return <>
@@ -13,6 +12,6 @@ const CalendarRow = ({children}) => {
     </>
 };
 
-export default memo(CalendarRow);
+export default CalendarRow;
 
 

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

+import { Grid } from "@mui/material";
+import { memo, useMemo } from "react";
+import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
+import CalendarTask from "../CalendarTask/CalendarTask";
+
+const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
+
+  const hours = useMemo(()=>{ 
+    return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
+  [hoursInDay])
+
+  const availableTasks = useMemo(() => {
+    const tasksInDay = tasks.filter((task)=> {
+    if (year === task.infoForCell.startYear) {
+      if (month + 1 === task.infoForCell.startMonth) {
+        if (day.dayNumber === task.infoForCell.startDay) {
+              return task
+          } else {return false}   
+        } else {return false}   
+      } else {return false}      
+    })
+    return tasksInDay
+  }, [tasks, month, year, day.dayNumber])
+
+  const sortedTasks = useMemo(() => {
+    if (availableTasks.length) {
+      const newSortedArr = [...availableTasks].sort(function(a,b){
+        const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
+        const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
+        return durattionSecondDate - durattionFirstDate;
+      })
+      return newSortedArr
+    }
+  }, [availableTasks])
+
+  const linesInDay = useMemo(() => {
+    let hourDiff
+    let hourDiffEnd
+    const lines = []
+    if (hourFormat) {
+      hourDiff = 1
+      hourDiffEnd = 0
+    } else {
+      hourDiff = 2
+      hourDiffEnd = 1
+    }
+    if (availableTasks.length) {
+      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+      for (let k = 0; k < sortedTasks.length; k++) {
+        let skipLine = false
+          for (let j = 0; j < lines.length; j++) {
+            const line = lines[j]
+            const task = sortedTasks[k]
+            if (skipLine) {
+              skipLine = false
+              break;
+            }
+            for (let i = 0; i < line.length; i++) {
+              const hour = hours[i]
+              let havePlace = true
+              if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour  <= hour) && (task.infoForCell.endHour > hour))  
+              || (!hourFormat && task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hour + hourDiff)
+              || (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
+              || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
+                if (!isNaN(line[i])) {
+                  for (let a = 0; a < hours.length; a++) {
+                    const hour = hours[a]
+                    if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                      if (isNaN(line[a])) {
+                        havePlace = false
+                        break;
+                      }
+                    }
+                  }
+                  if (!havePlace) {
+                    havePlace = true  
+                    break;
+                  }
+                  line[i] += `-${k}`
+                  if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
+                    skipLine = true
+                    break;
+                  }
+                } else {
+                    if (j + 1 === lines.length) {
+                      lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
+                    }
+                    break;
+                }
+              } 
+            }
+          }
+      }
+    }
+    return lines
+  }, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
+
+  const getBoxesInLine = (line) => {
+    if (line) {
+      let xs = 12/hoursInDay.length
+      const boxes = []
+      for (let i = 0; i < line.length; i++) {
+        if (!isNaN(line[i])) {
+          if (boxes[boxes.length -1]?.task === null) {
+            boxes[boxes.length -1].xs += xs
+          } else {
+            boxes.push({xs: xs, task: null})
+          }
+        } else {
+          const task = sortedTasks[line[i].split('-')[1]]
+          const taskIsThere = boxes.find((taskFind)=>{
+            if (taskFind?.task?.id === task.id) return taskFind
+          })
+          if (taskIsThere) {
+            taskIsThere.xs +=xs
+          } else {
+            boxes.push({xs: xs, task: sortedTasks[line[i].split('-')[1]]})
+          }
+        }
+      }
+      return boxes
+    }
+  }
+
+  return <>
+      <Grid 
+        container
+        item
+        xs={10.8}
+        align='center'
+        >
+          {hoursInDay.map((hour, i)=>{
+            return (
+              <CalendarStandartCell
+                key={i} 
+                item xs={xs}
+                createTaskInCellHandler={createTaskInCellHandler}
+                hours={hour}
+                dayNumber={day.dayNumber}
+                currentTask={currentTask}
+                handleOpen={handleOpen}
+                modal={modal}
+                >
+              </CalendarStandartCell>
+              ) 
+            })}
+
+            {linesInDay?.map((line, i)=>{
+              const boxes = getBoxesInLine(line)
+              return(
+              <Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
+                {boxes.map((box)=>{
+                  if (box.task) {
+                    return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
+                      <CalendarTask
+                       task={box.task}
+                       setCurrentTask={setCurrentTask} 
+                       handleOpen={handleOpen}
+                       />
+                    </Grid>)
+                  } else {
+                    return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
+                      
+                    </Grid>)
+                  }
+                })}
+              </Grid>)
+            })}
+        </Grid>
+    </>
+};
+
+export default memo(CalendarRowDay);
\ No newline at end of file

planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js

-import { Grid, TextField, Typography } from "@mui/material";
+import { Grid} from "@mui/material";
 import { memo, useEffect, useState } from "react";
 
-const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal}) => {
+const CalendarStandartCell = ({children, xs, hours, dayNumber,  createTaskInCellHandler, handleOpen, modal, divRef }) => {
     const [isThisCell, setIsThisCell] = useState(false)
     useEffect(()=>{
         if(!modal) {
             setIsThisCell(false);
         }
     }, [modal])
+
     return <>
         <Grid  
             item xs={xs} 
-            sx={{borderRight: '1px solid black'}} 
-            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
+            sx={{position: 'relative', height: '35px'}} 
+            onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
+        >
             {children}
         {isThisCell ?  
         <Grid  
-            sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}} 
+            sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}  
             >
             <span>
                 Задача
             </span>
         </Grid> : null}
+        <div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
+
+        </div>
         </Grid>
     </>
 };

planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js

-import { Grid, TextField, Typography } from "@mui/material";
-import React, { memo, useState, useEffect} from "react";
+import { Grid} from "@mui/material";
+import React, { memo} from "react";
 
-const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
-  const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
-  const getTaskInDayCell = (tasks, day, hours) => {
-    const hour = parseInt(hours.split(':')[0])
-    let hourDiffEnd
-    if (hourFormat) {
-      hourDiffEnd = hour + 1
-    } else {
-      hourDiffEnd = hour + 2
-    }
-    const tasksCell = tasks.filter(task=> {
-    if (year === task.infoForCell.startYear) {
-      if (month + 1 === task.infoForCell.startMonth) {
-        if (day.dayNumber === task.infoForCell.startDay) {
-          if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))  
-          || (task.infoForCell.startHour >= hour  && task.infoForCell.endHour < hourDiffEnd)
-          || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
-              return task
-          }
-        }
-      }      
-    }
-    })
-    return tasksCell
-  }
-  const tasksCell = getTaskInDayCell(tasks, day, hours)
 
-  useEffect(()=>{
-    if (!currentTask.title) {
-      setThisCellCurrentTask({})
-    }
-  }, [currentTask])
 
+const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
+
+
+  const onClickTaskHandler = (e, task) => {
+    e.stopPropagation(); 
+    setCurrentTask(task); 
+    handleOpen(e)
+  }
 
   return (<> 
-      {tasksCell.length ? tasksCell.map((task, i)=>
-      {
-      return (
     <Grid  
-        key={task.id} 
-        sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px',  borderBottom: '1px solid rgb(29, 161, 51);;'}} 
-        onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
+          sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}} 
+          onClick={(e)=>{onClickTaskHandler(e, task)}}
       >
+      <span>
         {task.title}
+      </span>
     </Grid>
-      )}
-      ) 
-      : null}
   </>)
 };
 

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

 import { FormControlLabel, Switch} from "@mui/material";
-import { memo, useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import CalendarRow from "./CalendarRow/CalendarRow";
 import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
-import CalendarTask from "./CalendarTask/CalendarTask";
 import ModalTask from "../UI/ModalTask/ModalTask";
 import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
+import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
 
@@ -25,11 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
     setModal({...modal, open: false})
     setCurrentTask({})
   };
-
-
+  const divRef = useRef(null)
+  const [divHeight, setDivHeight] = useState('')
+  useEffect(() => {
+    if (divRef) {
+        setDivHeight(()=>{
+          return divRef.current?.offsetHeight
+        })
+    }
+}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
 
   return (
-    <>
+    <div ref={divRef} style={{marginBottom: '30px'}}>
     <CalendarRow
             >
         <CalendarSmallCell xs={1.2}> 
@@ -41,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         </CalendarSmallCell>
         {hoursInDay?.map((hours, i)=>{
           return (
-            <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
+            <CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
               {hours}
             </CalendarStandartCell>
             ) 
@@ -54,32 +61,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
           >
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
             <CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
-            {hoursInDay.map((hours, i)=>{
-              return (
-                <CalendarStandartCell 
-                  key={i} 
-                  item xs={cellSizes.standarCell}
+            <CalendarRowDay
+              xs={cellSizes.dayCell}
               createTaskInCellHandler={createTaskInCellHandler}
-                  hours={hours}
-                  dayNumber={day.dayNumber}
+              hoursInDay={hoursInDay}
               currentTask={currentTask}
               handleOpen={handleOpen}
               modal={modal.open}
-                  >
-                    <CalendarTask
               setCurrentTask={setCurrentTask}
               year={year}
               month={month} 
               tasks={tasks}
               day={day}
-                      hours={hours}
               hourFormat={hourFormat}
-                      handleOpen={handleOpen}
-                      currentTask={currentTask}
             />
-                </CalendarStandartCell>
-                ) 
-              })}
         </CalendarRow>
       )
     })}
@@ -96,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
         deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
       />
     </ModalTask>
-    </>
+    </div>
   );
 }
 

planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js

@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
 import Toolbar from '@mui/material/Toolbar';
 import Typography from '@mui/material/Typography';
 import Button from '@mui/material/Button';
-
+import MultipleSelect from '../../components/UI/MultipleSelect/MultipleSelect';
 
 export default function MyTaskToolBar(props) {
   
@@ -15,6 +15,12 @@ export default function MyTaskToolBar(props) {
          <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
             Мои задачи
           </Typography>
+          <MultipleSelect
+          projects={props.projects}
+          onClose={props.onClose}
+          projectName={props.projectName}
+          setProjectName={props.setProjectName}
+          />
           <Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
         </Toolbar>
       </AppBar>

planner-front/src/components/MyTasksCompoments/NewTaskForm.js

+import * as React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  Paper,
+  IconButton,
+  Tooltip,
+  Input,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
+import moment from "moment";
+import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
+import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
+import BasicSelect from "../../components/UI/Select/Select";
+import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
+
+
+export default function NewTaskForm (props) {
+
+   
+    //   const onToggleEditModeDone = (id) => {
+    //     const newTasks = recievedTasks.map((task) => {
+    //       if (task.id === id) {
+    //         return {
+    //           ...task,
+    //           isEditMode: false,
+    //           readOnly: true,
+    //         };
+    //       }
+    //       return task;
+    //     });
+    //     setRecievedTasks(newTasks);
+    //   };
+   
+    
+    const task={
+      id:0,
+      title: "",
+      description: "",
+      createdAt: "",
+      dateTimeStart: null,
+      dateTimeDue: null,
+      accomplish: "",
+      priority: "",
+      author: {
+         name: "",
+         },
+      executors: [
+        { name: "" }
+      ],
+      isEditMode:false,
+      readOnly: true
+    };
+
+    const onToggleEditMode = (id) => {
+        console.log(task)
+            return {
+              ...task,
+              isEditMode: true,
+              readOnly: false,
+              
+            };
+        
+          
+      };
+      console.log(task)
+
+    return (
+        <TableRow hover key={task.id}>
+        <TableCell
+          component="th"
+          scope="row"
+          padding="none"
+        ></TableCell>
+        <CustomTableCell
+          {...{
+            task,
+            name: "priority",
+            value: task.priority,
+            onChange:props.onChange,
+          }}
+        />
+        <CustomTableCell
+          {...{
+            task,
+            name: "createdAt",
+            value: task.createdAt,
+          }}
+        />
+
+        <CustomTableCell
+          {...{
+            task,
+            name: "title",
+            value: task.title,
+            onChange:props.onChange,
+            onModalOpen:props.onModalOpen,
+          }}
+        />
+       
+         {task.isEditMode ? (
+          <BasicSelect
+            items={["project1", "project2", "project3"]}
+            task={task}
+            onChange={props.onChange}
+          />
+        ) : (
+          <CustomTableCell
+          {...{
+            task,
+            name: "project",
+            value: task.project?.title,
+            onChange: props.onChange,
+          }}
+        />
+        )}
+        <CustomTableCell
+          {...{
+            task,
+            name: "author",
+            value: task.author.displayName,
+            onChange: props.onAuthorChange,
+          }}
+        />
+
+        <TableCell>
+          <MaterialUIPickers
+            task={task}
+            name="dateTimeStart"
+            onChange={props.onDateChange}
+          />
+        </TableCell>
+
+        <TableCell>
+          <MaterialUIPickers
+            task={task}
+            name="dateTimeDue"
+            onChange={props.onDateChange}
+          />
+        </TableCell>
+
+        {task.isEditMode ? (
+          <BasicSelect
+            items={["opened", "done", "failed"]}
+            task={task}
+            onChange={props.onChange}
+          />
+        ) : (
+          <CustomTableCell
+            {...{
+              task,
+              name: "accomplish",
+              value: task.accomplish,
+            }}
+          />
+        )}
+
+        <TableCell>
+          {task.isEditMode ? (
+            <IconButton
+              aria-label="done"
+              onClick={() => {props.onToggleEditModeDone(task.id); props.HandleEditTask(task) }}
+            >
+              <Done />
+            </IconButton>
+          ) : (
+            <IconButton
+              aria-label="edit"
+              onClick={() => onToggleEditMode(task.id)}
+            >
+              <Edit />
+            </IconButton>
+          )}
+        </TableCell>
+        <TableCell>
+          <Tooltip title="Delete">
+            <IconButton
+              onClick={(id) => {
+                props.deleteHandle(task.id);
+              }}
+            >
+              <DeleteIcon />
+            </IconButton>
+          </Tooltip>
+        </TableCell>
+      </TableRow>
+    );
+  
+}

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

+import * as React from 'react';
+import { useTheme } from '@mui/material/styles';
+import OutlinedInput from '@mui/material/OutlinedInput';
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 200,
+      color:'#1976d2',
+      borderColor:'white'
+    },
+  },
+};
+
+function getStyles(name, personName, theme) {
+  return {
+    fontWeight:
+      personName.indexOf(name) === -1
+        ? theme.typography.fontWeightRegular
+        : theme.typography.fontWeightMedium,
+  };
+}
+
+export default function MultipleSelect(props) {
+
+  const theme = useTheme();
+ 
+
+  const handleChange = (event) => {
+    const {
+      target: { value },
+    } = event;
+    props.setProjectName(
+      // On autofill we get a stringified value.
+      typeof value === 'string' ? value.split(',') : value,
+    );
+  };
+
+  return (
+    <div>
+      <FormControl sx={{ m: 1, width: 250,borderColor:'white' }}>
+        <InputLabel id="demo-multiple-name-label" sx={{color:'white' }}>Project</InputLabel>
+        <Select
+          labelId="demo-multiple-name-label"
+          id="demo-multiple-name"
+          multiple
+          value={props.projectName}
+          onChange={handleChange}
+          input={<OutlinedInput label="Name" />}
+          MenuProps={MenuProps}
+          sx={{color:'white' }}
+          onClose={(e)=>{props.onClose(props.projectName)}}
+        >
+          {props.projects.map((project) => (
+            <MenuItem
+              key={project}
+              value={project}
+              style={getStyles(project, props.projectName, theme)}
+            >
+              {project}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+    </div>
+  );
+}
\ No newline at end of file

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}) {
   
   return ( 
   <>
     <FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
-        <InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
+        <InputLabel id={`${id}-select-label`}>{label}</InputLabel>
         <Select
-          labelId={id + '-select'+ '-label'}
-          id={id + '-select'}
+          labelId={`${id}-select-label`}
+          id={`${id}-select`}
           value={value}
           onChange={onChange}
           label={label}

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

@@ -13,7 +13,6 @@ function MonthCalendar() {
   const [worker, setWorker] = useState('');
   const [calendarType, setCalendarType] = useState('Месяц');
   const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
-
   const [cellSizes, setCellSizes] = useState({})
 
   useEffect(()=>{
@@ -31,7 +30,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     } else {
@@ -39,7 +38,7 @@ function MonthCalendar() {
       const cells = arr.length
       const xs = 10.8/cells
       setCellSizes(()=>{
-        return {smallCell: 0.6, standarCell: xs}
+        return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
       })
       return arr
     }
@@ -122,12 +121,13 @@ function MonthCalendar() {
 
   const sendNewTaskHandler = async () => {
     if (currentTask.id) {
+      delete currentTask.infoForCell
+      console.log(currentTask)
       setCurrentTask(() => {
         return{
         ...currentTask,
       }}
       )
-      delete currentTask.infoForCell
       await dispatch(editTask(currentTask))
     } else {
       setCurrentTask(() => {
@@ -135,7 +135,6 @@ function MonthCalendar() {
         ...currentTask,
       }}
       )
-      console.log(currentTask)
       delete currentTask.infoForCell
       await dispatch(addTask(currentTask))
     }

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

@@ -24,6 +24,8 @@ import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell"
 import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
 import BasicSelect from "../../components/UI/Select/Select";
 import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
+import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
+
 
 function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
@@ -58,11 +60,16 @@ export default function EnhancedTable() {
 
   useEffect(() => {
     dispatch(fetchAllTasks());
-  }, []);
+  }, [dispatch]);
 
   const tasks = useSelector((state) => state.tasks.tasks);
 console.log(tasks)
   const [recievedTasks, setRecievedTasks] = useState([]);
+  const projects=[
+    "project1",
+    "project2",
+    "project3"
+  ]
 
   const [order, setOrder] = React.useState("asc");
   const [orderBy, setOrderBy] = React.useState("id");
@@ -143,6 +150,7 @@ console.log(tasks)
   };
 
   const onToggleEditMode = (id) => {
+    console.log(id)
     const newTasks = recievedTasks.map((task) => {
       if (task.id === id) {
         return {
@@ -156,7 +164,21 @@ console.log(tasks)
     setRecievedTasks(newTasks);
   };
 
-  const HandleEditTask=(task)=>{
+  const onToggleEditModeDone = (id) => {
+    const newTasks = recievedTasks.map((task) => {
+      if (task.id === id) {
+        return {
+          ...task,
+          isEditMode: false,
+          readOnly: true,
+        };
+      }
+      return task;
+    });
+    setRecievedTasks(newTasks);
+  };
+
+  const HandleEditTask= (task)=>{
      dispatch(editTask(task))
   }
 
@@ -195,6 +217,30 @@ console.log(tasks)
   const handleClose = () => {
     setModal({ ...modal, open: false, id: null });
   };
+  // ++++++++фильтрация по проектам+++++++++++++++
+
+  const [projectName, setProjectName] = React.useState([]);
+  const [filter, setFilter] = React.useState(false);
+  const onClose=(projectName)=>{
+    console.log(projectName)
+    setFilter(true)
+  }
+  useEffect(() => {
+    if (tasks && tasks?.length > 0) {
+      let currentTasks = [];
+      let i
+      for (i=0; i<projectName?.lenght; i++)
+      {currentTasks = tasks?.map((task) => {
+        if (task.project=projectName)
+        return {
+          ...task,
+            };
+      })};
+      setRecievedTasks(currentTasks);
+    }
+  }, [filter==true]);
+
+ // ++++++++фильтрация по проектам+++++++++++++++
  
   if (
     tasks &&
@@ -209,6 +255,10 @@ console.log(tasks)
             onClick={() => {
               addTask();
             }}
+            projects={projects}
+            onClose={onClose}
+           projectName={projectName}
+            setProjectName={setProjectName}
           />
 
           <TableContainer>
@@ -220,7 +270,7 @@ console.log(tasks)
                 rowCount={tasks.length}
               />
               <TableBody>
-                <TableRow sx={{height:'1px',margin:0,padding:0}}>
+                {/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
                   <TableCell align="left">
                     <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
                   </TableCell>
@@ -228,12 +278,24 @@ console.log(tasks)
                   <TableCell align="left">
                     <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
                   </TableCell>
-                </TableRow>
+                </TableRow> */}
+
+                 {/* <NewTaskForm
+                 onChange={onChange}
+                 onModalOpen={onModalOpen}
+                 onAuthorChange={onAuthorChange}
+                 onDateChange={onDateChange}
+                 onToggleEditMode={onToggleEditMode}
+                 onToggleEditModeDone={onToggleEditModeDone}
+                 HandleEditTask={HandleEditTask}
+                 deleteHandle={deleteHandle}
+                 /> */}
 
                 {stableSort(recievedTasks, getComparator(order, orderBy))
                   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                   .map((task, index) => {
                     return (
+
                       <TableRow hover key={task.id}>
                         <TableCell
                           component="th"
@@ -265,6 +327,23 @@ console.log(tasks)
                             onModalOpen,
                           }}
                         />
+                       
+                         {task.isEditMode ? (
+                          <BasicSelect
+                            items={["project1", "project2", "project3"]}
+                            task={task}
+                            onChange={onChange}
+                          />
+                        ) : (
+                          <CustomTableCell
+                          {...{
+                            task,
+                            name: "project",
+                            value: task.project?.title,
+                            onChange: onChange,
+                          }}
+                        />
+                        )}
                         <CustomTableCell
                           {...{
                             task,
@@ -310,7 +389,7 @@ console.log(tasks)
                           {task.isEditMode ? (
                             <IconButton
                               aria-label="done"
-                              onClick={() => {onToggleEditMode(task.id); HandleEditTask(task) }}
+                              onClick={() => {onToggleEditModeDone(task.id); HandleEditTask(task) }}
                             >
                               <Done />
                             </IconButton>

planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js

@@ -33,6 +33,12 @@ const headCells = [
     disablePadding: false,
     label: 'Заголовок',
   },
+  {
+    id: 'project',
+    numeric: true,
+    disablePadding: false,
+    label: 'Проект',
+  },
   {
     id: 'authorDisplayName',
     numeric: true,

planner-front/src/index.js

@@ -6,7 +6,7 @@ import { configureStore } from '@reduxjs/toolkit';
 import { Provider } from 'react-redux';
 import usersReducer from './store/reducers/usersReducer';
 import tasksReducer from './store/reducers/tasksReducer';
-import axios from 'axios';
+import axios from './axiosPlanner';
 import projectsReducer from './store/reducers/projectsReducer';
 
 const localStorageMiddleware = ({getState}) => (next) => (action) => {
@@ -22,13 +22,6 @@ const loadFromLocalStorage = () => {
   return undefined;
 };
 
-axios.interceptors.request.use(config=>{
-  try{
-      config.headers['Authorization']=store.getState().users.user.token;
-  } catch(e){
-  }
-  return config;
-})
 
 const store = configureStore({
   reducer: {
@@ -40,6 +33,14 @@ const store = configureStore({
   middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(localStorageMiddleware)
 })
 
+axios.interceptors.request.use(config=>{
+  try{
+      config.headers['Authorization']=store.getState().users.user.token;
+  } catch(e){
+  }
+  return config;
+})
+
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <Provider store={store}>

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

@@ -15,3 +15,5 @@ export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
 export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
 export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
 export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
+
+export const EDIT_CALENDAR_TASK = "EDIT_CALENDAR_TASK";
\ No newline at end of file

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

@@ -11,7 +11,8 @@ import {
   FETCH_CALENDAR_TASKS_FAILURE, 
   FETCH_CALENDAR_TASKS_REQUEST, 
   FETCH_CALENDAR_TASKS_SUCCESS,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  } from "../actionTypes/tasksTypes";
 import axios from '../../axiosPlanner'
 
 const fetchCalendarTasksRequest = () => {
@@ -68,13 +69,9 @@ const addTaskFailure = (error) => {
 export const addTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(addTaskRequest());
-      const token = getState().users?.user?.token;
+      // const token = getState().users?.user?.token;
       try {
-        await axios.post("/tasks", task, {
-          headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
-          }
-        });
+        await axios.post("/tasks", task);
         dispatch(addTaskSuccess())
         dispatch(fetchCalendarTasks())
       } catch (error) {
@@ -98,14 +95,10 @@ const editTaskFailure = (error) => {
 export const editTask = (task) => {
   return async (dispatch, getState) => {
       dispatch(editTaskRequest());
-      const token = getState().users?.user?.token;
+      // const token = getState().users?.user?.token;
       try {
-        console.log(task)
-        const r=await axios.put("/tasks", task, {
-          headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
-          }
-        });
+        console.log('task' , task)
+        const r=await axios.put("/tasks/", task);
         console.log(r)
         dispatch(editTaskSuccess())
         dispatch(fetchAllTasks())
@@ -131,13 +124,9 @@ const deleteTaskFailure = (error) => {
 export const deleteTask = (taskId) => {
   return async (dispatch, getState) => {
       dispatch(deleteTaskRequest());
-      const token = getState().users?.user?.token;
+      // const token = getState().users?.user?.token;
       try {
-        await axios.delete(`/tasks/${taskId}`, {
-          headers: {
-            'Authorization': 'IwGVRaksGTWtnKlOZd7zJ'
-          }
-        });
+        await axios.delete(`/tasks/${taskId}`);
         dispatch(deleteTaskSuccess())
         dispatch(fetchCalendarTasks())
         dispatch(fetchAllTasks())

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

@@ -18,9 +18,7 @@ export const registerUser = (userData, navigate) => {
     return async (dispatch) => {
         dispatch(registerUserRequest());
         try {
-            console.log("register " + userData)
             const response = await axios.post("/users", userData);
-           console.log(response)
             dispatch(registerUserSuccess())
             navigate("/")
         } catch (error) {
@@ -51,9 +49,7 @@ const logoutUserFailure = (error) => {
 export const loginUser = (userData, navigate) => {
     return async (dispatch) => {
         try {
-            console.log(userData)
             const response = await axios.post("users/sessions", userData);
-            console.log(response)
             dispatch(loginUserSuccess(response.data.user));
             navigate("/")
         } catch (e) {

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

@@ -11,7 +11,9 @@ import {
   DELETE_TASK_SUCCESS,
   DELETE_TASK_REQUEST,
   DELETE_TASK_FAILURE,
-  FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
+  FETCH_ALL_TASKS_SUCCESS,
+  EDIT_CALENDAR_TASK,
+} from "../actionTypes/tasksTypes";
 
 const initialState = {
     calendarTasks: [],
@@ -38,7 +40,8 @@ const tasksReduсer = (state = initialState, action) => {
               const timeEndHour = parseInt(timeEnd.split(':')[0])
               const timeStartMinute = parseInt(timeStart.split(':')[1])
               const timeEndMinute = parseInt(timeEnd.split(':')[1])
-              newArr.push({...task, infoForCell: { 
+              const newObj = {...task, 
+                infoForCell: { 
                 startDay: dayStart, 
                 startHour: timeStartHour, 
                 startMonth: monthStartNumber,
@@ -47,7 +50,8 @@ const tasksReduсer = (state = initialState, action) => {
                 endHour: timeEndHour,
                 endMinute: timeEndMinute,
               }
-              } )
+              }
+              newArr.push(newObj)
               }
             }
           })