105 lines
3.6 KiB
JavaScript
105 lines
3.6 KiB
JavaScript
import {Button, Modal, Row, Typography, Spin, Splitter, Divider} from "antd";
|
||
import useAppointmentView from "./useAppointmentView.js";
|
||
|
||
const AppointmentViewModal = () => {
|
||
const {
|
||
modalWidth,
|
||
blockStyle,
|
||
footerRowStyle,
|
||
footerButtonStyle,
|
||
labels,
|
||
selectedAppointment,
|
||
visible,
|
||
getDateString,
|
||
getAppointmentTime,
|
||
getPatientName,
|
||
getPatientField,
|
||
getResults,
|
||
onCancel,
|
||
files,
|
||
isFilesLoading,
|
||
downloadingFiles,
|
||
downloadFile,
|
||
} = useAppointmentView();
|
||
|
||
if (!selectedAppointment) {
|
||
return null;
|
||
}
|
||
|
||
return (
|
||
<Modal
|
||
title={labels.title}
|
||
open={visible}
|
||
onCancel={onCancel}
|
||
footer={null}
|
||
width={modalWidth}
|
||
>
|
||
<div style={blockStyle}>
|
||
<Typography.Title level={4}>Информация о приеме</Typography.Title>
|
||
<p>
|
||
<b>{labels.patient}</b> {getPatientName(selectedAppointment.patient)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.birthday}</b>{" "}
|
||
{getDateString(selectedAppointment.patient?.birthday)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.email}</b>{" "}
|
||
{getPatientField(selectedAppointment.patient?.email)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.phone}</b>{" "}
|
||
{getPatientField(selectedAppointment.patient?.phone)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.type}</b>{" "}
|
||
{getPatientField(selectedAppointment.type?.title)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.appointmentTime}</b>{" "}
|
||
{getAppointmentTime(selectedAppointment.appointment_datetime)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.daysUntilNext}</b>{" "}
|
||
{getPatientField(selectedAppointment.days_until_the_next_appointment)}
|
||
</p>
|
||
<p>
|
||
<b>{labels.results}</b>
|
||
</p>
|
||
<div
|
||
dangerouslySetInnerHTML={{__html: getResults(selectedAppointment.results)}}
|
||
/>
|
||
<p>
|
||
<b>{labels.files}</b>
|
||
</p>
|
||
{isFilesLoading ? (
|
||
<Spin/>
|
||
) : files.length > 0 ? (
|
||
files.map((file) => (
|
||
<Row key={file.id} align="middle" justify="space-between">
|
||
<span>{file.file_title || labels.notSpecified}</span>
|
||
<Button
|
||
onClick={() => downloadFile(file.id, file.file_title)}
|
||
loading={downloadingFiles[file.id] || false}
|
||
disabled={downloadingFiles[file.id] || false}
|
||
type={"dashed"}
|
||
>
|
||
{downloadingFiles[file.id] ? labels.downloading : labels.download}
|
||
</Button>
|
||
<Divider/>
|
||
</Row>
|
||
))
|
||
) : (
|
||
<p>{labels.noFiles}</p>
|
||
)}
|
||
</div>
|
||
<Row justify="end" style={footerRowStyle}>
|
||
<Button style={footerButtonStyle} onClick={onCancel}>
|
||
{labels.closeButton}
|
||
</Button>
|
||
</Row>
|
||
</Modal>
|
||
);
|
||
};
|
||
|
||
export default AppointmentViewModal; |