From 44725b014ba989d6648139205765e0eb59147170 Mon Sep 17 00:00:00 2001
From: Mikola <ko1907@mail.ru>
Date: Sun, 19 Nov 2023 19:04:42 +0300
Subject: [PATCH] task files

---
 .../Modal/Tracker/ModalTicket/ModalTicket.jsx | 53 ++++++++++---------
 .../Tracker/ModalTicket/modalTicket.scss      | 16 ------
 .../TicketFullScreen/TicketFullScreen.jsx     | 48 ++++++++---------
 3 files changed, 51 insertions(+), 66 deletions(-)

diff --git a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
index 205c157b..88977841 100644
--- a/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
+++ b/src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
@@ -79,7 +79,7 @@ export const ModalTiсket = ({
   const [users, setUsers] = useState([]);
   const [timerStart, setTimerStart] = useState(false);
   const [timerInfo, setTimerInfo] = useState({});
-  const [uploadedFile, setUploadedFile] = useState(null);
+  // const [uploadedFile, setUploadedFile] = useState(null);
   const [currentTimerCount, setCurrentTimerCount] = useState({
     hours: 0,
     minute: 0,
@@ -378,25 +378,26 @@ export const ModalTiсket = ({
 
     const data = await res.json();
 
-    setUploadedFile(data);
+    // setUploadedFile(data);
+    attachFile(data[0].id)
   }
 
-  function deleteLoadedFile() {
-    setUploadedFile(null);
-  }
+  // function deleteLoadedFile() {
+  //   setUploadedFile(null);
+  // }
 
-  function attachFile() {
+  function attachFile(id) {
     apiRequest("/file/attach", {
       method: "POST",
       data: {
-        file_id: uploadedFile[0].id,
+        file_id: id,
         entity_type: 2,
         entity_id: task.id,
         status: 1,
       },
     }).then((res) => {
       setTaskFiles((prevValue) => [...prevValue, res]);
-      setUploadedFile(null);
+      // setUploadedFile(null);
     });
   }
 
@@ -635,24 +636,24 @@ export const ModalTiсket = ({
                 })}
               </div>
             )}
-            {uploadedFile && (
-              <div className="fileLoaded">
-                {uploadedFile.map((file) => {
-                  return (
-                    <div className="loadedFile" key={file.id}>
-                      <img src={backendImg(file.url)} alt="img" key={file.id} />
-                      <div
-                        className="deleteFile"
-                        onClick={() => deleteLoadedFile(file)}
-                      >
-                        <img src={close} alt="delete" />
-                      </div>
-                    </div>
-                  );
-                })}
-                <button onClick={attachFile}>Загрузить</button>
-              </div>
-            )}
+            {/*{uploadedFile && (*/}
+            {/*  <div className="fileLoaded">*/}
+            {/*    {uploadedFile.map((file) => {*/}
+            {/*      return (*/}
+            {/*        <div className="loadedFile" key={file.id}>*/}
+            {/*          <img src={backendImg(file.url)} alt="img" key={file.id} />*/}
+            {/*          <div*/}
+            {/*            className="deleteFile"*/}
+            {/*            onClick={() => deleteLoadedFile(file)}*/}
+            {/*          >*/}
+            {/*            <img src={close} alt="delete" />*/}
+            {/*          </div>*/}
+            {/*        </div>*/}
+            {/*      );*/}
+            {/*    })}*/}
+            {/*    <button onClick={attachFile}>Загрузить</button>*/}
+            {/*  </div>*/}
+            {/*)}*/}
             <div className="content__communication">
               {/*<p className="tasks">*/}
               {/*  <button*/}
diff --git a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
index a5a35a20..4c268d4d 100644
--- a/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
+++ b/src/components/Modal/Tracker/ModalTicket/modalTicket.scss
@@ -359,24 +359,8 @@
       column-gap: 25px;
       row-gap: 20px;
       margin-top: 33px;
-      max-height: 170px;
       overflow-y: auto;
 
-      &::-webkit-scrollbar {
-        width: 5px;
-        border-radius: 10px;
-      }
-
-      &::-webkit-scrollbar-thumb {
-        background: #cbd9f9;
-        border-radius: 20px;
-      }
-
-      &::-webkit-scrollbar-track {
-        background: #c5c0c6;
-        border-radius: 20px;
-      }
-
       .taskFile {
         cursor: pointer;
         position: relative;
diff --git a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
index a7b6813b..9bf8ea8b 100644
--- a/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
+++ b/src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
@@ -35,6 +35,7 @@ import { Navigation } from "@components/Navigation/Navigation";
 import { ProfileBreadcrumbs } from "@components/ProfileBreadcrumbs/ProfileBreadcrumbs";
 import { ProfileHeader } from "@components/ProfileHeader/ProfileHeader";
 import TrackerTaskComment from "@components/TrackerTaskComment/TrackerTaskComment";
+import FileTracker from "@components/FileTracker/FileTracker";
 
 import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
@@ -483,20 +484,26 @@ export const TicketFullScreen = () => {
     setUploadedFile(null);
   }
 
+  // function deleteFile(file) {
+  //   apiRequest("/file/detach", {
+  //     method: "DELETE",
+  //     data: {
+  //       file_id: file.id,
+  //       entity_type: 2,
+  //       entity_id: taskInfo.id,
+  //       status: 0,
+  //     },
+  //   }).then(() => {
+  //     setTaskFiles((prevValue) =>
+  //       prevValue.filter((item) => item.id !== file.id)
+  //     );
+  //   });
+  // }
+
   function deleteFile(file) {
-    apiRequest("/file/detach", {
-      method: "DELETE",
-      data: {
-        file_id: file.id,
-        entity_type: 2,
-        entity_id: taskInfo.id,
-        status: 0,
-      },
-    }).then(() => {
-      setTaskFiles((prevValue) =>
+    setTaskFiles((prevValue) =>
         prevValue.filter((item) => item.id !== file.id)
-      );
-    });
+    );
   }
 
   function closeAcceptModal() {
@@ -800,19 +807,12 @@ export const TicketFullScreen = () => {
                     <div className="task__files filesFullScreen">
                       {taskFiles.map((file) => {
                         return (
-                          <div className="taskFile" key={file.id}>
-                            <img
-                              className="imgFile"
-                              src={backendImg(file.file?.url)}
-                              alt="img"
+                            <FileTracker
+                                key={file.id}
+                                file={file}
+                                setDeletedTask={deleteFile}
+                                taskId={taskInfo.id}
                             />
-                            <div
-                              className="deleteFile"
-                              onClick={() => deleteFile(file)}
-                            >
-                              <img src={fileDelete} alt="delete" />
-                            </div>
-                          </div>
                         );
                       })}
                     </div>