Commit 2fb152e9 authored by Ermolaev Timur's avatar Ermolaev Timur

#131 Переделал рендер под абсолюты

parent 54b38f9c
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 [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)
}, [hoursInDay])
......@@ -24,6 +30,11 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
}, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
if (day.dayNumber === 16) {
console.log(linesInDay)
console.log(getTasksWithInfoForPosition(linesInDay[0], hoursInDay, sortedTasks, 0, rowDaySize.width))
console.log(getTasksWithInfoForPosition(linesInDay[1], hoursInDay, sortedTasks, 1, rowDaySize.width))
}
return <>
<Grid
container
......@@ -31,7 +42,33 @@ 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) => {
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}
>
</CalendarTask>
)
})}
</>)
})}
{hoursInDay.map((hour, i) => {
return (
<CalendarStandartCell
......@@ -49,69 +86,6 @@ const CalendarRowDay = ({ xs, hoursInDay, createTaskInCellHandler, currentTask,
</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 const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
export const getTasksWithInfoForPosition = (line, hoursInDay, sortedTasks, index, rowDayWidth) => {
const widthStep = rowDayWidth / hoursInDay.length
console.log(widthStep)
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
import { Grid } from "@mui/material";
import React, { memo, useEffect, useState } from "react";
import React, { memo, useEffect, useMemo, useState } from "react";
import ContentCopyIcon from '@mui/icons-material/ContentCopy';
import { getColorTaskByPriority } from "../../../../../helpers/CalendarHelpers";
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);')
const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine, setCopyTask, width, left,top }) => {
const color = useMemo(() => {
return getColorTaskByPriority(task.priority)
}, [task.priority])
const styles = {
boxSizing: 'border-box',
borderRadius: '3px',
border: '1px solid white',
backgroundColor: color,
height: `${35}px`,
width: `${width}px`,
position: 'absolute',
display: 'flex',
left: left,
top: top,
textAlign: 'left',
overflow: 'hidden',
textOverflow: 'ellipsis',
borderRadius: '10px',
margin: '5px 10px',
alignItems: 'center',
zIndex: '5',
'&:hover': {
cursor: 'pointer',
boxShadow: 'inset 0 0 100px 100px rgba(255, 255, 255, 0.3)'
},
}
}, [task])
const onClickTaskHandler = (e, task) => {
e.stopPropagation();
......@@ -40,13 +63,14 @@ const CalendarTask = ({ setCurrentTask, handleOpen, task, line, setCurrentLine,
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' }}
sx={styles}
onClick={(e) => { onClickTaskHandler(e, task) }}
>
<span style={{ maxWidth: '60%', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
......
......@@ -10,7 +10,7 @@ const CalendarStandartCell = ({ children, xs, hours, dayNumber, createTaskInCell
const cellClass = {
position: 'relative',
height: linesInDay?.length ? `${40 * linesInDay.length + 35}px` : `${40}px`,
height: linesInDay?.length ? `${40 * linesInDay.length}px` : `${40}px`,
borderRight: '1px solid black',
borderBottom: week ? '1px solid black' : null,
}
......
......@@ -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(() => {
......
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