#123 fix on deadline create and edit

planner-api/src/routers/tasks.ts

@@ -34,6 +34,7 @@ router.post('/', auth, async(req:Request, res:Response):Promise<Response>=>{
         dateTimeDueFinal = dateTimeDeadLine
         dateTimeStartFinal = subtractHours(dateTimeDueFinal, 1)
     }
+    console.log('datTeimeDeadLine ', dateTimeDeadLine)
 
     const newTask = new Task();
     newTask.title = title;
@@ -312,6 +313,10 @@ router.put('/:taskId',auth,authAuthorOrExecutorOfTask,async(req:Request, res:Res
         dateTimeDue,executor,accomplish,dateTimeDeadLine, dateTimeFactDeadLine,priority} = req.body;
     const task = await taskFinderById(taskId)
     if (!task) return res.status(404).send({Message:'task not found'})
+
+    console.log ('dateTimeDeadLine ', dateTimeDeadLine,'authorStatus '
+    ,authorStatus,'executorStatus ',executorStatus)
+
     let dateTimeTask = null;
     if (dateTimeTaskId) {
         const dateTimeTaskData = await dataSource

planner-front/package-lock.json

@@ -24,6 +24,7 @@
         "moment": "^2.29.4",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
+        "react-datepicker": "^4.8.0",
         "react-dom": "^18.2.0",
         "react-redux": "^8.0.4",
         "react-router-dom": "^6.4.2",
@@ -6217,6 +6218,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "node_modules/clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -6922,6 +6928,18 @@
         "node": ">=10"
       }
     },
+    "node_modules/date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA==",
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
@@ -15237,6 +15255,23 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-datepicker": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
+      "dependencies": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17 || ^18",
+        "react-dom": "^16.9.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -15371,11 +15406,43 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "node_modules/react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-onclickoutside": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
+      "integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
+      "funding": {
+        "type": "individual",
+        "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md"
+      },
+      "peerDependencies": {
+        "react": "^15.5.x || ^16.x || ^17.x || ^18.x",
+        "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x"
+      }
+    },
+    "node_modules/react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "dependencies": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "@popperjs/core": "^2.0.0",
+        "react": "^16.8.0 || ^17 || ^18",
+        "react-dom": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-redux": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz",
@@ -17569,6 +17636,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
@@ -22790,6 +22865,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
+      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
+    },
     "clean-css": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.1.tgz",
@@ -23298,6 +23378,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "date-fns": {
+      "version": "2.29.3",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.29.3.tgz",
+      "integrity": "sha512-dDCnyH2WnnKusqvZZ6+jA1O51Ibt8ZMRNkDZdyAyK4YfbDwa/cEmuztzG5pk6hqlp9aSBPYcjOlktquahGwGeA=="
+    },
     "dayjs": {
       "version": "1.11.6",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.6.tgz",
@@ -29181,6 +29266,19 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-datepicker": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.8.0.tgz",
+      "integrity": "sha512-u69zXGHMpxAa4LeYR83vucQoUCJQ6m/WBsSxmUMu/M8ahTSVMMyiyQzauHgZA2NUr9y0FUgOAix71hGYUb6tvg==",
+      "requires": {
+        "@popperjs/core": "^2.9.2",
+        "classnames": "^2.2.6",
+        "date-fns": "^2.24.0",
+        "prop-types": "^15.7.2",
+        "react-onclickoutside": "^6.12.0",
+        "react-popper": "^2.2.5"
+      }
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -29281,11 +29379,31 @@
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz",
       "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg=="
     },
+    "react-fast-compare": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
+      "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-onclickoutside": {
+      "version": "6.12.2",
+      "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.12.2.tgz",
+      "integrity": "sha512-NMXGa223OnsrGVp5dJHkuKxQ4czdLmXSp5jSV9OqiCky9LOpPATn3vLldc+q5fK3gKbEHvr7J1u0yhBh/xYkpA==",
+      "requires": {}
+    },
+    "react-popper": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz",
+      "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==",
+      "requires": {
+        "react-fast-compare": "^3.0.1",
+        "warning": "^4.0.2"
+      }
+    },
     "react-redux": {
       "version": "8.0.4",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.4.tgz",
@@ -30889,6 +31007,14 @@
         "makeerror": "1.0.12"
       }
     },
+    "warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "requires": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",

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

+import React, {useState} from 'react';
+import DatePicker from "react-datepicker";
+
+
+
+const DateTimePicker =({task,name,onChange}) => {
+    const [startDate, setStartDate] = useState(new Date());
+    return (
+        <>
+      <DatePicker
+        selected={startDate}
+        onChange={(date) => setStartDate(date)}
+        // locale="ru"
+        showTimeSelect
+        timeFormat="p"
+        timeIntervals={60}
+        dateFormat="Pp"
+      />
+      </>
+    );
+  };
+
+  export default DateTimePicker;

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

