Skip to content

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

Merge branch 'task-128-feature/weekly_priorities' into 'development' 

Task 128 feature/weekly priorities

See merge request !101
parents 31e58e27 edb66e08
Show whitespace changes
Inline Side-by-side
Showing with 169 additions and 763 deletions
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js
View file @ 465fd444
...@@ -2,24 +2,39 @@ import { AppBar, Toolbar } from '@mui/material'; ...@@ -2,24 +2,39 @@ import { AppBar, Toolbar } from '@mui/material';
import { Box } from '@mui/system'; import { Box } from '@mui/system';
import { memo } from 'react'; import { memo } from 'react';
import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo'; import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
import WeekGoal from './WeekGoal/WeekGoal';
import WeekPriorities from './WeekPriorities/WeekPriorities';
function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo }) { function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler, weekPriorities, onChangeWeekPrioritiesHandler }) {
return ( return (
<> <>
<Box sx={{ flexGrow: 1 }}> <Box sx={{ flexGrow: 1 }}>
<AppBar position="static"> <AppBar position="static">
<Toolbar> <Toolbar>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
<WeekGoal
weekGoal={weekGoal}
onChangeWeekGoalHandler={onChangeWeekGoalHandler}
/>
<WeekPriorities
weekPriorities={weekPriorities}
onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
/>
<WeekCalendarHeaderInfo <WeekCalendarHeaderInfo
decrementWeek={decrementWeek} decrementWeek={decrementWeek}
incrementWeek={incrementWeek} incrementWeek={incrementWeek}
weekInfo={weekInfo} weekInfo={weekInfo}
weekGoal={weekGoal}
onChangeWeekGoalHandler={onChangeWeekGoalHandler}
/> />
</Box>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </Box>
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js
View file @ 465fd444
...@@ -2,16 +2,15 @@ import ArrowDecrementButton from '../../../../UI/ArrowDecrementButton/ArrowDecre ...@@ -2,16 +2,15 @@ import ArrowDecrementButton from '../../../../UI/ArrowDecrementButton/ArrowDecre
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';
import { memo } from 'react'; import { memo, } from 'react';
function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo }) { function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo}) {
return ( return (
<> <>
<Box sx={{ width: '40%', marginBottom: '15px' }}> <Box sx={{ width: '80%', marginBottom: '15px' }}>
<h2>Цель недели: Наладить режим сна</h2>
<Box sx={{ display: 'flex', alignItems: 'center' }}> <Box sx={{ display: 'flex', alignItems: 'center' }}>
<ArrowDecrementButton <ArrowDecrementButton
onClick={() => { decrementWeek() }} onClick={() => { decrementWeek() }}
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekGoal/WeekGoal.js 0 → 100644
View file @ 465fd444
import { Box } from '@mui/system';
import { TextField, Typography } from '@mui/material';
import { memo, useCallback, useState } from 'react';
function WeekGoal({ weekGoal, onChangeWeekGoalHandler }) {
const [goalEditCheck, setGoalEditCheck] = useState(false)
const onClickGoalHandler = useCallback(() => {
setGoalEditCheck(true)
}, [])
return (
<>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
{goalEditCheck ?
<>
<Typography variant='h5' sx={{ marginTop: '20px' }}>
Цель недели:
</Typography>
<TextField
id="week-gaol"
value={weekGoal}
variant="standard"
sx={{ input: { color: 'white', fontSize: '22px', fontWeight: '400', paddingTop: '25px' } }}
InputProps={{
disableUnderline: true,
}}
name='weekGoal'
autoFocus
onBlur={() => { setGoalEditCheck(false) }}
onChange={(e) => { onChangeWeekGoalHandler(e) }}
/>
</>
: <Typography variant='h5' onClick={() => { onClickGoalHandler() }} sx={{ marginTop: '20px' }}>Цель недели: {weekGoal}</Typography>
}
</Box>
</>
);
}
export default memo(WeekGoal);
\ No newline at end of file
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekPriorities/WeekPriorities.js 0 → 100644
View file @ 465fd444
import { Box } from '@mui/system';
import { Typography } from '@mui/material';
import { memo } from 'react';
import WeekPriority from './WeekPriority/WeekPriority';
function WeekPriorities({ weekPriorities, onChangeWeekPrioritiesHandler }) {
return (
<>
<Box>
<Typography variant='h5' sx={{ display: 'flex', flexDirection: 'column' }}>
Приоритеты:
{Object.values(weekPriorities).map((priority, i)=>{
return (
<WeekPriority
key={i}
onChangeWeekPrioritiesHandler={(e)=>{onChangeWeekPrioritiesHandler(e)}}
priorityName={Object.keys(weekPriorities)[i]}
priority={priority}
number={i+1}
/>
)
})}
</Typography>
</Box>
</>
);
}
export default memo(WeekPriorities);
\ No newline at end of file
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekPriorities/WeekPriority/WeekPriority.js 0 → 100644
View file @ 465fd444
import { Box } from '@mui/system';
import { TextField, Typography } from '@mui/material';
import { memo, useCallback, useState } from 'react';
function WeekPriority({ number, priority, onChangeWeekPrioritiesHandler, priorityName }) {
const [priorityEditCheck, setPriorityEditCheck] = useState(false)
const onClickPriorityHandler = useCallback(() => {
setPriorityEditCheck(true)
}, [])
return (
<>
<Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
{priorityEditCheck ?
<>
<Typography variant='string'>
{number}.
</Typography>
<TextField
id={priorityName}
value={priority}
variant="standard"
sx={{ input: { color: 'white', fontSize: '22px', fontWeight: '400'} }}
InputProps={{
disableUnderline: true,
}}
name={priorityName}
autoFocus
onBlur={() => { setPriorityEditCheck(false) }}
onChange={(e) => { onChangeWeekPrioritiesHandler(e) }}
/>
</>
: <Typography variant='string' onClick={() => { onClickPriorityHandler() }}>{number}. {priority}</Typography>
}
</Box>
</>
);
}
export default memo(WeekPriority);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRow/CalendarRow.js deleted 100644 → 0
View file @ 31e58e27
import { Grid } from "@mui/material";
const CalendarRow = ({children, week}) => {
return <>
<Grid
container
align='center'
sx={{borderBottom: week ? null : '1px solid black', borderRight: '1px solid black', borderLeft: '1px solid black'}}
>
{children}
</Grid>
</>
};
export default CalendarRow;
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js deleted 100644 → 0
View file @ 31e58e27
import { Grid } from "@mui/material";
import { memo, useMemo} from "react";
import CalendarStandartCell from "../CalendarStandartCell.js/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask";
import EmptyBox from "./EmptyBox/EmptyBox";
import { getAvailableTasks, getBoxesInLine, getLinesInDay, getSortedTasks } from "./Helpers";
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 availableTasks = useMemo(() => {
return getAvailableTasks(tasks, year, month, day.dayNumber)
}, [tasks, month, year, day.dayNumber])
const sortedTasks = useMemo(() => {
return getSortedTasks(availableTasks)
}, [availableTasks])
const linesInDay = useMemo(() => {
return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
}, [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}
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}
>
</EmptyBox>)
})}
</Grid>
</Grid>
</>
};
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 deleted 100644 → 0
View file @ 31e58e27
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 [isThisCell, setIsThisCell] = useState(false)
useEffect(()=>{
if(!modal) {
setIsThisCell(false);
}
}, [modal])
const onClickHandler = (e, dayNumber, hour) => {
if (copyTask) {
createCopyTask(dayNumber, hour)
} else {
createTaskInCellHandler(dayNumber, hour);
setIsThisCell(true);
handleOpen(e)
}
}
const dragOverHandler = (e) => {
e.preventDefault();
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(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>)
};
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 deleted 100644 → 0
View file @ 31e58e27
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
const boxes = []
for (let i = 0; i < line.length; i++) {
if (!isNaN(line[i])) {
// if (boxes[boxes.length -1]?.task === null) {
// boxes[boxes.length -1].xs += xs
// } else {
boxes.push({xs: xs, task: null, hour: line[i]})
// }
} else {
const task = sortedTasks[line[i].split('-')[1]]
const taskIsThere = boxes.find((taskFind)=>{
if (taskFind?.task?.id === task.id) return taskFind
return false
})
if (taskIsThere) {
taskIsThere.xs +=xs
} else {
boxes.push({
xs: xs,
task: sortedTasks[line[i].split('-')[1]]})
}
}
}
return boxes
}
}
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarSmallCell/CalendarSmallCell.js deleted 100644 → 0
View file @ 31e58e27
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>
</>
};
export default memo(CalendarSmallCell);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarStandartCell.js/CalendarStandartCell.js deleted 100644 → 0
View file @ 31e58e27
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 [isThisCell, setIsThisCell] = useState(false)
const cellClass = {
position: 'relative',
height: linesInDay?.length ? `${40*linesInDay.length+35}px` : `${40}px`,
borderRight: '1px solid black',
borderBottom: week ?'1px solid black' : null,
}
useEffect(()=>{
if(!modal) {
setIsThisCell(false);
}
}, [modal])
const dragOverHandler = (e) => {
e.preventDefault();
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
}
const onClickHandler = (e) => {
if (linesInDay?.length) {
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)}}
>
{children}
{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
planner-front/src/components/MonthCalendar/MonthCalendarBody/CalendarTask/CalendarTask.js deleted 100644 → 0
View file @ 31e58e27
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 [color, setColor] = useState('')
useEffect(() => {
if (task.priority) {
if (task.priority === 'A') setColor('rgb(32, 138, 250)')
if (task.priority === 'B') setColor('lightgreen')
if (task.priority === 'C') setColor('yellow')
} else {
setColor('rgb(171, 157, 157);')
}
}, [task])
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
setCurrentTask((prevState)=>{
return {
...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);
}
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)}}>
</ContentCopyIcon>
</Grid>
</>)
};
export default memo(CalendarTask);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/DefaultTask/DefaultTask.js deleted 100644 → 0
View file @ 31e58e27
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',
zIndex: '5'
}
const DefaultTask = ({}) => {
return (<>
<Box
sx={DefaultTaskStyles}
>
<span>
Задача
</span>
</Box>
</>)
};
export default memo(DefaultTask);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarBody/MonthCalendarBody.js deleted 100644 → 0
View file @ 31e58e27
import { Box, FormControlLabel, Switch} from "@mui/material";
import { useState } from "react";
import CalendarRow from "./CalendarRow/CalendarRow";
import CalendarSmallCell from "./CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "./CalendarStandartCell.js/CalendarStandartCell";
import ModalTask from "../../UI/ModalTask/ModalTask";
import MonthCalendarModalContent from "../MonthCalendarModalContent/MonthCalendarModalContent";
import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
function MonthCalendarBody({month, year, tasks, createTaskInCellHandler, currentTask, setCurrentTask, hourFormat, setHourFormat, onChangeCurrentTaskHandler, sendNewTaskHandler, deleteTaskHandler, cellSizes, hoursInDay, daysInMonth, dragTaskHandler, createCopyTask, setCopyTask, copyTask}) {
const [currentLine, setCurrentLine] = useState('')
const [modal, setModal] = useState({open:false, y: 0, x: 0,});
const handleOpen = (e) => {
setModal( {
open: true,
yClickСordinates: e.clientY,
xClickСordinates: e.clientX,
yDivClick: e.nativeEvent.offsetY,
xDivClick: e.nativeEvent.offsetX,
yDiv: e.target.offsetHeight,
xDiv: e.target.offsetWidth,
})
};
const handleClose = () => {
setModal({...modal, open: false})
setCurrentTask({})
};
return (
<Box style={{marginBottom: '30px'}}>
<div style={{position: 'sticky', top: '0px', zIndex: '10', backgroundColor: 'lightgrey'}}>
<CalendarRow
>
<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>
)
})}
</CalendarRow>
</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}
>
</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>
</Box>
);
}
export default MonthCalendarBody;
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js deleted 100644 → 0
View file @ 31e58e27
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,
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}
/>
</Box>
</> );
}
export default memo(MonthAndYearInfo);
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader.js deleted 100644 → 0
View file @ 31e58e27
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: 'Неделя'}]
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'}}>
<СustomSelect
value={calendarType}
onChange={(e)=>{onChangeCalendarTypeHandler(e)}}
label={'Календарь'}
id={'calendar-type'}
items={types}
/>
</div>
</Toolbar>
</AppBar>
</Box>
</>
);
}
export default MonthCalendarHeader;
\ No newline at end of file
planner-front/src/components/MonthCalendar/MonthCalendarModalContent/MonthCalendarModalContent.js deleted 100644 → 0
View file @ 31e58e27
import { Button, TextField } from "@mui/material";
import { memo } from "react";
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}) {
return (<>
<TextField
id="task-description-title"
value={title}
label="Название"
variant="outlined"
sx={{marginBottom: '30px'}}
name='title'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<TextField
id="task-description"
multiline
rows={4}
value={description}
label="Описание"
variant="outlined"
sx={{marginBottom: '30px'}}
name='description'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<CustomSelect
defaultValue={null}
value={priority}
name={'priority'}
variant={'outlined'}
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
label={'Приоритет'}
id={'priority-type'}
items={priorities}
/>
<div style={{display: 'flex', gap: '20px', margin: '20px 0'}}>
<TextField
id="task-startHour"
value={startHour}
label="От"
variant="outlined"
name='startHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
<TextField
id="task-endHour"
value={endHour}
label="До"
variant="outlined"
name='endHour'
onChange={(e)=>{onChangeCurrentTaskHandler(e)}}
/>
</div>
<div style={{display: 'flex', gap: '20px', margin: '10px 0'}}>
<Button id='test_button_save_task'onClick={sendNewTaskHandler}>Сохранить</Button>
<Button onClick={deleteTaskHandler}>Удалить</Button>
</div>
</>);
}
export default memo(MonthCalendarModalContent);
\ No newline at end of file
planner-front/src/containers/WeekCalendar/WeekCalendar.js
View file @ 465fd444
...@@ -12,6 +12,8 @@ function WeekCalendar() { ...@@ -12,6 +12,8 @@ function WeekCalendar() {
const { calendarTasks } = useSelector(state => state.tasks); const { calendarTasks } = useSelector(state => state.tasks);
const [copyTask, setCopyTask] = useState(null) const [copyTask, setCopyTask] = useState(null)
const user = useSelector(state => state.users?.user); const user = useSelector(state => state.users?.user);
const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
const [weekPriorities, setWeekPriorities] = useState({ priorityOne: 'Один', priorityTwo: 'Два', priorityThree: 'Три' })
const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' }) const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' })
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 [hourFormat, setHourFormat] = useState(false); const [hourFormat, setHourFormat] = useState(false);
...@@ -50,12 +52,30 @@ function WeekCalendar() { ...@@ -50,12 +52,30 @@ function WeekCalendar() {
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(() => {
setDateNow((prevState) => { setDateNow((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 onChangeWeekGoalHandler = useCallback((e) => {
setWeekGoal((prevState) => {
return e.target.value
})
}, [])
const onChangeWeekPrioritiesHandler = useCallback((e) => {
const { name, value } = e.target;
setWeekPriorities((prevState) => {
return {
...prevState,
[name]: value
}
})
}, [])
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') {
...@@ -105,7 +125,7 @@ function WeekCalendar() { ...@@ -105,7 +125,7 @@ function WeekCalendar() {
} }
} }
setCurrentTask((newTask)) setCurrentTask((newTask))
}, [dateNow.month, dateNow.year, hourFormat]) }, [dateNow.year, hourFormat])
const sendNewTaskHandler = useCallback(async () => { const sendNewTaskHandler = useCallback(async () => {
const timeEndHour = currentTask.infoForCell.endHour const timeEndHour = currentTask.infoForCell.endHour
...@@ -136,7 +156,7 @@ function WeekCalendar() { ...@@ -136,7 +156,7 @@ function WeekCalendar() {
delete newTask.id delete newTask.id
await dispatch(addCalendarTask(newTask, userId)) await dispatch(addCalendarTask(newTask, userId))
} }
}, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId]) }, [currentTask, dateNow.year, dispatch, user.id, userId])
const createCopyTask = useCallback(async (dayNumber, hour, month) => { const createCopyTask = useCallback(async (dayNumber, hour, month) => {
const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
...@@ -158,7 +178,7 @@ function WeekCalendar() { ...@@ -158,7 +178,7 @@ function WeekCalendar() {
delete newTask.id delete newTask.id
await dispatch(addCopyCalendarTask(newTask, userId)) await dispatch(addCopyCalendarTask(newTask, userId))
setCopyTask(null) setCopyTask(null)
}, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId]) }, [copyTask, dateNow.year, dispatch, hoursInDay, userId])
const dragTaskHandler = useCallback(async (dayNumber, hour) => { const dragTaskHandler = useCallback(async (dayNumber, hour) => {
const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
...@@ -184,7 +204,7 @@ function WeekCalendar() { ...@@ -184,7 +204,7 @@ function WeekCalendar() {
const deleteTaskHandler = useCallback(async (taskId) => { const deleteTaskHandler = useCallback(async (taskId) => {
dispatch(deleteCalendarTask(taskId, userId)) dispatch(deleteCalendarTask(taskId, userId))
},[dispatch, userId]) }, [dispatch, userId])
return ( return (
<> <>
...@@ -192,6 +212,10 @@ function WeekCalendar() { ...@@ -192,6 +212,10 @@ function WeekCalendar() {
incrementWeek={incrementWeek} incrementWeek={incrementWeek}
decrementWeek={decrementWeek} decrementWeek={decrementWeek}
weekInfo={weekInfo} weekInfo={weekInfo}
weekGoal={weekGoal}
onChangeWeekGoalHandler={onChangeWeekGoalHandler}
weekPriorities={weekPriorities}
onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
/> />
<WeekCalendarBody <WeekCalendarBody
deleteTaskHandler={deleteTaskHandler} deleteTaskHandler={deleteTaskHandler}
......
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