From b53ab902f80d0d2b58c0faefbb886cbaee5efcd4 Mon Sep 17 00:00:00 2001
From: andrei <andrei@duvakin.ru>
Date: Wed, 4 Jun 2025 19:05:49 +0500
Subject: [PATCH] =?UTF-8?q?feat:=20=D0=9C=D0=BE=D0=B4=D0=B0=D0=BB=D1=8C?=
 =?UTF-8?q?=D0=BD=D0=BE=D0=B5=20=D0=BE=D0=BA=D0=BD=D0=BE=20=D0=BF=D1=80?=
 =?UTF-8?q?=D0=BE=D1=81=D0=BC=D0=BE=D1=82=D1=80=D0=B0=20=D0=B7=D0=B0=D0=BF?=
 =?UTF-8?q?=D0=B8=D1=81=D0=B8:=20=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B0=20=D0=B7=D0=B0=D0=B3=D1=80=D1=83=D0=B7=D0=BA?=
 =?UTF-8?q?=D0=B0=20=D1=84=D0=B0=D0=B9=D0=BB=D0=BE=D0=B2.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web-app/src/Api/appointmentFilesApi.js        | 35 ++++++++++++++++-
 .../AppointmentViewModal.jsx                  | 30 ++++++++++++++-
 .../useAppointmentViewUI.js                   | 38 +++++++++++++++++++
 3 files changed, 99 insertions(+), 4 deletions(-)

