починил переключение месяцев в календаре
This commit is contained in:
parent
a9c5f87104
commit
2ad1711d15
@ -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 />
|
||||
|
||||
@ -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,
|
||||
};
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user