file

src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx

@@ -15,6 +15,7 @@ import {
   getCorrectRequestDate,
   getToken,
   urlForLocal,
+  backendImg
 } from "@utils/helper";
 
 import { apiRequest } from "@api/request";
@@ -77,6 +78,7 @@ export const ModalTiсket = ({
     seconds: 0,
   });
   const [timerId, setTimerId] = useState(null);
+  const [taskFiles, setTaskFiles] = useState([])
   const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
   const [executorId, setExecutorId] = useState(task.executor_id);
   const profileInfo = useSelector(getProfileInfo);
@@ -287,6 +289,12 @@ export const ModalTiсket = ({
       }
     );
 
+    apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => {
+      if (Array.isArray(res)) {
+        setTaskFiles(res)
+      }
+    })
+
     if (
       localStorage.getItem("role_status") !== "18" &&
       Boolean(
@@ -322,6 +330,39 @@ export const ModalTiсket = ({
     setUploadedFile(data);
   }
 
+  function deleteLoadedFile() {
+    setUploadedFile(null)
+  }
+
+  function attachFile() {
+    apiRequest("/file/attach", {
+      method: "POST",
+      data: {
+        file_id: uploadedFile[0].id,
+        entity_type: 2,
+        entity_id: task.id,
+        status: 1
+      }
+    }).then((res) => {
+      setTaskFiles(prevValue => [...prevValue, res])
+      setUploadedFile(null)
+    })
+  }
+
+  function deleteFile(file) {
+    apiRequest("/file/detach", {
+      method: "DELETE",
+      data: {
+        file_id: file.id,
+        entity_type: 2,
+        entity_id: task.id,
+        status: 0
+      }
+    }).then(() => {
+      setTaskFiles(prevValue => prevValue.filter((item) => item.id !== file.id))
+    })
+  }
+
   function startTimer() {
     setTimerId(
       setInterval(() => {
@@ -455,13 +496,32 @@ export const ModalTiсket = ({
               )}
               {/*<img src={taskImg} className="image-task"></img>*/}
             </div>
+            {Boolean(taskFiles.length) &&
+                <div className='task__files'>
+                  {taskFiles.map((file) => {
+                    return <div className='taskFile' key={file.id}>
+                      <img className='imgFile' src={backendImg(file.file?.url)} alt='img'  />
+                      <div className='deleteFile' onClick={() => deleteFile(file)}>
+                        <img src={close} alt='delete' />
+                      </div>
+                    </div>
+                  })
+                  }
+                </div>
+            }
             {uploadedFile && (
               <div className="fileLoaded">
                 {uploadedFile.map((file) => {
                   return (
-                    <img src={urlForLocal(file.url)} alt="img" key={file.id} />
+                      <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">
@@ -491,8 +551,8 @@ export const ModalTiсket = ({
                     Загрузить файл
                   </label>
                 </div>
-                <span>{0}</span>
+                <span>{taskFiles.length ? taskFiles.length : 0}</span>
-                {caseOfNum(0, "files")}
+                {caseOfNum(taskFiles.length, "files")}
               </div>
             </div>
             <div className="content__input">

src/components/Modal/Tracker/ModalTicket/modalTicket.scss

@@ -315,14 +315,98 @@
       }
     }
 
-    .fileLoaded {
+    .task__files {
       display: flex;
-      margin: 10px 0 0;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 10px;
+
+      .taskFile {
+        position: relative;
+        .imgFile {
+          max-width: 180px;
+          object-fit: contain;
+        }
+
+        &:hover {
+          .deleteFile {
+            background: rgb(226, 226, 226, 0.6);
+          }
+        }
+
+        .deleteFile {
+          position: absolute;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+          width: 20px;
+          height: 20px;
+          top: 0;
+          right: 0;
+          transition: all 0.3s ease;
+          background: rgb(226, 226, 226, 0.1);
 
           img {
-        max-width: 250px;
+            width: 12px;
+            height: 12px;
+          }
+        }
+      }
+    }
+
+    .fileLoaded {
+      display: flex;
+      align-items: center;
+      margin: 10px 0 0;
+
+      .loadedFile {
+        position: relative;
+        img {
+          max-width: 100px;
           object-fit: contain;
         }
+        .deleteFile {
+          position: absolute;
+          cursor: pointer;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          z-index: 10;
+          width: 20px;
+          height: 20px;
+          top: 0;
+          right: 0;
+          transition: all 0.3s ease;
+          background: rgb(226, 226, 226, 0.1);
+
+          img {
+            width: 12px;
+            height: 12px;
+          }
+        }
+        &:hover {
+          .deleteFile {
+            background: rgb(226, 226, 226, 0.6);
+          }
+        }
+      }
+
+      button {
+        display: flex;
+        justify-content: center;
+        color: blue;
+        margin-left: 10px;
+        border: 0.5px solid #1458dd;
+        border-radius: 44px;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 32px;
+        max-width: 120px;
+        background: none;
+        width: 100%;
+      }
     }
 
     &__communication {

src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx

@@ -10,16 +10,14 @@ import {
   deletePersonOnProject,
   getBoarderLoader,
   modalToggle,
-  setProjectBoardFetch,
   setToggleTab,
 } from "@redux/projectsTrackerSlice";
 
-import { caseOfNum, getCorrectRequestDate, urlForLocal } from "@utils/helper";
+import {backendImg, caseOfNum, getCorrectRequestDate, getToken, urlForLocal} from "@utils/helper";
 
 import { apiRequest } from "@api/request";
 
 import { getCorrectDate } from "@components/Calendar/calendarHelper";
-import BaseButton from "@components/Common/BaseButton/BaseButton";
 import { Footer } from "@components/Common/Footer/Footer";
 import { Loader } from "@components/Common/Loader/Loader";
 import TrackerModal from "@components/Modal/Tracker/TrackerModal/TrackerModal";
@@ -32,6 +30,7 @@ import arrow from "assets/icons/arrows/arrowCalendar.png";
 import arrowStart from "assets/icons/arrows/arrowStart.png";
 import calendarIcon from "assets/icons/calendar.svg";
 import close from "assets/icons/close.png";
+import fileDelete from "assets/icons/closeProjectPersons.svg";
 import del from "assets/icons/delete.svg";
 import edit from "assets/icons/edit.svg";
 import file from "assets/icons/fileModal.svg";
@@ -75,6 +74,8 @@ export const TicketFullScreen = () => {
   const [deadLine, setDeadLine] = useState("");
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [startDate, setStartDate] = useState(null);
+  const [uploadedFile, setUploadedFile] = useState(null);
+  const [taskFiles, setTaskFiles] = useState([])
 
   useEffect(() => {
     apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@@ -103,6 +104,11 @@ export const TicketFullScreen = () => {
         }, []);
         setComments(comments);
       });
+      apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => {
+        if (Array.isArray(res)) {
+          setTaskFiles(res)
+        }
+      })
       apiRequest(
         `/timer/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
       ).then((res) => {
@@ -387,6 +393,53 @@ export const TicketFullScreen = () => {
     }).then(() => {});
   }
 
+  async function handleUpload(event) {
+    const formData = new FormData();
+    formData.append("uploadFile", event.target.files[0]);
+    const res = await fetch("https://itguild.info/api/file/upload", {
+      method: "POST",
+      body: formData,
+      headers: { ...getToken() },
+    });
+
+    const data = await res.json();
+
+    setUploadedFile(data);
+  }
+
+  function attachFile() {
+    apiRequest("/file/attach", {
+      method: "POST",
+      data: {
+        file_id: uploadedFile[0].id,
+        entity_type: 2,
+        entity_id: taskInfo.id,
+        status: 1
+      }
+    }).then((res) => {
+      setTaskFiles(prevValue => [...prevValue, res])
+      setUploadedFile(null)
+    })
+  }
+
+  function deleteLoadedFile() {
+    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))
+    })
+  }
+
   return (
     <section className="ticket-full-screen">
       <ProfileHeader />
@@ -590,6 +643,34 @@ export const TicketFullScreen = () => {
                       />
                     )}
                   </div>
+                  {Boolean(taskFiles.length) &&
+                      <div className='task__files'>
+                        {taskFiles.map((file) => {
+                          return <div className='taskFile' key={file.id}>
+                            <img className='imgFile' src={backendImg(file.file?.url)} alt='img'  />
+                            <div className='deleteFile' onClick={() => deleteFile(file)}>
+                              <img src={fileDelete} alt='delete' />
+                            </div>
+                          </div>
+                        })
+                        }
+                      </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={fileDelete} alt='delete' />
+                                </div>
+                              </div>
+                          );
+                        })}
+                        <button onClick={attachFile}>Загрузить</button>
+                      </div>
+                  )}
                   <div className="content__communication">
                     {/*<p className="tasks">*/}
                     {/*  <BaseButton*/}
@@ -603,14 +684,24 @@ export const TicketFullScreen = () => {
                     {/*    Добавить под задачу*/}
                     {/*  </BaseButton>*/}
                     {/*</p>*/}
-                    <p className="file">
+                    <div className="file">
-                      <BaseButton styles={"button-add-file"}>
+                      <div className="input__wrapper">
+                        <input
+                            name="file"
+                            id="input__file"
+                            type="file"
+                            accept="image/*,.png,.jpg,.svg,.jpeg"
+                            className="input__file"
+                            onChange={handleUpload}
+                        />
+                        <label htmlFor="input__file" className="button-add-file">
                           <img src={file}></img>
                           Загрузить файл
-                      </BaseButton>
+                        </label>
-                      <span>{0}</span>
+                      </div>
-                      {caseOfNum(0, "files")}
+                      <span>{taskFiles.length ? taskFiles.length : 0}</span>
-                    </p>
+                      {caseOfNum(taskFiles.length, "files")}
+                    </div>
                   </div>
                   <div className="content__input">
                     <input

src/pages/Tracker/tracker.scss

@@ -596,6 +596,7 @@
             display: flex;
             align-items: center;
             color: black;
+            min-width: 180px;
             max-width: 180px;
             width: 100%;
 

src/utils/helper.js

@@ -45,6 +45,9 @@ export const urlHasParams = (url) =>
 export const urlForLocal = (url) =>
   process.env.NODE_ENV === "development" ? `https://itguild.info${url}` : url;
 
+export const backendImg = (url) =>
+    process.env.NODE_ENV === "development" ? `https://back.itguild.info${url}` : url;
+
 export function scrollToForm() {
   window.scrollTo({
     top: 850,