Skip to content

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

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

parent bf69df50
Show 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,10 +6,11 @@ import CalendarTask from "../CalendarTask/CalendarTask"; ...@@ -6,10 +6,11 @@ import CalendarTask from "../CalendarTask/CalendarTask";
const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, handleOpen, modal, setCurrentTask, year, month, tasks, day, hourFormat}) => { 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 availableTasks = useMemo(() => {
const ranges = hoursInDay.length
const tasksInDay = tasks.filter(task=> { const tasksInDay = tasks.filter(task=> {
if (year === task.infoForCell.startYear) { if (year === task.infoForCell.startYear) {
if (month + 1 === task.infoForCell.startMonth) { if (month + 1 === task.infoForCell.startMonth) {
...@@ -19,6 +20,21 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -19,6 +20,21 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
} }
} }
}) })
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 hourDiff
let hourDiffEnd let hourDiffEnd
const lines = [] const lines = []
...@@ -29,19 +45,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -29,19 +45,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
hourDiff = 2 hourDiff = 2
hourDiffEnd = 1 hourDiffEnd = 1
} }
if (tasksInDay.length) { if (availableTasks.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;
});
lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0]))) lines.push(hoursInDay.map((hour)=>parseInt(hour.split(':')[0])))
let counter = 0 for (let k = 0; k < sortedTasks.length; k++) {
for (let k = 0; k < newSortedArr.length; k++) {
let skipLine = false let skipLine = false
for (let j = 0; j < lines.length; j++) { for (let j = 0; j < lines.length; j++) {
const line = lines[j] const line = lines[j]
const task = newSortedArr[k] const task = sortedTasks[k]
if (skipLine) { if (skipLine) {
skipLine = false skipLine = false
break; break;
...@@ -50,12 +60,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -50,12 +60,13 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
const hour = hours[i] const hour = hours[i]
let havePlace = true let havePlace = true
if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour)) if (((task.infoForCell.endHour <= hour || task.infoForCell.startHour <= hour) && (task.infoForCell.endHour > hour))
|| (task.infoForCell.startHour >= hour && task.infoForCell.endHour < hour + hourDiff) || (!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)) { || (task.infoForCell.endMinute <= 59 && task.infoForCell.endHour === hour)) {
if (!isNaN(line[i])) { if (!isNaN(line[i])) {
for (let a = 0; a < hours.length; a++) { for (let a = 0; a < hours.length; a++) {
const hour = hours[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])) { if (isNaN(line[a])) {
havePlace = false havePlace = false
break; break;
...@@ -81,10 +92,10 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -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 <> return <>
<Grid <Grid
container container
...@@ -93,6 +104,12 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -93,6 +104,12 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
align='center' align='center'
> >
{hoursInDay.map((hour, i)=>{ {hoursInDay.map((hour, i)=>{
const linesForCell = []
if (linesInDay?.length) {
for (let j = 0; j < linesInDay.length; j++) {
linesForCell.push(linesInDay[j][i])
}
}
return ( return (
<CalendarStandartCell <CalendarStandartCell
key={i} key={i}
...@@ -114,6 +131,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h ...@@ -114,6 +131,8 @@ const CalendarRowDay = ({xs, hoursInDay, createTaskInCellHandler, currentTask, h
hourFormat={hourFormat} hourFormat={hourFormat}
handleOpen={handleOpen} handleOpen={handleOpen}
currentTask={currentTask} currentTask={currentTask}
linesForCell={linesForCell.length ? linesForCell : null}
sortedTasks={sortedTasks}
/> />
</CalendarStandartCell> </CalendarStandartCell>
) )
......
planner-front/src/components/MonthCalendarBody/CalendarTask/CalendarTask.js
View file @ 0c94e313
...@@ -6,7 +6,7 @@ import { editCalendarTask } from "../../../store/actions/tasksActions"; ...@@ -6,7 +6,7 @@ import { editCalendarTask } from "../../../store/actions/tasksActions";
const TaskDefault = ({task, onClickTaskHandler}) => { const TaskDefault = ({task, onClickTaskHandler}) => {
return(<Grid 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} onClick={onClickTaskHandler}
> >
<span> <span>
...@@ -17,7 +17,7 @@ const TaskDefault = ({task, onClickTaskHandler}) => { ...@@ -17,7 +17,7 @@ const TaskDefault = ({task, onClickTaskHandler}) => {
const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => { const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
return(<Grid 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} onClick={onClickTaskHandler}
> >
<span> <span>
...@@ -27,7 +27,7 @@ const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => { ...@@ -27,7 +27,7 @@ const TaskWithNoStartAndAllEnd = ({task, onClickTaskHandler}) => {
} }
const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => { const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
return(<Grid 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} onClick={onClickTaskHandler}
> >
<span> <span>
...@@ -37,7 +37,7 @@ const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => { ...@@ -37,7 +37,7 @@ const TaskWithAllStartAndNoEnd = ({task, onClickTaskHandler}) => {
} }
const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => { const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
return(<Grid 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} onClick={onClickTaskHandler}
> >
<span> <span>
...@@ -46,53 +46,28 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => { ...@@ -46,53 +46,28 @@ const TaskWithAllStartAndAllEnd = ({task, onClickTaskHandler}) => {
</Grid>) </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, linesForCell, sortedTasks}) => {
const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourFormat, handleOpen, currentTask}) => {
const dispatch = useDispatch();
const [thisCellCurrentTask, setThisCellCurrentTask] = useState({}) const [thisCellCurrentTask, setThisCellCurrentTask] = useState({})
const hour = parseInt(hours.split(':')[0]) const hour = parseInt(hours.split(':')[0])
const tasksCell = useMemo(() => { const tasksCell = useMemo(() => {
let hourDiffEnd return []
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])
useEffect(()=>{ useEffect(()=>{
if (!currentTask.title) { if (!currentTask.title) {
setThisCellCurrentTask({}) setThisCellCurrentTask({})
...@@ -106,43 +81,50 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma ...@@ -106,43 +81,50 @@ const CalendarTask = ({year, month, tasks, day, hours, setCurrentTask, hourForma
} }
return (<> return (<>
{tasksCell.length ? tasksCell.map((task, i)=> {linesForCell?.length ? linesForCell.map((line, i)=>
{ {
if (isNaN(line)) {
if (task.type === 'TaskWithNoStartAndAllEnd') { const task = sortedTasks[line.split('-')[1]]
return ( if ((hourFormat && task.infoForCell.endHour > hour && task.infoForCell.startHour === hour)
<TaskWithNoStartAndAllEnd || (!hourFormat && (task.infoForCell.endHour - 1 > hour)
&& (task.infoForCell.startHour === hour || task.infoForCell.startHour === hour +1))) {
return (<TaskWithNoStartAndAllEnd
key={task.id} key={task.id}
task={task} task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}} onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/> />)
)
} }
if (task.type === 'TaskWithAllStartAndAllEnd') { if ((hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour)
return ( || (!hourFormat && task.infoForCell.startHour < hour && task.infoForCell.endHour > hour + 1)) {
<TaskWithAllStartAndAllEnd return (<TaskWithAllStartAndAllEnd
key={task.id} key={task.id}
task={task} task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}} onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/> />)
)
} }
if (task.type === 'TaskWithAllStartAndNoEnd') { if (task.infoForCell.endMinute === 59 && task.infoForCell.startHour < hour) {
return (<> return (
<TaskWithAllStartAndNoEnd <TaskWithAllStartAndNoEnd
key={task.id} key={task.id}
task={task} task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}} onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/> />)
</>)
} }
return (<> return (
<TaskDefault <TaskDefault
key={task.id} key={task.id}
task={task} task={task}
onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}} onClickTaskHandler={(e)=>{onClickTaskHandler(e, task)}}
/> />
</>)} )
} else {
return (
<Empty
/>
)
}
}
) )
: null} : null}
</>) </>)
......
planner-front/src/containers/MonthCalendar/MonthCalendar.js
View file @ 0c94e313
...@@ -114,7 +114,7 @@ function MonthCalendar() { ...@@ -114,7 +114,7 @@ function MonthCalendar() {
description:"описание", description:"описание",
priority: null, priority: null,
dateTimeStart: dateToISOLikeButLocal(new Date(dateNow.year, dateNow.month, dayNumber, hour, 0)), 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)) 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