настроила Датапикеры на редактируемый и нередактируемый режим, доработала…

настроила Датапикеры на редактируемый и нередактируемый режим, доработала функции второго датапикера

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

@@ -11,12 +11,14 @@ export default function MaterialUIPickers(props) {
  
 console.log(props)
  
-if (props.task.dateTimeStart!==undefined)
   return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <LocalizationProvider dateAdapter={AdapterMoment}  sx={{ width: "auto", fontSize:"9px",fontWeight: "200" }}>
     <DateTimePicker
+      readOnly={props.readOnly}
       renderInput={(params) => (
-        <TextField {...params} name="dateCreated" />
+        <TextField {...params}
+        sx={{ width: "auto",fontWeight: "200",fontSize: '9 px' }}
+        name="dateCreated" />
       )}
       value={
         props.newStartedDate && props.newStartedDate.id === props.task.id? props.newStartedDate.date
@@ -32,25 +34,4 @@ if (props.task.dateTimeStart!==undefined)
   </LocalizationProvider>
   );
 
-else if(props.task.dateTimeDue!==undefined) {
-  return (
-    <LocalizationProvider dateAdapter={AdapterMoment}>
-    <DateTimePicker
-      renderInput={(params) => (
-        <TextField {...params} name="dateCreated" />
-      )}
-      value={
-        props.newDueDate && props.newDueDate.id === props.task.id? props.newDueDate.date
-          : props.task.dateTimeDue
-      }
-      onChange={(newValue) => {
-        props.setNewDueDate({
-          id: props.task.id,
-          date: newValue,
-        });
-      }}
-    />
-  </LocalizationProvider>
-  );
-}
 }
\ No newline at end of file

planner-front/src/components/UI/DateTimePicker/DateTimePickerDue.js

+import * as React from 'react';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
+import { useState, useEffect } from "react";
+import dayjs from 'dayjs';
+import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
+
+export default function MaterialUIPickersDue(props) {
+ 
+console.log(props)
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterMoment}>
+    <DateTimePicker
+     readOnly={props.readOnly}
+      renderInput={(params) => (
+        <TextField {...params} name="dateCreated" />
+      )}
+      value={
+        props.newDueDate && props.newDueDate.id === props.task.id? props.newDueDate.date
+          : props.task.dateTimeDue
+      }
+      onChange={(newValue) => {
+        props.setNewDueDate({
+          id: props.task.id,
+          date: newValue,
+        });
+      }}
+    />
+  </LocalizationProvider>
+  );
+
+}
\ No newline at end of file

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

@@ -26,13 +26,13 @@ import moment from "moment";
 import MyTaskToolBar from '../../components/MyTasksCompoments/MyTaskToolBar';
 import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
 import MaterialUIPickers from "../../components/UI/DateTimePicker/DateTimePicker";
+import MaterialUIPickersDue from "../../components/UI/DateTimePicker/DateTimePickerDue";
 
 function descendingComparator(a, b, orderBy) {
   if (b[orderBy] < a[orderBy]) {
     return -1;
   }
   if (b[orderBy] > a[orderBy]) {
-    return 1;
   }
   return 0;
 }
@@ -65,6 +65,7 @@ export default function EnhancedTable() {
    const [rowsPerPage, setRowsPerPage] = React.useState(5);
   const [newStartedDate, setNewStartedDate] = React.useState();
   const [newDueDate, setNewDueDate] = React.useState();
+  const [readOnly, setReadOnly]=React.useState(true);
 
   const handleChange = (id, newDate) => {
     setNewStartedDate({ id: id, date: newDate });
@@ -117,18 +118,18 @@ export default function EnhancedTable() {
       let updatedTasks = [...tasks].filter((t) => t.id !== newStartedDate.id);
       const currentTask = tasks.find((t) => t.id === newStartedDate.id);
       delete currentTask.dateTimeStart;
-      console.log(newStartedDate.date)
+  
       const updatedTask = {
         ...currentTask,
-        dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format()
-       
+        dateTimeStart: moment.parseZone(newStartedDate.date, 'DD/MM/YYYY', true).format(),
             };
-
       updatedTasks.push(updatedTask);
-
       setTasks(updatedTasks);
     }
-    else if (newDueDate){
+  }, [newStartedDate]);
+
+  useEffect(() => {
+    if (newDueDate) {
       let updatedTasks = [...tasks].filter((t) => t.id !== newDueDate.id);
       const currentTask = tasks.find((t) => t.id === newDueDate.id);
       delete currentTask.dateTimeDue;
@@ -136,17 +137,14 @@ export default function EnhancedTable() {
       const updatedTask = {
         ...currentTask,
         dateTimeDue: moment.parseZone(newDueDate.date, 'DD/MM/YYYY', true).format()
-       
       };
-
       updatedTasks.push(updatedTask);
-
       setTasks(updatedTasks);
     }
-  }, [newStartedDate || newDueDate]);
-
+   }, [newDueDate]);
 
   const onToggleEditMode = id => {
+    if (readOnly==true) {setReadOnly(false)} else {setReadOnly(true)}
     setTasks(state => {
       return tasks.map(task => {
         if (task.id === id) {
@@ -268,27 +266,25 @@ export default function EnhancedTable() {
                         <CustomTableCell {...{ task, name: "title", onChange, onModalOpen}}  />
                         <CustomTableCell {...{ task, name: "author", onChange }} />
 
-                        {task.isEditMode ? ( 
-                        <TableCell key={task.id}>
+                      
+                        <TableCell key={task.id} >
                           <MaterialUIPickers
                           newStartedDate={newStartedDate}
                           task={task}
                           setNewStartedDate={setNewStartedDate}
+                          readOnly={readOnly}
                           />
-                       </TableCell>)
-                        : <CustomTableCell {...{ task, name: "dateTimeStart", onChange}} />
-                        }
+                       </TableCell>
                       
-                        {task.isEditMode ? ( 
                           <TableCell key={task.id}>
-                            <MaterialUIPickers
+                            <MaterialUIPickersDue
                             newDueDate={newDueDate}
                             task={task}
                             setNewDueDate={setNewDueDate}
+                            readOnly={readOnly}
                             />
-                        </TableCell>)
-                        : <CustomTableCell {...{ task, name: "dateTimeDue", onChange}} />
-                        }
+                        </TableCell>
+                     
                        
                         <CustomTableCell {...{ task, name: "done", onChange }} />