diff --git a/web-app/src/Api/appointmentFilesApi.js b/web-app/src/Api/appointmentFilesApi.js
index cfe7274..17fd2e1 100644
--- a/web-app/src/Api/appointmentFilesApi.js
+++ b/web-app/src/Api/appointmentFilesApi.js
@@ -1,11 +1,33 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import { baseQueryWithAuth } from "./baseQuery.js";
+import { isPlainObject } from "@reduxjs/toolkit";
 
 export const appointmentFilesApi = createApi({
     reducerPath: 'appointmentFilesApi',
     baseQuery: baseQueryWithAuth,
     tagTypes: ['AppointmentFile'],
     endpoints: (builder) => ({
+        getAppointmentFiles: builder.query({
+            query: (appointmentId) => {
+                console.log(`Fetching files for appointment ID: ${appointmentId}`);
+                return `/appointment_files/${appointmentId}/`;
+            },
+            providesTags: ['AppointmentFile'],
+            refetchOnMountOrArgChange: 5,
+        }),
+        downloadAppointmentFile: builder.mutation({
+            query: (fileId) => ({
+                url: `/appointment_files/${fileId}/file/`,
+                method: 'GET',
+            }),
+        }),
+        deleteAppointmentFile: builder.mutation({
+            query: (fileId) => ({
+                url: `/appointment_files/${fileId}/`,
+                method: 'DELETE',
+            }),
+            invalidatesTags: ['AppointmentFile'],
+        }),
         uploadAppointmentFile: builder.mutation({
             query: ({ appointmentId, file }) => {
                 if (!(file instanceof File)) {
@@ -24,11 +46,20 @@ export const appointmentFilesApi = createApi({
             invalidatesTags: ['AppointmentFile'],
         }),
     }),
+    middleware: (defaultMiddleware) =>
+        defaultMiddleware({
+            serializableCheck: {
+                isSerializable: (value) => {
+                    if (value instanceof Blob) return true; // Игнорируем Blob
+                    return isPlainObject(value) || typeof value !== 'object';
+                },
+            },
+        }),
 });
 
 export const {
     useGetAppointmentFilesQuery,
-    useDownloadAppointmentFileQuery,
-    useUploadAppointmentFileMutation,
+    useDownloadAppointmentFileMutation,
     useDeleteAppointmentFileMutation,
+    useUploadAppointmentFileMutation,
 } = appointmentFilesApi;
\ No newline at end of file
diff --git a/web-app/src/Components/Widgets/AppointmentViewModal/AppointmentViewModal.jsx b/web-app/src/Components/Widgets/AppointmentViewModal/AppointmentViewModal.jsx
index e54fb91..d772052 100644
--- a/web-app/src/Components/Widgets/AppointmentViewModal/AppointmentViewModal.jsx
+++ b/web-app/src/Components/Widgets/AppointmentViewModal/AppointmentViewModal.jsx
@@ -1,4 +1,4 @@
-import {Button, Modal, Row, Typography} from "antd";
+import { Button, Modal, Row, Typography, Spin } from "antd";
 import useAppointmentViewUI from "./useAppointmentViewUI.js";
 
 const AppointmentViewModal = () => {
@@ -16,6 +16,10 @@ const AppointmentViewModal = () => {
         getPatientField,
         getResults,
         onCancel,
+        files,
+        isFilesLoading,
+        downloadingFiles,
+        downloadFile,
     } = useAppointmentViewUI();
 
     if (!selectedAppointment) {
@@ -63,8 +67,30 @@ const AppointmentViewModal = () => {
                     <b>{labels.results}</b>
                 </p>
                 <div
-                    dangerouslySetInnerHTML={{__html: getResults(selectedAppointment.results)}}
+                    dangerouslySetInnerHTML={{ __html: getResults(selectedAppointment.results) }}
                 />
+                <p>
+                    <b>{labels.files}</b>
+                </p>
+                {isFilesLoading ? (
+                    <Spin />
+                ) : files.length > 0 ? (
+                    files.map((file) => (
+                        <div key={file.id} style={{ marginBottom: 8 }}>
+                            <span>{file.file_title || labels.notSpecified}</span>
+                            <Button
+                                style={{ marginLeft: 8 }}
+                                onClick={() => downloadFile(file.id, file.file_title)}
+                                loading={downloadingFiles[file.id] || false}
+                                disabled={downloadingFiles[file.id] || false}
+                            >
+                                {downloadingFiles[file.id] ? labels.downloading : labels.download}
+                            </Button>
+                        </div>
+                    ))
+                ) : (
+                    <p>{labels.noFiles}</p>
+                )}
             </div>
             <Row justify="end" style={footerRowStyle}>
                 <Button style={footerButtonStyle} onClick={onCancel}>
diff --git a/web-app/src/Components/Widgets/AppointmentViewModal/useAppointmentViewUI.js b/web-app/src/Components/Widgets/AppointmentViewModal/useAppointmentViewUI.js
index bb9d05f..fe1d90d 100644
--- a/web-app/src/Components/Widgets/AppointmentViewModal/useAppointmentViewUI.js
+++ b/web-app/src/Components/Widgets/AppointmentViewModal/useAppointmentViewUI.js
@@ -1,11 +1,21 @@
 import { useDispatch, useSelector } from "react-redux";
 import { setSelectedAppointment } from "../../../Redux/Slices/appointmentsSlice.js";
 import dayjs from "dayjs";
+import { useGetAppointmentFilesQuery, useDownloadAppointmentFileMutation } from "../../../Api/appointmentFilesApi.js";
+import { useState } from "react";
 
 const useAppointmentViewUI = () => {
     const dispatch = useDispatch();
     const { selectedAppointment } = useSelector((state) => state.appointmentsUI);
 
+    const { data: files = [], isLoading: isFilesLoading } = useGetAppointmentFilesQuery(
+        selectedAppointment?.id,
+        { skip: !selectedAppointment?.id }
+    );
+
+    const [downloadAppointmentFile] = useDownloadAppointmentFileMutation();
+    const [downloadingFiles, setDownloadingFiles] = useState({});
+
     const modalWidth = 700;
     const blockStyle = { marginBottom: 16 };
     const footerRowStyle = { marginTop: 16 };
@@ -24,6 +34,10 @@ const useAppointmentViewUI = () => {
         closeButton: "Закрыть",
         notSpecified: "Не указан",
         resultsNotSpecified: "Не указаны",
+        files: "Файлы:",
+        noFiles: "Файлы отсутствуют",
+        download: "Скачать",
+        downloading: "Загрузка...",
     };
 
     const visible = !!selectedAppointment;
@@ -56,6 +70,26 @@ const useAppointmentViewUI = () => {
         dispatch(setSelectedAppointment(null));
     };
 
+    const downloadFile = async (fileId, fileName) => {
+        try {
+            setDownloadingFiles((prev) => ({ ...prev, [fileId]: true }));
+            const blob = await downloadAppointmentFile(fileId).unwrap();
+            const url = window.URL.createObjectURL(blob);
+            const link = document.createElement("a");
+            link.href = url;
+            link.setAttribute("download", fileName || "file");
+            document.body.appendChild(link);
+            link.click();
+            link.remove();
+            window.URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error("Ошибка при скачивании файла:", error);
+            // Можно добавить уведомление об ошибке, например, с antd message
+        } finally {
+            setDownloadingFiles((prev) => ({ ...prev, [fileId]: false }));
+        }
+    };
+
     return {
         modalWidth,
         blockStyle,
@@ -70,6 +104,10 @@ const useAppointmentViewUI = () => {
         getPatientField,
         getResults,
         onCancel,
+        files,
+        isFilesLoading,
+        downloadingFiles,
+        downloadFile,
     };
 };