Skip to content

P
planner-team-one
Commit d82cc5c0 authored by Нелли Ибрагимова's avatar Нелли Ибрагимова
Browse files
Options

доработалла селект по проектам при редактировании, написала компонент NewTask и… 

доработалла селект по проектам при редактировании, написала компонент NewTask и функцию добавления задачи, расшифровала пропсы во всех компонентах, поправила формат дат, добавила плейсхолдеры
parents 6fcaa7f7 5bbfca5e
Hide whitespace changes
Inline Side-by-side
Showing with 1316 additions and 572 deletions
planner-api/src/routers/projects.ts
View file @ d82cc5c0
......@@ -16,6 +16,7 @@ router.get('/',async (req:Request, res:Response): Promise<Response>=> {
router.post('/', async (req:Request, res:Response): Promise<Response> => {
if (!req.body) return res.status(400).send({Message:'problem in incoming req.body'})
const token = req.get('Authorization');
console.log("token:" + token)
const {title, dateDue,color,department,workers,tasks}= req.body;
const user = await dataSource
.createQueryBuilder()
......@@ -36,7 +37,7 @@ router.post('/', async (req:Request, res:Response): Promise<Response> => {
return res.send({project})
})
router.get("/id/:id",async (req:Request, res:Response): Promise<Response> => {
router.get("/:id",async (req:Request, res:Response): Promise<Response> => {
const project = await dataSource
.createQueryBuilder()
.select("project")
......
planner-api/src/routers/tasks.ts
View file @ d82cc5c0
......@@ -2,6 +2,7 @@ import express,{Router, Request, Response} from 'express';
import {Task} from '../models/Task';
import {myDataSource} from '../app-data-source';
import { User } from '../models/User';
import { Project } from '../models/Project';
const router:Router = express.Router();
const dataSource = myDataSource;
......@@ -37,7 +38,7 @@ router.post('/', async(req:Request, res:Response):Promise<Response>=>{
return res.send({newTask})
})
router.get('/userId/:userId', async (req: Request, res: Response):Promise<Response>=>{
router.get('/:userId', async (req: Request, res: Response):Promise<Response>=>{
const userId = req.params.userId;
const tasks = await dataSource
.getRepository(Task)
......@@ -111,4 +112,53 @@ router.put('/',async(req:Request, res:Response)=> {
})
router.post('/project',async (req: Request, res: Response):Promise<Response>=>{
let projectArray :string[]= req.body;
console.log('projectArray ', projectArray)
if (projectArray.length===0) {
const rawTasks = await
dataSource
.getRepository(Task)
.find({
relations:{
executors:true,
author:true,
project:true
}
})
const tasks:object[]= rawTasks.filter(task=>task.project===null)
return res.send({tasks})
}
const tasks = await
dataSource
.getRepository(Task)
.createQueryBuilder('task')
.innerJoinAndSelect( 'task.project', 'project')
.where('task.project IN(:...projects)', {projects:projectArray})
.getMany()
return res.send({tasks})
})
// router.post('/projects',async (req: Request, res: Response):Promise<Response>=>{
// let projectArray :string[]= req.body;
// console.log('projectArray ', projectArray)
// if (projectArray.length===0) {
// const tasks = await
// dataSource
// .getRepository(Task)
// .createQueryBuilder('task')
// // .innerJoinAndSelect('task.executors', 'user')
// .innerJoinAndSelect('task.executors AND task.author', 'user')
// .where('task.project IS NULL')
// .getMany()
// return res.send({tasks})
// }
// ///ssome code
// return res.send({message:"some other staff"})
// })
export default router;
planner-front/src/App.js
View file @ d82cc5c0
......@@ -7,6 +7,9 @@ import Login from './containers/Login/Login';
import Register from './containers/Register/Register';
import MonthCalendar from './containers/MonthCalendar/MonthCalendar';
import ForgottenPassword from "./containers/ForgottenPassword/ForgottenPassword";
import Projects from "./containers/Projects/Projects";
import FullProject from "./containers/FullProject/FullProject";
import NewProject from "./containers/NewProject/NewProject";
const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const user = useSelector(state => state.users?.user);
......@@ -18,6 +21,7 @@ const ProtectedRoute = ({isAllowed, roles, redirectUrl, children}) => {
const App = () => {
const user = useSelector(state => state.users?.user);
return (
<BrowserRouter>
<Routes>
......@@ -31,7 +35,30 @@ const App = () => {
</main>
</>
}>
<Route path={"/projects"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/sign-in"}
>
<Projects/>
</ProtectedRoute>
}/>
<Route path={"/projects/:id"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/sign-in"}
>
<FullProject/>
</ProtectedRoute>
}/>
<Route path={"/projects/add"} element={
<ProtectedRoute
isAllowed={user}
redirectUrl={"/sign-in"}
>
<NewProject/>
</ProtectedRoute>
}/>
<Route path={"/"} element={
<ProtectedRoute
isAllowed={user}
......
planner-front/src/components/Menus/AdminMenu/AdminMenu.js
View file @ d82cc5c0
......@@ -10,7 +10,7 @@ const AdminMenu = () => {
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const user = useSelector(state => state.users.user)
console.log(user)
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
......@@ -23,6 +23,14 @@ const AdminMenu = () => {
handleClose()
}
return <>
<Button
component={NavLink}
to="/projects"
color="inherit"
size="large"
>
Проекты
</Button>
<Button
component={NavLink}
to="/week"
......
planner-front/src/components/Menus/UserMenu/UserMenu.js deleted 100644 → 0
View file @ 6fcaa7f7
import { Button, Menu, MenuItem } from "@mui/material";
import { useState } from "react";
import { useDispatch } from "react-redux";
import { NavLink, useNavigate } from "react-router-dom";
import { logoutUser } from "../../../store/actions/usersActions";
import HasAccess from "../../UI/HasAccess/HasAccess";
const UserMenu = ({ user }) => {
const dispatch = useDispatch();
const navigate = useNavigate()
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const logout = () => {
dispatch(logoutUser(navigate));
handleClose()
}
return <>
<Button
color="inherit"
onClick={handleClick}
>
Hello, {user?.displayName}
</Button>
{/* <HasAccess roles={["admin"]}>
<Button
component={NavLink}
color="inherit"
to="/admin"
>
Admin panel
</Button>
</HasAccess> */}
<Menu
anchorEl={anchorEl}
open={open}
onClose={handleClose}
>
<MenuItem onClick={handleClose}>Profile</MenuItem>
<MenuItem onClick={handleClose}>My account</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</>
};
export default UserMenu;
\ No newline at end of file
planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js
View file @ d82cc5c0
......@@ -23,6 +23,14 @@ const WorkerMenu = () => {
handleClose()
}
return <>
<Button
component={NavLink}
to="/projects"
color="inherit"
size="large"
>
Проекты
</Button>
<Button
component={NavLink}
to="/week"
......
planner-front/src/components/MonthCalendarBody/CalendarRow/CalendarRow.js
View file @ d82cc5c0
import { Grid } from "@mui/material";
import { memo } from "react";
const CalendarRow = ({children}) => {
return <>
......@@ -13,6 +12,6 @@ const CalendarRow = ({children}) => {
</>
};
export default memo(CalendarRow);
export default CalendarRow;
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js 0 → 100644
View file @ d82cc5c0
import { Grid } from "@mui/material";
import { memo, useMemo } from "react";
import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
const hours = useMemo(()=>{
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
[hoursInDay])
const availableTasks = useMemo(() => {
const tasksInDay = tasks.filter((task)=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
return task
} else {return false}
} else {return false}
} else {return false}
})
return tasksInDay
}, [tasks, month, year, day.dayNumber])
const sortedTasks = useMemo(() => {
if (availableTasks.length) {
const newSortedArr = [...availableTasks].sort(function(a,b){
const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
return durattionSecondDate - durattionFirstDate;
})
return newSortedArr
}
}, [availableTasks])
const linesInDay = useMemo(() => {
let hourDiff
let hourDiffEnd
const lines = []
if (hourFormat) {
hourDiff = 1
hourDiffEnd = 0
} else {
hourDiff = 2
hourDiffEnd = 1
}
if (availableTasks.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
for (let k = 0; k < sortedTasks.length; k++) {
let skipLine = false
for (let j = 0; j < lines.length; j++) {
const line = lines[j]
const task = sortedTasks[k]
if (skipLine) {
skipLine = false
break;
}
for (let i = 0; i < line.length; i++) {
const hour = hours[i]
let havePlace = true
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (!hourFormat && task.infoForCell.startHour >= hour && task.infoForCell.endHour < hour + hourDiff)
|| (!hourFormat && task.infoForCell.startHour === hour + hourDiffEnd && task.infoForCell.endHour > hour)
|| (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) {
const hour = hours[a]
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
if (isNaN(line[a])) {
havePlace = false
break;
}
}
}
if (!havePlace) {
havePlace = true
break;
}
line[i] += `-${k}`
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
skipLine = true
break;
}
} else {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
break;
}
}
}
}
}
}
return lines
}, [availableTasks.length, hourFormat, hours, hoursInDay, sortedTasks])
const getBoxesInLine = (line) => {
if (line) {
let xs = 12/hoursInDay.length
const boxes = []
for (let i = 0; i < line.length; i++) {
if (!isNaN(line[i])) {
if (boxes[boxes.length -1]?.task === null) {
boxes[boxes.length -1].xs += xs
} else {
boxes.push({xs: xs, task: null})
}
} else {
const task = sortedTasks[line[i].split('-')[1]]
const taskIsThere = boxes.find((taskFind)=>{
if (taskFind?.task?.id === task.id) return taskFind
})
if (taskIsThere) {
taskIsThere.xs +=xs
} else {
boxes.push({xs: xs, task: sortedTasks[line[i].split('-')[1]]})
}
}
}
return boxes
}
}
return <>
<Grid
container
item
xs={10.8}
align='center'
>
{hoursInDay.map((hour, i)=>{
return (
<CalendarStandartCell
key={i}
item xs={xs}
createTaskInCellHandler={createTaskInCellHandler}
hours={hour}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal}
>
</CalendarStandartCell>
)
})}
{linesInDay?.map((line, i)=>{
const boxes = getBoxesInLine(line)
return(
<Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginTop: i === 0 ? '-35px' : 0, marginBottom: '5px'}}>
{boxes.map((box)=>{
if (box.task) {
return (<Grid item xs={box.xs} sx={{height: '35px', marginBottom: '5px'}}>
<CalendarTask
task={box.task}
setCurrentTask={setCurrentTask}
handleOpen={handleOpen}
/>
</Grid>)
} else {
return (<Grid item xs={box.xs} sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)'}}>
</Grid>)
}
})}
</Grid>)
})}
</Grid>
</>
};
export default memo(CalendarRowDay);
\ No newline at end of file
planner-front/src/components/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ d82cc5c0
import { Grid, TextField, Typography } from "@mui/material";
import { Grid} from "@mui/material";
import { memo, useEffect, useState } from "react";
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal}) => {
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, divRef }) => {
const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{
if(!modal) {
setIsThisCell(false);
}
}, [modal])
return <>
<Grid
item xs={xs}
sx={{borderRight: '1px solid black'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}>
sx={{position: 'relative', height: '35px'}}
onClick={(e)=>{createTaskInCellHandler(dayNumber, hours); setIsThisCell(true); handleOpen(e)}}
>
{children}
{isThisCell ?
<Grid
sx={{backgroundColor: 'lightgreen', padding: '10px', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}
>
<Grid
sx={{ position: 'relative', height: '29px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '3px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}
>
<span>
Задача
</span>
</Grid> : null}
<div style={{position: 'absolute', height: children ? divRef : 0, width: '1px', backgroundColor: 'black', right: '0', top: '0', zIndex: '3'}}>
</div>
</Grid>
</>
};
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ d82cc5c0
import { Grid, TextField, Typography } from "@mui/material";
import React, { memo, useState, useEffect} from "react";
import { Grid} from "@mui/material";
import React, { memo} from "react";
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
const getTaskInDayCell = (tasks, day, hours) => {
const hour = parseInt(hours.split(':')[0])
let hourDiffEnd
if (hourFormat) {
hourDiffEnd = hour + 1
} else {
hourDiffEnd = hour + 2
}
const tasksCell = tasks.filter(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (task.infoForCell.startHour >= hour && task.infoForCell.endHour < hourDiffEnd)
|| (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
return task
}
}
}
}
})
return tasksCell
}
const tasksCell = getTaskInDayCell(tasks, day, hours)
useEffect(()=>{
if (!currentTask.title) {
setThisCellCurrentTask({})
}
}, [currentTask])
const CalendarTask = ({setCurrentTask, handleOpen, task}) => {
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
setCurrentTask(task);
handleOpen(e)
}
return (<>
{tasksCell.length ? tasksCell.map((task, i)=>
{
return (
<Grid
key={task.id}
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '10px', borderBottom: '1px solid rgb(29, 161, 51);;'}}
onClick={(e)=>{e.stopPropagation(); setCurrentTask(task); handleOpen(e)}}
>
{task.title}
</Grid>
)}
)
: null}
<Grid
sx={{ position: 'relative', height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', borderRadius: '10px', margin: '5px 10px', display: 'flex', justifyContent: 'flex-start', alignItems: 'center', paddingLeft: '5px', zIndex: '5'}}
onClick={(e)=>{onClickTaskHandler(e, task)}}
>
<span>
{task.title}
</span>
</Grid>
</>)
};
......
planner-front/src/components/MonthCalendarBody/MonthCalendarBody.js
View file @ d82cc5c0
import { FormControlLabel, Switch} from "@mui/material";
import { memo, useEffect, useState } from "react";
import { useEffect, useRef, useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "./CalendarTask/CalendarTask";
import ModalTask from "../UI/ModalTask/ModalTask";
import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth}) {
......@@ -25,11 +25,18 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
setModal({...modal, open: false})
setCurrentTask({})
};
const divRef = useRef(null)
const [divHeight, setDivHeight] = useState('')
useEffect(() => {
if (divRef) {
setDivHeight(()=>{
return divRef.current?.offsetHeight
})
}
}, [divRef.current?.offsetHeight, hourFormat, month, tasks]);
return (
<>
<div ref={divRef} style={{marginBottom: '30px'}}>
<CalendarRow
>
<CalendarSmallCell xs={1.2}>
......@@ -41,7 +48,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
</CalendarSmallCell>
{hoursInDay?.map((hours, i)=>{
return (
<CalendarStandartCell key={i} xs={cellSizes.standarCell}>
<CalendarStandartCell key={i} xs={cellSizes.standarCell} divRef={divHeight}>
{hours}
</CalendarStandartCell>
)
......@@ -54,32 +61,20 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayNumber}</CalendarSmallCell>
<CalendarSmallCell xs={cellSizes.smallCell}>{day.dayOfWeek}</CalendarSmallCell>
{hoursInDay.map((hours, i)=>{
return (
<CalendarStandartCell
key={i}
item xs={cellSizes.standarCell}
createTaskInCellHandler={createTaskInCellHandler}
hours={hours}
dayNumber={day.dayNumber}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal.open}
>
<CalendarTask
setCurrentTask={setCurrentTask}
year={year}
month={month}
tasks={tasks}
day={day}
hours={hours}
hourFormat={hourFormat}
handleOpen={handleOpen}
currentTask={currentTask}
/>
</CalendarStandartCell>
)
})}
<CalendarRowDay
xs={cellSizes.dayCell}
createTaskInCellHandler={createTaskInCellHandler}
hoursInDay={hoursInDay}
currentTask={currentTask}
handleOpen={handleOpen}
modal={modal.open}
setCurrentTask={setCurrentTask}
year={year}
month={month}
tasks={tasks}
day={day}
hourFormat={hourFormat}
/>
</CalendarRow>
)
})}
......@@ -96,7 +91,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}}
/>
</ModalTask>
</>
</div>
);
}
......
planner-front/src/components/MyTasksCompoments/CustomTableCell.js
View file @ d82cc5c0
......@@ -2,7 +2,13 @@ import * as React from "react";
import TableCell from "@mui/material/TableCell";
import Input from "@mui/material/Input";
const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
const CustomTableCell = ({task,
name,
value,
onChange,
onModalOpen,
placeholder,
}) => {
const styles = { width: "auto", height: "10px"};
if (task) {
......@@ -15,6 +21,7 @@ const CustomTableCell = ({ task, name, value, onChange, onModalOpen }) => {
>
{task.isEditMode && onChange ? (
<Input
placeholder={placeholder}
value={value}
name={name}
onChange={(e) => onChange(e, task)}
......
planner-front/src/components/MyTasksCompoments/DateTimePicker/DateTimePicker.js
View file @ d82cc5c0
......@@ -4,6 +4,7 @@ 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
......@@ -11,6 +12,7 @@ export default function MaterialUIPickers(props) {
sx={{ width: "auto", fontSize: 5, fontWeight: "200" }}
>
<DateTimePicker
inputFormat="DD-MM-YYYY hh:mm A"
disabled={props.task.readOnly}
renderInput={(params) => (
<TextField
......
planner-front/src/components/MyTasksCompoments/MyTaskToolBar.js
View file @ d82cc5c0
......@@ -5,25 +5,58 @@ 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';
import Add from "@mui/icons-material/Add";
import Close from "@mui/icons-material/Close";
export default function MyTaskToolBar(props) {
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>
<MultipleSelect
projects={props.projects}
onClose={props.onClose}
projectName={props.projectName}
setProjectName={props.setProjectName}
/>
<Button color="inherit" onClick={props.onClick} >Добавить задачу</Button>
{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/components/MyTasksCompoments/NewTaskForm.js
View file @ d82cc5c0
import * as React from "react";
import {
Box,
Table,
TableBody,
TableCell,
TableContainer,
TableRow,
Paper,
TableHead,
IconButton,
Tooltip,
Input,
Typography,
Divider,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import { AddBox } from "@mui/icons-material";
import moment from "moment";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import CustomTableCell from "./CustomTableCell";
import MaterialUIPickers from "./DateTimePicker/DateTimePicker";
import BasicSelect from "../UI/Select/Select";
import { addTask } from "../../store/actions/tasksActions";
export default function NewTaskForm (props) {
export default function NewTaskForm({projects,setAddTaskForm,tasks}) {
const dispatch = useDispatch();
const user = useSelector((state) => state.users.user);
const current = new Date();
const date = `${current.getDate()}/${current.getMonth()+1}/${current.getFullYear()}`;
const [task, setTask] =useState(
{
id:0,
title: "",
description: "",
createdAt: date,
dateTimeStart: null,
dateTimeDue: null,
accomplish: "",
priority: "",
author: user,
executors: [
{ name: "" }
],
isEditMode:false,
readOnly: true
}
);
const onToggleEditMode = (id) => {
const newTask = ((task) => {
if (task.id === id) {
return {
...task,
isEditMode: true,
readOnly: false,
};
}
return task;
});
setTask(newTask);
};
console.log(task)
const onToggleEditModeDone = (id) => {
const newTasks = (task) => {
if (task.id === id) {
return {
...task,
isEditMode: false,
readOnly: true,
};
}
return task;
};
setTask(newTasks);
};
const HandleAddTask=()=>{
console.log(task)
dispatch(addTask(task))
}
return (
<TableRow hover key={task.id}>
<TableCell
component="th"
scope="row"
padding="none"
></TableCell>
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
onChange:props.onChange,
}}
/>
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
}}
/>
<CustomTableCell
{...{
task,
name: "title",
value: task.title,
onChange:props.onChange,
onModalOpen:props.onModalOpen,
}}
/>
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={props.onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project?.title,
onChange: props.onChange,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "author",
value: task.author.displayName,
onChange: props.onAuthorChange,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={props.onDateChange}
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
onChange={props.onDateChange}
/>
</TableCell>
{task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={props.onChange}
/>
) : (
<CustomTableCell
{...{
task,
name: "accomplish",
value: task.accomplish,
}}
/>
)}
<TableCell>
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {onToggleEditModeDone(task.id); HandleAddTask(task) }}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</TableCell>
<TableCell>
{/* <Tooltip title="Delete">
<IconButton
onClick={(id) => {
props.deleteHandle(task.id);
}}
>
<DeleteIcon />
</IconButton>
</Tooltip> */}
</TableCell>
</TableRow>
);
const currentDateTime = new Date();
const dateTime = moment(currentDateTime).utc().format();
const [task, setTask] = useState({
id: 0,
title: "",
description: "",
createdAt: dateTime,
dateTimeStart: null,
dateTimeDue: null,
project: projects[0],
accomplish: "opened",
priority: "B",
authorDisplayName: user.displayName,
executors: [],
isEditMode: true,
});
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 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",
display: "flex",
alignItems: "center",
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,
onChange: onChange,
placeholder: "Введите название задачи",
}}
/>
<CustomTableCell
{...{
task,
name: "description",
value: task.description,
onChange: onChange,
placeholder: "Введите описание задачи",
}}
/>
<TableCell>
<BasicSelect
items={projects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
/>
</TableCell>
<CustomTableCell
{...{
task,
name: "author",
value: user.displayName,
}}
/>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeStart"
onChange={onDateChange}
/>
</TableCell>
<TableCell>
<MaterialUIPickers
task={task}
name="dateTimeDue"
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}>
<AddBox fontSize="large" />
</IconButton>
</Tooltip>
</TableCell>
</TableRow>
</TableBody>
</Table>
</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: "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: "Статус",
},
{
id: "add",
numeric: false,
disablePadding: false,
label: "",
},
];
planner-front/src/components/ProjectForm/ProjectForm.js 0 → 100644
View file @ d82cc5c0
import {Button, Grid} from "@mui/material";
import {useState} from "react";
import { useSelector } from "react-redux";
import FormElement from "../UI/Form/FormElement/FormElement";
const ProjectForm = ({onSubmit}) => {
const users = useSelector(state => state.users)
console.log(users)
const [state, setState] = useState({
title: "",
color: ""
});
const submitFormHandler = (e) => {
e.preventDefault();
let project = {title: state.title, color: state.color}
console.log(project);
onSubmit(project);
};
const inputChangeHandler = (e) => {
const {name, value} = e.target;
setState(prevState => {
return {...prevState, [name]: value};
});
};
return <form onSubmit={submitFormHandler}>
<Grid container direction="column" spacing={2}>
<FormElement
onChange={inputChangeHandler}
name={"title"}
label={"Title"}
state={state}
/>
<FormElement
onChange={inputChangeHandler}
name={"color"}
label={"Color"}
state={state}
/>
<Grid item>
<Button
type="submit"
color="primary"
variant="contained"
>
Create
</Button>
</Grid>
</Grid>
</form>
};
export default ProjectForm;
\ No newline at end of file
planner-front/src/components/ProjectItem/ProjectItem.js 0 → 100644
View file @ d82cc5c0
import { Card, CardActions, CardContent, Grid, IconButton } from "@mui/material";
import { Link } from "react-router-dom";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
import { useDispatch, useSelector } from "react-redux";
const ProjectItem = ({ title, tasks, id }) => {
const user = useSelector(state => state.users.user);
const dispatch = useDispatch();
console.log(tasks)
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Card>
<CardContent>
<strong>
<br></br>
Название проекта: {title}
</strong>
<strong>
<br></br>
{/* Задачи: {tasks} */}
</strong>
</CardContent>
<CardActions>
<IconButton component={Link} to={"/projects/" + id}>
<ArrowForwardIcon />
</IconButton>
</CardActions>
</Card>
</Grid>
</>
};
export default ProjectItem;
planner-front/src/components/ProjectsList/ProjectsList.js 0 → 100644
View file @ d82cc5c0
import {Grid} from "@mui/material";
import ProjectItem from "../ProjectItem/ProjectItem";
const ProjectsList = ({projects}) => {
return (
<Grid item container direction="row" spacing={1}>
{projects?.map(project => {
return <ProjectItem
tasks={project.tasks}
workers={project.workers}
title={project.title}
createdAt={project.createdAt}
dateDue={project.dateDue}
admin={project.admin}
id={project.id}
key={project.id}
/>
})}
</Grid>
);
};
export default ProjectsList;
\ No newline at end of file
planner-front/src/components/UI/Form/FormElement/FormElement.js
View file @ d82cc5c0
......@@ -5,7 +5,7 @@ const FormElement = ({ name, label, state, error, onChange, select, options, typ
let inputChildren = null
if (select) {
inputChildren = options.map(option => {
inputChildren = options?.map(option => {
return <MenuItem key={option._id} value={option._id}>
{option.name}
</MenuItem>
......
planner-front/src/components/UI/MultipleSelect/MultipleSelect.js
View file @ d82cc5c0
......@@ -28,16 +28,15 @@ function getStyles(name, personName, theme) {
};
}
export default function MultipleSelect(props) {
export default function MultipleSelect({projects,projectName,onClose,setProjectName}) {
const theme = useTheme();
const handleChange = (event) => {
const {
target: { value },
} = event;
props.setProjectName(
setProjectName(
// On autofill we get a stringified value.
typeof value === 'string' ? value.split(',') : value,
);
......@@ -46,23 +45,25 @@ export default function MultipleSelect(props) {
return (
<div>
<FormControl sx={{ m: 1, width: 250,borderColor:'white' }}>
<InputLabel id="demo-multiple-name-label" sx={{color:'white' }}>Project</InputLabel>
<InputLabel placeholder='Choose Project' label='I am a really really long green TextField label' id="demo-multiple-name-label" sx={{color:'white', padding:'1' }}>Project</InputLabel>
<Select
labelId="demo-multiple-name-label"
label='Choose Project'
name='Choose Project'
id="demo-multiple-name"
multiple
value={props.projectName}
value={projectName}
onChange={handleChange}
input={<OutlinedInput label="Name" />}
MenuProps={MenuProps}
sx={{color:'white' }}
onClose={(e)=>{props.onClose(props.projectName)}}
onClose={(e)=>{onClose(projectName)}}
>
{props.projects.map((project) => (
{projects?.map((project) => (
<MenuItem
key={project}
value={project}
style={getStyles(project, props.projectName, theme)}
style={getStyles(project, projectName, theme)}
>
{project}
</MenuItem>
......
planner-front/src/components/UI/Select/Select.js
View file @ d82cc5c0
......@@ -5,7 +5,8 @@ import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
export default function BasicSelect(props) {
export default function BasicSelect({value,label,name,onChange,task,items}) {
return (
<Box sx={{ minWidth: 60 }}>
<FormControl fullWidth>
......@@ -13,17 +14,19 @@ export default function BasicSelect(props) {
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={props.task.accomplish}
label=""
name={"accomplish"}
onChange={(e) => props.onChange(e, props.task)}
sx={{ marginTop: 2 }}
value={value}
label={label}
name={name}
onChange={(e) => onChange(e, task)}
>
{props.items.map((item) => (
<MenuItem value={item}>{item}</MenuItem>
{items.map((item) => (
<MenuItem key={item.value} value={item.value}>
{item.title}
</MenuItem>
))}
</Select>
</FormControl>
</Box>
);
}
planner-front/src/components/UI/СustomSelect/СustomSelect.js
View file @ d82cc5c0
......@@ -6,10 +6,10 @@ function СustomSelect({value, onChange, label, variant='standard', items, id})
return (
<>
<FormControl variant={variant} sx={{ m: 1, minWidth: 120 }}>
<InputLabel id={id + '-select' + '-label'}>{label}</InputLabel>
<InputLabel id={`${id}-select-label`}>{label}</InputLabel>
<Select
labelId={id + '-select'+ '-label'}
id={id + '-select'}
labelId={`${id}-select-label`}
id={`${id}-select`}
value={value}
onChange={onChange}
label={label}
......
planner-front/src/containers/FullProject/FullProject.js 0 → 100644
View file @ d82cc5c0
import { Card, CardActions, CardContent, Grid } from "@mui/material";
import { useLocation, useParams } from "react-router-dom";
import { useSelector, useDispatch } from "react-redux";
import { useEffect } from "react";
import { fetchProject } from "../../store/actions/projectsActions";
const FullProject = () => {
const { projects, project } = useSelector(state => state.projects);
const dispatch = useDispatch();
console.log(projects);
let location = useLocation();
let point = location.pathname
console.log(point.includes("admin"))
const params = useParams()
useEffect(() => {
dispatch(fetchProject(params.id))
}, [params.id, dispatch]);
console.log(project)
return <>
<Grid item xs={12} sm={12} md={6} lg={4}>
<Card>
<h2>Проект - {project?.project?.title}</h2>
<CardContent>
<strong>
<br></br>
Дата создания проекта: {project?.project?.createdAt}
</strong>
<strong>
<br></br>
Цвет: {project?.project?.color}
</strong>
<strong>
<br></br>
Админ проекта: {project?.project?.admin.name}
</strong>
<strong>
<br></br>
Задачи: {projects?.projects?.tasks?.map(task => {
return <>
<strong><br></br>Задача проекта: {task.title} </strong>
</>
})}
</strong>
</CardContent>
<CardActions>
</CardActions>
</Card>
</Grid>
</>
};
export default FullProject;
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ d82cc5c0
......@@ -13,7 +13,6 @@ function MonthCalendar() {
const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: ''})
const [cellSizes, setCellSizes] = useState({})
useEffect(()=>{
......@@ -31,7 +30,7 @@ function MonthCalendar() {
const cells = arr.length
const xs = 10.8/cells
setCellSizes(()=>{
return {smallCell: 0.6, standarCell: xs}
return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
})
return arr
} else {
......@@ -39,7 +38,7 @@ function MonthCalendar() {
const cells = arr.length
const xs = 10.8/cells
setCellSizes(()=>{
return {smallCell: 0.6, standarCell: xs}
return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells}
})
return arr
}
......@@ -122,12 +121,13 @@ function MonthCalendar() {
const sendNewTaskHandler = async () => {
if (currentTask.id) {
delete currentTask.infoForCell
console.log(currentTask)
setCurrentTask(() => {
return{
...currentTask,
}}
)
delete currentTask.infoForCell
await dispatch(editTask(currentTask))
} else {
setCurrentTask(() => {
......@@ -135,7 +135,6 @@ function MonthCalendar() {
...currentTask,
}}
)
console.log(currentTask)
delete currentTask.infoForCell
await dispatch(addTask(currentTask))
}
......
planner-front/src/containers/MyTasks/MyTasks.js
View file @ d82cc5c0
......@@ -10,11 +10,11 @@ import {
Paper,
IconButton,
Tooltip,
Input,
} from "@mui/material";
import { useState, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Done, Edit, NavigateNextOutlined } from "@mui/icons-material";
import { Done, Edit } from "@mui/icons-material";
import DeleteIcon from "@mui/icons-material/Delete";
import TaskModal from "../../components/MyTasksCompoments/TaskModal/TaskModal";
import EnhancedTableHead from "./MyTasksHeader/MyTasksHeader";
......@@ -23,48 +23,19 @@ import MyTaskToolBar from "../../components/MyTasksCompoments/MyTaskToolBar";
import CustomTableCell from "../../components/MyTasksCompoments/CustomTableCell";
import MaterialUIPickers from "../../components/MyTasksCompoments/DateTimePicker/DateTimePicker";
import BasicSelect from "../../components/UI/Select/Select";
import { fetchAllTasks, deleteTask,editTask,addTask } from "../../store/actions/tasksActions";
import { fetchAllTasks, deleteTask,editTask} from "../../store/actions/tasksActions";
import NewTaskForm from "../../components/MyTasksCompoments/NewTaskForm";
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
export default function EnhancedTable() {
const dispatch = useDispatch();
useEffect(() => {
dispatch(fetchAllTasks());
}, [dispatch]);
const tasks = useSelector((state) => state.tasks.tasks);
const [recievedTasks, setRecievedTasks] = useState([]);
const [addTaskForm, setAddTaskForm] = useState(false);
const [order, setOrder] = useState("asc");
const [orderBy, setOrderBy] = useState("id");
const [page, setPage] = useState(0);
......@@ -73,13 +44,23 @@ export default function EnhancedTable() {
open: false,
task: null,
});
const projects=[
"project1",
"project2",
"project3"
]
const [projects,setProjects]=useState(['1','2'])
console.log(tasks)
useEffect(() => {
dispatch(fetchAllTasks());
filterProjectsNamesFromTasks()
if (tasks && tasks?.length > 0) {
setRecievedTasks(tasks);
}
}, [tasks===undefined,tasks?.length]);
useEffect(() => {
dispatch(fetchAllTasks());
}, [addTaskForm, setAddTaskForm]);
const handleRequestSort = (event, property) => {
const isAsc = orderBy === property && order === "asc";
setOrder(isAsc ? "desc" : "asc");
......@@ -95,21 +76,6 @@ export default function EnhancedTable() {
setPage(0);
};
useEffect(() => {
if (tasks && tasks?.length > 0) {
let currentTasks = [];
currentTasks = tasks?.map((task) => {
return {
...task,
isEditMode: false,
readOnly: true,
authorDisplayName: task.author.displayName,
};
});
setRecievedTasks(currentTasks);
}
}, [tasks]);
const onChange = (e, task) => {
const value = e.target.value;
const name = e.target.name;
......@@ -121,7 +87,6 @@ export default function EnhancedTable() {
}
return task;
});
setRecievedTasks(newTasks);
};
......@@ -137,7 +102,6 @@ export default function EnhancedTable() {
}
return task;
});
setRecievedTasks(newTasks);
};
......@@ -153,9 +117,25 @@ export default function EnhancedTable() {
});
setRecievedTasks(newTasks);
};
const onProjectChange = (e, task) => {
const value = e.target.value;
const project = rawProjects.find((e) => e.id === value);
const { id } = task;
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
const updated = { ...task };
updated.project = project;
updated.projectName = project.title;
return updated;
}
return task;
});
setRecievedTasks(newTasks);
};
const onToggleEditMode = (id) => {
console.log(id)
const newTasks = recievedTasks.map((task) => {
if (task.id === id) {
return {
......@@ -183,7 +163,7 @@ export default function EnhancedTable() {
setRecievedTasks(newTasks);
};
const HandleEditTask= (task)=>{
const handleEditTask= (task)=>{
dispatch(editTask(task))
}
......@@ -203,28 +183,34 @@ export default function EnhancedTable() {
// ++++++++фильтрация по проектам+++++++++++++++
const [projectName, setProjectName] = React.useState([]);
const [filter, setFilter] = React.useState(false);
const [filterProjectTumbler, setFilterProjectTumbler] = React.useState(false);
const onClose=(projectName)=>{
setFilter(true)
let tasksFilteredByProject = tasks
if (projectName.length>0) {
tasksFilteredByProject = tasks.filter(task=>projectName.includes(task.project?.title))
}
setRecievedTasks(tasksFilteredByProject)
setFilterProjectTumbler(true)
}
useEffect(() => {
const rawProjects= tasks?.map(task=>task.project)
const filterProjectsNamesFromTasks = ()=>{
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);
let rawSetProjectNames = []
for (let project of rawProjects){
if (project===null){
} else{
rawSetProjectNames.push(project.title)
}
}
let uniqueTitlesProjects = [...new Set(rawSetProjectNames)];
setProjects(uniqueTitlesProjects)
}
}, [filter==true]);
}
// ++++++++фильтрация по проектам+++++++++++++++
if (
tasks &&
tasks?.length > 0 &&
......@@ -235,15 +221,23 @@ export default function EnhancedTable() {
<Box sx={{ width: "fullwidth" }}>
<Paper sx={{ width: "100%", mb: 2 }}>
<MyTaskToolBar
onClick={() => {
addTask();
}}
onClick={() => setAddTaskForm(!addTaskForm)}
formStatus={addTaskForm}
projects={projects}
onClose={onClose}
projectName={projectName}
projectName={projectName}
setProjectName={setProjectName}
/>
{addTaskForm ? (
<NewTaskForm
tasks={recievedTasks}
projects={rawProjects}
setAddTaskForm={()=>setAddTaskForm(false)}
/>
) : null}
<TableContainer>
<Table sx={{ minWidth: 600 }} aria-labelledby="tableTitle">
<EnhancedTableHead
......@@ -253,27 +247,7 @@ export default function EnhancedTable() {
rowCount={tasks.length}
/>
<TableBody>
{/* <TableRow sx={{height:'1px',margin:0,padding:0}}>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="order" />
</TableCell>
<TableCell align="left">
<Input sx={{height:'1px',margin:0,padding:0}} value={''} name="orderBy" />
</TableCell>
</TableRow> */}
<NewTaskForm
onChange={onChange}
onModalOpen={onModalOpen}
onAuthorChange={onAuthorChange}
onDateChange={onDateChange}
onToggleEditMode={onToggleEditMode}
onToggleEditModeDone={onToggleEditModeDone}
HandleEditTask={HandleEditTask}
deleteHandle={deleteHandle}
/>
{stableSort(recievedTasks, getComparator(order, orderBy))
.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
.map((task, index) => {
......@@ -285,19 +259,38 @@ export default function EnhancedTable() {
scope="row"
padding="none"
></TableCell>
<CustomTableCell
{...{
task,
name: "priority",
value: task.priority,
onChange,
}}
/>
{task.isEditMode ? (
<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: "priority",
value: task.priority,
}}
/>
)}
<CustomTableCell
{...{
task,
name: "createdAt",
value: task.createdAt,
value: moment(task.createdAt)
.utc()
.format("DD-MM-YYYY hh:mm A"),
}}
/>
......@@ -311,22 +304,29 @@ export default function EnhancedTable() {
}}
/>
{task.isEditMode ? (
<BasicSelect
items={["project1", "project2", "project3"]}
task={task}
onChange={onChange}
/>
{task.isEditMode ? (
<TableCell>
<BasicSelect
items={rawProjects.map((e) => ({
value: e?.id,
title: e?.title,
}))}
task={task}
onChange={onProjectChange}
name="project"
value={task.project?.id}
/>
</TableCell>
) : (
<CustomTableCell
{...{
task,
name: "project",
value: task.project?.title,
onChange: onChange,
}}
/>
{...{
task,
name: "projectId",
value: task.project?.title,
}}
/>
)}
<CustomTableCell
{...{
task,
......@@ -353,11 +353,19 @@ export default function EnhancedTable() {
</TableCell>
{task.isEditMode ? (
<BasicSelect
items={["opened", "done", "failed"]}
task={task}
onChange={onChange}
/>
<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>
) : (
<CustomTableCell
{...{
......@@ -369,24 +377,29 @@ export default function EnhancedTable() {
)}
<TableCell>
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {onToggleEditModeDone(task.id); HandleEditTask(task) }}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
<Tooltip title="Редактировать">
{task.isEditMode ? (
<IconButton
aria-label="done"
onClick={() => {
onToggleEditModeDone(task.id);
handleEditTask(task);
}}
>
<Done />
</IconButton>
) : (
<IconButton
aria-label="edit"
onClick={() => onToggleEditMode(task.id)}
>
<Edit />
</IconButton>
)}
</Tooltip>
</TableCell>
<TableCell>
<Tooltip title="Delete">
<Tooltip title="Удалить">
<IconButton
onClick={(id) => {
deleteHandle(task.id);
......@@ -422,3 +435,32 @@ export default function EnhancedTable() {
);
}
}
function descendingComparator(a, b, orderBy) {
if (b[orderBy] < a[orderBy]) {
return -1;
}
if (b[orderBy] > a[orderBy]) {
return 1;
}
return 0;
}
function getComparator(order, orderBy) {
return order === "desc"
? (a, b) => descendingComparator(a, b, orderBy)
: (a, b) => -descendingComparator(a, b, orderBy);
}
function stableSort(array, comparator) {
const stabilizedThis = array?.map((el, index) => [el, index]);
stabilizedThis.sort((a, b) => {
const order = comparator(a[0], b[0]);
if (order !== 0) {
return order;
}
return a[1] - b[1];
});
return stabilizedThis.map((el) => el[0]);
}
planner-front/src/containers/MyTasks/MyTasksHeader/MyTasksHeader.js
View file @ d82cc5c0
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';
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',
id: "id",
numeric: true,
disablePadding: true,
label: '',
label: "",
},
{
id: 'priority',
id: "priority",
numeric: false,
disablePadding: true,
label: 'Приоритет',
label: "Приоритет",
},
{
id: 'createdAt',
id: "createdAt",
numeric: true,
disablePadding: false,
label: 'Дата создания',
label: "Дата создания",
},
{
id: 'title',
id: "title",
numeric: true,
disablePadding: false,
label: 'Заголовок',
label: "Заголовок",
},
{
id: 'project',
id: "projectName",
numeric: true,
disablePadding: false,
label: 'Проект',
label: "Проект",
},
{
id: 'authorDisplayName',
id: "authorDisplayName",
numeric: true,
disablePadding: false,
label: 'Автор',
label: "Автор",
},
{
id: 'dateTimeStart',
id: "dateTimeStart",
numeric: true,
disablePadding: false,
label: 'Дата начала',
label: "Дата начала",
},
{
id: 'dateTimeDue',
id: "dateTimeDue",
numeric: true,
disablePadding: false,
label: 'Дата завершения',
label: "Дата завершения",
},
{
id: 'accomplish',
id: "accomplish",
numeric: true,
disablePadding: false,
label: 'Статус',
label: "Статус",
},
{
id: 'change',
id: "change",
numeric: false,
disablePadding: false,
label: '',
label: "",
},
{
id: 'delete',
id: "delete",
numeric: false,
disablePadding: false,
label: '',
label: "",
},
];
export default function EnhancedTableHead(props) {
const { order, orderBy, rowCount, onRequestSort } =
props;
export default function EnhancedTableHead({ order, orderBy, rowCount, onRequestSort }) {
const createSortHandler = (property) => (event) => {
onRequestSort(event, property);
};
......@@ -88,23 +86,22 @@ export default function EnhancedTableHead(props) {
return (
<TableHead>
<TableRow>
{headCells.map((headCell) => (
<TableCell
key={headCell.id}
align={'center'}
padding={headCell.disablePadding ? 'none' : 'normal'}
align={"center"}
padding={headCell.disablePadding ? "none" : "normal"}
sortDirection={orderBy === headCell.id ? order : false}
>
<TableSortLabel
active={orderBy === headCell.id}
direction={orderBy === headCell.id ? order : 'asc'}
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'}
{order === "desc" ? "sorted descending" : "sorted ascending"}
</Box>
) : null}
</TableSortLabel>
......@@ -117,7 +114,7 @@ export default function EnhancedTableHead(props) {
EnhancedTableHead.propTypes = {
onRequestSort: PropTypes.func.isRequired,
order: PropTypes.oneOf(['asc', 'desc']).isRequired,
order: PropTypes.oneOf(["asc", "desc"]).isRequired,
orderBy: PropTypes.string.isRequired,
rowCount: PropTypes.number.isRequired,
};
planner-front/src/containers/NewProject/NewProject.js 0 → 100644
View file @ d82cc5c0
import {useNavigate} from "react-router-dom";
import {useDispatch, useSelector} from "react-redux";
import {Typography} from "@mui/material";
import { useEffect } from "react";
import ProjectForm from "../../components/ProjectForm/ProjectForm";
import { createProject, fetchProjects } from "../../store/actions/projectsActions";
const NewProject = () => {
const dispatch = useDispatch();
const projects = useSelector(state => state.projects.projects);
const navigate = useNavigate();
const onSubmit = async (projectData) => {
await dispatch(createProject(projectData, navigate));
};
useEffect(()=> {
dispatch(fetchProjects());
}, [dispatch])
return (
<>
<Typography variant="h2">New project</Typography>
<ProjectForm projects={projects} onSubmit={onSubmit} />
</>
);
};
export default NewProject;
\ No newline at end of file
planner-front/src/containers/Projects/Projects.js 0 → 100644
View file @ d82cc5c0
import { Grid, Typography, Button } from "@mui/material";
import { Link } from "react-router-dom";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import Loader from "../../components/UI/Loader/Loader";
import HasAccess from "../../components/UI/HasAccess/HasAccess";
import { fetchProjects } from "../../store/actions/projectsActions";
import ProjectsList from "../../components/ProjectsList/ProjectsList";
const Projects = () => {
const dispatch = useDispatch();
const { projects, loading } = useSelector(state => state.projects.projects);
console.log(projects)
console.log(loading)
useEffect(() => {
dispatch(fetchProjects())
}, [dispatch]);
return <>
{projects?.length > 0 ? (<>
<Grid container direction="column" spacing={2}>
<Grid
container
item
direction="row"
justifyContent="space-between"
alignItems="center"
>
<Grid item>
<Typography variant="h4">
Projects
</Typography>
</Grid>
<HasAccess roles={["superuser", "admin", "user"]} >
<Grid item>
<Button component={Link} to="/projects/add">
Add project
</Button>
</Grid>
</HasAccess>
</Grid>
<Loader loading={loading} />
<ProjectsList projects={projects} />
</Grid>
</>) :
<h1>Созданных проектов нет</h1>
}
</>
};
export default Projects;
\ No newline at end of file
planner-front/src/index.js
View file @ d82cc5c0
......@@ -7,6 +7,7 @@ import { Provider } from 'react-redux';
import usersReducer from './store/reducers/usersReducer';
import tasksReducer from './store/reducers/tasksReducer';
import axios from './axiosPlanner';
import projectsReducer from './store/reducers/projectsReducer';
const localStorageMiddleware = ({getState}) => (next) => (action) => {
const result = next(action);
......@@ -25,7 +26,8 @@ const loadFromLocalStorage = () => {
const store = configureStore({
reducer: {
users: usersReducer,
tasks: tasksReducer
tasks: tasksReducer,
projects: projectsReducer
},
preloadedState: loadFromLocalStorage(),
middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(localStorageMiddleware)
......
planner-front/src/store/actionTypes/projectsActionTypes.js 0 → 100644
View file @ d82cc5c0
export const FETCH_PROJECTS_REQUEST = "FETCH_PROJECTS_REQUEST";
export const FETCH_PROJECTS_SUCCESS = "FETCH_PROJECTS_SUCCESS";
export const FETCH_PROJECTS_ERROR = "FETCH_PROJECTS_ERROR";
export const FETCH_PROJECT_SUCCESS = "FETCH_PROJECT_SUCCESS";
export const CREATE_PROJECT_SUCCESS = "CREATE_PROJECT_SUCCESS";
planner-front/src/store/actionTypes/tasksTypes.js
View file @ d82cc5c0
......@@ -8,10 +8,16 @@ export const ADD_NEW_TASK_REQUEST = "ADD_NEW_TASK_REQUEST";
export const ADD_NEW_TASK_SUCCESS = "ADD_NEW_TASK_SUCCESS";
export const ADD_NEW_TASK_FAILURE = "ADD_NEW_TASK_FAILURE";
export const FETCH_TASKS_BY_PROJECT_REQUEST = "FETCH_TASKS_BY_PROJECT_REQUEST";
export const FETCH_TASKS_BY_PROJECT_SUCCESS = "FETCH_TASKS_BY_PROJECT_SUCCESS";
export const FETCH_TASKS_BY_PROJECT_FAILURE = "FETCH_TASKS_BY_PROJECT_FAILURE";
export const EDIT_TASK_REQUEST = "EDIT_TASK_REQUEST";
export const EDIT_TASK_SUCCESS = "EDIT_TASK_SUCCESS";
export const EDIT_TASK_FAILURE = "EDIT_TASK_FAILURE";
export const DELETE_TASK_REQUEST = "DELETE_TASK_REQUEST";
export const DELETE_TASK_SUCCESS = "DELETE_TASK_SUCCESS";
export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
\ No newline at end of file
export const DELETE_TASK_FAILURE = "DELETE_TASK_FAILURE";
export const EDIT_CALENDAR_TASK = "EDIT_CALENDAR_TASK";
\ No newline at end of file
planner-front/src/store/actions/projectsActions.js 0 → 100644
View file @ d82cc5c0
import axios from "../../axiosPlanner";
import { CREATE_PROJECT_SUCCESS, FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
import { showNotification } from "./commonActions";
const fetchProjectsRequest = () => {
return {type: FETCH_PROJECTS_REQUEST}
};
const fetchProjectsSuccess = (projects) => {
return {type: FETCH_PROJECTS_SUCCESS, projects};
};
const fetchProjectSuccess = (project) => {
return {type: FETCH_PROJECT_SUCCESS, project};
};
const fetchProjectsError = (error) => {
return {type: FETCH_PROJECTS_ERROR, error};
}
const createProjectSuccess = () => {
return {type: CREATE_PROJECT_SUCCESS};
};
export const fetchProjects = () => {
return async dispatch => {
dispatch(fetchProjectsRequest());
try {
const response = await axios.get("/projects");
dispatch(fetchProjectsSuccess(response.data));
} catch(e) {
dispatch(fetchProjectsError(e));
}
};
};
export const fetchProject = (id) => {
return async dispatch => {
dispatch(fetchProjectsRequest());
try {
const response = await axios.get("/projects/" + id);
dispatch(fetchProjectSuccess(response.data));
} catch (e) {
dispatch(fetchProjectsError(e));
}
}
};
export const createProject = (projectData, navigate) => {
return async (dispatch) => {
try {
await axios.post("/projects", projectData);
dispatch(createProjectSuccess());
navigate("/");
dispatch(showNotification("Проект успешно создан"))
} catch (e) {
console.log(e);
dispatch(showNotification("Не удалось создать проект", "error"))
}
};
}
\ No newline at end of file
planner-front/src/store/actions/tasksActions.js
View file @ d82cc5c0
......@@ -11,7 +11,11 @@ import {
FETCH_CALENDAR_TASKS_FAILURE,
FETCH_CALENDAR_TASKS_REQUEST,
FETCH_CALENDAR_TASKS_SUCCESS,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
FETCH_ALL_TASKS_SUCCESS,
FETCH_TASKS_BY_PROJECT_SUCCESS,
FETCH_TASKS_BY_PROJECT_FAILURE,
FETCH_TASKS_BY_PROJECT_REQUEST
} from "../actionTypes/tasksTypes";
import axios from '../../axiosPlanner'
const fetchCalendarTasksRequest = () => {
......@@ -65,13 +69,33 @@ const addTaskFailure = (error) => {
return {type: ADD_NEW_TASK_FAILURE, error}
};
// export const addTask = (task) => {
// return async (dispatch, getState) => {
// dispatch(addTaskRequest());
// const token = getState().users?.user?.token;
// try {
// await axios.post("/tasks", task, {
// headers: {
// Authorization: token,
// },
// });
// dispatch(addTaskSuccess());
// dispatch(fetchCalendarTasks());
// } catch (error) {
// dispatch(addTaskFailure(error.response.data));
// }
// };
// };
export const addTask = (task) => {
return async (dispatch, getState) => {
dispatch(addTaskRequest());
const token = getState().users?.user?.token;
// const token = getState().users?.user?.token;
try {
await axios.post("/tasks", task);
dispatch(addTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
} catch (error) {
dispatch(addTaskFailure(error.response.data));
......@@ -96,9 +120,7 @@ export const editTask = (task) => {
dispatch(editTaskRequest());
// const token = getState().users?.user?.token;
try {
console.log('task' , task)
const r=await axios.put("/tasks/", task);
console.log(r)
await axios.put("/tasks/", task);
dispatch(editTaskSuccess())
dispatch(fetchAllTasks())
dispatch(fetchCalendarTasks())
......@@ -133,4 +155,29 @@ export const deleteTask = (taskId) => {
dispatch(deleteTaskFailure(error.response.data));
}
}
}
const fetchTasksByProjectRequest = () => {
return {type: FETCH_TASKS_BY_PROJECT_REQUEST}
};
const fetchTasksByProjectSuccess = () => {
return {type: FETCH_TASKS_BY_PROJECT_SUCCESS}
};
const fetchTasksByProjectFailure = (error) => {
return {type: FETCH_TASKS_BY_PROJECT_FAILURE, error}
};
export const fetchTasksByProject = (projects) => {
return async (dispatch) => {
dispatch(fetchTasksByProjectRequest());
try {
const response =await axios.post("/tasks/project", projects);
dispatch(fetchTasksByProjectSuccess(response.data.tasks))
} catch (error) {
dispatch(fetchTasksByProjectFailure(error.response.data));
}
}
}
\ No newline at end of file
planner-front/src/store/actions/usersActions.js
View file @ d82cc5c0
import axios from "../../axiosPlanner";
import { LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/actionTypes"
import { LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS } from "../actionTypes/userActionTypes"
import { showNotification } from "./commonActions";
const registerUserRequest = () => {
......@@ -18,9 +18,7 @@ export const registerUser = (userData, navigate) => {
return async (dispatch) => {
dispatch(registerUserRequest());
try {
console.log("register " + userData)
const response = await axios.post("/users", userData);
console.log(response)
const response = await axios.post("/users", userData);
dispatch(registerUserSuccess())
navigate("/")
} catch (error) {
......@@ -51,9 +49,7 @@ const logoutUserFailure = (error) => {
export const loginUser = (userData, navigate) => {
return async (dispatch) => {
try {
console.log(userData)
const response = await axios.post("users/sessions", userData);
console.log(response)
dispatch(loginUserSuccess(response.data.user));
navigate("/")
} catch (e) {
......
planner-front/src/store/reducers/projectsReducer.js 0 → 100644
View file @ d82cc5c0
import {FETCH_PROJECTS_ERROR, FETCH_PROJECTS_REQUEST, FETCH_PROJECTS_SUCCESS, FETCH_PROJECT_SUCCESS } from "../actionTypes/projectsActionTypes";
const initialState = {
projects: [],
project: "",
loading: false,
error: null
};
const projectsReducer = (state = initialState, action) => {
switch (action.type) {
case FETCH_PROJECTS_REQUEST:
return {...state, loading: true};
case FETCH_PROJECTS_SUCCESS:
return {...state, loading: false, projects: action.projects};
case FETCH_PROJECTS_ERROR:
return {...state, loading: false, error: action.error};
case FETCH_PROJECT_SUCCESS:
return {...state, loading: false, project: action.project}
default:
return state;
}
};
export default projectsReducer;
\ No newline at end of file
planner-front/src/store/reducers/tasksReducer.js
View file @ d82cc5c0
......@@ -11,7 +11,12 @@ import {
DELETE_TASK_SUCCESS,
DELETE_TASK_REQUEST,
DELETE_TASK_FAILURE,
FETCH_ALL_TASKS_SUCCESS} from "../actionTypes/tasksTypes";
FETCH_ALL_TASKS_SUCCESS,
EDIT_CALENDAR_TASK,
FETCH_TASKS_BY_PROJECT_REQUEST,
FETCH_TASKS_BY_PROJECT_SUCCESS,
FETCH_TASKS_BY_PROJECT_FAILURE
} from "../actionTypes/tasksTypes";
const initialState = {
calendarTasks: [],
......@@ -38,7 +43,8 @@ const tasksReduсer = (state = initialState, action) => {
const timeEndHour = parseInt(timeEnd.split(':')[0])
const timeStartMinute = parseInt(timeStart.split(':')[1])
const timeEndMinute = parseInt(timeEnd.split(':')[1])
newArr.push({...task, infoForCell: {
const newObj = {...task,
infoForCell: {
startDay: dayStart,
startHour: timeStartHour,
startMonth: monthStartNumber,
......@@ -46,8 +52,9 @@ const tasksReduсer = (state = initialState, action) => {
startMinute: timeStartMinute,
endHour: timeEndHour,
endMinute: timeEndMinute,
}
} )
}
}
newArr.push(newObj)
}
}
})
......@@ -62,6 +69,12 @@ const tasksReduсer = (state = initialState, action) => {
return {...state, loading: true};
case ADD_NEW_TASK_FAILURE:
return {...state, loading: false, error: action.error};
case FETCH_TASKS_BY_PROJECT_SUCCESS:
return {...state, loading: false, tasks: action.tasks};
case FETCH_TASKS_BY_PROJECT_REQUEST:
return {...state, loading: true};
case FETCH_TASKS_BY_PROJECT_FAILURE:
return {...state, loading: false, error: action.error};
case EDIT_TASK_SUCCESS:
return {...state, loading: false};
case EDIT_TASK_REQUEST:
......
planner-front/src/store/reducers/usersReducer.js
View file @ d82cc5c0
import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS } from "../actionTypes/actionTypes";
import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS } from "../actionTypes/userActionTypes";
const initialState = {
user: null,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment