сделал просмотр приемов и запланированных приемов по клику на ячейку календаря

2025-06-01 20:48:57 +05:00 · 2025-06-01 20:48:57 +05:00 · b541bef7aa
commit b541bef7aa
parent 55369ac1a4
5 changed files with 130 additions and 53 deletions
--- a/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx
+++ b/web-app/src/Components/Pages/AppointmentsPage/AppointmentsPage.jsx
@ -1,21 +1,19 @@
-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/AppointmentFormModal/AppointmentFormModal.jsx";
-import {useDispatch} from "react-redux";
-import {closeModal, openModal} from "../../../Redux/Slices/appointmentsSlice.js";
-import AppointmentViewModal
-    from "./Components/AppointmentViewModal/AppointmentViewModal.jsx";
+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";
 import ScheduledAppointmentFormModal from "./Components/ScheduledAppintmentFormModal/ScheduledAppointmentFormModal.jsx";
-import ScheduledAppointmentsViewModal
-    from "./Components/ScheduledAppointmentsViewModal/ScheduledAppointmentsViewModal.jsx";
+import ScheduledAppointmentsViewModal from "./Components/ScheduledAppointmentsViewModal/ScheduledAppointmentsViewModal.jsx";
+import AppointmentsListModal from "./Components/AppointmentsListModal/AppointmentsListModal.jsx";

 const AppointmentsPage = () => {
    const appointmentsData = useAppointments();
@ -30,14 +28,14 @@ const AppointmentsPage = () => {
        {
            key: "1",
            label: "Календарь приемов",
-            children: <AppointmentsCalendarTab/>,
-            icon: <CalendarOutlined/>,
+            children: <AppointmentsCalendarTab />,
+            icon: <CalendarOutlined />,
        },
        {
            key: "2",
            label: "Таблица приемов",
-            children: <AppointmentsTableTab/>,
-            icon: <TableOutlined/>,
+            children: <AppointmentsTableTab />,
+            icon: <TableOutlined />,
        },
    ];

@ -52,7 +50,7 @@ const AppointmentsPage = () => {
    return (
        <>
            {appointmentsData.isLoading ? (
-                <LoadingIndicator/>
+                <LoadingIndicator />
            ) : (
                <>
                    <Splitter
@ -68,7 +66,7 @@ const AppointmentsPage = () => {
                            min="25%"
                            max="90%"
                        >
-                            <Tabs defaultActiveKey="1" items={items}/>
+                            <Tabs defaultActiveKey="1" items={items} />
                        </Splitter.Panel>

                        {appointmentsPageUI.showSplitterPanel && (
@ -83,7 +81,7 @@ const AppointmentsPage = () => {
                                </Typography.Title>
                                {appointmentsPageUI.upcomingEvents.length ? (
                                    <ul>
-                                        {appointmentsPageUI.upcomingEvents.map(app => (
+                                        {appointmentsPageUI.upcomingEvents.map((app) => (
                                            <li key={app.id}>
                                                {dayjs(app.appointment_datetime || app.scheduled_datetime)
                                                    .format('DD.MM.YYYY HH:mm')} -
@ -105,7 +103,7 @@ const AppointmentsPage = () => {
                        <Button
                            type="primary"
                            onClick={appointmentsPageUI.handleToggleSider}
-                            icon={appointmentsPageUI.collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
+                            icon={appointmentsPageUI.collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                            style={appointmentsPageUI.siderButtonStyle}
                        >
                            {appointmentsPageUI.siderButtonText}
@ -115,32 +113,29 @@ const AppointmentsPage = () => {
                        placement={"left"}
                        trigger="hover"
                        type="primary"
-                        icon={<PlusOutlined/>}
+                        icon={<PlusOutlined />}
                        tooltip="Создать"
                    >
                        <FloatButton
-                            icon={<PlusOutlined/>}
+                            icon={<PlusOutlined />}
                            onClick={() => dispatch(openModal())}
                            tooltip="Прием"
                        />
                        <FloatButton
-                            icon={<CalendarOutlined/>}
+                            icon={<CalendarOutlined />}
                            onClick={appointmentsPageUI.openCreateScheduledAppointmentModal}
                            tooltip="Запланированный прием"
                        />
                    </FloatButton.Group>

-                    <AppointmentFormModal
-                        onCancel={handleCancelModal}
-                    />
-
+                    <AppointmentFormModal onCancel={handleCancelModal} />
                    <AppointmentViewModal
                        visible={appointmentsPageUI.selectedAppointment !== null}
                        onCancel={appointmentsPageUI.handleCancelViewModal}
                    />
-
-                    <ScheduledAppointmentFormModal/>
-                    <ScheduledAppointmentsViewModal/>
+                    <ScheduledAppointmentFormModal />
+                    <ScheduledAppointmentsViewModal />
+                    <AppointmentsListModal />
                </>
            )}
        </>
--- a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx
+++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx
@ -1,8 +1,9 @@
-import {Calendar} from "antd";
+import { Calendar } from "antd";
 import 'dayjs/locale/ru';
 import CalendarCell from "../../../../Widgets/CalendarCell.jsx";
 import useAppointments from "../../useAppointments.js";
 import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js";
+import AppointmentsListModal from "../AppointmentsListModal/AppointmentsListModal.jsx";

 const AppointmentsCalendarTab = () => {
    const appointmentsData = useAppointments();
@ -40,6 +41,7 @@ const AppointmentsCalendarTab = () => {
                onSelect={appointmentsCalendarUI.onSelect}
                cellRender={dateCellRender}
            />
+            <AppointmentsListModal />
        </div>
    );
 };
--- a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js
+++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js
@ -1,11 +1,11 @@
-import {useDispatch, useSelector} from "react-redux";
+import { useDispatch, useSelector } from "react-redux";
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
-import {Grid} from "antd";
+import { Grid } from "antd";
 import {
-    openModal, setSelectedAppointment,
-    setSelectedAppointments,
+    openAppointmentsListModal,
+    setSelectedAppointment,
    setSelectedScheduledAppointment,
 } from "../../../../../Redux/Slices/appointmentsSlice.js";

@ -13,31 +13,26 @@ dayjs.extend(utc);
 dayjs.extend(timezone);
 dayjs.tz.setDefault('Europe/Moscow');

-const {useBreakpoint} = Grid;
+const { useBreakpoint } = Grid;

 const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
    const dispatch = useDispatch();
-    const selectedDate = dayjs.tz(useSelector(state => state.appointmentsUI.selectedDate), 'Europe/Moscow');
+    const selectedDate = dayjs.tz(useSelector((state) => state.appointmentsUI.selectedDate), 'Europe/Moscow');

    const screens = useBreakpoint();
    const fullScreenCalendar = !screens.xs;

-    const calendarContainerStyle = {padding: 20};
+    const calendarContainerStyle = { padding: 20 };

    const onSelect = (date) => {
        const selectedDateStr = date.format('YYYY-MM-DD');
-        // dispatch(setSelectedDate(selectedDateStr));
-
-        const appointmentsForDate = appointments.filter(app =>
+        const appointmentsForDate = appointments.filter((app) =>
            dayjs(app.appointment_datetime).format('YYYY-MM-DD') === selectedDateStr
        );
-
-        const scheduledForDate = scheduledAppointments.filter(app =>
+        const scheduledForDate = scheduledAppointments.filter((app) =>
            dayjs(app.scheduled_datetime).format('YYYY-MM-DD') === selectedDateStr
        );
-
-        dispatch(setSelectedAppointments([...appointmentsForDate, ...scheduledForDate]));
-        dispatch(openModal());
+        dispatch(openAppointmentsListModal([...appointmentsForDate, ...scheduledForDate]));
    };

    const onOpenAppointmentModal = (appointment) => {
@ -50,9 +45,8 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {

    const getAppointmentsByListAndDate = (list, value, isScheduled = false) => {
        const date = value.format('YYYY-MM-DD');
-        return list.filter(app =>
-            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime)
-                .format('YYYY-MM-DD') === date
+        return list.filter((app) =>
+            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime).format('YYYY-MM-DD') === date
        );
    };

--- a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentsListModal/AppointmentsListModal.jsx
+++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentsListModal/AppointmentsListModal.jsx
@ -0,0 +1,78 @@
+import { Button, List, Modal, Typography } from "antd";
+import { useDispatch, useSelector } from "react-redux";
+import dayjs from "dayjs";
+import {
+    closeAppointmentsListModal,
+    setSelectedAppointment,
+    setSelectedScheduledAppointment
+} from "../../../../../Redux/Slices/appointmentsSlice.js";
+
+const AppointmentsListModal = () => {
+    const dispatch = useDispatch();
+    const { appointmentsListModalVisible, selectedDateAppointments } = useSelector(
+        (state) => state.appointmentsUI
+    );
+
+    const handleCancel = () => {
+        dispatch(closeAppointmentsListModal());
+    };
+
+    const handleItemClick = (appointment) => {
+        if (appointment.appointment_datetime) {
+            dispatch(setSelectedAppointment(appointment));
+        } else {
+            dispatch(setSelectedScheduledAppointment(appointment));
+        }
+    };
+
+    return (
+        <Modal
+            title="Приемы на выбранную дату"
+            open={appointmentsListModalVisible}
+            onCancel={handleCancel}
+            footer={null}
+            width={600}
+        >
+            <Typography.Title level={4}>Список приемов</Typography.Title>
+            {selectedDateAppointments.length ? (
+                <List
+                    dataSource={selectedDateAppointments}
+                    renderItem={(item) => (
+                        <List.Item
+                            onClick={() => handleItemClick(item)}
+                            style={{ cursor: "pointer", padding: "8px 0" }}
+                        >
+                            <div>
+                                <p>
+                                    <b>Время:</b>{" "}
+                                    {item.appointment_datetime
+                                        ? dayjs(item.appointment_datetime).format("DD.MM.YYYY HH:mm")
+                                        : item.scheduled_datetime
+                                            ? dayjs(item.scheduled_datetime).format("DD.MM.YYYY HH:mm")
+                                            : "Не указано"}
+                                </p>
+                                <p>
+                                    <b>Тип:</b>{" "}
+                                    {item.appointment_datetime ? "Прием" : "Запланированный прием"}
+                                </p>
+                                <p>
+                                    <b>Пациент:</b>{" "}
+                                    {item.patient
+                                        ? `${item.patient.last_name} ${item.patient.first_name}`
+                                        : "Не указан"}
+                                </p>
+                            </div>
+                        </List.Item>
+                    )}
+                />
+            ) : (
+                <p>Нет приемов на эту дату</p>
+            )}
+            <Button onClick={handleCancel} style={{ marginTop: 16 }}>
+                Закрыть
+            </Button>
+        </Modal>
+    );
+};
+
+export default AppointmentsListModal;
--- a/web-app/src/Redux/Slices/appointmentsSlice.js
+++ b/web-app/src/Redux/Slices/appointmentsSlice.js
@ -2,14 +2,15 @@ import { createSlice } from '@reduxjs/toolkit';

 const initialState = {
    modalVisible: false,
-    collapsed: true,
+    collapsed: false,
    siderWidth: 300,
    hovered: false,
    selectedAppointment: null,
    selectedScheduledAppointment: null,
    scheduledModalVisible: false,
    scheduledData: null,
-    selectedAppointments: [], // Новое поле для хранения массива выбранных приемов
+    appointmentsListModalVisible: false,
+    selectedDateAppointments: [],
 };

 const appointmentsSlice = createSlice({
@ -47,8 +48,13 @@ const appointmentsSlice = createSlice({
            state.modalVisible = true;
            state.scheduledData = action.payload;
        },
-        setSelectedAppointments(state, action) {
-            state.selectedAppointments = action.payload;
+        openAppointmentsListModal(state, action) {
+            state.appointmentsListModalVisible = true;
+            state.selectedDateAppointments = action.payload;
+        },
+        closeAppointmentsListModal(state) {
+            state.appointmentsListModalVisible = false;
+            state.selectedDateAppointments = [];
        },
    },
 });
@ -57,13 +63,15 @@ export const {
    openModal,
    closeModal,
    toggleSider,
+    setSiderWidth,
    setHovered,
    setSelectedAppointment,
    setSelectedScheduledAppointment,
    openScheduledModal,
    closeScheduledModal,
    openModalWithScheduledData,
-    setSelectedAppointments,
+    openAppointmentsListModal,
+    closeAppointmentsListModal,
 } = appointmentsSlice.actions;

 export default appointmentsSlice.reducer;