начал переделывать поэтапное создание приема

web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/Components/AppointmentFormModal/AppointmentFormModal.jsx

@@ -3,11 +3,25 @@ import 'react-quill/dist/quill.snow.css';
 import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
-import { Button, DatePicker, Form, InputNumber, Modal, Result, Select } from "antd";
+import {
+    Button,
+    Collapse,
+    DatePicker,
+    Form,
+    Input,
+    InputNumber,
+    Modal,
+    Result, Row,
+    Select,
+    Spin,
+    Steps,
+    Typography
+} from "antd";
 import useAppointmentFormModal from "./useAppointmentFormModal.js";
 import useAppointmentFormModalUI from "./useAppointmentFormModalUI.js";
 import LoadingIndicator from "../../../../../../Widgets/LoadingIndicator.jsx";
 import {DefaultModalPropType} from "../../../../../../../Types/defaultModalPropType.js";
+import {useMemo} from "react";
 
 dayjs.extend(utc);
 dayjs.extend(timezone);
@@ -32,17 +46,60 @@ const AppointmentFormModal = ({ visible, onCancel }) => {
         );
     }
 
-    return (
+    const patientsItems = appointmentFormModalData.filteredPatients.map((patient) => ({
-        <>
+        key: patient.id,
-            {appointmentFormModalData.isLoading ? (
+        label: `${patient.last_name} ${patient.first_name} (${appointmentFormModalUI.getDateString(patient.birthday)})`,
-                <LoadingIndicator />
+        children: <div>
-            ) : (
+            <p><b>Пациент:</b> {patient.last_name} {patient.first_name}</p>
-                <Modal
+            <p><b>Дата рождения:</b> {appointmentFormModalUI.getDateString(patient.birthday)}</p>
-                    title={appointmentFormModalUI.selectedAppointment ? "Редактировать прием" : "Создать прием"}
+            <p><b>Диагноз:</b> {patient.diagnosis}</p>
-                    open={appointmentFormModalUI.modalVisible}
+            <p><b>Email:</b> {patient.email}</p>
-                    onCancel={appointmentFormModalUI.handleCancel}
+            <p><b>Телефон:</b> {patient.phone}</p>
-                    footer={null}
+            <Button type="primary" onClick={() => appointmentFormModalUI.setSelectedPatient(patient)}>Выбрать</Button>
+        </div>,
+    }));
+
+    const SelectPatientStep = useMemo(() => {
+        return appointmentFormModalUI.selectedPatient ? (
+            <div style={appointmentFormModalUI.blockStepStyle}>
+                <Typography.Text strong>
+                    {appointmentFormModalUI.selectedPatient.last_name} {appointmentFormModalUI.selectedPatient.first_name}
+                </Typography.Text>
+                <p><b>Дата
+                    рождения:</b> {appointmentFormModalUI.getSelectedPatientBirthdayString()}
+                </p>
+                <p><b>Email:</b> {appointmentFormModalUI.selectedPatient.email}</p>
+                <p><b>Телефон:</b> {appointmentFormModalUI.selectedPatient.phone}</p>
+                <Button
+                    type="primary"
+                    onClick={appointmentFormModalUI.resetPatient}
+                    danger
                 >
+                    Выбрать другого пациента
+                </Button>
+            </div>
+        ) : (
+            <>
+                <Input
+                    placeholder="Поиск пациента"
+                    value={appointmentFormModalUI.searchPatientString}
+                    onChange={appointmentFormModalUI.handleSetSearchPatientString}
+                    style={appointmentFormModalUI.searchInputStyle}
+                    allowClear
+                />
+
+                <div style={appointmentFormModalUI.chooseContainerStyle}>
+                    <Collapse
+                        items={patientsItems}
+                    />
+                </div>
+            </>
+        );
+    }, [appointmentFormModalUI, patientsItems]);
+
+
+    const AppointmentStep = useMemo(() => {
+        return (
             <Form
                 form={appointmentFormModalUI.form}
                 onFinish={appointmentFormModalUI.handleOk}
@@ -118,6 +175,68 @@ const AppointmentFormModal = ({ visible, onCancel }) => {
                     </Button>
                 </Form.Item>
             </Form>
+        );
+    }, [appointmentFormModalData.appointmentTypes, appointmentFormModalData.patients, appointmentFormModalUI.form, appointmentFormModalUI.handleOk, appointmentFormModalUI.selectedAppointment]);
+
+    const steps = [{
+        title: 'Выбор пациента', content: SelectPatientStep,
+    }, {
+        title: 'Заполнение информации о приеме', content: AppointmentStep,
+    }, {
+        title: 'Подтверждение', content: ConfirmStep,
+    }];
+
+    return (
+        <>
+            {appointmentFormModalData.isLoading ? (
+                <LoadingIndicator/>
+            ) : (
+                <Modal
+                    title={appointmentFormModalUI.selectedAppointment ? "Редактировать прием" : "Создать прием"}
+                    open={appointmentFormModalUI.modalVisible}
+                    onCancel={appointmentFormModalUI.handleCancel}
+                    footer={null}
+                >
+                    {appointmentFormModalData.loading ? (
+                        <div style={appointmentFormModalUI.loadingContainerStyle}>
+                            <Spin size="large"/>
+                        </div>
+                    ) : (
+                        <div style={appointmentFormModalUI.stepsContentStyle}>
+                            {steps[appointmentFormModalUI.currentStep].content}
+                        </div>
+                    )}
+
+
+                    {!appointmentFormModalUI.screenXS && (
+                        <Steps
+                            current={appointmentFormModalUI.currentStep}
+                            items={steps}
+                            style={appointmentFormModalUI.stepsIndicatorStyle}
+                            direction={appointmentFormModalUI.direction}
+                        />
+                    )}
+
+                    <Row
+                        justify="end"
+                        style={appointmentFormModalUI.footerRowStyle}
+                        gutter={[8, 8]}
+                    >
+                        <Button
+                            style={appointmentFormModalUI.footerButtonStyle}
+                            onClick={appointmentFormModalUI.handleClickBackButton}
+                            disabled={appointmentFormModalUI.disableBackButton}
+                        >
+                            Назад
+                        </Button>
+                        <Button
+                            type="primary"
+                            onClick={appointmentFormModalUI.handleClickNextButton}
+                            disabled={appointmentFormModalUI.disableNextButton}
+                        >
+                            {appointmentFormModalUI.nextButtonText}
+                        </Button>
+                    </Row>
                 </Modal>
             )}
         </>

web-app/src/Components/Pages/AppointmentsPage/Components/AppointmentCalendarTab/Components/AppointmentFormModal/useAppointmentFormModalUI.js

@@ -1,7 +1,7 @@
 import { Form, notification } from "antd";
 import { useDispatch, useSelector } from "react-redux";
 import { closeModal } from "../../../../../../../Redux/Slices/appointmentsSlice.js";
-import { useEffect } from "react";
+import {useEffect, useState} from "react";
 import dayjs from "dayjs";
 import { useGetAppointmentsQuery } from "../../../../../../../Api/appointmentsApi.js";
 
@@ -10,6 +10,15 @@ const useAppointmentFormModalUI = (visible, onCancel, createAppointment, updateA
     const { modalVisible, selectedAppointment } = useSelector(state => state.appointmentsUI);
     const [form] = Form.useForm();
 
+    const [selectedPatient, setSelectedPatient] = useState(null);
+    const [currentStep, setCurrentStep] = useState(0);
+
+    const resetPatient = () => setSelectedPatient(null);
+
+    const getDateString = (date) => {
+        return new Date(date).toLocaleDateString('ru-RU');
+    };
+
     const { data: appointments = [] } = useGetAppointmentsQuery(undefined, {
         pollingInterval: 20000,
     });
@@ -105,8 +114,12 @@ const useAppointmentFormModalUI = (visible, onCancel, createAppointment, updateA
         form,
         modalVisible,
         selectedAppointment,
+        selectedPatient,
+        setSelectedPatient,
         handleOk,
         handleCancel,
+        resetPatient,
+        getDateString,
     };
 };