From c2a846f433e58716cda3568928382995c3ad0b8b Mon Sep 17 00:00:00 2001 From: andrei Date: Sun, 1 Jun 2025 17:45:45 +0500 Subject: [PATCH] =?UTF-8?q?=D1=81=D0=B4=D0=B5=D0=BB=D0=B0=D0=BB=20=D0=BF?= =?UTF-8?q?=D1=80=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=20=D0=B8=D0=BD=D1=84?= =?UTF-8?q?=D0=BE=D1=80=D0=BC=D0=B0=D1=86=D0=B8=D0=B8=20=D0=BE=20=D0=BF?= =?UTF-8?q?=D1=80=D0=B8=D0=B5=D0=BC=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AppointmentsPage/AppointmentsPage.jsx | 40 +++++---- .../AppointmentsCalendarTab.jsx | 17 +--- .../useAppointmentCalendarUI.js | 88 ++----------------- .../AppointmentFormModal.jsx | 2 +- .../useAppointmentFormModal.js | 6 +- .../useAppointmentFormModalUI.js | 4 +- .../AppointmentViewModal.jsx | 72 +++++++++++++++ .../useAppointmentViewUI.js | 29 ++++++ .../AppointmentsPage/useAppointmentsUI.js | 18 +++- web-app/src/Redux/Slices/appointmentsSlice.js | 5 -- 10 files changed, 156 insertions(+), 125 deletions(-) rename web-app/src/Components/Pages/AppointmentsPage/Components/{AppointmentCalendarTab/Components => }/AppointmentFormModal/AppointmentFormModal.jsx (99%) rename web-app/src/Components/Pages/AppointmentsPage/Components/{AppointmentCalendarTab/Components => }/AppointmentFormModal/useAppointmentFormModal.js (83%) rename web-app/src/Components/Pages/AppointmentsPage/Components/{AppointmentCalendarTab/Components => }/AppointmentFormModal/useAppointmentFormModalUI.js (97%) create mode 100644 web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentViewModal/AppointmentViewModal.jsx create mode 100644 web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentViewModal/useAppointmentViewUI.js 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; },