Skip to content

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

Merge branch 'task-131-enhance/new_render_monthly_calendar' into 'development' 

Task 131 enhance/new render monthly calendar

See merge request !104
parents 54b38f9c 7d1a4927
Show whitespace changes
Inline Side-by-side
Showing with 231 additions and 241 deletions
planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 5bca45a0
import { Grid } from "@mui/material";
import { memo, useMemo } from "react";
import { memo, useEffect, useMemo, useRef, useState } from "react";
import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks } from "../../../../../helpers/CalendarHelpers";
import CalendarStandartCell from "../../../UI/CalendarStandartCell/CalendarStandartCell";
import CalendarTask from "../CalendarTask/CalendarTask";
import EmptyBox from "./EmptyBox/EmptyBox";
import { getBoxesInLine } from "./Helpers";
import { getTasksWithInfoForPosition } 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, dragTaskHandler, createCopyTask, setCopyTask, copyTask }) => {
const [rowDaySize, setRowDaySize] = useState({ width: 0, height: 0 })
const dayRowRef = useRef('')
useEffect(() => {
setRowDaySize(prev => { return { height: dayRowRef.current.offsetHeight, width: dayRowRef.current.offsetWidth } })
}, [hourFormat])
const hours = useMemo(() => {
return getHoursInDayNumbers(hoursInDay)
......@@ -31,7 +36,35 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
xs={10.8}
align='center'
sx={{ position: 'relative' }}
ref={dayRowRef}
>
{linesInDay?.map((line, i) => {
const tasks = getTasksWithInfoForPosition(line, hoursInDay, sortedTasks, i, rowDaySize.width)
return (<>
{tasks.map((task) => {
const step = rowDaySize.width / hoursInDay.length
return (
<CalendarTask
key={task.task.id}
width={task.width}
left={task.left}
task={task.task}
top={task.top}
handleOpen={handleOpen}
setCurrentTask={setCurrentTask}
modal={modal}
month={month}
setCopyTask={setCopyTask}
dragTaskHandler={dragTaskHandler}
hourFormat={hourFormat}
step={step}
>
</CalendarTask>
)
})}
</>)
})}
{hoursInDay.map((hour, i) => {
return (
<CalendarStandartCell
......@@ -45,79 +78,16 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
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}
month={month}
>
</EmptyBox>)
</CalendarStandartCell>
)
})}
</Grid>
</Grid>
</>
};
export default memo(CalendarRowDay, (prevProps, nextProps) => {
if (!prevProps.modal) return false
if (nextProps.modal) return true
});
export default memo(CalendarRowDay);
planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/EmptyBox/EmptyBox.js deleted 100644 → 0
View file @ 54b38f9c
import { Grid } from "@mui/material";
import React, { memo, useEffect, useState } from "react";
import DefaultTask from "../../../../UI/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/Calendars/MonthCalendar/MonthCalendarBody/CalendarRowDay/Helpers.js
View file @ 5bca45a0
export const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
export const getTasksWithInfoForPosition = (line, hoursInDay, sortedTasks, index, rowDayWidth) => {
const widthStep = rowDayWidth / hoursInDay.length
if (line) {
let xs = 12/hoursInDay.length
const boxes = []
const tasks = []
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)=>{
const taskIsThere = tasks.find((taskFind) => {
if (taskFind?.task?.id === task.id) return taskFind
return false
})
if (taskIsThere) {
taskIsThere.xs +=xs
if (!taskIsThere) {
tasks.push({
width: widthStep,
top: index * 40,
left: i * widthStep,
task: sortedTasks[line[i].split('-')[1]]
})
} else {
boxes.push({
xs: xs,
task: sortedTasks[line[i].split('-')[1]]})
taskIsThere.width += widthStep
}
}
}
return boxes
return tasks
}
}
\ No newline at end of file
planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 5bca45a0
import { Grid } from "@mui/material";
import React, { memo, useEffect, useState } from "react";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import React, { memo, useCallback, useMemo } from "react";
import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
import CopyIcon from "../../../UI/CopyIcon/CopyIcon";
const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask }) => {
const CalendarTask = ({ setCurrentTask, handleOpen, task, setCopyTask, width, left, top, dragTaskHandler, hourFormat, step }) => {
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);')
const color = useMemo(() => {
return getColorTaskByPriority(task.priority)
}, [task.priority])
const styles = useMemo(()=>{
return {
boxSizing: 'border-box',
backgroundColor: color,
height: `35px`,
width: `${width - 10}px`,
position: 'absolute',
display: 'flex',
left: left + 5,
top: top,
margin: '5px 5px 0 0',
padding: '5px',
textAlign: 'left',
overflow: 'hidden',
textOverflow: 'ellipsis',
borderRadius: '10px',
alignItems: 'center',
zIndex: '5',
'&:hover': {
cursor: 'pointer',
boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
},
}
}, [task])
}, [width, left, top, color])
const onClickTaskHandler = (e, task) => {
const onClickTaskHandler = useCallback((e, task) => {
e.stopPropagation();
setCurrentTask((prevState) => {
return {
......@@ -27,35 +46,58 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
}
});
handleOpen(e)
}
},[handleOpen, setCurrentTask])
const dragLeaveHandler = (e) => {
const dragLeaveHandler = useCallback((e) => {
e.target.style.boxShadow = 'none'
}
const dragStartHandler = (e, line, task) => {
setCurrentLine()
},[])
const dragStartHandler = useCallback((e, task) => {
setCurrentTask(task);
}
const dragEndHandler = (e) => {
},[setCurrentTask])
const dragEndHandler = useCallback((e) => {
e.target.style.boxShadow = 'none'
},[])
const onClickCopyIconHandler = useCallback((e) => {
e.stopPropagation();
setCopyTask(task)
},[task, setCopyTask])
const dragOverHandler = useCallback((e) => {
e.preventDefault();
},[])
const dropHandler = useCallback((e, task) => {
e.preventDefault();
let hour
if (hourFormat) {
hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1)
} else {
hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetX / step) - 1 + Math.ceil(e.nativeEvent.offsetX / step) - 1)
}
dragTaskHandler(task.infoForCell.startDay, hour)
},[dragTaskHandler, hourFormat, step])
return (<>
<Grid
draggable={true}
onDragLeave={(e) => { dragLeaveHandler(e) }}
onDragStart={(e) => { dragStartHandler(e, line, task) }}
onDragStart={(e) => { dragStartHandler(e, 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' }}
onDrop={(e) => { dropHandler(e, task) }}
onDragOver={(e) => { dragOverHandler(e) }}
sx={styles}
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>
<CopyIcon
onClick={(e) => { onClickCopyIconHandler(e)}}
/>
</Grid>
</>)
};
......
planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody.js
View file @ 5bca45a0
......@@ -11,7 +11,6 @@ import { useSelector } from "react-redux";
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 = useCallback((e) => {
setModal({
......@@ -65,8 +64,6 @@ function MonthCalendarBody({ month, year, tasks, createTaskInCellHandler, curren
hoursInDay={hoursInDay}
currentTask={currentTask}
handleOpen={handleOpen}
currentLine={currentLine}
setCurrentLine={setCurrentLine}
modal={modal.open}
setCurrentTask={setCurrentTask}
year={year}
......
planner-front/src/components/Calendars/UI/CalendarSmallCell/CalendarSmallCell.js
View file @ 5bca45a0
......@@ -3,7 +3,7 @@ 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, }}>
<Grid align='center' item xs={xs} sx={{ borderRight: week ? null : '1px solid black', height: week ? '45px' : null, borderBottom: week ? '1px solid black' : null, }}>
{children}
</Grid>
</>
......
planner-front/src/components/Calendars/UI/CalendarStandartCell/CalendarStandartCell.js
View file @ 5bca45a0
......@@ -2,17 +2,19 @@ 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, copyTask, createCopyTask, month}) => {
const heightCell = 40
const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCellHandler, handleOpen, modal, dragTaskHandler, linesInDay, week, copyTask, createCopyTask, month, year }) => {
const [isThisCell, setIsThisCell] = useState(false)
const [top, setTop] = useState(0)
const cellClass = {
position: 'relative',
height: linesInDay?.length ? `${40 * linesInDay.length + 35}px` : `${40}px`,
height: linesInDay?.length ? `${heightCell * linesInDay.length + 5}px` : `${45}px`,
borderRight: '1px solid black',
borderBottom: week ? '1px solid black' : null,
'&:hover': {
cursor: children ? null : '#d6d2d2',
background: children ? null : '#d6d2d2'
},
}
useEffect(() => {
......@@ -23,30 +25,36 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
const dragOverHandler = (e) => {
e.preventDefault();
e.target.style.background = children ? null : '#d6d2d2'
}
const dragLeaveHandler = (e) => {
e.preventDefault();
e.target.style.background = null
}
const dropHandler = (e) => {
e.stopPropagation()
e.preventDefault();
dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]))
e.target.style.background = null
dragTaskHandler(dayNumber, parseInt(hours.split(':')[0]), month, year)
}
const onClickHandler = (e) => {
if (linesInDay?.length) {
createTaskInCellHandler(dayNumber, hours);
setIsThisCell(true);
handleOpen(e)
if (!week) {
if (e.nativeEvent.offsetY <= 5) {
setTop(40 * Math.ceil((e.nativeEvent.offsetY) / 40 - 1))
} else {
setTop(40 * Math.ceil((e.nativeEvent.offsetY - 5) / 40 - 1))
}
}
if (week) {
if (copyTask) {
createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month)
createCopyTask(dayNumber, parseInt(hours.split(':')[0]), month, year)
} else {
createTaskInCellHandler(dayNumber, hours, month);
createTaskInCellHandler(dayNumber, hours, month, year);
setIsThisCell(true);
handleOpen(e)
}
}
}
return <>
<Grid
......@@ -54,11 +62,12 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
sx={cellClass}
onClick={(e) => { onClickHandler(e) }}
onDragOver={(e) => { dragOverHandler(e) }}
onDragLeave={(e) => { dragLeaveHandler(e) }}
onDrop={(e) => { dropHandler(e) }}
>
{children}
{isThisCell ?
<DefaultTask week={week} /> : null}
<DefaultTask week={week} top={top} /> : null}
</Grid>
</>
......
planner-front/src/components/Calendars/UI/CopyIcon/CopyIcon.js 0 → 100644
View file @ 5bca45a0
import React, { memo} from "react";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
const styles = { width: '20px', cursor: 'pointer', marginLeft: 'auto' }
const CopyIcon = ({onClick}) => {
return (
<ContentCopyIcon sx={styles} onClick={onClick}>
</ContentCopyIcon>)
};
export default memo(CopyIcon);
\ No newline at end of file
planner-front/src/components/Calendars/UI/DefaultTask/DefaultTask.js
View file @ 5bca45a0
import { Box } from "@mui/material";
import { memo } from "react";
const MonthDefaultTaskStyles = {
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 WeekDefaultTaskStyles = {
boxSizing: 'border-box',
padding: '0 5px',
......@@ -31,7 +17,25 @@ const WeekDefaultTaskStyles = {
}
const DefaultTask = ({ week }) => {
const DefaultTask = ({ week, top }) => {
const MonthDefaultTaskStyles = {
boxSizing: 'border-box',
position: 'relative',
height: '35px',
backgroundColor: 'lightgreen',
whiteSpace: 'nowrap',
overflow: 'hidden',
textOverflow: 'ellipsis',
borderRadius: '10px',
margin: '5px 3px 0 6px',
padding: '5px',
top: top,
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
zIndex: '5'
}
return (<>
<Box
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js
View file @ 5bca45a0
......@@ -11,7 +11,6 @@ import { getTasksWithInfoForPosition, getWidthLeftZIndex } from "./Helpers";
function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat, handleOpen, setCurrentTask, copyTask, setCopyTask, createCopyTask, createTaskInCellHandler, modal, dragTaskHandler }) {
const [columnDaySize, setColumnDaySize] = useState({ width: 0, height: 0 })
const [diffForDragAndDrop, setDiffForDragAndDrop] = useState(1)
const dayColumnRef = useRef('')
useEffect(() => {
......@@ -81,6 +80,7 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
copyTask={copyTask}
createCopyTask={createCopyTask}
month={month}
year={year}
dragTaskHandler={dragTaskHandler}
>
</CalendarStandartCell>
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js
View file @ 5bca45a0
import { Box } from "@mui/material"
import { useEffect, useState, memo, useCallback, useMemo } from "react"
import { getColorTaskByPriority } from "../../../../../../helpers/CalendarHelpers"
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import CopyIcon from "../../../../UI/CopyIcon/CopyIcon";
function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen, setCurrentTask, modal, setCopyTask, month, dragTaskHandler, step, hourFormat}) {
......@@ -81,13 +81,18 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
} else {
hour = task.infoForCell.startHour + (Math.ceil(e.nativeEvent.offsetY/step)-1 + Math.ceil(e.nativeEvent.offsetY/step)-1)
}
dragTaskHandler(task.infoForCell.startDay, hour)
dragTaskHandler(task.infoForCell.startDay, hour, task.infoForCell.startMonth - 1, task.infoForCell.startYear)
}
const dragLeaveHandler = (e) => {
e.preventDefault();
}
const onClickCopyIconHandler = useCallback((e) => {
e.stopPropagation();
setCopyTask(task)
},[task, setCopyTask])
return (
<Box
draggable={true}
......@@ -102,8 +107,9 @@ function CalendarWeekTask({ height, width, left, top, task, zIndex, handleOpen,
<span style={{ textOverflow: 'ellipsis', padding: '5px 0 0 5px' }}>
{task.title}
</span>
<ContentCopyIcon sx={{ marginLeft: 'auto', marginTop: '5px' }} onClick={(e) => { e.stopPropagation(); setCopyTask(task) }}>
</ContentCopyIcon>
<CopyIcon
onClick={(e) => { onClickCopyIconHandler(e)}}
/>
</Box>);
}
......
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/Helpers.js
View file @ 5bca45a0
......@@ -6,17 +6,18 @@ export const getCurrentWeekDayString = (dayNumber) => {
}
}
export const getMonthToDayColumn = (week, weekDay, month) => {
export const getMonthAndYearToDayColumn = (week, weekDay, month, year) => {
if (week[0] > week[6]) {
if (weekDay < week[0]) {
if (month === 11) {
return 0
}
return month + 1
return {month: month, year: year}
} else {
return month
if (month === 0) {
return {month: 11, year: year - 1}
}
return {month: month - 1, year: year}
}
} else {
return month
return {month: month, year: year}
}
}
planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/WeekCalendarBody.js
View file @ 5bca45a0
......@@ -8,7 +8,7 @@ import CalendarSmallCell from "../../UI/CalendarSmallCell/CalendarSmallCell";
import CalendarStandartCell from "../../UI/CalendarStandartCell/CalendarStandartCell";
import HourFormatSwitch from "../../UI/HourFormatSwitch/HourFormatSwitch";
import CalendarColumnDayWeek from "./CalendarColumnDayWeek/CalendarColumnDayWeek";
import { getCurrentWeekDayString, getMonthToDayColumn } from "./Helpers";
import { getCurrentWeekDayString, getMonthAndYearToDayColumn } from "./Helpers";
function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, tasks, currentTask, setCurrentTask, onChangeCurrentTaskHandler, deleteTaskHandler, sendNewTaskHandler, createTaskInCellHandler, copyTask, setCopyTask, createCopyTask, dragTaskHandler }) {
const [modal, setModal] = useState({ open: false, y: 0, x: 0, });
......@@ -66,13 +66,14 @@ function WeekCalendarBody({ week, hoursInDay, hourFormat, setHourFormat, date, t
<Grid item xs={11.005}>
<CalendarRow week={true}>
{week?.map((weekDay, i) => {
const {month, year} = getMonthAndYearToDayColumn(week, weekDay, date.month, date.year)
return (
<CalendarColumnDayWeek
key={i}
hoursInDay={hoursInDay}
tasks={tasks}
month={getMonthToDayColumn(week, weekDay, date.month)}
year={date.year}
month={month}
year={year}
day={weekDay}
hourFormat={hourFormat}
setCurrentTask={setCurrentTask}
......
planner-front/src/containers/WeekCalendar/WeekCalendar.js
View file @ 5bca45a0
......@@ -136,7 +136,7 @@ function WeekCalendar() {
setWorkerInfo({ project: '', worker: '' })
}, [workerInfo?.worker?.user?.id])
const createTaskInCellHandler = useCallback((dayNumber, dayHour, month) => {
const createTaskInCellHandler = useCallback((dayNumber, dayHour, month, year) => {
let hour
if (!isNaN(dayHour)) {
hour = dayHour
......@@ -153,26 +153,28 @@ function WeekCalendar() {
title: "Задача",
description: "описание",
priority: null,
dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0)),
dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hourDue, 59)),
dateTimeStart: dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0)),
dateTimeDue: dateToISOLikeButLocal(new Date(year, month, dayNumber, hourDue, 59)),
infoForCell: {
startHour: hour,
endHour: hourDue,
startDay: dayNumber,
month: month
month: month,
year: year,
},
project: allUserProjects[0]?.id
}
setCurrentTask((newTask))
}, [dateNow.year, hourFormat, allUserProjects])
}, [hourFormat, allUserProjects])
const sendNewTaskHandler = useCallback(async () => {
const timeEndHour = currentTask.infoForCell.endHour
const timeStartHour = currentTask.infoForCell.startHour
const month = currentTask.infoForCell.month
const day = currentTask.infoForCell.startDay
const due = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeEndHour - 1, 59))
const start = dateToISOLikeButLocal(new Date(dateNow.year, month, day, timeStartHour, 0))
const year = currentTask.infoForCell.startYear
const due = dateToISOLikeButLocal(new Date(year, month, day, timeEndHour - 1, 59))
const start = dateToISOLikeButLocal(new Date(year, month, day, timeStartHour, 0))
if (currentTask.id) {
const newTask = {
...currentTask,
......@@ -195,18 +197,18 @@ function WeekCalendar() {
delete newTask.id
await dispatch(addCalendarTask(newTask, userId))
}
}, [currentTask, dateNow.year, dispatch, user.id, userId])
}, [currentTask, dispatch, user.id, userId])
const createCopyTask = useCallback(async (dayNumber, hour, month) => {
const createCopyTask = useCallback(async (dayNumber, hour, month, year) => {
const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
let due
if (hour + hourDiff >= lastHour) {
due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, lastHour, 59))
due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
} else {
due = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour + hourDiff, 59))
due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
}
const start = dateToISOLikeButLocal(new Date(dateNow.year, month, dayNumber, hour, 0))
const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
const newTask = {
...copyTask,
dateTimeStart: start,
......@@ -217,18 +219,18 @@ function WeekCalendar() {
delete newTask.id
await dispatch(addCopyCalendarTask(newTask, userId))
setCopyTask(null)
}, [copyTask, dateNow.year, dispatch, hoursInDay, userId])
}, [copyTask, dispatch, hoursInDay, userId])
const dragTaskHandler = useCallback(async (dayNumber, hour) => {
const dragTaskHandler = useCallback(async (dayNumber, hour, month, year) => {
const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
const lastHour = hoursInDay[hoursInDay.length - 1].split(':')[0]
let due
if (hour + hourDiff >= lastHour) {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, lastHour, 59))
due = dateToISOLikeButLocal(new Date(year, month, dayNumber, lastHour, 59))
} else {
due = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour + hourDiff, 59))
due = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour + hourDiff, 59))
}
const start = dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0))
const start = dateToISOLikeButLocal(new Date(year, month, dayNumber, hour, 0))
const newTask = {
...currentTask,
taskId: currentTask.mainTaskId,
......@@ -239,7 +241,7 @@ function WeekCalendar() {
delete newTask.infoForCell
await dispatch(editCalendarTask(newTask, currentTask.id, userId))
setCurrentTask({})
}, [currentTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
}, [currentTask, dispatch, hoursInDay, userId])
const deleteTaskHandler = useCallback(async (taskId) => {
dispatch(deleteCalendarTask(taskId, userId))
......@@ -259,8 +261,6 @@ function WeekCalendar() {
}
}, [dispatch, user.id, userId])
console.log(project)
return (
<>
<DefaultModal
......
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