From 2ad1711d15598ab358f32f68d31c66d7f705f27b Mon Sep 17 00:00:00 2001
From: andrei <andrei@duvakin.ru>
Date: Sun, 1 Jun 2025 22:52:16 +0500
Subject: [PATCH] =?UTF-8?q?=D0=BF=D0=BE=D1=87=D0=B8=D0=BD=D0=B8=D0=BB=20?=
 =?UTF-8?q?=D0=BF=D0=B5=D1=80=D0=B5=D0=BA=D0=BB=D1=8E=D1=87=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B5=20=D0=BC=D0=B5=D1=81=D1=8F=D1=86=D0=B5=D0=B2=20?=
 =?UTF-8?q?=D0=B2=20=D0=BA=D0=B0=D0=BB=D0=B5=D0=BD=D0=B4=D0=B0=D1=80=D0=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AppointmentsCalendarTab.jsx               |  3 +-
 .../useAppointmentCalendarUI.js               | 21 ++++++----
 .../src/Components/Widgets/CalendarCell.jsx   | 38 ++++++++++++++-----
 web-app/src/Redux/Slices/appointmentsSlice.js |  6 +++
 4 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx
index 48cd003..f675b35 100644
--- a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx
+++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/AppointmentsCalendarTab.jsx
@@ -1,5 +1,5 @@
 import { Calendar } from "antd";
-import 'dayjs/locale/ru';
+import "dayjs/locale/ru";
 import CalendarCell from "../../../../Widgets/CalendarCell.jsx";
 import useAppointments from "../../useAppointments.js";
 import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js";
@@ -45,6 +45,7 @@ const AppointmentsCalendarTab = () => {
                 fullscreen={appointmentsCalendarUI.fullScreenCalendar}
                 value={appointmentsCalendarUI.selectedDate}
                 onSelect={appointmentsCalendarUI.onSelect}
+                onPanelChange={appointmentsCalendarUI.onPanelChange}
                 cellRender={dateCellRender}
             />
             <AppointmentsListModal />
diff --git a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js
index 425496d..35ce208 100644
--- a/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js
+++ b/web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/useAppointmentCalendarUI.js
@@ -7,17 +7,18 @@ import {
     openAppointmentsListModal,
     setSelectedAppointment,
     setSelectedScheduledAppointment,
+    setSelectedDate,
 } from "../../../../../Redux/Slices/appointmentsSlice.js";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
-dayjs.tz.setDefault('Europe/Moscow');
+dayjs.tz.setDefault("Europe/Moscow");
 
 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;
@@ -25,14 +26,19 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
     const calendarContainerStyle = { padding: 20 };
 
     const onSelect = (date) => {
-        const selectedDateStr = date.format('YYYY-MM-DD');
+        const selectedDateStr = date.format("YYYY-MM-DD");
         const appointmentsForDate = appointments.filter((app) =>
-            dayjs(app.appointment_datetime).format('YYYY-MM-DD') === selectedDateStr
+            dayjs(app.appointment_datetime).format("YYYY-MM-DD") === selectedDateStr
         );
         const scheduledForDate = scheduledAppointments.filter((app) =>
-            dayjs(app.scheduled_datetime).format('YYYY-MM-DD') === selectedDateStr
+            dayjs(app.scheduled_datetime).format("YYYY-MM-DD") === selectedDateStr
         );
         dispatch(openAppointmentsListModal([...appointmentsForDate, ...scheduledForDate]));
+        dispatch(setSelectedDate(date.toISOString()));
+    };
+
+    const onPanelChange = (date) => {
+        dispatch(setSelectedDate(date.startOf("month").toISOString()));
     };
 
     const onOpenAppointmentModal = (appointment) => {
@@ -44,9 +50,9 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
     };
 
     const getAppointmentsByListAndDate = (list, value, isScheduled = false) => {
-        const date = value.format('YYYY-MM-DD');
+        const date = value.format("YYYY-MM-DD");
         return list.filter((app) =>
-            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime).format('YYYY-MM-DD') === date
+            dayjs(isScheduled ? app.scheduled_datetime : app.appointment_datetime).format("YYYY-MM-DD") === date
         );
     };
 
@@ -55,6 +61,7 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
         fullScreenCalendar,
         calendarContainerStyle,
         onSelect,
+        onPanelChange,
         getAppointmentsByListAndDate,
         onOpenAppointmentModal,
     };