@@ -25,9 +25,9 @@ const CustomTableCell = ({
     flexDirection: "column",
     fontSize: "12px",
   };
-  if (name==='dateTimeDeadLine'){
-    console.log('dateTimeDeadLine ', name, ' ', value)
-  }
+  // if (name==='dateTimeDeadLine'){
+  //   console.log('dateTimeDeadLine ', name, ' ', value)
+  // }
 
   const divTwoStyle = {
     display: "flex",

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

-import * as React from "react";
+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(props) {
+
+
+
+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();
+  console.log('datepicker inside task', task, 'state ', state)
+
   return (
     <LocalizationProvider
       dateAdapter={AdapterMoment}
       sx={{ width: "100%", fontSize: 5, fontWeight: "200" }}
+      adapterLocale={'ru-RU'}
     >
       <DateTimePicker
-        inputFormat="DD-MM-YY kk:mm A"
-        disabled={props.task.readOnly}
-        renderInput={(params) => (
+      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"
+        disabled={task.readOnly}
+        renderInput={(params) =>{  return (
           <TextField
             {...params}
             sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
-            name={props.name}
+            name={name}
           />
-        )}
-        value={props.task[props.name]}
+        )}}
+        value={state}
         onChange={(newValue) => {
-          props.onChange(props.task.id, newValue, props.name);
+          setState(newValue)
+          console.log('newValue ', newValue)
+          onChange(task.id, newValue, name);
         }}
       />
     </LocalizationProvider>

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

@@ -20,8 +20,11 @@ import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
 import BasicSelect from "../UI/Select/Select";
 import { addTask } from "../../store/actions/tasksActions";
 import TaskModal from "./TaskModal/TaskModal";
+import {dateToISOLikeButLocal} from '../../helpers/CalendarHelpers';
+import DateTimePicker from "../Calendars/UI/DateTimePicker/DateTimePicker";
 
 export default function NewTaskForm({ projects, setAddTaskForm }) {
+  console.log('new task form')
   const dispatch = useDispatch();
   const user = useSelector((state) => state.users.user);
   const currentDateTime = new Date();
@@ -71,15 +74,17 @@ export default function NewTaskForm({ projects, setAddTaskForm }) {
   };
 
   const onDateChange = (id, value, property) => {
-    console.log('value ', value, 'property ', property)
+    const utcAvoidoffset = moment(value).utcOffset(0, true).format()
     const newTask = {
       ...task,
-      [property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
+      [property]:     utcAvoidoffset,
+      // [property]:     moment.parseZone(value, "DD/MM/YYYY", true).format(),
     };
     setTask(newTask); 
   };
 
   const handleAddTask = () => {
+    console.log('handle task new form ', task)
     dispatch(addTask(task));
     setAddTaskForm();
   };
@@ -161,6 +166,7 @@ export default function NewTaskForm({ projects, setAddTaskForm }) {
                   name="dateTimeDeadLine"
                   onChange={onDateChange}
                 />
+                {/* <DateTimePicker/> */}
               </TableCell>
 
               <TableCell style={{ width: "5%" }}>
@@ -213,7 +219,7 @@ export const header = [
   },
 
   {
-    id: "dateTimeDue",
+    id: "dateTimeDeadLine",
     numeric: true,
     disablePadding: false,
     label: "Дедлайн",

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

@@ -161,13 +161,6 @@ const TableRowTask= ({
                         />
                         {task.isEditMode && task.author.id===user.id  ? (
                           <TableCell>
-                            {/* <MaterialUIPickers
-                            task={task}
-                            name="dateTimeStart"
-                            onChange={onDateChange}
-                            user={user}
-                            /> */}
-                            {/* <TableCell> */}
                               <Tooltip title="Перейти в календарь">
                                 <IconButton
                                   onClick={() => { calendarOpen(task.id)}}
@@ -207,15 +200,13 @@ const TableRowTask= ({
                                user:user
                             }}>
                           </CustomTableCell>
-                        
-                          
                         )}
 
                         {task.isEditMode && task.author.id===user.id  ? (
                           <TableCell>
                             <MaterialUIPickers
                             task={task}
-                            name="dateTimeDue"
+                            name="dateTimeDeadLine"
                             onChange={onDateChange}
                             user={user}
                           />

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

@@ -6,11 +6,11 @@ import FormControl from "@mui/material/FormControl";
 import Select from "@mui/material/Select";
 
 export default function BasicSelect({value,label,name,onChange,task,items}) {
-  console.log('select value ', value)
-  console.log('select label ', label)
-  console.log('select name ', name)
-  console.log('select task ', task)
-  console.log('select items ', items)
+  // console.log('select value ', value)
+  // console.log('select label ', label)
+  // console.log('select name ', name)
+  // console.log('select task ', task)
+  // console.log('select items ', items)
   return (
     <Box sx={{ minWidth: 60, m: 0}}>
       <FormControl fullWidth>
@@ -20,6 +20,7 @@ export default function BasicSelect({value,label,name,onChange,task,items}) {
           id="demo-simple-select"
           value={value}
           defaultValue=''
+          // displayEmpty={true}
           label={label}
           name={name}
           onChange={(e) => onChange(e, task)}

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

@@ -93,11 +93,17 @@ export default function EnhancedTable() {
   };
 
   const onDateChange = (id, value, property) => {
+    const utcAvoidoffset = moment(value).utcOffset(0, true).format()
+    if(property==='dateTimeDeadLine') {
+      console.log('In edit mode datedLine ad onDate ', value)
+    }
+
     const newTasks = recievedTasks.map((task) => {
       if (task.id === id) {
         return {
           ...task,
-          [property]: moment.parseZone(value, "DD/MM/YY", true).format(),
+          [property]: utcAvoidoffset,
+          // [property]: moment.parseZone(value, "DD/MM/YY", true).format(),
         };
       }
       return task;