Skip to content

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

#38 пофиксил отображение на 2 часа

parent bf69df50
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 94 deletions
planner-front/src/components/MonthCalendarBody/CalendarRowDay/CalendarRowDay.js
View file @ 0c94e313
......@@ -6,19 +6,35 @@ import CalendarTask from "../CalendarTask/CalendarTask";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => {
const hours = hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))
const hours = useMemo(()=>{
return hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))},
[hourFormat])
const tasksInDay = useMemo(() => {
const ranges = hoursInDay.length
const availableTasks = useMemo(() => {
const tasksInDay = tasks.filter(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
return task
}
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
return task
}
}
}
}
})
return tasksInDay
}, [tasks, month])
const sortedTasks = useMemo(() => {
if (availableTasks.length) {
const newSortedArr = [...availableTasks].sort(function(a,b){
const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
return durattionSecondDate - durattionFirstDate;
})
return newSortedArr
}
}, [availableTasks])
const linesInDay = useMemo(() => {
let hourDiff
let hourDiffEnd
const lines = []
......@@ -29,19 +45,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
hourDiff = 2
hourDiffEnd = 1
}
if (tasksInDay.length) {
const newSortedArr = [...tasksInDay].sort(function(a,b){
const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
return durattionSecondDate - durattionFirstDate;
});
if (availableTasks.length) {
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
let counter = 0
for (let k = 0; k < newSortedArr.length; k++) {
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 = newSortedArr[k]
const task = sortedTasks[k]
if (skipLine) {
skipLine = false
break;
......@@ -49,13 +59,14 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
for (let i = 0; i < line.length; i++) {
const hour = hours[i]
let havePlace = true
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (task.infoForCell.startHour >= hour && task.infoForCell.endHour < hour + hourDiff)
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)) {
if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) {
const hour = hours[a]
if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour) {
if (task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour + hourDiffEnd || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.endHour === hour)) {
if (isNaN(line[a])) {
havePlace = false
break;
......@@ -81,10 +92,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
}
}
}
console.log(lines)
}
}, [tasks, month, hourFormat])
return lines
}, [sortedTasks, hours])
console.log(linesInDay)
return <>
<Grid
container
......@@ -93,6 +104,12 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
align='center'
>
{hoursInDay.map((hour, i)=>{
const linesForCell = []
if (linesInDay?.length) {
for (let j = 0; j < linesInDay.length; j++) {
linesForCell.push(linesInDay[j][i])
}
}
return (
<CalendarStandartCell
key={i}
......@@ -114,6 +131,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
hourFormat={hourFormat}
handleOpen={handleOpen}
currentTask={currentTask}
linesForCell={linesForCell.length ? linesForCell : null}
sortedTasks={sortedTasks}
/>
</CalendarStandartCell>
)
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 0c94e313
......@@ -6,7 +6,7 @@ import { editCalendarTask } from "../../../store/actions/tasksActions";
const TaskDefault = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin:"5px 10px"}}
sx={{ height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderRadius: '10px', margin: '5px 10px'}}
onClick={onClickTaskHandler}
>
<span>
......@@ -17,7 +17,7 @@ const TaskDefault = ({task, onClickTaskHandler}) => {
const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}}
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopLeftRadius: '10px', borderBottomLeftRadius: '10px', margin:"5px -1px 5px 10px", position:'relative'}}
onClick={onClickTaskHandler}
>
<span>
......@@ -27,7 +27,7 @@ const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
}
const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}}
sx={{height: '30px',backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', borderTopRightRadius: '10px', borderBottomRightRadius: '10px', margin:"5px 10px 5px -1px"}}
onClick={onClickTaskHandler}
>
<span>
......@@ -37,7 +37,7 @@ const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
}
const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
return(<Grid
sx={{backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}}
sx={{height: '30px', backgroundColor: 'lightgreen', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', borderBottom: '1px solid rgb(29, 161, 51)', margin:"5px -1px"}}
onClick={onClickTaskHandler}
>
<span>
......@@ -46,53 +46,28 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
</Grid>)
}
const Empty = ({}) => {
return (<Grid
sx={{height: '30px', backgroundColor: 'rgb(0,0,0,0)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', padding: '5px', margin:"5px -1px"}}
>
<span>
&#8291;
</span>
</Grid>)
}
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
const dispatch = useDispatch();
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask, linesForCell, sortedTasks}) => {
const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
const hour = parseInt(hours.split(':')[0])
const tasksCell = useMemo(() => {
let hourDiffEnd
if (hourFormat) {
hourDiffEnd = hour + 1
} else {
hourDiffEnd = hour + 2
}
const tasksCell = tasks.filter(task=> {
if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) {
if (day.dayNumber === task.infoForCell.startDay) {
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (task.infoForCell.startHour >= hour && task.infoForCell.endHour < hourDiffEnd)
|| (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
return task
}
}
}
}
})
const newSortedArr = [...tasksCell].sort(function(a,b){
const durattionFirstDate = new Date(a.dateTimeDue).getTime() - new Date(a.dateTimeStart).getTime()
const durattionSecondDate = new Date(b.dateTimeDue).getTime() - new Date(b.dateTimeStart).getTime()
return durattionSecondDate - durattionFirstDate;
});
const newArrWithTypes = newSortedArr.map((task, i)=>
{
if (hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour || (!hourFormat && task.infoForCell.endHour > hour + 1 && (task.infoForCell.startHour === hour))) {
return {...task, type: 'TaskWithNoStartAndAllEnd'}
}
if (hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour || ((!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 2))) {
return{...task, type: 'TaskWithAllStartAndAllEnd'}
}
if (hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour || (!hourFormat && task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour && (task.infoForCell.endHour === hour || task.infoForCell.endHour === hour + 1 && task.infoForCell.startHour + 1 !== hour))) {
return {...task, type: 'TaskWithAllStartAndNoEnd'}
}
return {...task, type: 'TaskDefault'}})
return newArrWithTypes
}, [hourFormat, month, tasks])
return []
}, [])
useEffect(()=>{
if (!currentTask.title) {
setThisCellCurrentTask({})
......@@ -106,43 +81,50 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
}
return (<>
{tasksCell.length ? tasksCell.map((task, i)=>
{linesForCell?.length ? linesForCell.map((line, i)=>
{
if (task.type === 'TaskWithNoStartAndAllEnd') {
return (
<TaskWithNoStartAndAllEnd
if (isNaN(line)) {
const task = sortedTasks[line.split('-')[1]]
if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour)
|| (!hourFormat && (task.infoForCell.endHour - 1 > hour)
&& (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) {
return (<TaskWithNoStartAndAllEnd
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>)
}
if ((hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour)
|| (!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 1)) {
return (<TaskWithAllStartAndAllEnd
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>
)
}
if (task.type === 'TaskWithAllStartAndAllEnd') {
/>)
}
if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
return (
<TaskWithAllStartAndNoEnd
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>)
}
return (
<TaskWithAllStartAndAllEnd
<TaskDefault
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>
)
}
if (task.type === 'TaskWithAllStartAndNoEnd') {
return (<>
<TaskWithAllStartAndNoEnd
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
} else {
return (
<Empty
/>
</>)
)
}
}
return (<>
<TaskDefault
key={task.id}
task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/>
</>)}
)
: null}
</>)
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 0c94e313
......@@ -114,7 +114,7 @@ function MonthCalendar() {
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)),
dateTimeDue: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hourDue + 4, 59)),
}
setCurrentTask((newTask))
}
......
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