feat: Добавлена загрузка и отображение данных на главной странице

Добавлены запросы для получения предстоящих и запланированных приемов.
Оптимизирована логика получения данных о приемах и расписании.
This commit is contained in:
Андрей Дувакин 2025-06-08 13:26:48 +05:00
parent c609c6471d
commit f0a712eb9d
2 changed files with 89 additions and 25 deletions

View File

@ -1,25 +1,21 @@
import { Calendar } from "antd"; import {Calendar} from "antd";
import "dayjs/locale/ru"; import "dayjs/locale/ru";
import CalendarCell from "../CalendarCell/CalendarCell.jsx"; import CalendarCell from "../CalendarCell/CalendarCell.jsx";
import useAppointments from "../../useAppointments.js";
import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js"; import useAppointmentCalendarUI from "./useAppointmentCalendarUI.js";
import AppointmentsListModal from "../AppointmentsListModal/AppointmentsListModal.jsx"; import AppointmentsListModal from "../AppointmentsListModal/AppointmentsListModal.jsx";
import dayjs from "dayjs"; import dayjs from "dayjs";
import PropTypes from "prop-types";
const AppointmentsCalendarTab = () => { const AppointmentsCalendarTab = ({currentMonth, onMonthChange, appointments, scheduledAppointments}) => {
const appointmentsData = useAppointments(); const appointmentsCalendarUI = useAppointmentCalendarUI(appointments, scheduledAppointments);
const appointmentsCalendarUI = useAppointmentCalendarUI(
appointmentsData.appointments,
appointmentsData.scheduledAppointments
);
const dateCellRender = (value) => { const dateCellRender = (value) => {
const appointmentsForDate = appointmentsCalendarUI.getAppointmentsByListAndDate( const appointmentsForDate = appointmentsCalendarUI.getAppointmentsByListAndDate(
appointmentsData.appointments, appointments,
value value
); );
const scheduledForDate = appointmentsCalendarUI.getAppointmentsByListAndDate( const scheduledForDate = appointmentsCalendarUI.getAppointmentsByListAndDate(
appointmentsData.scheduledAppointments, scheduledAppointments,
value, value,
true true
); );
@ -43,14 +39,26 @@ const AppointmentsCalendarTab = () => {
<div style={appointmentsCalendarUI.calendarContainerStyle}> <div style={appointmentsCalendarUI.calendarContainerStyle}>
<Calendar <Calendar
fullscreen={appointmentsCalendarUI.fullScreenCalendar} fullscreen={appointmentsCalendarUI.fullScreenCalendar}
value={appointmentsCalendarUI.selectedDate} value={currentMonth} // Используем currentMonth вместо selectedDate
onSelect={appointmentsCalendarUI.onSelect} onSelect={appointmentsCalendarUI.onSelect}
onPanelChange={appointmentsCalendarUI.onPanelChange} onPanelChange={(value, mode) => {
appointmentsCalendarUI.onPanelChange(value, mode);
if (mode === "month") {
onMonthChange(value); // Вызываем onMonthChange при смене месяца
}
}}
cellRender={dateCellRender} cellRender={dateCellRender}
/> />
<AppointmentsListModal /> <AppointmentsListModal/>
</div> </div>
); );
}; };
AppointmentsCalendarTab.propTypes = {
currentMonth: PropTypes.object.isRequired,
onMonthChange: PropTypes.func.isRequired,
appointments: PropTypes.array.isRequired,
scheduledAppointments: PropTypes.array.isRequired,
};
export default AppointmentsCalendarTab; export default AppointmentsCalendarTab;

View File

@ -1,5 +1,8 @@
import {useGetAppointmentsQuery} from "../../../Api/appointmentsApi.js"; import {useGetAppointmentsQuery, useGetUpcomingAppointmentsQuery} from "../../../Api/appointmentsApi.js";
import {useGetScheduledAppointmentsQuery} from "../../../Api/scheduledAppointmentsApi.js"; import {
useGetScheduledAppointmentsQuery,
useGetUpcomingScheduledAppointmentsQuery
} from "../../../Api/scheduledAppointmentsApi.js";
import {useGetAllPatientsQuery} from "../../../Api/patientsApi.js"; import {useGetAllPatientsQuery} from "../../../Api/patientsApi.js";
import {notification} from "antd"; import {notification} from "antd";
import {useEffect} from "react"; import {useEffect} from "react";
@ -14,32 +17,56 @@ import {
openModal as openPatientModal, openModal as openPatientModal,
} from "../../../Redux/Slices/patientsSlice.js"; } from "../../../Redux/Slices/patientsSlice.js";
import dayjs from "dayjs"; import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import timezone from "dayjs/plugin/timezone";
import isBetween from "dayjs/plugin/isBetween"; import isBetween from "dayjs/plugin/isBetween";
import {useGetAppointmentTypesQuery} from "../../../Api/appointmentTypesApi.js"; import {useGetAppointmentTypesQuery} from "../../../Api/appointmentTypesApi.js";
dayjs.extend(utc);
dayjs.extend(timezone);
dayjs.extend(isBetween); dayjs.extend(isBetween);
const useHomePage = () => { const useHomePage = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const {userData} = useSelector((state) => state.auth);
const { const startDate = dayjs().startOf('month').format('YYYY-MM-DD');
userData const endDate = dayjs().endOf('month').format('YYYY-MM-DD');
} = useSelector((state) => state.auth);
const { const {
data: appointments = [], data: appointments = [],
isLoading: isLoadingAppointments, isLoading: isLoadingAppointments,
isError: isErrorAppointments, isError: isErrorAppointments,
} = useGetAppointmentsQuery((userData.id), { } = useGetAppointmentsQuery({doctor_id: userData.id, start_date: startDate, end_date: endDate}, {
pollingInterval: 20000, pollingInterval: 60000,
skip: !userData.id,
}); });
const { const {
data: scheduledAppointments = [], data: scheduledAppointments = [],
isLoading: isLoadingScheduledAppointments, isLoading: isLoadingScheduledAppointments,
isError: isErrorScheduledAppointments, isError: isErrorScheduledAppointments,
} = useGetScheduledAppointmentsQuery((userData.id), { } = useGetScheduledAppointmentsQuery({doctor_id: userData.id, start_date: startDate, end_date: endDate}, {
pollingInterval: 20000, pollingInterval: 60000,
skip: !userData.id,
});
const {
data: upcomingAppointments = [],
isLoading: isLoadingUpcomingAppointments,
isError: isErrorUpcomingAppointments,
} = useGetUpcomingAppointmentsQuery(userData.id, {
pollingInterval: 60000,
skip: !userData.id,
});
const {
data: upcomingScheduledAppointments = [],
isLoading: isLoadingUpcomingScheduledAppointments,
isError: isErrorUpcomingScheduledAppointments,
} = useGetUpcomingScheduledAppointmentsQuery(userData.id, {
pollingInterval: 60000,
skip: !userData.id,
}); });
const { const {
@ -47,7 +74,8 @@ const useHomePage = () => {
isLoading: isLoadingPatients, isLoading: isLoadingPatients,
isError: isErrorPatients, isError: isErrorPatients,
} = useGetAllPatientsQuery(undefined, { } = useGetAllPatientsQuery(undefined, {
pollingInterval: 20000, pollingInterval: 60000,
skip: !userData.id,
}); });
const { const {
@ -55,7 +83,8 @@ const useHomePage = () => {
isLoading: isLoadingAppointmentTypes, isLoading: isLoadingAppointmentTypes,
isError: isErrorAppointmentTypes, isError: isErrorAppointmentTypes,
} = useGetAppointmentTypesQuery(undefined, { } = useGetAppointmentTypesQuery(undefined, {
pollingInterval: 20000, pollingInterval: 60000,
skip: !userData.id,
}); });
useEffect(() => { useEffect(() => {
@ -73,6 +102,20 @@ const useHomePage = () => {
placement: "topRight", placement: "topRight",
}); });
} }
if (isErrorUpcomingAppointments) {
notification.error({
message: "Ошибка",
description: "Ошибка загрузки предстоящих приемов.",
placement: "topRight",
});
}
if (isErrorUpcomingScheduledAppointments) {
notification.error({
message: "Ошибка",
description: "Ошибка загрузки предстоящих запланированных приемов.",
placement: "topRight",
});
}
if (isErrorPatients) { if (isErrorPatients) {
notification.error({ notification.error({
message: "Ошибка", message: "Ошибка",
@ -87,7 +130,14 @@ const useHomePage = () => {
placement: "topRight", placement: "topRight",
}); });
} }
}, [isErrorAppointments, isErrorScheduledAppointments, isErrorPatients, isErrorAppointmentTypes]); }, [
isErrorAppointments,
isErrorScheduledAppointments,
isErrorUpcomingAppointments,
isErrorUpcomingScheduledAppointments,
isErrorPatients,
isErrorAppointmentTypes
]);
const handleEventClick = (event) => { const handleEventClick = (event) => {
if (event.appointment_datetime) { if (event.appointment_datetime) {
@ -113,15 +163,21 @@ const useHomePage = () => {
patients, patients,
appointments, appointments,
scheduledAppointments, scheduledAppointments,
upcomingAppointments,
upcomingScheduledAppointments,
appointmentTypes, appointmentTypes,
isLoading: isLoading:
isLoadingAppointments || isLoadingAppointments ||
isLoadingScheduledAppointments || isLoadingScheduledAppointments ||
isLoadingUpcomingAppointments ||
isLoadingUpcomingScheduledAppointments ||
isLoadingPatients || isLoadingPatients ||
isLoadingAppointmentTypes, isLoadingAppointmentTypes,
isError: isError:
isErrorAppointments || isErrorAppointments ||
isErrorScheduledAppointments || isErrorScheduledAppointments ||
isErrorUpcomingAppointments ||
isErrorUpcomingScheduledAppointments ||
isErrorPatients || isErrorPatients ||
isErrorAppointmentTypes, isErrorAppointmentTypes,
handleEventClick, handleEventClick,