diff --git a/web-app/src/Components/Widgets/CalendarCell.jsx b/web-app/src/Components/Widgets/CalendarCell.jsx
index 5e8cdb1..8bc3497 100644
--- a/web-app/src/Components/Widgets/CalendarCell.jsx
+++ b/web-app/src/Components/Widgets/CalendarCell.jsx
@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from "react";
-import { Badge, Col, Tag, Tooltip } from "antd";
+import {useEffect, useRef, useState} from "react";
+import {Badge, Col, Tag, Tooltip} from "antd";
 import dayjs from "dayjs";
 import PropTypes from "prop-types";
-import { AppointmentPropType } from "../../Types/appointmentPropType.js";
-import { ScheduledAppointmentPropType } from "../../Types/scheduledAppointmentPropType.js";
+import {AppointmentPropType} from "../../Types/appointmentPropType.js";
+import {ScheduledAppointmentPropType} from "../../Types/scheduledAppointmentPropType.js";
 
-const CalendarCell = ({ allAppointments, onCellClick, onItemClick }) => {
+const CalendarCell = ({allAppointments, onCellClick, onItemClick}) => {
     const containerRef = useRef(null);
     const [isCompressed, setIsCompressed] = useState(false);
     const COMPRESSION_THRESHOLD = 70;
@@ -33,9 +33,9 @@ const CalendarCell = ({ allAppointments, onCellClick, onItemClick }) => {
             }}
         >
             {!isCompressed && (
-                <ul style={{ padding: 0, margin: 0 }}>
+                <ul style={{padding: 0, margin: 0}}>
                     {allAppointments.map((app) => (
-                        <Col key={app.id} style={{ overflowX: "hidden" }}>
+                        <Col key={app.id} style={{overflowX: "hidden"}}>
                             <Tooltip
                                 title={`${
                                     app.appointment_datetime ? "Прошедший прием" : "Запланированный прием"
@@ -47,13 +47,31 @@ const CalendarCell = ({ allAppointments, onCellClick, onItemClick }) => {
                                         e.stopPropagation();
                                         onItemClick(app);
                                     }}
-                                    style={{ margin: "2px 2px 0 0", cursor: "pointer", width: "95%", minHeight: 30 }}
+                                    style={{
+                                        margin: "2px 2px 0 0",
+                                        cursor: "pointer",
+                                        width: "95%",
+                                        minHeight: 30,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        overflow: "hidden",
+                                    }}
                                 >
                                     <Badge
                                         status={app.appointment_datetime ? "success" : "processing"}
                                         text={
-                                            dayjs(app.appointment_datetime || app.scheduled_datetime).format("HH:mm") +
-                                            ` ${app.patient?.last_name || ""} ${app.patient?.first_name || ""}`
+                                            <span
+                                                style={{
+                                                    whiteSpace: "nowrap",
+                                                    overflow: "hidden",
+                                                    textOverflow: "ellipsis",
+                                                    display: "inline-block",
+                                                    width: "100%",
+                                                }}
+                                            >
+                        {dayjs(app.appointment_datetime || app.scheduled_datetime).format("HH:mm") +
+                            ` ${app.patient?.last_name || ""} ${app.patient?.first_name || ""}`}
+                      </span>
                                         }
                                     />
                                 </Tag>
diff --git a/web-app/src/Redux/Slices/appointmentsSlice.js b/web-app/src/Redux/Slices/appointmentsSlice.js
index af8b083..252858a 100644
--- a/web-app/src/Redux/Slices/appointmentsSlice.js
+++ b/web-app/src/Redux/Slices/appointmentsSlice.js
@@ -1,6 +1,8 @@
 import { createSlice } from '@reduxjs/toolkit';
+import dayjs from "dayjs";
 
 const initialState = {
+    selectedDate: dayjs().toISOString(),
     modalVisible: false,
     collapsed: true,
     siderWidth: 300,
@@ -17,6 +19,9 @@ const appointmentsSlice = createSlice({
     name: 'appointmentsUI',
     initialState,
     reducers: {
+        setSelectedDate(state, action) {
+            state.selectedDate = action.payload;
+        },
         openModal(state) {
             state.modalVisible = true;
         },
@@ -60,6 +65,7 @@ const appointmentsSlice = createSlice({
 });
 
 export const {
+    setSelectedDate,
     openModal,
     closeModal,
     toggleSider,