Merge branch 'task-80-my-task-new-task' into 'development'

Task 80 my task new task

See merge request !58

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

@@ -3,19 +3,29 @@ import TableCell from "@mui/material/TableCell";
 import Input from "@mui/material/Input";
 import moment from "moment";
 
-const CustomTableCell = ({task,
+const CustomTableCell = ({
+  task,
   name,
   value,
   value2,
-  value3,
   onChange,
   onModalOpen,
   placeholder,
-  user
- }) => {
-  const styles = { width: "auto", height: "10px"};
-  const divStyle={display:"flex",justifyContent:"space-between", flexDirection:"column",fontSize:"12px"}
-  const duration = moment.duration(moment(task.dateTimeTasks[0]?.dateTimeDue).diff(moment(task.dateTimeTasks[0]?.dateTimeStart)));
+  user,
+}) => {
+  const styles =  placeholder ?  { width: "100%" } : { width: "auto" };
+  const divStyle = {
+    display: "flex",
+    justifyContent: "space-between",
+    flexDirection: "column",
+    fontSize: "12px", 
+  };
+
+  const duration = moment.duration(
+    moment(task?.dateTimeTasks[0]?.dateTimeDue).diff(
+      moment(task?.dateTimeTasks[0]?.dateTimeStart)
+    )
+  );
   const hours = Math.round(duration.asHours());
 
   if (task) {
@@ -24,9 +34,13 @@ const CustomTableCell = ({task,
         <TableCell
           onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
           align="left"
-          style={styles}
+          // style={styles}
         >
-          {task.isEditMode && onChange && name!=="author" && task.author.id===user.id ? (
+          {(task.isEditMode &&
+            onChange &&
+            name !== "author" &&
+            task.author?.id === user?.id) ||
+          placeholder ? (
             <Input
               placeholder={placeholder}
               value={value}
@@ -34,16 +48,15 @@ const CustomTableCell = ({task,
               onChange={(e) => onChange(e, task)}
               style={styles}
             />
-          ) : name!=="dateTimeStart" ? (
+          ) : name !== "dateTimeStart" ? (
             <span>{value}</span>
-          ):(
+          ) : (
             <div style={divStyle}>
               <span>{value}</span>
               <span>{value2}</span>
-              <span>часы:+{hours}</span>
+              <span>часы:{hours}</span>
             </div>
-          )
-          }
+          )}
         </TableCell>
       </>
     );

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

@@ -9,10 +9,10 @@ export default function MaterialUIPickers(props) {
   return (
     <LocalizationProvider
       dateAdapter={AdapterMoment}
-      sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
+      sx={{ width: "100%", fontSize: 5, fontWeight: "200" }}
     >
       <DateTimePicker
-        inputFormat="DD-MM-YYYY hh:mm A"
+        inputFormat="DD-MM-YY kk:mm A"
         disabled={props.task.readOnly}
         renderInput={(params) => (
           <TextField

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

@@ -19,29 +19,45 @@ import CustomTableCell from "./CustomTableCell";
 import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
 import BasicSelect from "../UI/Select/Select";
 import { addTask } from "../../store/actions/tasksActions";
+import TaskModal from "./TaskModal/TaskModal";
 
-export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
-  
+export default function NewTaskForm({
+  projects,
+  setAddTaskForm,
+}) {
   const dispatch = useDispatch();
   const user = useSelector((state) => state.users.user);
   const currentDateTime = new Date();
   const dateTime = moment(currentDateTime).utc().format();
-
   const [task, setTask] = useState({
     id: 0,
     title: "",
     description: "",
     createdAt: dateTime,
     dateTimeStart: null,
+    dateTimeDeadLine: null,
+    dateTimeTasks: [],
     dateTimeDue: null,
     project: projects[0],
     accomplish: "opened",
     priority: "B",
+    author: { id: user.id },
     authorDisplayName: user.displayName,
     executors: [],
     isEditMode: true,
   });
 
+  const [modal, setModal] = useState(false);
+
+  const onModalOpen = (event, task) => {
+    event.stopPropagation();
+    setModal(true);
+  };
+
+  const handleClose = () => {
+    setModal(false);
+  };
+
   const onChange = (e, task) => {
     const value = e.target.value;
     const name = e.target.name;
@@ -78,8 +94,6 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
       <TableContainer
         style={{
           backgroundColor: "#E8E8E8",
-          display: "flex",
-          alignItems: "center",
           marginBottom: "2em",
         }}
       >
@@ -122,23 +136,14 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
                   value: moment(task.createdAt).format("DD-MM-YYYY hh:mm A"),
                 }}
               />
-
               <CustomTableCell
                 {...{
                   task,
                   name: "title",
                   value: task.title,
-                  onChange: onChange,
-                  placeholder: "Введите название задачи",
-                }}
-              />
-              <CustomTableCell
-                {...{
-                  task,
-                  name: "description",
-                  value: task.description,
-                  onChange: onChange,
-                  placeholder: "Введите описание задачи",
+                  onModalOpen,
+                  user: user,
+                  placeholder: "Кликните для ввода информации по задаче"
                 }}
               />
               
@@ -155,44 +160,22 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
                 />
               </TableCell>
 
-              <CustomTableCell
-                {...{
-                  task,
-                  name: "author",
-                  value: user.displayName,
-                }}
-              />
-
-              <TableCell>
+              {/* <TableCell>
                 <MaterialUIPickers
                   task={task}
                   name="dateTimeStart"
                   onChange={onDateChange}
                 />
-              </TableCell>
+              </TableCell> */}
 
               <TableCell>
                 <MaterialUIPickers
                   task={task}
-                  name="dateTimeDue"
+                  name="dateTimeDeadLine"
                   onChange={onDateChange}
                 />
               </TableCell>
 
-              <TableCell>
-                <BasicSelect
-                  items={[
-                    { value: "opened", title: "opened" },
-                    { value: "done", title: "done" },
-                    { value: "failed", title: "failed" },
-                  ]}
-                  task={task}
-                  onChange={onChange}
-                  name="accomplish"
-                  value={task.accomplish}
-                />
-              </TableCell>
-
               <TableCell>
                 <Tooltip title="Добавить">
                   <IconButton size="large" onClick={handleAddTask}>
@@ -201,8 +184,16 @@ export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
                 </Tooltip>
               </TableCell>
             </TableRow>
+
           </TableBody>
         </Table>
+        <TaskModal
+              task={task}
+              open={modal}
+              handleClose={handleClose}
+              onChange={onChange}
+              user={user}
+            />
       </TableContainer>
       <Divider />
     </>
@@ -234,43 +225,20 @@ export const header = [
     disablePadding: false,
     label: "Заголовок",
   },
-  {
-    id: "description",
-    numeric: false,
-    disablePadding: false,
-    label: "Описание",
-  },
-
   {
     id: "projectName",
     numeric: true,
     disablePadding: false,
     label: "Проект",
   },
-  {
-    id: "authorDisplayName",
-    numeric: false,
-    disablePadding: false,
-    label: "Автор",
-  },
-  {
-    id: "dateTimeStart",
-    numeric: true,
-    disablePadding: false,
-    label: "Дата начала",
-  },
+
   {
     id: "dateTimeDue",
     numeric: true,
     disablePadding: false,
-    label: "Дата завершения",
-  },
-  {
-    id: "accomplish",
-    numeric: false,
-    disablePadding: false,
-    label: "Статус",
+    label: "Дедлайн",
   },
+
   {
     id: "add",
     numeric: false,

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

@@ -16,6 +16,7 @@ const TaskModal = ({handleClose,open,task,onChange,user }) => {
       open={open}
     >
       {task?.isEditMode && task.author.id===user.id ? (
+        
         <div className="modal">
           <Input
            label="название"

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

@@ -110,7 +110,7 @@ useEffect(() => {
       if (task.id === id) {
         return {
           ...task,
-          [property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
+          [property]: moment.parseZone(value, "DD/MM/YY", true).format(),
         };
       }
       return task;
@@ -223,6 +223,7 @@ useEffect(() => {
   }, []);
 
 console.log(tasks)
+
   if (
     tasks &&
     tasks?.length > 0 &&
@@ -243,8 +244,7 @@ console.log(tasks)
 
          {addTaskForm ? (
             <NewTaskForm
-              tasks={recievedTasks}
-              projects={rawProjects}
+              projects={uniqueProjects}
               setAddTaskForm={()=>setAddTaskForm(false)}
              />
           ) : null}
@@ -304,7 +304,7 @@ console.log(tasks)
                             name: "createdAt",
                             value: moment(task.createdAt)
                               .utc()
-                              .format("DD-MM-YYYY hh:mm A"),
+                              .format("DD-MM-YY"),
                               user:user
                           }}
                         />
@@ -379,13 +379,13 @@ console.log(tasks)
                               name: "dateTimeStart",
                               value: moment(task.dateTimeTasks[0]?.dateTimeStart) 
                               .utc()
-                              .format("DD-MM-YYYY "),
+                              .format("DD-MM-YY "),
                               value2:moment(task.dateTimeTasks[0]?.dateTimeStart)
                               .utc()
-                              .format("hh:mm A")+"-"+
+                              .format("kk:mm")+"-"+
                               moment(task.dateTimeTasks[0]?.dateTimeDue)
                               .utc()
-                              .format("hh:mm A"),
+                              .format("kk:mm"),
                                user:user
                             }}>
                           </CustomTableCell>
@@ -419,7 +419,7 @@ console.log(tasks)
                               value: moment(task.dateTimeDeadLine
                                 )
                               .utc()
-                              .format("DD-MM-YYYY hh:mm A"),
+                              .format("DD-MM-YY kk:mm"),
                               user:user
                             }}
                           />