Merge branch 'task-40-add-project-my-task' into 'development'

Task 40 add project my task

See merge request !26

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/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 ( 

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

@@ -25,6 +25,7 @@ import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker
 import BasicSelect from "../../components/UI/Select/Select";
 import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
 
+
 function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
@@ -63,6 +64,11 @@ export default function EnhancedTable() {
   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");
@@ -195,6 +201,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 +239,10 @@ console.log(tasks)
             onClick={() => {
               addTask();
             }}
+            projects={projects}
+            onClose={onClose}
+           projectName={projectName}
+            setProjectName={setProjectName}
           />
 
           <TableContainer>
@@ -220,7 +254,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,7 +262,7 @@ console.log(tasks)
                   <TableCell align="left">
                     <Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
                   </TableCell>
-                </TableRow>
+                </TableRow> */}
 
                 {stableSort(recievedTasks, getComparator(order, orderBy))
                   .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
@@ -265,6 +299,23 @@ console.log(tasks)
                             onModalOpen,
                           }}
                         />
+                       
+                         {task.isEditMode ? (
+                          <BasicSelect
+                            items={["project1", "project2", "project3"]}
+                            task={task}
+                            onChange={onChange}
+                          />
+                        ) : (
+                          <CustomTableCell
+                          {...{
+                            task,
+                            name: "project",
+                            value: task.project,
+                            onChange: onChange,
+                          }}
+                        />
+                        )}
                         <CustomTableCell
                           {...{
                             task,

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,