#128 Реализовал приоритеты и их изменяемость

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeader.js

@@ -2,17 +2,29 @@ import { AppBar, Toolbar } from '@mui/material';
 import { Box } from '@mui/system';
 import { memo } from 'react';
 import WeekCalendarHeaderInfo from './WeekCalendarHeaderInfo/WeekCalendarHeaderInfo';
+import WeekGoal from './WeekGoal/WeekGoal';
+import WeekPriorities from './WeekPriorities/WeekPriorities';
 
 
 
 
-function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler}) {
+function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler, weekPriorities, onChangeWeekPrioritiesHandler }) {
 
   return (
     <>
       <Box sx={{ flexGrow: 1 }}>
         <AppBar position="static">
           <Toolbar>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
+            <WeekGoal
+              weekGoal={weekGoal}
+              onChangeWeekGoalHandler={onChangeWeekGoalHandler}
+            />
+
+            <WeekPriorities
+              weekPriorities={weekPriorities}
+              onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
+            />
 
             <WeekCalendarHeaderInfo
               decrementWeek={decrementWeek}
@@ -22,6 +34,7 @@ function WeekCalendarHeader({ decrementWeek, incrementWeek, weekInfo, weekGoal,
               onChangeWeekGoalHandler={onChangeWeekGoalHandler}
             />
 
+          </Box>
         </Toolbar>
       </AppBar>
     </Box>

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekCalendarHeaderInfo/WeekCalendarHeaderInfo.js

 import ArrowDecrementButton from '../../../../UI/ArrowDecrementButton/ArrowDecrementButton';
 import ArrowIncrementButton from '../../../../UI/ArrowIncrementButton/ArrowIncrementButton';
 import { Box } from '@mui/system';
-import { TextField, Typography } from '@mui/material';
-import { memo, useCallback, useState } from 'react';
-import FormElement from '../../../../UI/Form/FormElement/FormElement';
+import { Typography } from '@mui/material';
+import { memo, } from 'react';
 
 
 
-function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo, weekGoal, onChangeWeekGoalHandler }) {
-  const [goalEditCheck, setGoalEditCheck] = useState(false)
-  const onClickGoalHandler = useCallback(() => {
-    setGoalEditCheck(true)
-  }, [])
+function WeekCalendarHeaderInfo({ decrementWeek, incrementWeek, weekInfo}) {
   return (
     <>
-      <Box sx={{ width: '40%', marginBottom: '15px' }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-          {goalEditCheck ?
-            <>
-              <h2>
-                Цель недели:
-              </h2>
-              <TextField
-                id="week-gaol"
-                value={weekGoal}
-                variant="standard"
-                sx={{ input: { color: 'white', fontSize: '20px', fontWeight: '600'}, marginTop: '8px'}}
-                InputProps={{
-                  disableUnderline: true,
-                }}
-                name='weekGoal'
-                autoFocus
-                onBlur={() => {setGoalEditCheck(false)}}
-                onChange={(e) => { onChangeWeekGoalHandler(e) }}
-              />
-            </>
-            : <h2 onClick={() => { onClickGoalHandler() }}>Цель недели: {weekGoal}</h2>
-          }
-        </Box>
+      <Box sx={{ width: '80%', marginBottom: '15px' }}>
+        
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <ArrowDecrementButton
             onClick={() => { decrementWeek() }}

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekGoal/WeekGoal.js

+import { Box } from '@mui/system';
+import { TextField, Typography } from '@mui/material';
+import { memo, useCallback, useState } from 'react';
+
+
+
+function WeekGoal({ weekGoal, onChangeWeekGoalHandler }) {
+  const [goalEditCheck, setGoalEditCheck] = useState(false)
+  const onClickGoalHandler = useCallback(() => {
+    setGoalEditCheck(true)
+  }, [])
+  return (
+    <>
+
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        {goalEditCheck ?
+          <>
+            <Typography variant='h5' sx={{ marginTop: '20px' }}>
+              Цель недели:
+            </Typography>
+            <TextField
+              id="week-gaol"
+              value={weekGoal}
+              variant="standard"
+              sx={{ input: { color: 'white', fontSize: '22px', fontWeight: '400', paddingTop: '25px' } }}
+              InputProps={{
+                disableUnderline: true,
+              }}
+              name='weekGoal'
+              autoFocus
+              onBlur={() => { setGoalEditCheck(false) }}
+              onChange={(e) => { onChangeWeekGoalHandler(e) }}
+            />
+          </>
+          : <Typography variant='h5' onClick={() => { onClickGoalHandler() }} sx={{ marginTop: '20px' }}>Цель недели: {weekGoal}</Typography>
+        }
+      </Box>
+
+    </>
+  );
+}
+
+export default memo(WeekGoal);
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekPriorities/WeekPriorities.js

+import { Box } from '@mui/system';
+import { Typography } from '@mui/material';
+import { memo } from 'react';
+import WeekPriority from './WeekPriority/WeekPriority';
+
+
+
+function WeekPriorities({ weekPriorities, onChangeWeekPrioritiesHandler }) {
+  return (
+    <>
+
+      <Box>
+        <Typography variant='h5' sx={{ display: 'flex', flexDirection: 'column' }}>
+          Приоритеты:
+          {Object.values(weekPriorities).map((priority, i)=>{
+            return (
+            <WeekPriority
+              key={i}
+              onChangeWeekPrioritiesHandler={(e)=>{onChangeWeekPrioritiesHandler(e)}}
+              priorityName={Object.keys(weekPriorities)[i]}
+              priority={priority}
+              number={i+1}
+            />
+            )
+          })}
+        </Typography>
+
+      </Box>
+
+    </>
+  );
+}
+
+export default memo(WeekPriorities);
\ No newline at end of file

planner-front/src/components/Calendars/WeekCalendar/WeekCalendarHeader/WeekPriorities/WeekPriority/WeekPriority.js

+import { Box } from '@mui/system';
+import { TextField, Typography } from '@mui/material';
+import { memo, useCallback, useState } from 'react';
+
+function WeekPriority({ number, priority, onChangeWeekPrioritiesHandler, priorityName }) {
+  const [priorityEditCheck, setPriorityEditCheck] = useState(false)
+  const onClickPriorityHandler = useCallback(() => {
+    setPriorityEditCheck(true)
+  }, [])
+  return (
+    <>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        {priorityEditCheck ?
+          <>
+            <Typography variant='string'>
+              {number}.
+            </Typography>
+            <TextField
+              id={priorityName}
+              value={priority}
+              variant="standard"
+              sx={{ input: { color: 'white', fontSize: '22px', fontWeight: '400'} }}
+              InputProps={{
+                disableUnderline: true,
+              }}
+              name={priorityName}
+              autoFocus
+              onBlur={() => { setPriorityEditCheck(false) }}
+              onChange={(e) => { onChangeWeekPrioritiesHandler(e) }}
+            />
+
+          </>
+          : <Typography variant='string' onClick={() => { onClickPriorityHandler() }}>{number}. {priority}</Typography>
+        }
+      </Box>
+    </>
+  );
+}
+
+export default memo(WeekPriority);
\ No newline at end of file

planner-front/src/containers/WeekCalendar/WeekCalendar.js

@@ -13,6 +13,7 @@ function WeekCalendar() {
   const [copyTask, setCopyTask] = useState(null)
   const user = useSelector(state => state.users?.user);
   const [weekGoal, setWeekGoal] = useState('Наладить режим сна')
+  const [weekPriorities, setWeekPriorities] = useState({ priorityOne: 'Один', priorityTwo: 'Два', priorityThree: 'Три' })
   const [dateNow, setDateNow] = useState({ year: '', month: '', currentDay: '' })
   const [currentTask, setCurrentTask] = useState({ title: '', description: '', priority: null, infoForCell: { startHour: null, endHour: null } })
   const [hourFormat, setHourFormat] = useState(false);
@@ -64,6 +65,16 @@ function WeekCalendar() {
       return e.target.value
     })
   }, [])
+  const onChangeWeekPrioritiesHandler = useCallback((e) => {
+    const { name, value } = e.target;
+    setWeekPriorities((prevState) => {
+      return {
+        ...prevState,
+        [name]: value
+      }
+    })
+  }, [])
+
 
   const onChangeCurrentTaskHandler = useCallback((e) => {
     const { name, value } = e.target;
@@ -114,7 +125,7 @@ function WeekCalendar() {
       }
     }
     setCurrentTask((newTask))
-  }, [dateNow.month, dateNow.year, hourFormat])
+  },  [dateNow.year, hourFormat])
 
   const sendNewTaskHandler = useCallback(async () => {
     const timeEndHour = currentTask.infoForCell.endHour
@@ -145,7 +156,7 @@ function WeekCalendar() {
       delete newTask.id
       await dispatch(addCalendarTask(newTask, userId))
     }
-  }, [currentTask, dateNow.month, dateNow.year, dispatch, user.id, userId])
+  }, [currentTask, dateNow.year, dispatch, user.id, userId])
 
   const createCopyTask = useCallback(async (dayNumber, hour, month) => {
     const hourDiff = copyTask.infoForCell.endHour - copyTask.infoForCell.startHour
@@ -167,7 +178,7 @@ function WeekCalendar() {
     delete newTask.id
     await dispatch(addCopyCalendarTask(newTask, userId))
     setCopyTask(null)
-  }, [copyTask, dateNow.month, dateNow.year, dispatch, hoursInDay, userId])
+  }, [copyTask, dateNow.year, dispatch, hoursInDay, userId])
 
   const dragTaskHandler = useCallback(async (dayNumber, hour) => {
     const hourDiff = currentTask.infoForCell.endHour - currentTask.infoForCell.startHour
@@ -203,6 +214,8 @@ function WeekCalendar() {
         weekInfo={weekInfo}
         weekGoal={weekGoal}
         onChangeWeekGoalHandler={onChangeWeekGoalHandler}
+        weekPriorities={weekPriorities}
+        onChangeWeekPrioritiesHandler={onChangeWeekPrioritiesHandler}
       />
       <WeekCalendarBody
         deleteTaskHandler={deleteTaskHandler}