file
This commit is contained in:
parent
c6f9d4722a
commit
524e773cc4
@ -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>
|
||||
{caseOfNum(0, "files")}
|
||||
<span>{taskFiles.length ? taskFiles.length : 0}</span>
|
||||
{caseOfNum(taskFiles.length, "files")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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">
|
||||
<BaseButton styles={"button-add-file"}>
|
||||
<div className="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>
|
||||
<span>{0}</span>
|
||||
{caseOfNum(0, "files")}
|
||||
</p>
|
||||
</label>
|
||||
</div>
|
||||
<span>{taskFiles.length ? taskFiles.length : 0}</span>
|
||||
{caseOfNum(taskFiles.length, "files")}
|
||||
</div>
|
||||
</div>
|
||||
<div className="content__input">
|
||||
<input
|
||||
|
||||
@ -596,6 +596,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: black;
|
||||
min-width: 180px;
|
||||
max-width: 180px;
|
||||
width: 100%;
|
||||
|
||||
|
||||
@ -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,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user