сделал просмотр приемов и запланированных приемов по клику на ячейку календаря
This commit is contained in:
parent
55369ac1a4
commit
b541bef7aa
@ -7,15 +7,13 @@ 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 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 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();
|
||||
@ -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')} -
|
||||
@ -130,17 +128,14 @@ const AppointmentsPage = () => {
|
||||
/>
|
||||
</FloatButton.Group>
|
||||
|
||||
<AppointmentFormModal
|
||||
onCancel={handleCancelModal}
|
||||
/>
|
||||
|
||||
<AppointmentFormModal onCancel={handleCancelModal} />
|
||||
<AppointmentViewModal
|
||||
visible={appointmentsPageUI.selectedAppointment !== null}
|
||||
onCancel={appointmentsPageUI.handleCancelViewModal}
|
||||
/>
|
||||
|
||||
<ScheduledAppointmentFormModal />
|
||||
<ScheduledAppointmentsViewModal />
|
||||
<AppointmentsListModal />
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
|
||||
@ -3,6 +3,7 @@ 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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -4,8 +4,8 @@ import utc from "dayjs/plugin/utc";
|
||||
import timezone from "dayjs/plugin/timezone";
|
||||
import { Grid } from "antd";
|
||||
import {
|
||||
openModal, setSelectedAppointment,
|
||||
setSelectedAppointments,
|
||||
openAppointmentsListModal,
|
||||
setSelectedAppointment,
|
||||
setSelectedScheduledAppointment,
|
||||
} from "../../../../../Redux/Slices/appointmentsSlice.js";
|
||||
|
||||
@ -17,7 +17,7 @@ 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;
|
||||
@ -26,18 +26,13 @@ const useAppointmentCalendarUI = (appointments, scheduledAppointments) => {
|
||||
|
||||
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
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -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;
|
||||
@ -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;
|
||||
Loading…
x
Reference in New Issue
Block a user