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