refactor: Обновление логики сброса форм в модальных окнах
Добавлен метод resetForm для унификации сброса состояний форм.
This commit is contained in:
parent
c9c2919577
commit
17d877111c
@ -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());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -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());
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user