Skip to content

P
planner-team-one
Commit 8f1aa7fe authored by Ermolaev Timur's avatar Ermolaev Timur
Browse files
Options

Merge branch 'task-100-feature/create_logic_for_tasks' into 'development' 

Task 100 feature/create logic for tasks

See merge request !74
parents 6b73c9c8 a43800ac
Show whitespace changes
Inline Side-by-side
Showing with 697 additions and 658 deletions
planner-front/src/components/Menus/AdminMenu/AdminMenu.js
View file @ 8f1aa7fe
import {Button} from "@mui/material"; import { Button } from "@mui/material";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
import { superuserMenuButtons } from "../../../constants"; import { superuserMenuButtons } from "../../../constants";
import ProfileBlock from "../ProfileBlock/ProfileBlock"; import ProfileBlock from "../ProfileBlock/ProfileBlock";
const AdminMenu = () => { const AdminMenu = () => {
return <> return <>
{superuserMenuButtons.map((button, i)=>{ {superuserMenuButtons.map((button, i) => {
return( return (
<Button <Button
key={i} key={i}
component={NavLink} component={NavLink}
...@@ -19,7 +19,7 @@ const AdminMenu = () => { ...@@ -19,7 +19,7 @@ const AdminMenu = () => {
</Button> </Button>
) )
})} })}
<ProfileBlock/> <ProfileBlock />
</> </>
}; };
......
planner-front/src/components/Menus/AnonymousMenu/AnonymousMenu.js
View file @ 8f1aa7fe
import {Button} from "@mui/material"; import { Button } from "@mui/material";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
import { anonymoysMenuButtons } from "../../../constants"; import { anonymoysMenuButtons } from "../../../constants";
const AnonymousMenu = () => { const AnonymousMenu = () => {
return <> return <>
{anonymoysMenuButtons.map((button, i)=>{ {anonymoysMenuButtons.map((button, i) => {
return( return (
<Button <Button
key={i} key={i}
component={NavLink} component={NavLink}
......
planner-front/src/components/Menus/WorkerMenu/WorkerMenu.js
View file @ 8f1aa7fe
import {Button} from "@mui/material"; import { Button } from "@mui/material";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
import { workerMenuButtons } from "../../../constants"; import { workerMenuButtons } from "../../../constants";
import ProfileBlock from "../ProfileBlock/ProfileBlock"; import ProfileBlock from "../ProfileBlock/ProfileBlock";
const WorkerMenu = () => { const WorkerMenu = () => {
return <> return <>
{workerMenuButtons.map((button, i)=>{ {workerMenuButtons.map((button, i) => {
return( return (
<Button <Button
key={i} key={i}
component={NavLink} component={NavLink}
...@@ -20,7 +20,7 @@ const WorkerMenu = () => { ...@@ -20,7 +20,7 @@ const WorkerMenu = () => {
) )
})} })}
<ProfileBlock/> <ProfileBlock />
</> </>
}; };
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow.js
View file @ 8f1aa7fe
import { Grid } from "@mui/material"; import { Grid } from "@mui/material";
const CalendarRow = ({children, week}) => { const CalendarRow = ({ children, week }) => {
return <> return <>
<Grid <Grid
container container
align='center' align='center'
sx={{borderBottom: week ? null : '1px solid black', borderLeft: '1px solid black'}} sx={{ borderBottom: week ? null : '1px solid black', borderLeft: '1px solid black' }}
> >
{children} {children}
</Grid> </Grid>
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 8f1aa7fe
import { Grid } from "@mui/material"; import { Grid } from "@mui/material";
import { memo, useMemo} from "react"; import { memo, useMemo } from "react";
import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../helpers/CalendarHelpers";
import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell"; import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask"; import CalendarTask from "../CalendarTask/CalendarTask";
import EmptyBox from "./EmptyBox/EmptyBox"; import EmptyBox from "./EmptyBox/EmptyBox";
import { getAvailableTasks, getBoxesInLine, getLinesInDay, getSortedTasks } from "./Helpers"; import { getBoxesInLine } from "./Helpers";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) => { const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat, setCurrentLine, currentLine, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
const hours = useMemo(()=>{ const hours = useMemo(() => {
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))}, return getHoursInDayNumbers(hoursInDay)
[hoursInDay]) }, [hoursInDay])
const availableTasks = useMemo(() => { const availableTasks = useMemo(() => {
return getAvailableTasks(tasks, year, month, day.dayNumber) return getAvailableTasks(tasks, year, month, day.dayNumber)
...@@ -29,9 +30,9 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -29,9 +30,9 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
item item
xs={10.8} xs={10.8}
align='center' align='center'
sx={{position: 'relative'}} sx={{ position: 'relative' }}
> >
{hoursInDay.map((hour, i)=>{ {hoursInDay.map((hour, i) => {
return ( return (
<CalendarStandartCell <CalendarStandartCell
linesInDay={linesInDay} linesInDay={linesInDay}
...@@ -48,21 +49,21 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -48,21 +49,21 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
</CalendarStandartCell> </CalendarStandartCell>
) )
})} })}
<Grid sx={{position: 'absolute', top: '0'}} container item xs={12}> <Grid sx={{ position: 'absolute', top: '0' }} container item xs={12}>
{linesInDay?.map((line, i)=>{ {linesInDay?.map((line, i) => {
const boxes = getBoxesInLine(line, hoursInDay, sortedTasks) const boxes = getBoxesInLine(line, hoursInDay, sortedTasks)
return( return (
<Grid key={i} container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px'}}> <Grid key={i} container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px' }}>
{boxes.map((box, index)=>{ {boxes.map((box, index) => {
if (box.task) { if (box.task) {
return (<Grid return (<Grid
item xs={box.xs} item xs={box.xs}
key={box.task.id} key={box.task.id}
sx={{height: '35px', marginBottom: '5px'}} sx={{ height: '35px', marginBottom: '5px' }}
> >
<CalendarTask <CalendarTask
dragTaskHandler={dragTaskHandler} dragTaskHandler={dragTaskHandler}
setCurrentLine={()=>{setCurrentLine(day.dayNumber)}} setCurrentLine={() => { setCurrentLine(day.dayNumber) }}
currentTask={currentTask} currentTask={currentTask}
currentLine={currentLine} currentLine={currentLine}
hour={parseInt(hours[index])} hour={parseInt(hours[index])}
...@@ -93,10 +94,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -93,10 +94,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
})} })}
</Grid> </Grid>
<Grid container sx={{height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px', position: 'absolute', bottom: '0'}}> <Grid container sx={{ height: '35px', backgroundColor: 'rgb(0,0,0,0)', marginBottom: '5px', position: 'absolute', bottom: '0' }}>
{hoursInDay.map((hour, i)=>{ {hoursInDay.map((hour, i) => {
const hourNumber = parseInt(hour) const hourNumber = parseInt(hour)
return(<EmptyBox return (<EmptyBox
key={i} key={i}
modal={modal} modal={modal}
dayNumber={day.dayNumber} dayNumber={day.dayNumber}
...@@ -115,8 +116,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -115,8 +116,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
</> </>
}; };
export default memo(CalendarRowDay, (prevProps, nextProps)=>{ export default memo(CalendarRowDay, (prevProps, nextProps) => {
if(!prevProps.modal) return false if (!prevProps.modal) return false
if(nextProps.modal) return true if (nextProps.modal) return true
}); });
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRowDay/EmptyBox/EmptyBox.js
View file @ 8f1aa7fe
import { Grid} from "@mui/material"; import { Grid } from "@mui/material";
import React, { memo, useEffect, useState} from "react"; import React, { memo, useEffect, useState } from "react";
import DefaultTask from "../../DefaultTask/DefaultTask"; import DefaultTask from "../../DefaultTask/DefaultTask";
const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask}) => { const EmptyBox = ({ hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal, createTaskInCellHandler, copyTask, createCopyTask }) => {
const [isThisCell, setIsThisCell] = useState(false) const [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{ useEffect(() => {
if(!modal) { if (!modal) {
setIsThisCell(false); setIsThisCell(false);
} }
}, [modal]) }, [modal])
...@@ -30,10 +30,10 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal ...@@ -30,10 +30,10 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
dragTaskHandler(dayNumber, hourNumber) dragTaskHandler(dayNumber, hourNumber)
} }
return(<Grid return (<Grid
onDragOver={(e)=>{dragOverHandler(e)}} onDragOver={(e) => { dragOverHandler(e) }}
onDrop={(e)=>{dropHandler(e)}} onDrop={(e) => { dropHandler(e) }}
onClick={(e)=>{onClickHandler(e, dayNumber, hourNumber)}} onClick={(e) => { onClickHandler(e, dayNumber, hourNumber) }}
className='test_empty_box' className='test_empty_box'
item xs={xs} sx={{ item xs={xs} sx={{
height: '40px', height: '40px',
...@@ -42,11 +42,11 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal ...@@ -42,11 +42,11 @@ const EmptyBox = ({hourNumber, handleOpen, dayNumber, xs, dragTaskHandler, modal
cursor: copyTask ? 'pointer' : 'default' cursor: copyTask ? 'pointer' : 'default'
}}> }}>
{isThisCell ? {isThisCell ?
<DefaultTask/> : ' '} <DefaultTask /> : ' '}
</Grid>) </Grid>)
}; };
export default memo(EmptyBox, (prevProps, nextProps)=>{ export default memo(EmptyBox, (prevProps, nextProps) => {
if(!prevProps.modal) return false if (!prevProps.modal) return false
if(nextProps.modal) return true if (nextProps.modal) return true
}); });
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRowDay/Helpers.js
View file @ 8f1aa7fe
const taskIsAvailableInCell = (task, hour, hourDiffEnd, hourDiff, hourFormat) => {
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)) {
return true
} else {
return false
}
}
const lastPlaceInLineForTask = (task, hour, hourDiffEnd, hourFormat) => {
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
return true
} else {
return false
}
}
export const getLinesInDay = (availableTasks, sortedTasks, hoursInDay, hours, hourFormat) => {
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 (taskIsAvailableInCell(task, hour, hourDiffEnd, hourDiff, hourFormat)) {
if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) {
const hour = hours[a]
if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
if (isNaN(line[a])) {
havePlace = false
break;
}
}
}
if (!havePlace) {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
havePlace = true
break;
}
line[i] += `-${k}`
if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
skipLine = true
break;
}
} else {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
break;
}
}
}
}
}
}
return lines
}
export const getSortedTasks = (availableTasks) => {
if (availableTasks.length) {
const newSortedArr = [...availableTasks].sort(function(a,b){
const durattionFirstDate = a.infoForCell.endHour - a.infoForCell.startHour
const durattionSecondDate = b.infoForCell.endHour - b.infoForCell.startHour
return durattionSecondDate - durattionFirstDate;
})
return newSortedArr
}
}
export const getAvailableTasks = (tasks, year, month, dayNumber) => {
const tasksInDay = tasks.filter((task)=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (dayNumber === task.infoForCell.startDay) {
return task
} else {return false}
} else {return false}
} else {return false}
})
return tasksInDay
}
export const getBoxesInLine = (line, hoursInDay, sortedTasks) => { export const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
if (line) { if (line) {
let xs = 12/hoursInDay.length let xs = 12/hoursInDay.length
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell.js
View file @ 8f1aa7fe
import { Grid } from "@mui/material"; import { Grid } from "@mui/material";
import { memo } from "react"; import { memo } from "react";
const CalendarSmallCell = ({children, xs, week}) => { const CalendarSmallCell = ({ children, xs, week }) => {
return <> return <>
<Grid align='center' item xs={xs} sx={{borderRight: week ? null : '1px solid black', height: week ? '40px' : null, borderBottom: week ? '1px solid black' : null,}}> <Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '40px' : null, borderBottom: week ? '1px solid black' : null, }}>
{children} {children}
</Grid> </Grid>
</> </>
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js
View file @ 8f1aa7fe
import { Grid} from "@mui/material"; import { Grid } from "@mui/material";
import { memo, useEffect, useState } from "react"; import { memo, useEffect, useState } from "react";
import DefaultTask from "../DefaultTask/DefaultTask"; import DefaultTask from "../DefaultTask/DefaultTask";
const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week}) => { const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week }) => {
const [isThisCell, setIsThisCell] = useState(false) const [isThisCell, setIsThisCell] = useState(false)
const cellClass = { const cellClass = {
position: 'relative', position: 'relative',
height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${40}px`, height: linesInDay?.length ? `${40 * linesInDay.length + 35}px` : `${40}px`,
borderRight: '1px solid black', borderRight: '1px solid black',
borderBottom: week ?'1px solid black' : null, borderBottom: week ? '1px solid black' : null,
} }
useEffect(()=>{ useEffect(() => {
if(!modal) { if (!modal) {
setIsThisCell(false); setIsThisCell(false);
} }
}, [modal]) }, [modal])
...@@ -41,19 +41,19 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCell ...@@ -41,19 +41,19 @@ const CalendarStandartCell = ({children, xs, hours, dayNumber, createTaskInCell
<Grid <Grid
item xs={xs} item xs={xs}
sx={cellClass} sx={cellClass}
onClick={(e)=>{onClickHandler(e)}} onClick={(e) => { onClickHandler(e) }}
onDragOver={(e)=>{dragOverHandler(e)}} onDragOver={(e) => { dragOverHandler(e) }}
onDrop={(e)=>{dropHandler(e)}} onDrop={(e) => { dropHandler(e) }}
> >
{children} {children}
{isThisCell ? {isThisCell ?
<DefaultTask/> : null} <DefaultTask /> : null}
</Grid> </Grid>
</> </>
}; };
export default memo(CalendarStandartCell, (prevProps, nextProps)=>{ export default memo(CalendarStandartCell, (prevProps, nextProps) => {
if(!prevProps.modal) return false if (!prevProps.modal) return false
if(nextProps.modal) return true if (nextProps.modal) return true
}); });
\ No newline at end of file \ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 8f1aa7fe
import { Grid} from "@mui/material"; import { Grid } from "@mui/material";
import React, { memo, useEffect, useState} from "react"; import React, { memo, useEffect, useState } from "react";
import ContentCopyIcon from '@mui/icons-material/ContentCopy'; import ContentCopyIcon from '@mui/icons-material/ContentCopy';
const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask}) => { const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask }) => {
const [color, setColor] = useState('') const [color, setColor] = useState('')
useEffect(() => { useEffect(() => {
...@@ -17,7 +17,7 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, s ...@@ -17,7 +17,7 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, s
const onClickTaskHandler = (e, task) => { const onClickTaskHandler = (e, task) => {
e.stopPropagation(); e.stopPropagation();
setCurrentTask((prevState)=>{ setCurrentTask((prevState) => {
return { return {
...task, ...task,
infoForCell: { infoForCell: {
...@@ -43,16 +43,16 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, s ...@@ -43,16 +43,16 @@ const CalendarTask = ({setCurrentTask, handleOpen, task, line, setCurrentLine, s
return (<> return (<>
<Grid <Grid
draggable={true} draggable={true}
onDragLeave={(e)=>{dragLeaveHandler(e)}} onDragLeave={(e) => { dragLeaveHandler(e) }}
onDragStart={(e)=>{dragStartHandler(e, line, task)}} onDragStart={(e) => { dragStartHandler(e, line, task) }}
onDragEnd={(e)=>{dragEndHandler(e)}} onDragEnd={(e) => { dragEndHandler(e) }}
sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px'}} sx={{ position: 'relative', height: '30px', backgroundColor: color, borderRadius: '10px', margin: '5px 10px', display: 'flex', alignItems: 'center', zIndex: '5', justifyContent: 'space-between', padding: '0 15px' }}
onClick={(e)=>{onClickTaskHandler(e, task)}} onClick={(e) => { onClickTaskHandler(e, task) }}
> >
<span style={{maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}> <span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
{task.title} {task.title}
</span> </span>
<ContentCopyIcon sx={{width: '20px', cursor: 'pointer'}} onClick={(e)=>{e.stopPropagation(); setCopyTask(task)}}> <ContentCopyIcon sx={{ width: '20px', cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
</ContentCopyIcon> </ContentCopyIcon>
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/DefaultTask/DefaultTask.js
View file @ 8f1aa7fe
...@@ -17,7 +17,7 @@ const DefaultTaskStyles = { ...@@ -17,7 +17,7 @@ const DefaultTaskStyles = {
zIndex: '5' zIndex: '5'
} }
const DefaultTask = ({}) => { const DefaultTask = ({ }) => {
return (<> return (<>
<Box <Box
......
planner-front/src/components/MonthCalendar/MonthCalendarBody/MonthCalendarBody.js
View file @ 8f1aa7fe
import { Box, FormControlLabel, Switch} from "@mui/material"; import { Box, FormControlLabel, Switch } from "@mui/material";
import { useState } from "react"; import { useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow"; import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell"; import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
...@@ -8,12 +8,12 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda ...@@ -8,12 +8,12 @@ import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalenda
import CalendarRowDay from "./CalendarRowDay/CalendarRowDay"; import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) { function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) {
const [currentLine, setCurrentLine] = useState('') const [currentLine, setCurrentLine] = useState('')
const [modal, setModal] = useState({open:false, y: 0, x: 0,}); const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
const handleOpen = (e) => { const handleOpen = (e) => {
setModal( { setModal({
open: true, open: true,
yClickСordinates: e.clientY, yClickСordinates: e.clientY,
xClickСordinates: e.clientX, xClickСordinates: e.clientX,
...@@ -25,23 +25,23 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -25,23 +25,23 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
}; };
const handleClose = () => { const handleClose = () => {
setModal({...modal, open: false}) setModal({ ...modal, open: false })
setCurrentTask({}) setCurrentTask({})
}; };
return ( return (
<Box style={{marginBottom: '30px'}}> <Box style={{ marginBottom: '30px' }}>
<div style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}> <div style={{ position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey' }}>
<CalendarRow <CalendarRow
> >
<CalendarSmallCell xs={1.2}> <CalendarSmallCell xs={1.2}>
<FormControlLabel <FormControlLabel
control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>} control={<Switch color="primary" checked={hourFormat} onChange={() => { setHourFormat(() => !hourFormat) }} />}
label="1 час" label="1 час"
labelPlacement="end" labelPlacement="end"
/> />
</CalendarSmallCell> </CalendarSmallCell>
{hoursInDay?.map((hours, i)=>{ {hoursInDay?.map((hours, i) => {
return ( return (
<CalendarStandartCell key={i} xs={cellSizes.standarCell}> <CalendarStandartCell key={i} xs={cellSizes.standarCell}>
{hours} {hours}
...@@ -50,7 +50,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -50,7 +50,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
})} })}
</CalendarRow> </CalendarRow>
</div> </div>
{daysInMonth?.map((day, i)=>{ {daysInMonth?.map((day, i) => {
return ( return (
<CalendarRow <CalendarRow
key={i} key={i}
...@@ -83,7 +83,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -83,7 +83,7 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
})} })}
<ModalTask <ModalTask
modal={modal} modal={modal}
handleClose={()=>{handleClose()}} handleClose={() => { handleClose() }}
> >
<MonthCalendarModalContent <MonthCalendarModalContent
title={currentTask.title} title={currentTask.title}
...@@ -91,9 +91,9 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current ...@@ -91,9 +91,9 @@ function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, current
priority={currentTask.priority} priority={currentTask.priority}
startHour={currentTask.infoForCell?.startHour} startHour={currentTask.infoForCell?.startHour}
endHour={currentTask.infoForCell?.endHour} endHour={currentTask.infoForCell?.endHour}
onChangeCurrentTaskHandler={(e)=>{ onChangeCurrentTaskHandler(e)}} onChangeCurrentTaskHandler={(e) => { onChangeCurrentTaskHandler(e) }}
sendNewTaskHandler={()=>{sendNewTaskHandler(); handleClose()}} sendNewTaskHandler={() => { sendNewTaskHandler(); handleClose() }}
deleteTaskHandler={()=>{deleteTaskHandler(currentTask.id); handleClose()}} deleteTaskHandler={() => { deleteTaskHandler(currentTask.id); handleClose() }}
/> />
</ModalTask> </ModalTask>
</Box> </Box>
......
planner-front/src/components/MonthCalendar/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js
View file @ 8f1aa7fe
...@@ -3,7 +3,7 @@ import { Box, Typography } from '@mui/material'; ...@@ -3,7 +3,7 @@ import { Box, Typography } from '@mui/material';
import { memo } from 'react'; import { memo } from 'react';
import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton'; import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton'; import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMonth}) { function MonthAndYearInfo({ currentMonthString, year, incrementMonth, decrementMonth }) {
return ( return (
<> <>
...@@ -35,7 +35,7 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo ...@@ -35,7 +35,7 @@ function MonthAndYearInfo({currentMonthString, year, incrementMonth, decrementMo
onClick={incrementMonth} onClick={incrementMonth}
/> />
</Box> </Box>
</> ); </>);
} }
export default memo(MonthAndYearInfo); export default memo(MonthAndYearInfo);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader.js
View file @ 8f1aa7fe
import { AppBar, Toolbar} from '@mui/material'; import { AppBar, Toolbar } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo'; import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
import СustomSelect from '../../UI/СustomSelect/СustomSelect' import СustomSelect from '../../UI/СustomSelect/СustomSelect'
const workers = [{value: '', text: '--выберите сотрудника--'}, {value: 'Василий', text: 'Василий'}, {value: 'Никита', text: 'Никита'}] const workers = [{ value: '', text: '--выберите сотрудника--' }, { value: 'Василий', text: 'Василий' }, { value: 'Никита', text: 'Никита' }]
const types = [{value: 'Месяц', text: 'Месяц'}, {value: 'Неделя', text: 'Неделя'}] const types = [{ value: 'Месяц', text: 'Месяц' }, { value: 'Неделя', text: 'Неделя' }]
function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year}) { function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year }) {
return ( return (
<> <>
...@@ -22,15 +22,15 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont ...@@ -22,15 +22,15 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
/> />
<СustomSelect <СustomSelect
value={worker} value={worker}
onChange={(e)=>{onChangeWorkerHandler(e)}} onChange={(e) => { onChangeWorkerHandler(e) }}
label={'Сотрудник'} label={'Сотрудник'}
id={'worker'} id={'worker'}
items={workers} items={workers}
/> />
<div style={{marginLeft: '20px'}}> <div style={{ marginLeft: '20px' }}>
<СustomSelect <СustomSelect
value={calendarType} value={calendarType}
onChange={(e)=>{onChangeCalendarTypeHandler(e)}} onChange={(e) => { onChangeCalendarTypeHandler(e) }}
label={'Календарь'} label={'Календарь'}
id={'calendar-type'} id={'calendar-type'}
items={types} items={types}
......
planner-front/src/components/MonthCalendar/MonthCalendarModalContent/MonthCalendarModalContent.js
View file @ 8f1aa7fe
import { Button, TextField } from "@mui/material"; import { Button, TextField } from "@mui/material";
import { memo } from "react"; import { memo } from "react";
import { priorities } from "../../../constants";
import CustomSelect from '../../UI/СustomSelect/СustomSelect' import CustomSelect from '../../UI/СustomSelect/СustomSelect'
const priorities = [{value: null, text: '--Приоритет--'}, {value: 'A', text: 'A'}, {value: 'B', text: 'B'}, {value: 'C', text: 'C'}]
function MonthCalendarModalContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour }) {
function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour}) {
return (<> return (<>
<TextField <TextField
id="task-description-title" id="task-description-title"
value={title} value={title}
label="Название" label="Название"
variant="outlined" variant="outlined"
sx={{marginBottom: '30px'}} sx={{ marginBottom: '30px' }}
name='title' name='title'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}} onChange={(e) => { onChangeCurrentTaskHandler(e) }}
/> />
<TextField <TextField
id="task-description" id="task-description"
...@@ -23,28 +22,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti ...@@ -23,28 +22,28 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
value={description} value={description}
label="Описание" label="Описание"
variant="outlined" variant="outlined"
sx={{marginBottom: '30px'}} sx={{ marginBottom: '30px' }}
name='description' name='description'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}} onChange={(e) => { onChangeCurrentTaskHandler(e) }}
/> />
<CustomSelect <CustomSelect
defaultValue={null} defaultValue={null}
value={priority} value={priority}
name={'priority'} name={'priority'}
variant={'outlined'} variant={'outlined'}
onChange={(e)=>{onChangeCurrentTaskHandler(e)}} onChange={(e) => { onChangeCurrentTaskHandler(e) }}
label={'Приоритет'} label={'Приоритет'}
id={'priority-type'} id={'priority-type'}
items={priorities} items={priorities}
/> />
<div style={{display: 'flex', gap: '20px', margin: '20px 0'}}> <div style={{ display: 'flex', gap: '20px', margin: '20px 0' }}>
<TextField <TextField
id="task-startHour" id="task-startHour"
value={startHour} value={startHour}
label="От" label="От"
variant="outlined" variant="outlined"
name='startHour' name='startHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}} onChange={(e) => { onChangeCurrentTaskHandler(e) }}
/> />
<TextField <TextField
id="task-endHour" id="task-endHour"
...@@ -52,11 +51,11 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti ...@@ -52,11 +51,11 @@ function MonthCalendarModalContent({title, onChangeCurrentTaskHandler, descripti
label="До" label="До"
variant="outlined" variant="outlined"
name='endHour' name='endHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}} onChange={(e) => { onChangeCurrentTaskHandler(e) }}
/> />
</div> </div>
<div style={{display: 'flex', gap: '20px', margin: '10px 0'}}> <div style={{ display: 'flex', gap: '20px', margin: '10px 0' }}>
<Button id='test_button_save_task'onClick={sendNewTaskHandler}>Сохранить</Button> <Button id='test_button_save_task' onClick={sendNewTaskHandler}>Сохранить</Button>
<Button onClick={deleteTaskHandler}>Удалить</Button> <Button onClick={deleteTaskHandler}>Удалить</Button>
</div> </div>
</>); </>);
......
planner-front/src/components/UI/AppToolBar/AppToolBar.js
View file @ 8f1aa7fe
import {AppBar, Box, Toolbar, Typography} from "@mui/material"; import { AppBar, Box, Toolbar, Typography } from "@mui/material";
import {NavLink} from "react-router-dom"; import { NavLink } from "react-router-dom";
import {useSelector} from "react-redux"; import { useSelector } from "react-redux";
import HasAccess from "../HasAccess/HasAccess"; import HasAccess from "../HasAccess/HasAccess";
import AnonymousMenu from "../../Menus/AnonymousMenu/AnonymousMenu"; import AnonymousMenu from "../../Menus/AnonymousMenu/AnonymousMenu";
import WorkerMenu from "../../Menus/WorkerMenu/WorkerMenu"; import WorkerMenu from "../../Menus/WorkerMenu/WorkerMenu";
...@@ -17,17 +17,17 @@ const AppToolbar = () => { ...@@ -17,17 +17,17 @@ const AppToolbar = () => {
component="div" component="div"
sx={{ flexGrow: 1 }}> sx={{ flexGrow: 1 }}>
<NavLink to='/' style={{textDecoration: 'none', color: 'inherit'}}>Task Manager</NavLink> <NavLink to='/' style={{ textDecoration: 'none', color: 'inherit' }}>Task Manager</NavLink>
</Typography> </Typography>
<HasAccess allowed={!user}> <HasAccess allowed={!user}>
<AnonymousMenu/> <AnonymousMenu />
</HasAccess> </HasAccess>
<HasAccess roles={['user']}> <HasAccess roles={['user']}>
<WorkerMenu/> <WorkerMenu />
</HasAccess> </HasAccess>
<HasAccess roles={['superuser']}> <HasAccess roles={['superuser']}>
<AdminMenu/> <AdminMenu />
</HasAccess> </HasAccess>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
......
planner-front/src/components/UI/СustomSelect/СustomSelect.js
View file @ 8f1aa7fe
import { FormControl, InputLabel, MenuItem, Select} from '@mui/material'; import { FormControl, InputLabel, MenuItem, Select } from '@mui/material';
import { memo } from 'react'; import { memo } from 'react';
function СustomSelect({value, onChange, label, variant='standard', items, id, defaultValue, name}) { function СustomSelect({ value, onChange, label, variant = 'standard', items, id, defaultValue, name }) {
return ( return (
<> <>
...@@ -16,7 +16,7 @@ function СustomSelect({value, onChange, label, variant='standard', items, id, ...@@ -16,7 +16,7 @@ function СustomSelect({value, onChange, label, variant='standard', items, id,
name={name} name={name}
defaultValue={defaultValue} defaultValue={defaultValue}
> >
{items.map((item, i)=>{ {items.map((item, i) => {
return ( return (
<MenuItem <MenuItem
key={i} key={i}
...@@ -26,11 +26,11 @@ function СustomSelect({value, onChange, label, variant='standard', items, id, ...@@ -26,11 +26,11 @@ function СustomSelect({value, onChange, label, variant='standard', items, id,
})} })}
</Select> </Select>
</FormControl> </FormControl>
</> ); </>);
} }
export default memo(СustomSelect, (prevProps, nextProps)=>{ export default memo(СustomSelect, (prevProps, nextProps) => {
if(prevProps.value !== nextProps.value) { if (prevProps.value !== nextProps.value) {
return false return false
} else { } else {
return true return true
......
planner-front/src/components/WeekCalendar/WeekCalendarBody/CalendarRowDayWeek/CalendarRowDayWeek.js
View file @ 8f1aa7fe
import { Grid } from "@mui/material"; import { useMemo } from "react";
import CalendarRow from "../../../MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow"; import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../helpers/CalendarHelpers";
import CalendarStandartCell from "../../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell"; import CalendarStandartCell from "../../../MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell";
function CalendarRowDayWeek({week, hoursInDay}) { function CalendarRowDayWeek({ hoursInDay, tasks, month, year, day, hourFormat }) {
return ( <> const hours = useMemo(() => {
<Grid item xs={11.005}> return getHoursInDayNumbers(hoursInDay)
<CalendarRow week={true}> }, [hoursInDay])
{week?.map((weekDay, i)=>{
return ( const availableTasks = useMemo(() => {
<Grid item key={i} xs={12/week.length}> return getAvailableTasks(tasks, year, month, day)
{hoursInDay?.map((hour, i)=>{ }, [tasks, month, year, day])
const sortedTasks = useMemo(() => {
return getSortedTasks(availableTasks)
}, [availableTasks])
const linesInDay = useMemo(() => {
return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
}, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
return (<>
{hoursInDay?.map((hour, i) => {
return ( return (
<CalendarStandartCell key={i} week={true}> <CalendarStandartCell key={i} week={true}>
</CalendarStandartCell>) </CalendarStandartCell>)
})} })}
</Grid>)
})} </>);
</CalendarRow>
</Grid>
</> );
} }
export default CalendarRowDayWeek; export default CalendarRowDayWeek;
\ No newline at end of file
planner-front/src/components/WeekCalendar/WeekCalendarBody/Helpers.js
View file @ 8f1aa7fe
export const getCurrentWeekDayString = (dayNumber) => { export const getCurrentWeekDayString = (dayNumber) => {
if (dayNumber <= 6 && dayNumber >= 0) { if (dayNumber <= 6 && dayNumber >= 0) {
return ["ПН","ВТ","СР","ЧТ","ПТ","СБ","ВС"][dayNumber]; return ["ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ", "ВС"][dayNumber];
} else { } else {
return null return null
} }
......
planner-front/src/components/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js
View file @ 8f1aa7fe
...@@ -6,26 +6,26 @@ import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/Calendar ...@@ -6,26 +6,26 @@ import CalendarStandartCell from "../../MonthCalendar/MonthCalendarBody/Calendar
import CalendarRowDayWeek from "./CalendarRowDayWeek/CalendarRowDayWeek"; import CalendarRowDayWeek from "./CalendarRowDayWeek/CalendarRowDayWeek";
import { getCurrentWeekDayString } from "./Helpers"; import { getCurrentWeekDayString } from "./Helpers";
function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) { function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks }) {
return ( return (
<> <>
<Box style={{marginBottom: '30px'}}> <Box style={{ marginBottom: '30px' }}>
<Box style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}> <Box style={{ position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey' }}>
<CalendarRow <CalendarRow
> >
<CalendarSmallCell xs={1}> <CalendarSmallCell xs={1}>
<FormControlLabel <FormControlLabel
control={<Switch color="primary" checked={hourFormat} onChange={()=>{setHourFormat(()=>!hourFormat)}}/>} control={<Switch color="primary" checked={hourFormat} onChange={() => { setHourFormat(() => !hourFormat) }} />}
label="1 час" label="1 час"
labelPlacement="end" labelPlacement="end"
/> />
</CalendarSmallCell> </CalendarSmallCell>
{week?.map((weekDay, i)=>{ {week?.map((weekDay, i) => {
return ( return (
<CalendarStandartCell key={i} xs={11/week.length}> <CalendarStandartCell key={i} xs={11 / week.length}>
<span style={{display: 'block', fontWeight: "600"}}>{weekDay}</span> <span style={{ display: 'block', fontWeight: "600" }}>{weekDay}</span>
<span style={{marginBottom: '10px'}}>{getCurrentWeekDayString(i)}</span> <span style={{ marginBottom: '10px' }}>{getCurrentWeekDayString(i)}</span>
</CalendarStandartCell> </CalendarStandartCell>
) )
})} })}
...@@ -35,7 +35,7 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) { ...@@ -35,7 +35,7 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
<Grid container> <Grid container>
<CalendarRow week={true}> <CalendarRow week={true}>
<Grid item xs={0.995} flexDirection='column'> <Grid item xs={0.995} flexDirection='column'>
{hoursInDay?.map((hour, i)=>{ {hoursInDay?.map((hour, i) => {
return ( return (
<CalendarSmallCell key={i} week={true}> <CalendarSmallCell key={i} week={true}>
{hour} {hour}
...@@ -43,10 +43,24 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) { ...@@ -43,10 +43,24 @@ function WeekCalendarBody({week, hoursInDay, hourFormat, setHourFormat,}) {
})} })}
</Grid> </Grid>
<Grid item xs={11.005}>
<CalendarRow week={true}>
{week?.map((weekDay, i) => {
return (
<Grid item key={i} xs={12 / week.length}>
<CalendarRowDayWeek <CalendarRowDayWeek
week={week}
hoursInDay={hoursInDay} hoursInDay={hoursInDay}
tasks={tasks}
month={date.month}
year={date.year}
day={weekDay}
hourFormat={hourFormat}
/> />
</Grid>
)
})}
</CalendarRow>
</Grid>
</CalendarRow> </CalendarRow>
</Grid> </Grid>
......
planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js
View file @ 8f1aa7fe
import { AppBar, Toolbar} from '@mui/material'; import { AppBar, Toolbar } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo'; import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
function WeekCalendarHeader({decrementWeek, incrementWeek, weekInfo}) { function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo }) {
return ( return (
<> <>
......
planner-front/src/components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js
View file @ 8f1aa7fe
import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton'; import ArrowDecrementButton from '../../../UI/ArrowDecrementButton/ArrowDecrementButton';
import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton'; import ArrowIncrementButton from '../../../UI/ArrowIncrementButton/ArrowIncrementButton';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import {Typography} from '@mui/material'; import { Typography } from '@mui/material';
function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) { function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo }) {
return ( return (
<> <>
<Box sx={{width: '40%', marginBottom: '15px'}}> <Box sx={{ width: '40%', marginBottom: '15px' }}>
<h2>Цель недели: Наладить режим сна</h2> <h2>Цель недели: Наладить режим сна</h2>
<Box sx={{display: 'flex', alignItems: 'center'}}> <Box sx={{ display: 'flex', alignItems: 'center' }}>
<ArrowDecrementButton <ArrowDecrementButton
onClick={()=>{decrementWeek()}} onClick={() => { decrementWeek() }}
/> />
<Typography <Typography
variant="h6" variant="h6"
...@@ -26,7 +26,7 @@ function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) { ...@@ -26,7 +26,7 @@ function WeekCalendarHeaderInfo({decrementWeek, incrementWeek, weekInfo}) {
{weekInfo} {weekInfo}
</Typography> </Typography>
<ArrowIncrementButton <ArrowIncrementButton
onClick={()=>{incrementWeek()}} onClick={() => { incrementWeek() }}
/> />
</Box> </Box>
</Box> </Box>
......
planner-front/src/constants.js
View file @ 8f1aa7fe
...@@ -3,21 +3,28 @@ export const uploadsUrl = `${apiUrl}/uploads`; ...@@ -3,21 +3,28 @@ export const uploadsUrl = `${apiUrl}/uploads`;
export const workerMenuButtons = [ export const workerMenuButtons = [
{text: 'Проекты', path: '/projects'}, { text: 'Проекты', path: '/projects' },
{text: 'Неделя', path: '/week'}, { text: 'Неделя', path: '/week' },
{text: 'Месяц', path: '/month'}, { text: 'Месяц', path: '/month' },
{text: 'Мои задачи', path: '/my-tasks'} { text: 'Мои задачи', path: '/my-tasks' }
] ]
export const superuserMenuButtons = [ export const superuserMenuButtons = [
{text: 'Проекты', path: '/projects'}, { text: 'Проекты', path: '/projects' },
{text: 'Неделя', path: '/week'}, { text: 'Неделя', path: '/week' },
{text: 'Месяц', path: '/month'}, { text: 'Месяц', path: '/month' },
{text: 'Мои задачи', path: '/my-tasks'}, { text: 'Мои задачи', path: '/my-tasks' },
{text: 'Задачи Сотрудников', path: '/workers-tasks'}, { text: 'Задачи Сотрудников', path: '/workers-tasks' },
{text: 'Создать Сотрудника', path: '/sign-up'} { text: 'Создать Сотрудника', path: '/sign-up' }
] ]
export const anonymoysMenuButtons = [ export const anonymoysMenuButtons = [
{text: 'Вход', path: '/sign-in'}, { text: 'Вход', path: '/sign-in' },
]
export const priorities = [
{ value: null, text: '--Приоритет--' },
{ value: 'A', text: 'A' },
{ value: 'B', text: 'B' },
{ value: 'C', text: 'C' }
] ]
\ No newline at end of file
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 8f1aa7fe
...@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux'; ...@@ -3,7 +3,7 @@ import { useDispatch, useSelector } from 'react-redux';
import MonthCalendarBody from '../../components/MonthCalendar/MonthCalendarBody/MonthCalendarBody'; import MonthCalendarBody from '../../components/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
import MonthCalendarHeader from '../../components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader'; import MonthCalendarHeader from '../../components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers'; import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks} from '../../store/actions/tasksActions'; import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
function MonthCalendar() { function MonthCalendar() {
const dispatch = useDispatch(); const dispatch = useDispatch();
...@@ -11,14 +11,14 @@ function MonthCalendar() { ...@@ -11,14 +11,14 @@ function MonthCalendar() {
const user = useSelector(state => state.users?.user); const user = useSelector(state => state.users?.user);
const [hourFormat, setHourFormat] = useState(false); const [hourFormat, setHourFormat] = useState(false);
const [dateNow, setDateNow] = useState({month: '', year: ''}) const [dateNow, setDateNow] = useState({ month: '', year: '' })
const [worker, setWorker] = useState(''); const [worker, setWorker] = useState('');
const [calendarType, setCalendarType] = useState('Месяц'); const [calendarType, setCalendarType] = useState('Месяц');
const [currentTask, setCurrentTask] = useState({title: '', description: '', priority: null, infoForCell: {startHour: null, endHour: null}}) const [currentTask, setCurrentTask] = useState({ title: '', description: '', priority: null, infoForCell: { startHour: null, endHour: null } })
const [copyTask, setCopyTask] = useState(null) const [copyTask, setCopyTask] = useState(null)
const [cellSizes, setCellSizes] = useState({}) const [cellSizes, setCellSizes] = useState({})
useEffect(()=>{ useEffect(() => {
setDateNow({ setDateNow({
month: new Date().getMonth(), month: new Date().getMonth(),
year: new Date().getFullYear(), year: new Date().getFullYear(),
...@@ -27,17 +27,17 @@ function MonthCalendar() { ...@@ -27,17 +27,17 @@ function MonthCalendar() {
}, [dispatch]) }, [dispatch])
const hoursInDay = useMemo(()=>{ const hoursInDay = useMemo(() => {
let arr let arr
if (hourFormat) { if (hourFormat) {
arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00'] arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00']
} else { } else {
arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'] arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
} }
const cells = arr.length const cells = arr.length
const xs = 10.8/cells const xs = 10.8 / cells
setCellSizes(()=>{ setCellSizes(() => {
return {smallCell: 0.6, standarCell: xs, dayCell: 12/cells} return { smallCell: 0.6, standarCell: xs, dayCell: 12 / cells }
}) })
return arr return arr
}, [hourFormat]) }, [hourFormat])
...@@ -59,24 +59,24 @@ function MonthCalendar() { ...@@ -59,24 +59,24 @@ function MonthCalendar() {
}, []); }, []);
const incrementMonth = useCallback(() => { const incrementMonth = useCallback(() => {
setDateNow((prevState)=>{ setDateNow((prevState) => {
if (prevState.month + 1 === 12 ) { if (prevState.month + 1 === 12) {
return { month: 0, year: prevState.year + 1} return { month: 0, year: prevState.year + 1 }
} }
return {...prevState, month: prevState.month + 1} return { ...prevState, month: prevState.month + 1 }
}) })
}, []) }, [])
const decrementMonth = useCallback(() => { const decrementMonth = useCallback(() => {
setDateNow((prevState)=>{ setDateNow((prevState) => {
if (prevState.month - 1 === -1) { if (prevState.month - 1 === -1) {
return { month: 11, year: prevState.year - 1} return { month: 11, year: prevState.year - 1 }
} }
return {...prevState, month: prevState.month - 1} return { ...prevState, month: prevState.month - 1 }
}) })
}, []) }, [])
const onChangeCurrentTaskHandler = useCallback((e) => { const onChangeCurrentTaskHandler = useCallback((e) => {
const {name, value} = e.target; const { name, value } = e.target;
if (name === 'startHour' || name === 'endHour') { if (name === 'startHour' || name === 'endHour') {
setCurrentTask((prevState) => { setCurrentTask((prevState) => {
return { return {
...@@ -111,8 +111,8 @@ function MonthCalendar() { ...@@ -111,8 +111,8 @@ function MonthCalendar() {
hourDue = hour + 2 hourDue = hour + 2
} }
const newTask = { const newTask = {
title:"Задача", title: "Задача",
description:"описание", description: "описание",
priority: null, priority: null,
dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)), dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)),
dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)), dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue, 59)),
......
planner-front/src/containers/WeekCalendar/WeekCalendar.js
View file @ 8f1aa7fe
import moment from 'moment'; import moment from 'moment';
import { useEffect, useState, useMemo, useCallback } from 'react'; import { useEffect, useState, useMemo, useCallback } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import WeekCalendarBody from '../../components/WeekCalendar/WeekCalendarBody/WeekCalendarBody'; import WeekCalendarBody from '../../components/WeekCalendar/WeekCalendarBody/WeekCalendarBody';
import WeekCalendarHeader from '../../components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader' import WeekCalendarHeader from '../../components/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader'
import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers'; import { getWeekInfoString, getWeekFromCurrentDate } from '../../helpers/CalendarHelpers';
import { fetchCalendarTasks } from '../../store/actions/tasksActions';
function WeekCalendar() { function WeekCalendar() {
const dispatch = useDispatch();
const [date, setDate] = useState({year: '', month: '', currentDay: ''}) const { calendarTasks } = useSelector(state => state.tasks);
const user = useSelector(state => state.users?.user);
const [date, setDate] = useState({ year: '', month: '', currentDay: '' })
const [hourFormat, setHourFormat] = useState(false); const [hourFormat, setHourFormat] = useState(false);
useEffect(()=>{ useEffect(() => {
const year = new Date().getFullYear() const year = new Date().getFullYear()
const month = new Date().getMonth() const month = new Date().getMonth()
const currentDay = moment().date() const currentDay = moment().date()
setDate({year: year, month: month, currentDay: currentDay}) setDate({ year: year, month: month, currentDay: currentDay })
dispatch(fetchCalendarTasks())
}, []) }, [])
const hoursInDay = useMemo(()=>{ const hoursInDay = useMemo(() => {
let arr let arr
if (hourFormat) { if (hourFormat) {
arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00','21:00','22:00'] arr = ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00']
} else { } else {
arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00'] arr = ['8:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00']
} }
return arr return arr
}, [hourFormat]) }, [hourFormat])
const week = useMemo(()=>{ const week = useMemo(() => {
return getWeekFromCurrentDate(date.year, date.month, date.currentDay) return getWeekFromCurrentDate(date.year, date.month, date.currentDay)
}, [date]) }, [date])
const incrementWeek = useCallback(() => { const incrementWeek = useCallback(() => {
setDate((prevState)=>{ setDate((prevState) => {
const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7) const newDate = new Date(prevState.year, prevState.month, prevState.currentDay + 7)
return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()} return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
}) })
}, []) }, [])
const decrementWeek = useCallback(() => { const decrementWeek = useCallback(() => {
setDate((prevState)=>{ setDate((prevState) => {
const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7) const newDate = new Date(prevState.year, prevState.month, prevState.currentDay - 7)
return {year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date()} return { year: newDate.getFullYear(), month: newDate.getMonth(), currentDay: moment(newDate).date() }
}) })
}, []) }, [])
const weekInfo = useMemo(()=>{ const weekInfo = useMemo(() => {
return getWeekInfoString(week, date) return getWeekInfoString(week, date)
}, [date, week]) }, [date, week])
...@@ -57,6 +62,8 @@ function WeekCalendar() { ...@@ -57,6 +62,8 @@ function WeekCalendar() {
weekInfo={weekInfo} weekInfo={weekInfo}
/> />
<WeekCalendarBody <WeekCalendarBody
tasks={calendarTasks}
date={date}
week={week} week={week}
hourFormat={hourFormat} hourFormat={hourFormat}
setHourFormat={setHourFormat} setHourFormat={setHourFormat}
......
planner-front/src/helpers/CalendarHelpers.js
View file @ 8f1aa7fe
...@@ -6,8 +6,8 @@ export const getDaysInMonth = (dateNow) => { ...@@ -6,8 +6,8 @@ export const getDaysInMonth = (dateNow) => {
const daysInMonthNumber = new Date(dateNow.year, dateNow.month + 1, 0).getDate() const daysInMonthNumber = new Date(dateNow.year, dateNow.month + 1, 0).getDate()
for (let i = 1; i <= daysInMonthNumber; i++) { for (let i = 1; i <= daysInMonthNumber; i++) {
const dayOfWeekNumber = new Date(dateNow.year, dateNow.month, i).getDay() const dayOfWeekNumber = new Date(dateNow.year, dateNow.month, i).getDay()
const getDayOfWeekString = ["ВС","ПН","ВТ","СР","ЧТ","ПТ","СБ"][dayOfWeekNumber] const getDayOfWeekString = ["ВС", "ПН", "ВТ", "СР", "ЧТ", "ПТ", "СБ"][dayOfWeekNumber]
newDaysInMonth.push({dayNumber: i, dayOfWeek: getDayOfWeekString}) newDaysInMonth.push({ dayNumber: i, dayOfWeek: getDayOfWeekString })
} }
return newDaysInMonth return newDaysInMonth
} else { } else {
...@@ -17,7 +17,7 @@ export const getDaysInMonth = (dateNow) => { ...@@ -17,7 +17,7 @@ export const getDaysInMonth = (dateNow) => {
export const getCurrentMonthString = (month) => { export const getCurrentMonthString = (month) => {
if (month <= 11 && month >= 0) { if (month <= 11 && month >= 0) {
return ["Январь","Февраль","Март","Апрель","Май","Июнь","Июль","Август","Сентябрь","Октябрь","Ноябрь", "Декабрь"][month]; return ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"][month];
} else { } else {
return null return null
} }
...@@ -39,7 +39,7 @@ export const getWeekFromCurrentDate = (year, month, curDay) => { ...@@ -39,7 +39,7 @@ export const getWeekFromCurrentDate = (year, month, curDay) => {
const week = [0, 0, 0, 0, 0, 0, 0] const week = [0, 0, 0, 0, 0, 0, 0]
const currentDayWeek = moment(new Date(year, month, curDay)).isoWeekday() const currentDayWeek = moment(new Date(year, month, curDay)).isoWeekday()
for (let i = 1; i <= 7; i++) { for (let i = 1; i <= 7; i++) {
if (currentDayWeek > i ) { if (currentDayWeek > i) {
const day = moment(new Date(year, month, curDay - i)).date() const day = moment(new Date(year, month, curDay - i)).date()
const dayWeek = moment(new Date(year, month, curDay - i)).isoWeekday() const dayWeek = moment(new Date(year, month, curDay - i)).isoWeekday()
week[dayWeek - 1] = day week[dayWeek - 1] = day
...@@ -73,3 +73,114 @@ export const getWeekInfoString = (week, date) => { ...@@ -73,3 +73,114 @@ export const getWeekInfoString = (week, date) => {
return getCurrentMonthString(date.month) + ' ' + date.year return getCurrentMonthString(date.month) + ' ' + date.year
} }
} }
export const getHoursInDayNumbers = (hoursInDay) => {
return hoursInDay.map((hour) => parseInt(hour.split(':')[0]))
}
const taskIsAvailableInCell = (task, hour, hourDiffEnd, hourDiff, hourFormat) => {
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)) {
return true
} else {
return false
}
}
const lastPlaceInLineForTask = (task, hour, hourDiffEnd, hourFormat) => {
if ((task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd) || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
return true
} else {
return false
}
}
export const getLinesInDay = (availableTasks, sortedTasks, hoursInDay, hours, hourFormat) => {
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 (taskIsAvailableInCell(task, hour, hourDiffEnd, hourDiff, hourFormat)) {
if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) {
const hour = hours[a]
if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
if (isNaN(line[a])) {
havePlace = false
break;
}
}
}
if (!havePlace) {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
havePlace = true
break;
}
line[i] += `-${k}`
if (lastPlaceInLineForTask(task, hour, hourDiffEnd, hourFormat)) {
skipLine = true
break;
}
} else {
if (j + 1 === lines.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
}
break;
}
}
}
}
}
}
return lines
}
export const getSortedTasks = (availableTasks) => {
if (availableTasks.length) {
const newSortedArr = [...availableTasks].sort(function(a,b){
const durattionFirstDate = a.infoForCell.endHour - a.infoForCell.startHour
const durattionSecondDate = b.infoForCell.endHour - b.infoForCell.startHour
return durattionSecondDate - durattionFirstDate;
})
return newSortedArr
}
}
export const getAvailableTasks = (tasks, year, month, dayNumber) => {
const tasksInDay = tasks.filter((task)=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (dayNumber === task.infoForCell.startDay) {
return task
} else {return false}
} else {return false}
} else {return false}
})
return tasksInDay
}
\ No newline at end of file
planner-front/src/tests/MonthCalendar.test.js
View file @ 8f1aa7fe
import {getDaysInMonth, getCurrentMonthString, dateToISOLikeButLocal} from '../helpers/CalendarHelpers'; import {getDaysInMonth, getCurrentMonthString, dateToISOLikeButLocal, getAvailableTasks, getSortedTasks} from '../helpers/CalendarHelpers';
import {getAvailableTasks, getSortedTasks} from '../components/MonthCalendar/MonthCalendarBody/CalendarRowDay/Helpers'
describe('Получение дней в феврале 2022', () => { describe('Получение дней в феврале 2022', () => {
test('Всего дней', () => { test('Всего дней', () => {
......
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