#103 Релизовал вывод информации чей это календарь

planner-api/src/routers/users.ts

@@ -7,6 +7,7 @@ import path from 'path';
 import {config} from "../config"
 import { Project } from '../models/Project';
 import { Member, MemberRole } from '../models/Member';
+import { auth } from '../helpers';
 
 const router:Router = express.Router();
 const dataSource = myDataSource;
@@ -35,6 +36,19 @@ const users = await dataSource
 return res.send({users})
 }) 
 
+ //** return displayName of user, requested by userId */
+ router.get('/display-name/:userId', auth, async (req : Request, res : Response):Promise<object> => {
+    const {userId} = req.params
+    const displayName = await dataSource
+        .createQueryBuilder()
+        .select(['user.displayName'])
+        .from(User, "user")
+        .where("user.id = :userId", { userId })
+        .getOne()
+        if (!displayName) return res.status(404).send({message:'displayName not found'})
+    return res.send(displayName)
+})
+
 
 //** return all users of DB */
 router.get('/all-fields/', async (req : Request, res : Response):Promise<object> => {

planner-front/src/components/Calendars/MonthCalendarModalContent/MonthCalendarModalContent.js → planner-front/src/components/Calendars/CalendarModalContent/CalendarModalContent.js

@@ -4,7 +4,7 @@ import { priorities } from "../../../constants";
 import CustomSelect from '../../UI/СustomSelect/СustomSelect'
 
 
-function MonthCalendarModalContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour }) {
+function CalendarModalContent({ title, onChangeCurrentTaskHandler, description, priority, sendNewTaskHandler, deleteTaskHandler, startHour, endHour }) {
   return (<>
     <TextField
       id="task-description-title"
@@ -61,4 +61,4 @@ function MonthCalendarModalContent({ title, onChangeCurrentTaskHandler, descript
   </>);
 }
 
-export default memo(MonthCalendarModalContent);
+export default memo(CalendarModalContent);
\ No newline at end of file

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody.js

@@ -4,7 +4,7 @@ import CalendarRow from "../../CalendarRow/CalendarRow";
 import CalendarSmallCell from "../../CalendarSmallCell/CalendarSmallCell";
 import CalendarStandartCell from "../../CalendarStandartCell/CalendarStandartCell";
 import ModalTask from "../../../UI/ModalTask/ModalTask"
-import MonthCalendarModalContent from "../../MonthCalendarModalContent/MonthCalendarModalContent";
+import MonthCalendarModalContent from "../../CalendarModalContent/CalendarModalContent";
 import CalendarRowDay from "./CalendarRowDay/CalendarRowDay";
 
 

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarHeader/MonthAndYearInfo/MonthAndYearInfo.js

@@ -12,7 +12,8 @@ function MonthAndYearInfo({ currentMonthString, year, incrementMonth, decrementM
           flexGrow: 1,
           display: 'flex',
           alignItems: 'center',
-          gap: '10px'
+          gap: '10px',
+          marginBottom: '20px'
         }}
         id='test_month_info'
       >
@@ -21,7 +22,7 @@ function MonthAndYearInfo({ currentMonthString, year, incrementMonth, decrementM
         />
         <Box sx={{ flexBasis: '150px' }}>
           <Typography
-            variant="h6"
+            variant="h5"
             sx={{
               display: 'flex',
               justifyContent: 'center',

planner-front/src/components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader.js

-import { AppBar, Button, Toolbar } from '@mui/material';
+import { AppBar, Button, Toolbar, Typography } from '@mui/material';
 import { Box } from '@mui/system';
 import MonthAndYearInfo from './MonthAndYearInfo/MonthAndYearInfo';
 
-function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year, setModal }) {
+function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMonth, calendarType, onChangeWorkerHandler, onChangeCalendarTypeHandler, worker, year, setModal, currentCalendarDisplayName }) {
 
   return (
     <>
@@ -10,22 +10,25 @@ function MonthCalendarHeader({ currentMonthString, decrementMonth, incrementMont
         <AppBar position="static">
           <Toolbar>
 
-            <MonthAndYearInfo
-              currentMonthString={currentMonthString}
-              decrementMonth={decrementMonth}
-              incrementMonth={incrementMonth}
-              year={year}
-            />
-
-            <div style={{ marginLeft: '20px' }}>
-              <Button
-                onClick={()=>{setModal((prevState)=>!prevState)}}
-                color="inherit"
-                size="large"
-              >
-                Выбрать сотрудника
-              </Button>
-            </div>
+            <Box>
+              <Typography variant="h5" sx={{ margin: "20px 0 20px 0" }}>
+                Календарь:  {currentCalendarDisplayName}
+              </Typography>
+              <MonthAndYearInfo
+                currentMonthString={currentMonthString}
+                decrementMonth={decrementMonth}
+                incrementMonth={incrementMonth}
+                year={year}
+              />
+            </Box>
+            <Button
+              onClick={() => { setModal((prevState) => !prevState) }}
+              color="inherit"
+              size="large"
+              sx={{marginLeft: 'auto'}}
+            >
+              Выбрать сотрудника
+            </Button>
           </Toolbar>
         </AppBar>
       </Box>

planner-front/src/components/UI/DefaultModal/DefaultModal.js

@@ -17,7 +17,7 @@ const style = {
 };
 
 export default function DefaultModal({modal, setModal}) {
-  console.log(modal)
+  
   const handleClose = () => setModal(false);
 
   return (

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

 import { useEffect, useCallback, useState, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
 import MonthCalendarBody from '../../components/Calendars/MonthCalendar/MonthCalendarBody/MonthCalendarBody';
 import MonthCalendarHeader from '../../components/Calendars/MonthCalendar/MonthCalendarHeader/MonthCalendarHeader';
 import DefaultModal from '../../components/UI/DefaultModal/DefaultModal';
 import { dateToISOLikeButLocal, getCurrentMonthString, getDaysInMonth } from '../../helpers/CalendarHelpers';
 import { addCalendarTask, addCopyCalendarTask, deleteCalendarTask, editCalendarTask, fetchCalendarTasks } from '../../store/actions/tasksActions';
+import { fetchCurrentCalendarDisplayName } from '../../store/actions/usersActions';
 
 function MonthCalendar() {
   const dispatch = useDispatch();
   const { calendarTasks } = useSelector(state => state.tasks);
-  const user = useSelector(state => state.users?.user);
+  const {user, currentCalendarDisplayName} = useSelector(state => state.users);
+  const params = useParams()
 
   const [hourFormat, setHourFormat] = useState(false);
   const [dateNow, setDateNow] = useState({ month: '', year: '' })
@@ -26,8 +29,15 @@ function MonthCalendar() {
       month: new Date().getMonth(),
       year: new Date().getFullYear(),
     })
-    setUserId(user.id)
-    dispatch(fetchCalendarTasks(user.id))
+    if (params.id) {
+      setUserId(params.id)
+      dispatch(fetchCalendarTasks(params.id))
+      dispatch(fetchCurrentCalendarDisplayName(params.id))
+    } else {
+      setUserId(user.id)
+      dispatch(fetchCalendarTasks(user.id))
+      dispatch(fetchCurrentCalendarDisplayName(user.id))
+    }
   }, [dispatch])
 
 
@@ -224,6 +234,7 @@ function MonthCalendar() {
         worker={worker}
         setModal={setModal}
         calendarType={calendarType}
+        currentCalendarDisplayName={currentCalendarDisplayName}
       />
       <MonthCalendarBody
         month={dateNow.month}

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

@@ -21,7 +21,7 @@ function WeekCalendar() {
     setDate({ year: year, month: month, currentDay: currentDay })
     // dispatch(fetchCalendarTasks())
   }, [])
-
+  
   const hoursInDay = useMemo(() => {
     let arr
     if (hourFormat) {

planner-front/src/store/actionTypes/userActionTypes.js

@@ -14,4 +14,6 @@ export const FETCH_USERS_FAILURE = "FETCH_USERS_FAILURE";
 
 export const FETCH_USERS_ALL_FIELDS_REQUEST = "FETCH_USERS_ALL_FIELDS_REQUEST";
 export const FETCH_USERS_ALL_FIELDS_SUCCESS = "FETCH_USERS_ALL_FIELDS_SUCCESS";
-export const FETCH_USERS_ALL_FIELDS_FAILURE = "FETCH_USERS_ALL_FIELDS_FAILURE";
+export const FETCH_USERS_ALL_FIELDS_FAILURE = "FETCH_USERS_ALL_FIELDS_FAILURE";
\ No newline at end of file
+
+export const FETCH_DISPLAYNAME_SUCCESS = "FETCH_DISPLAYNAME_SUCCESS";
\ No newline at end of file

planner-front/src/store/actions/usersActions.js

 import axios from "../../axiosPlanner";
 import { FETCH_USERS_FAILURE, FETCH_USERS_REQUEST, FETCH_USERS_SUCCESS, LOGIN_USER_FAILURE, LOGIN_USER_SUCCESS, LOGOUT_USER_FAILURE, LOGOUT_USER_SUCCESS, REGISTER_USER_FAILURE, REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS,FETCH_USERS_ALL_FIELDS_REQUEST,
     FETCH_USERS_ALL_FIELDS_SUCCESS,
-    FETCH_USERS_ALL_FIELDS_FAILURE, } from "../actionTypes/userActionTypes"
+    FETCH_USERS_ALL_FIELDS_FAILURE,
+    FETCH_DISPLAYNAME_SUCCESS, } from "../actionTypes/userActionTypes"
 import { showNotification } from "./commonActions";
 
 const registerUserRequest = () => {
@@ -136,3 +137,20 @@ export const fetchUsersAllFields = () => {
     }
 };
 
+const fetchCurrentCalendarDisplayNameSuccess = (displayName) => {
+    return {type: FETCH_DISPLAYNAME_SUCCESS, displayName}
+}
+
+export const fetchCurrentCalendarDisplayName = (userId) => {
+    return async dispatch => {
+        dispatch(fetchUsersAllFieldsRequest());
+        try {
+            const response = await axios.get(`/users/display-name/${userId}`);
+            dispatch(fetchCurrentCalendarDisplayNameSuccess(response.data.displayName));
+        } catch (e) {
+            dispatch(fetchUsersAllFieldsFailure(e.response.data));
+        }
+    }
+};
+
+

planner-front/src/store/reducers/usersReducer.js

-import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS, FETCH_USERS_SUCCESS,FETCH_USERS_ALL_FIELDS_SUCCESS } from "../actionTypes/userActionTypes";
+import { REGISTER_USER_REQUEST, REGISTER_USER_SUCCESS, REGISTER_USER_FAILURE, LOGIN_USER_SUCCESS, LOGIN_USER_FAILURE, LOGOUT_USER_SUCCESS, FETCH_USERS_SUCCESS,FETCH_USERS_ALL_FIELDS_SUCCESS, FETCH_DISPLAYNAME_SUCCESS } from "../actionTypes/userActionTypes";
 
 const initialState = {
     user: null,
     users: [],
     usersAllFields:[],
+    currentCalendarDisplayName: '',
     registerError: null,
     loginError: null,
     loading: false
@@ -27,9 +28,11 @@ const usersReducer = (state = initialState, action) => {
         case LOGOUT_USER_SUCCESS:
             return {...state, user: null};
         case FETCH_USERS_SUCCESS:
-        return {...state, loading: false, users: action.users};
+            return {...state, loading: false, users: action.users};
         case FETCH_USERS_ALL_FIELDS_SUCCESS:
-        return {...state, loading: false, usersAllFields: action.users};
+            return {...state, loading: false, usersAllFields: action.users};
+        case FETCH_DISPLAYNAME_SUCCESS:
+            return {...state, loading: false, currentCalendarDisplayName: action.displayName};
         default: 
             return state;
     }