diff --git a/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx b/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx index 14fb209..5a07f50 100644 --- a/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx +++ b/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx @@ -1,15 +1,18 @@ -import { Button, FloatButton, Result, Tabs, Typography } from "antd"; -import { Splitter } from "antd"; -import { CalendarOutlined, TableOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PlusOutlined } from "@ant-design/icons"; +import {Button, FloatButton, Result, Tabs, Typography} from "antd"; +import {Splitter} from "antd"; +import {CalendarOutlined, TableOutlined, MenuFoldOutlined, MenuUnfoldOutlined, PlusOutlined} from "@ant-design/icons"; import AppointmentsCalendarTab from "./Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx"; import AppointmentsTableTab from "./Components/AppointmentTableTab/AppointmentsTableTab.jsx"; import useAppointmentsUI from "./useAppointmentsUI.js"; import useAppointments from "./useAppointments.js"; import dayjs from 'dayjs'; import LoadingIndicator from "../../Widgets/LoadingIndicator.jsx"; -import AppointmentFormModal from "./Components/AppointmentCalendarTab/Components/AppointmentFormModal/AppointmentFormModal.jsx"; -import { useDispatch } from "react-redux"; -import { closeModal, openModal } from "../../../Redux/Slices/appointmentsSlice.js"; +import AppointmentFormModal + from "./Components/AppointmentFormModal/AppointmentFormModal.jsx"; +import {useDispatch} from "react-redux"; +import {closeModal, openModal} from "../../../Redux/Slices/appointmentsSlice.js"; +import AppointmentViewModal + from "./Components/AppointmentViewModal/AppointmentViewModal.jsx"; const AppointmentsPage = () => { const appointmentsData = useAppointments(); @@ -24,14 +27,14 @@ const AppointmentsPage = () => { { key: "1", label: "Календарь приемов", - children: , - icon: , + children: , + icon: , }, { key: "2", label: "Таблица приемов", - children: , - icon: , + children: , + icon: , }, ]; @@ -46,7 +49,7 @@ const AppointmentsPage = () => { return ( <> {appointmentsData.isLoading ? ( - + ) : ( <> { min="25%" max="90%" > - + {appointmentsPageUI.showSplitterPanel && ( @@ -100,7 +103,7 @@ const AppointmentsPage = () => { + + + + ); +}; + +AppointmentViewModal.propTypes = { + visible: PropTypes.bool.isRequired, + onCancel: PropTypes.func.isRequired, +}; + +export default AppointmentViewModal; \ No newline at end of file diff --git a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentViewModal/useAppointmentViewUI.js b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentViewModal/useAppointmentViewUI.js new file mode 100644 index 0000000..542570f --- /dev/null +++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentViewModal/useAppointmentViewUI.js @@ -0,0 +1,29 @@ +import {useDispatch, useSelector} from "react-redux"; + +const useAppointmentViewUI = () => { + const dispatch = useDispatch(); + const { + selectedAppointment, + } = useSelector(state => state.appointmentsUI); + + const modalWidth = 700; + const blockStyle = {marginBottom: 16}; + const footerRowStyle = {marginTop: 16}; + const footerButtonStyle = {marginRight: 8}; + + + const getDateString = (date) => { + return new Date(date).toLocaleDateString('ru-RU'); + }; + + return { + modalWidth, + blockStyle, + footerRowStyle, + footerButtonStyle, + selectedAppointment, + getDateString, + }; +}; + +export default useAppointmentViewUI; \ No newline at end of file diff --git a/web-app/src/Components/Pages/AppointmentsPage/useAppointmentsUI.js b/web-app/src/Components/Pages/AppointmentsPage/useAppointmentsUI.js index a1a56f3..6f47bf8 100644 --- a/web-app/src/Components/Pages/AppointmentsPage/useAppointmentsUI.js +++ b/web-app/src/Components/Pages/AppointmentsPage/useAppointmentsUI.js @@ -1,6 +1,11 @@ import { useDispatch, useSelector } from "react-redux"; import { Grid } from "antd"; -import { setHovered, toggleSider } from "../../../Redux/Slices/appointmentsSlice.js"; +import { + setHovered, + setSelectedAppointment, + setSelectedScheduledAppointment, + toggleSider +} from "../../../Redux/Slices/appointmentsSlice.js"; import { useEffect, useMemo } from "react"; import dayjs from "dayjs"; @@ -12,6 +17,7 @@ const useAppointmentsUI = (appointments, scheduledAppointments) => { collapsed, siderWidth, hovered, + selectedAppointment, } = useSelector(state => state.appointmentsUI); const screens = useBreakpoint(); @@ -45,6 +51,14 @@ const useAppointmentsUI = (appointments, scheduledAppointments) => { const handleHoverSider = () => dispatch(setHovered(true)); const handleLeaveSider = () => dispatch(setHovered(false)); + const handleCancelViewModal = () => { + if (selectedAppointment) { + dispatch(setSelectedAppointment(null)); + } else { + dispatch(setSelectedScheduledAppointment(null)); + } + }; + const openCreateScheduledAppointmentModal = () => { // Логика для запланированных приемов будет добавлена позже console.log('Открыть модальное окно для запланированного приема'); @@ -71,6 +85,8 @@ const useAppointmentsUI = (appointments, scheduledAppointments) => { siderButtonContainerStyle, siderButtonStyle, upcomingEvents, + selectedAppointment, + handleCancelViewModal, handleToggleSider, handleHoverSider, handleLeaveSider, diff --git a/web-app/src/Redux/Slices/appointmentsSlice.js b/web-app/src/Redux/Slices/appointmentsSlice.js index 4ac6f8f..85c556a 100644 --- a/web-app/src/Redux/Slices/appointmentsSlice.js +++ b/web-app/src/Redux/Slices/appointmentsSlice.js @@ -1,12 +1,10 @@ import { createSlice } from "@reduxjs/toolkit"; -import dayjs from "dayjs"; const initialState = { collapsed: true, siderWidth: 250, hovered: false, modalVisible: false, - selectedAppointments: [], selectedAppointment: null, scheduledAppointments: [], selectedScheduledAppointment: null, @@ -34,9 +32,6 @@ const appointmentsSlice = createSlice({ closeModal: (state) => { state.modalVisible = false; }, - setSelectedAppointments: (state, action) => { - state.selectedAppointments = action.payload; - }, setSelectedAppointment: (state, action) => { state.selectedAppointment = action.payload; },