refactor: Обновление логики сброса форм в модальных окнах

Добавлен метод resetForm для унификации сброса состояний форм.
This commit is contained in:
Андрей Дувакин 2025-06-03 20:54:05 +05:00
parent c9c2919577
commit 17d877111c
2 changed files with 38 additions and 32 deletions

View File

@ -1,18 +1,18 @@
import { Form, notification } from "antd"; import {Form, notification} from "antd";
import { useDispatch, useSelector } from "react-redux"; import {useDispatch, useSelector} from "react-redux";
import { closeModal, setSelectedScheduledAppointment } from "../../../Redux/Slices/appointmentsSlice.js"; import {closeModal, setSelectedScheduledAppointment} from "../../../Redux/Slices/appointmentsSlice.js";
import {useEffect, useMemo, useRef, useState} from "react"; import {useEffect, useMemo, useRef, useState} from "react";
import dayjs from "dayjs"; import dayjs from "dayjs";
import { useGetAppointmentsQuery } from "../../../Api/appointmentsApi.js"; import {useGetAppointmentsQuery} from "../../../Api/appointmentsApi.js";
import { Grid } from "antd"; import {Grid} from "antd";
const { useBreakpoint } = Grid; const {useBreakpoint} = Grid;
const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointment, useGetByPatientIdQuery) => { const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointment, useGetByPatientIdQuery) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const { userData } = useSelector((state) => state.auth); const {userData} = useSelector((state) => state.auth);
const { modalVisible, scheduledData } = useSelector((state) => state.appointmentsUI); const {modalVisible, scheduledData} = useSelector((state) => state.appointmentsUI);
const [form] = Form.useForm(); const [form] = Form.useForm();
const screens = useBreakpoint(); const screens = useBreakpoint();
@ -25,7 +25,7 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
const [searchPreviousAppointments, setSearchPreviousAppointments] = useState(""); const [searchPreviousAppointments, setSearchPreviousAppointments] = useState("");
const editorRef = useRef(null); const editorRef = useRef(null);
const { data: appointments = [] } = useGetAppointmentsQuery(userData.id, { const {data: appointments = []} = useGetAppointmentsQuery(userData.id, {
pollingInterval: 20000, pollingInterval: 20000,
}); });
@ -38,14 +38,14 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
skip: !selectedPatient, skip: !selectedPatient,
}); });
const blockStepStyle = { marginBottom: 16 }; const blockStepStyle = {marginBottom: 16};
const searchInputStyle = { marginBottom: 16 }; const searchInputStyle = {marginBottom: 16};
const chooseContainerStyle = { maxHeight: 400, overflowY: "auto" }; const chooseContainerStyle = {maxHeight: 400, overflowY: "auto"};
const loadingContainerStyle = { display: "flex", justifyContent: "center", alignItems: "center", height: 200 }; const loadingContainerStyle = {display: "flex", justifyContent: "center", alignItems: "center", height: 200};
const stepsContentStyle = { marginBottom: 16 }; const stepsContentStyle = {marginBottom: 16};
const stepsIndicatorStyle = { marginBottom: 16 }; const stepsIndicatorStyle = {marginBottom: 16};
const footerRowStyle = { marginTop: 16 }; const footerRowStyle = {marginTop: 16};
const footerButtonStyle = { marginRight: 8 }; const footerButtonStyle = {marginRight: 8};
const screenXS = !screens.sm; const screenXS = !screens.sm;
const direction = screenXS ? "vertical" : "horizontal"; const direction = screenXS ? "vertical" : "horizontal";
@ -201,7 +201,16 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
const resetPatient = () => { const resetPatient = () => {
setSelectedPatient(null); setSelectedPatient(null);
form.setFieldsValue({ patient_id: undefined }); form.setFieldsValue({patient_id: undefined});
};
const resetForm = () => {
form.resetFields();
setSelectedPatient(null);
setCurrentStep(0);
setSearchPatientString("");
setFormValues({});
setIsDrawerVisible(false);
}; };
const handleSetAppointmentDate = (date) => setAppointmentDate(date); const handleSetAppointmentDate = (date) => setAppointmentDate(date);
@ -226,7 +235,7 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
}); });
return; return;
} }
form.setFieldsValue({ patient_id: selectedPatient.id }); form.setFieldsValue({patient_id: selectedPatient.id});
setCurrentStep(1); setCurrentStep(1);
} else if (currentStep === 1) { } else if (currentStep === 1) {
try { try {
@ -290,10 +299,7 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
}); });
dispatch(closeModal()); dispatch(closeModal());
form.resetFields(); resetForm();
setSelectedPatient(null);
setCurrentStep(0);
setFormValues({});
} catch (error) { } catch (error) {
notification.error({ notification.error({
message: "Ошибка", message: "Ошибка",
@ -316,12 +322,7 @@ const useAppointmentFormModalUI = (createAppointment, patients, cancelAppointmen
}; };
const handleCancel = () => { const handleCancel = () => {
form.resetFields(); resetForm();
setSelectedPatient(null);
setCurrentStep(0);
setSearchPatientString("");
setFormValues({});
setIsDrawerVisible(false);
dispatch(closeModal()); dispatch(closeModal());
}; };

View File

@ -17,6 +17,12 @@ const useScheduledAppointmentFormModalUI = (patients, createScheduledAppointment
const [selectedDateTime, setSelectedDateTime] = useState(dayjs(new Date()).add(1, 'day')); const [selectedDateTime, setSelectedDateTime] = useState(dayjs(new Date()).add(1, 'day'));
const [selectedAppointmentType, setSelectedAppointmentType] = useState(null); const [selectedAppointmentType, setSelectedAppointmentType] = useState(null);
const resetForm = () => {
setSelectedPatient(null);
setSelectedDateTime(dayjs(new Date()).add(1, 'day'));
setSelectedAppointmentType(null);
};
const handleCreateScheduledAppointment = async () => { const handleCreateScheduledAppointment = async () => {
try { try {
const data = { const data = {
@ -32,9 +38,7 @@ const useScheduledAppointmentFormModalUI = (patients, createScheduledAppointment
description: 'Прием успешно запланирован.', description: 'Прием успешно запланирован.',
}); });
setSelectedPatient(null); resetForm();
setSelectedDateTime(dayjs(new Date()).add(1, 'day'));
setSelectedAppointmentType(null);
dispatch(closeScheduledModal()); dispatch(closeScheduledModal());
} catch (error) { } catch (error) {
@ -83,6 +87,7 @@ const useScheduledAppointmentFormModalUI = (patients, createScheduledAppointment
const modalWidth = 700; const modalWidth = 700;
const handleCancelModal = () => { const handleCancelModal = () => {
resetForm();
dispatch(closeScheduledModal()); dispatch(closeScheduledModal());
}; };