Merge branch 'task-105-feature/tbl_tasks_users' into 'development'

Task 105 feature/tbl tasks users

See merge request !84

planner-front/src/App.js

@@ -11,6 +11,7 @@ import Projects from "./containers/Projects/Projects";
 import FullProject from "./containers/FullProject/FullProject";
 import NewProject from "./containers/NewProject/NewProject";
 import WeekCalendar from "./containers/WeekCalendar/WeekCalendar";
+import UsersTasks from "./containers/UsersTasks/UsersTasks";
 
 const ProtectedRoute = ({ isAllowed, roles, redirectUrl, children }) => {
   const user = useSelector(state => state.users?.user);
@@ -117,10 +118,11 @@ const App = () => {
 
           <Route path={"/workers-tasks"} element={
             <ProtectedRoute
-              roles={["superuser"]}
+          
+              isAllowed={user}
               redirectUrl={"/"}
             >
-              <h1>workers tasks page</h1>
+              <UsersTasks/>
             </ProtectedRoute>
           } />
 

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

@@ -31,10 +31,10 @@ const TableRowTask= ({
   deleteHandle,
   handleEditTask, 
   deleteDateTimeTask,
-  // handleEditDateTimeTask,
   onChange,
   onModalOpen,
   onProjectChange,
+  onExecutorChange,
   uniqueProjects,
   onAuthorChange,
   onDateChange,
@@ -144,6 +144,10 @@ const TableRowTask= ({
                           />
                         )}
 
+                
+
+
+
                         <CustomTableCell
                           {...{
                             task,

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

+import * as React from "react";
+import TableCell from "@mui/material/TableCell";
+import Input from "@mui/material/Input";
+import moment from "moment";
+
+const CustomTableCell = ({
+  task,
+  name,
+  value,
+  value2,
+  onChange,
+  onModalOpen,
+  placeholder,
+  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) {
+    return (
+      <>
+        <TableCell
+          onClick={(e) => (onModalOpen ? onModalOpen(e, task) : null)}
+          align="left"
+          // style={styles}
+        >
+          {(task.isEditMode &&
+            onChange &&
+            name !== "author" &&
+            task.author?.id === user?.id) ||
+          placeholder ? (
+            <Input
+              placeholder={placeholder}
+              value={value}
+              name={name}
+              onChange={(e) => onChange(e, task)}
+              style={styles}
+            />
+          ) : name !== "dateTimeStart" ? (
+            <span>{value}</span>
+          ) : (
+            <div style={divStyle}>
+              <span>{value}</span>
+              <span>{value2}</span>
+              <span>часы:{hours}</span>
+            </div>
+          )}
+        </TableCell>
+      </>
+    );
+  }
+};
+
+export default CustomTableCell;

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

+import * as React 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";
+
+
+export default function MaterialUIPickers(props) {
+  return (
+    <LocalizationProvider
+      dateAdapter={AdapterMoment}
+      sx={{ width: "100%", fontSize: 5, fontWeight: "200" }}
+    >
+      <DateTimePicker
+        inputFormat="DD-MM-YY kk:mm A"
+        disabled={props.task.readOnly}
+        renderInput={(params) => (
+          <TextField
+            {...params}
+            sx={{ width: "auto", fontWeight: "200", fontSize: 5 }}
+            name={props.name}
+          />
+        )}
+        value={props.task[props.name]}
+        onChange={(newValue) => {
+          props.onChange(props.task.id, newValue, props.name);
+        }}
+      />
+    </LocalizationProvider>
+  );
+}

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

+import * as React from "react";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableRow,
+  TableHead,
+  IconButton,
+  Tooltip,
+  Typography,
+  Divider,
+} from "@mui/material";
+import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { AddBox } from "@mui/icons-material";
+import moment from "moment";
+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,
+  currentProject,
+
+  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,
+    executor:null,
+    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;
+    const newTask = { ...task, [name]: value };
+    setTask(newTask);
+  };
+
+  const onProjectChange = (e, task) => {
+    const value = e.target.value;
+    const project = projects.find((e) => e.id === value);
+    const newTask = { ...task };
+    newTask.project = project;
+    setTask(newTask);
+  };
+
+  const onExecutorChange = (e, task) => {
+    const value = e.target.value;
+    const executor = projects.find((e) => e.id === value);
+    const newTask = { ...task };
+    newTask.executor = executor;
+    setTask(newTask);
+  };
+
+  const onDateChange = (id, value, property) => {
+    const newTask = {
+      ...task,
+      [property]: moment.parseZone(value, "DD/MM/YYYY", true).format(),
+    };
+    setTask(newTask);
+  };
+
+  const handleAddTask = () => {
+    dispatch(addTask(task));
+    setAddTaskForm();
+  };
+
+  return (
+    <>
+      <Divider>
+        <Typography variant="overline">Добавить новую задачу</Typography>
+      </Divider>
+      <TableContainer
+        style={{
+          backgroundColor: "#E8E8E8",
+          marginBottom: "2em",
+        }}
+      >
+        <Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
+          <TableHead>
+            <TableRow>
+              {header.map((headCell) => (
+                <TableCell
+                  key={headCell.id}
+                  align="center"
+                  padding={headCell.disablePadding ? "none" : "normal"}
+                >
+                  {headCell.label}
+                </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            <TableRow hover key={task.id}>
+              <TableCell component="th" scope="row" padding="none"></TableCell>
+              <TableCell>
+                <BasicSelect
+                  items={[
+                    { value: "A", title: "A" },
+                    { value: "B", title: "B" },
+                    { value: "C", title: "C" },
+                  ]}
+                  task={task}
+                  value={task.priority}
+                  onChange={onChange}
+                  name="priority"
+                />
+              </TableCell>
+
+              <CustomTableCell
+                {...{
+                  task,
+                  name: "createdAt",
+                  value: moment(task.createdAt).format("DD-MM-YYYY hh:mm A"),
+                }}
+              />
+              <CustomTableCell
+                {...{
+                  task,
+                  name: "title",
+                  value: task.title,
+                  onModalOpen,
+                  user: user,
+                  placeholder: "Кликните для ввода информации по задаче"
+                }}
+              />
+              
+              <TableCell>
+                <BasicSelect
+                  items={projects.map((e) => ({
+                    value: e?.id,
+                    title: e?.title,
+                  }))}
+                  task={task}
+                  onChange={onProjectChange}
+                  name="project"
+                  value={task.project?.id}
+                />
+              </TableCell>
+              <TableCell>
+                <BasicSelect
+                  items={currentProject.members.map((member) => ({
+                    value: member?.id,
+                    title: member?.displayName,
+                  }))}
+                  task={task}
+                  onChange={onExecutorChange}
+                  name="executor"
+                  value={task.executor?.id}
+                />
+              </TableCell>
+
+              {/* <TableCell>
+                <MaterialUIPickers
+                  task={task}
+                  name="dateTimeStart"
+                  onChange={onDateChange}
+                />
+              </TableCell> */}
+
+              <TableCell>
+                <MaterialUIPickers
+                  task={task}
+                  name="dateTimeDeadLine"
+                  onChange={onDateChange}
+                />
+              </TableCell>
+
+              <TableCell>
+                <Tooltip title="Добавить">
+                  <IconButton size="large" onClick={handleAddTask}>
+                    <AddBox fontSize="large" />
+                  </IconButton>
+                </Tooltip>
+              </TableCell>
+            </TableRow>
+
+          </TableBody>
+        </Table>
+        <TaskModal
+              task={task}
+              open={modal}
+              handleClose={handleClose}
+              onChange={onChange}
+              user={user}
+            />
+      </TableContainer>
+      <Divider />
+    </>
+  );
+}
+
+export const header = [
+  {
+    id: "id",
+    numeric: true,
+    disablePadding: true,
+    label: "",
+  },
+  {
+    id: "priority",
+    numeric: false,
+    disablePadding: true,
+    label: "Приоритет",
+  },
+  {
+    id: "createdAt",
+    numeric: true,
+    disablePadding: false,
+    label: "Дата создания",
+  },
+  {
+    id: "title",
+    numeric: false,
+    disablePadding: false,
+    label: "Заголовок",
+  },
+  {
+    id: "projectName",
+    numeric: true,
+    disablePadding: false,
+    label: "Проект",
+  },
+  {
+    id: "executorName",
+    numeric: false,
+    disablePadding: false,
+    label: "Исполнитель",
+  },
+  {
+    id: "dateTimeDue",
+    numeric: true,
+    disablePadding: false,
+    label: "Дедлайн",
+  },
+
+  {
+    id: "add",
+    numeric: false,
+    disablePadding: false,
+    label: "",
+  },
+];

planner-front/src/components/UsersTasksCompoments/TaskModal/TaskModal.css

+.modal{
+    display: flex;
+    flex-direction: column;
+    padding: 10px;
+    align-items: center;
+    position: absolute;
+    top: 200px;
+    left: 200px;
+    width: 300px;
+    height: 300px;
+    background-color: white;
+    border: 2px solid #000;
+    box-shadow: 24px;
+    border-radius:5px
+}
+.modalBox{
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+}
\ No newline at end of file

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

+import { Modal, IconButton } from "@mui/material";
+import "./TaskModal.css";
+import { Done } from "@mui/icons-material";
+import Input from "@mui/material/Input";
+import TextField from "@mui/material/Input";
+
+const TaskModal = ({handleClose,open,task,onChange,user }) => {
+
+  return (
+    <Modal
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+      BackdropProps={{ style: { backgroundColor: 'rgba(255,255,255, 0)' } }}
+      closeAfterTransition
+      onClose={handleClose}
+      open={open}
+    >
+      {task?.isEditMode && task.author.id===user.id ? (
+        
+        <div className="modal">
+          <Input
+           label="название"
+           color="secondary" 
+            value={task.title}
+            name="title"
+            onChange={(e) => onChange(e, task)}
+            style={{
+              width: "auto",
+              fontWeight: "600",
+              height: "40px",
+              fontWeight: "600",
+              width:"280px",
+              margin:"10px",
+              padding:"5px",
+              border: '2px solid #D3D3D3',
+              borderRadius:"5px"
+            }}
+          />
+          <TextField
+            label="описание"
+            value={task.description}
+            name="description"
+            onChange={(e) => onChange(e, task)}
+            multiline={true}
+            sx={{
+            fontWeight: "400",
+            width:"280px",
+            margin:"10px",
+            padding:"5px",
+            border: '2px solid #D3D3D3',
+            borderRadius:"5px",
+            height:"300px",
+            whiteSpace:"normal"
+            }}
+               />
+          <IconButton aria-label="done" onClick={handleClose}
+           sx={{margingBottom:"5px",marginTop:"auto"}}>
+            <Done />
+          </IconButton>
+        </div>
+      ) : (
+        <div className="modal">
+          {task && task.title && (
+            <div
+              style={{
+               height: "40px",
+               fontWeight: "600",
+               width:"280px",
+               margin:"10px",
+               padding:"5px",
+               border: '2px solid #D3D3D3',
+               borderRadius:"5px"
+              }}
+            >
+              {task.title}
+            </div>
+          )}
+          {task && task.description && (
+            <div 
+            style={{margin:"10px",
+                    border: '2px solid #D3D3D3',
+                    borderRadius:"5px",
+                    width:"280px",
+                    height: "200px",
+                    margin:"10px",
+                    padding:"5px",
+               }}>
+              {task.description}
+            </div>
+          )}
+          <IconButton
+            aria-label="close"
+            onClick={handleClose}
+            sx={{margingBottom:"5px",marginTop:"auto"}}
+          >
+            X
+          </IconButton>
+        </div>
+      )}
+    </Modal>
+  );
+};
+
+export default TaskModal;

planner-front/src/components/UsersTasksCompoments/UsersTaskToolBar.js

+import * as React from 'react';
+import AppBar from '@mui/material/AppBar';
+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 '../UI/MultipleSelect/MultipleSelect';
+import Add from "@mui/icons-material/Add";
+import Close from "@mui/icons-material/Close";
+
+export default function MyTaskToolBar({projects,onClose,projectName,setProjectName,formStatus,onClick}) {
+  
+   let projectsFilter =
+    <></>
+   
+    if (projects)  {
+      projectsFilter=   
+      <MultipleSelect
+      projects={projects}
+      onClose={onClose}
+      projectName={projectName}
+      setProjectName={setProjectName}
+      />
+    }
+
+  return (
+    
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static">
+        <Toolbar>
+         <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
+            Задачи сотрудников
+          </Typography>
+          {projectsFilter}
+
+          <Button
+            color={formStatus === true ? "info" : "inherit"}
+            style={{
+              backgroundColor: formStatus === true ? "white" : "inherit",
+            }}
+            onClick={onClick}
+          >
+            {formStatus === true ? (
+              <>
+                <Close />
+                <span style={{ lineHeight: "16px" }}>Скрыть задачу</span>
+              </>
+            ) : (
+              <>
+                <Add />
+                <span style={{ lineHeight: "16px" }}>Добавить задачу</span>
+              </>
+            )}
+          </Button>
+        
+        </Toolbar>
+      </AppBar>
+    </Box>
+
+    
+  );
+}

planner-front/src/constants.js

@@ -6,6 +6,7 @@ export const workerMenuButtons = [
   { text: 'Проекты', path: '/projects' },
   { text: 'Неделя', path: '/week' },
   { text: 'Месяц', path: '/month' },
+  { text: 'Задачи Сотрудников', path: '/workers-tasks' },
   { text: 'Мои задачи', path: '/my-tasks' }
 ]
 

planner-front/src/containers/UsersTasks/UsersTasksHeader/UsersTasksHeader.js

+import * as React from "react";
+import PropTypes from "prop-types";
+import Box from "@mui/material/Box";
+import TableCell from "@mui/material/TableCell";
+import TableHead from "@mui/material/TableHead";
+import TableRow from "@mui/material/TableRow";
+import TableSortLabel from "@mui/material/TableSortLabel";
+import { visuallyHidden } from "@mui/utils";
+
+const headCells = [
+  {
+    id: "id",
+    numeric: true,
+    disablePadding: true,
+    label: "",
+  },
+  {
+    id: "priority",
+    numeric: false,
+    disablePadding: true,
+    label: "Приоритет",
+  },
+  {
+    id: "createdAt",
+    numeric: true,
+    disablePadding: false,
+    label: "Дата создания",
+  },
+  {
+    id: "title",
+    numeric: true,
+    disablePadding: false,
+    label: "Заголовок",
+  },
+  {
+    id: "projectName",
+    numeric: true,
+    disablePadding: false,
+    label: "Проект",
+  },
+  {
+    id: "executorDisplayName",
+    numeric: true,
+    disablePadding: false,
+    label: "Исполнитель",
+  },
+  {
+    id: "authorDisplayName",
+    numeric: true,
+    disablePadding: false,
+    label: "Автор",
+  },
+
+  {
+    id: "dateTimeStart",
+    numeric: true,
+    disablePadding: false,
+    label: "Дата и время выполнения",
+  },
+  {
+    id: "dateTimeDue",
+    numeric: true,
+    disablePadding: false,
+    label: "Дедлайн",
+  },
+  {
+    id: "accomplish",
+    numeric: true,
+    disablePadding: false,
+    label: "Статус",
+  },
+  {
+    id: "change",
+    numeric: false,
+    disablePadding: false,
+    label: "",
+  },
+  {
+    id: "delete",
+    numeric: false,
+    disablePadding: false,
+    label: "",
+  },
+];
+
+export default function UsersTasksHeader({ order, orderBy, rowCount, onRequestSort }) {
+  
+  const createSortHandler = (property) => (event) => {
+    onRequestSort(event, property);
+  };
+
+  return (
+    <TableHead>
+      <TableRow>
+        {headCells.map((headCell) => (
+          <TableCell
+            key={headCell.id}
+            align={"center"}
+            padding={headCell.disablePadding ? "none" : "normal"}
+            sortDirection={orderBy === headCell.id ? order : false}
+          >
+            <TableSortLabel
+              active={orderBy === headCell.id}
+              direction={orderBy === headCell.id ? order : "asc"}
+              onClick={createSortHandler(headCell.id)}
+            >
+              {headCell.label}
+              {orderBy === headCell.id ? (
+                <Box component="span" sx={visuallyHidden}>
+                  {order === "desc" ? "sorted descending" : "sorted ascending"}
+                </Box>
+              ) : null}
+            </TableSortLabel>
+          </TableCell>
+        ))}
+      </TableRow>
+    </TableHead>
+  );
+}
+
+UsersTasksHeader.propTypes = {
+  onRequestSort: PropTypes.func.isRequired,
+  order: PropTypes.oneOf(["asc", "desc"]).isRequired,
+  orderBy: PropTypes.string.isRequired,
+  rowCount: PropTypes.number.isRequired,
+};

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

@@ -53,7 +53,7 @@ export const fetchProjects = () => {
     return async dispatch => {
         dispatch(fetchProjectsRequest());
         try {
-            const response = await axios.get("/projects");
+            const response = await axios.get("/projects/my");
             dispatch(fetchProjectsSuccess(response.data));
         } catch(e) {
             dispatch(fetchProjectsError(e));