#111 Вывел сразу все задачи

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarColumnDayWeek.js

@@ -3,6 +3,7 @@ import { getHoursInDayNumbers, getAvailableTasks, getLinesInDay, getSortedTasks
 import CalendarStandartCell from "../../../CalendarStandartCell/CalendarStandartCell";
 import { useEffect, useRef, useState } from "react";
 import { Grid } from "@mui/material";
+import CalendarWeekTask from "./CalendarWeekTask/CalendarWeekTask";
 
 
 
@@ -39,21 +40,20 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
     return getSortedTasks(availableTasks)
   }, [availableTasks])
 
-  console.log(columnDayHeight)
 
   const linesInDay = useMemo(() => {
     return getLinesInDay(availableTasks, sortedTasks, hoursInDay, hours, hourFormat)
   }, [availableTasks, hourFormat, hours, hoursInDay, sortedTasks])
 
-  const getBoxesInLine = (line, hoursInDay, sortedTasks) => {
+  const getBoxesInLine = (line, hoursInDay, sortedTasks, linesInDay) => {
     if (line) {
-      let xs = 12/hoursInDay.length
+      let xs = 12 / hoursInDay.length
       const boxes = []
       for (let i = 0; i < line.length; i++) {
         if (!isNaN(line[i])) {
         } else {
           const task = sortedTasks[line[i].split('-')[1]]
-          const taskIsThere = boxes.find((taskFind)=>{
+          const taskIsThere = boxes.find((taskFind) => {
             if (taskFind?.task?.id === task.id) return taskFind
             return false
           })
@@ -62,37 +62,57 @@ function CalendarColumnDayWeek({ hoursInDay, tasks, month, year, day, hourFormat
             taskIsThere.lastHour = i
             taskIsThere.height += step
           } else {
+            let tasksInHour = 0
+            for (let line of linesInDay) {
+                if (isNaN(line[i])) {
+                  tasksInHour++
+                }
+            } 
             boxes.push({
-              top: step * i, 
+              tasksInHour: tasksInHour,
+              top: step * i,
               height: step,
               firstHour: i,
               lastHour: i,
-              task: sortedTasks[line[i].split('-')[1]]})
+              task: sortedTasks[line[i].split('-')[1]]
+            })
           }
         }
       }
       return boxes
     }
   }
-  console.log(getBoxesInLine(linesInDay[0], hoursInDay, sortedTasks))
+  const arr = ['red', 'blue', 'yellow', 'purple', 'green']
+  
   return (<>
     <Grid item xs={12 / 7} ref={dayColumnRef} sx={{ position: 'relative' }}>
-      {getBoxesInLine(linesInDay[0], hoursInDay, sortedTasks)?.map((task)=>{
-        return (
-        <div style={{
-          backgroundColor: 'red',
-          height: `${task.height}px`,
-          width: '96%',
-          margin: '0 auto',
-          position: 'absolute',
-          top: task.top,
-          marginLeft: 'auto',
-          marginRight: 'auto',
-          left: '0',
-          right: '0',
-        }}>
-
-        </div>)
+      {linesInDay?.map((line, i) => {
+        const boxes = getBoxesInLine(line, hoursInDay, sortedTasks, linesInDay)
+        return (<>
+          {boxes.map((task, index) => {
+            const amount = task.tasksInHour
+            const oneTaskPrecentWidth = 100 / amount
+            const left = oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100 * i
+            const oneTaskWidth = dayColumnRef.current.offsetWidth - (oneTaskPrecentWidth * dayColumnRef.current.offsetWidth / 100) * i
+            const zIndex = 10 + i
+            return (
+              <CalendarWeekTask
+                key={index}
+                width={oneTaskWidth}
+                height={task.height}
+                left={left}
+                task={task.task}
+                top={task.top}
+                zIndex={zIndex}
+              >
+
+              </CalendarWeekTask>
+              
+
+              )
+          })}
+        </>)
+
       })}
       {hoursInDay?.map((hour, i) => {
         return (

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarBody/CalendarColumnDayWeek/CalendarWeekTask/CalendarWeekTask.js

+import { Box } from "@mui/material"
+import { useEffect, useState } from "react"
+
+
+function CalendarWeekTask({ height, width, left, top, task, zIndex }) {
+
+  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 styles = {
+    borderRadius: '5px',
+    border: '1px solid black',
+    backgroundColor: color,
+    height: `${height}px`,
+    width: `${width}px`,
+    position: 'absolute',
+    left: `${left}px`,
+    top: top,
+    zIndex: zIndex,
+    textAlign: 'left',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis'
+  }
+
+  return (
+    <Box
+      sx={styles}>
+        <span style={{position: 'absolute', textOverflow: 'ellipsis', padding: '5px 0 0 10px'}}>
+          {task.title}
+        </span>
+    </Box>);
+}
+
+export default CalendarWeekTask;
\ No newline at end of file