apuc/guild_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

task files

Browse Source
This commit is contained in:
Николай Полтщук 2023-07-13 15:49:34 +03:00
parent 524e773cc4
commit d92578c517
3 changed files with 124 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
src/components/Modal/Tracker/ModalTicket/ModalTicket.jsx
View File

@ -11,11 +11,11 @@ import { getProfileInfo } from "@redux/outstaffingSlice";
import { setProjectBoardFetch } from "@redux/projectsTrackerSlice"; import { setProjectBoardFetch } from "@redux/projectsTrackerSlice";
import { import {
backendImg,
caseOfNum, caseOfNum,
getCorrectRequestDate, getCorrectRequestDate,
getToken, getToken,
urlForLocal, urlForLocal,
backendImg
} from "@utils/helper"; } from "@utils/helper";
import { apiRequest } from "@api/request"; import { apiRequest } from "@api/request";
@ -78,7 +78,7 @@ export const ModalTiсket = ({
seconds: 0, seconds: 0,
}); });
const [timerId, setTimerId] = useState(null); const [timerId, setTimerId] = useState(null);
const [taskFiles, setTaskFiles] = useState([]) const [taskFiles, setTaskFiles] = useState([]);
const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers); const [correctProjectUsers, setCorrectProjectUsers] = useState(projectUsers);
const [executorId, setExecutorId] = useState(task.executor_id); const [executorId, setExecutorId] = useState(task.executor_id);
const profileInfo = useSelector(getProfileInfo); const profileInfo = useSelector(getProfileInfo);
@ -289,11 +289,13 @@ export const ModalTiсket = ({
} }
); );
apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${task.id}`).then((res) => { apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${task.id}`).then(
if (Array.isArray(res)) { (res) => {
setTaskFiles(res) if (Array.isArray(res)) {
setTaskFiles(res);
}
} }
}) );
if ( if (
localStorage.getItem("role_status") !== "18" && localStorage.getItem("role_status") !== "18" &&
@ -331,7 +333,7 @@ export const ModalTiсket = ({
} }
function deleteLoadedFile() { function deleteLoadedFile() {
setUploadedFile(null) setUploadedFile(null);
} }
function attachFile() { function attachFile() {
@ -341,12 +343,12 @@ export const ModalTiсket = ({
file_id: uploadedFile[0].id, file_id: uploadedFile[0].id,
entity_type: 2, entity_type: 2,
entity_id: task.id, entity_id: task.id,
status: 1 status: 1,
} },
}).then((res) => { }).then((res) => {
setTaskFiles(prevValue => [...prevValue, res]) setTaskFiles((prevValue) => [...prevValue, res]);
setUploadedFile(null) setUploadedFile(null);
}) });
} }
function deleteFile(file) { function deleteFile(file) {
@ -356,11 +358,13 @@ export const ModalTiсket = ({
file_id: file.id, file_id: file.id,
entity_type: 2, entity_type: 2,
entity_id: task.id, entity_id: task.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {
setTaskFiles(prevValue => prevValue.filter((item) => item.id !== file.id)) setTaskFiles((prevValue) =>
}) prevValue.filter((item) => item.id !== file.id)
);
});
} }
function startTimer() { function startTimer() {
@ -496,29 +500,40 @@ export const ModalTiсket = ({
)} )}
{/*<img src={taskImg} className="image-task"></img>*/} {/*<img src={taskImg} className="image-task"></img>*/}
</div> </div>
{Boolean(taskFiles.length) && {Boolean(taskFiles.length) && (
<div className='task__files'> <div className="task__files">
{taskFiles.map((file) => { {taskFiles.map((file) => {
return <div className='taskFile' key={file.id}> return (
<img className='imgFile' src={backendImg(file.file?.url)} alt='img' /> <div className="taskFile" key={file.id}>
<div className='deleteFile' onClick={() => deleteFile(file)}> <img
<img src={close} alt='delete' /> className="imgFile"
src={backendImg(file.file?.url)}
alt="img"
/>
<div
className="deleteFile"
onClick={() => deleteFile(file)}
>
<img src={close} alt="delete" />
</div> </div>
</div> </div>
}) );
} })}
</div> </div>
} )}
{uploadedFile && ( {uploadedFile && (
<div className="fileLoaded"> <div className="fileLoaded">
{uploadedFile.map((file) => { {uploadedFile.map((file) => {
return ( return (
<div className='loadedFile' key={file.id}> <div className="loadedFile" key={file.id}>
<img src={backendImg(file.url)} alt="img" key={file.id} /> <img src={backendImg(file.url)} alt="img" key={file.id} />
<div className='deleteFile' onClick={() => deleteLoadedFile(file)}> <div
<img src={close} alt='delete' /> className="deleteFile"
</div> onClick={() => deleteLoadedFile(file)}
>
<img src={close} alt="delete" />
</div> </div>
</div>
); );
})} })}
<button onClick={attachFile}>Загрузить</button> <button onClick={attachFile}>Загрузить</button>

120
src/components/Modal/Tracker/TicketFullScreen/TicketFullScreen.jsx
View File

@ -13,7 +13,13 @@ import {
setToggleTab, setToggleTab,
} from "@redux/projectsTrackerSlice"; } from "@redux/projectsTrackerSlice";
import {backendImg, caseOfNum, getCorrectRequestDate, getToken, urlForLocal} from "@utils/helper"; import {
backendImg,
caseOfNum,
getCorrectRequestDate,
getToken,
urlForLocal,
} from "@utils/helper";
import { apiRequest } from "@api/request"; import { apiRequest } from "@api/request";
@ -75,7 +81,7 @@ export const TicketFullScreen = () => {
const [datePickerOpen, setDatePickerOpen] = useState(false); const [datePickerOpen, setDatePickerOpen] = useState(false);
const [startDate, setStartDate] = useState(null); const [startDate, setStartDate] = useState(null);
const [uploadedFile, setUploadedFile] = useState(null); const [uploadedFile, setUploadedFile] = useState(null);
const [taskFiles, setTaskFiles] = useState([]) const [taskFiles, setTaskFiles] = useState([]);
useEffect(() => { useEffect(() => {
apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => { apiRequest(`/task/get-task?task_id=${ticketId.id}`).then((taskInfo) => {
@ -104,11 +110,13 @@ export const TicketFullScreen = () => {
}, []); }, []);
setComments(comments); setComments(comments);
}); });
apiRequest(`/file/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`).then((res) => { apiRequest(
`/file/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
).then((res) => {
if (Array.isArray(res)) { if (Array.isArray(res)) {
setTaskFiles(res) setTaskFiles(res);
} }
}) });
apiRequest( apiRequest(
`/timer/get-by-entity?entity_type=2&entity_id=${taskInfo.id}` `/timer/get-by-entity?entity_type=2&entity_id=${taskInfo.id}`
).then((res) => { ).then((res) => {
@ -414,16 +422,16 @@ export const TicketFullScreen = () => {
file_id: uploadedFile[0].id, file_id: uploadedFile[0].id,
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id, entity_id: taskInfo.id,
status: 1 status: 1,
} },
}).then((res) => { }).then((res) => {
setTaskFiles(prevValue => [...prevValue, res]) setTaskFiles((prevValue) => [...prevValue, res]);
setUploadedFile(null) setUploadedFile(null);
}) });
} }
function deleteLoadedFile() { function deleteLoadedFile() {
setUploadedFile(null) setUploadedFile(null);
} }
function deleteFile(file) { function deleteFile(file) {
@ -433,11 +441,13 @@ export const TicketFullScreen = () => {
file_id: file.id, file_id: file.id,
entity_type: 2, entity_type: 2,
entity_id: taskInfo.id, entity_id: taskInfo.id,
status: 0 status: 0,
} },
}).then(() => { }).then(() => {
setTaskFiles(prevValue => prevValue.filter((item) => item.id !== file.id)) setTaskFiles((prevValue) =>
}) prevValue.filter((item) => item.id !== file.id)
);
});
} }
return ( return (
@ -643,33 +653,48 @@ export const TicketFullScreen = () => {
/> />
)} )}
</div> </div>
{Boolean(taskFiles.length) && {Boolean(taskFiles.length) && (
<div className='task__files'> <div className="task__files">
{taskFiles.map((file) => { {taskFiles.map((file) => {
return <div className='taskFile' key={file.id}> return (
<img className='imgFile' src={backendImg(file.file?.url)} alt='img' /> <div className="taskFile" key={file.id}>
<div className='deleteFile' onClick={() => deleteFile(file)}> <img
<img src={fileDelete} alt='delete' /> className="imgFile"
src={backendImg(file.file?.url)}
alt="img"
/>
<div
className="deleteFile"
onClick={() => deleteFile(file)}
>
<img src={fileDelete} alt="delete" />
</div> </div>
</div> </div>
}) );
} })}
</div> </div>
} )}
{uploadedFile && ( {uploadedFile && (
<div className="fileLoaded"> <div className="fileLoaded">
{uploadedFile.map((file) => { {uploadedFile.map((file) => {
return ( return (
<div className='loadedFile' key={file.id}> <div className="loadedFile" key={file.id}>
<img src={backendImg(file.url)} alt="img" key={file.id} /> <img
<div className='deleteFile' onClick={() => deleteLoadedFile(file)}> src={backendImg(file.url)}
<img src={fileDelete} alt='delete' /> alt="img"
</div> key={file.id}
</div> />
); <div
})} className="deleteFile"
<button onClick={attachFile}>Загрузить</button> onClick={() => deleteLoadedFile(file)}
</div> >
<img src={fileDelete} alt="delete" />
</div>
</div>
);
})}
<button onClick={attachFile}>Загрузить</button>
</div>
)} )}
<div className="content__communication"> <div className="content__communication">
{/*<p className="tasks">*/} {/*<p className="tasks">*/}
@ -687,14 +712,17 @@ export const TicketFullScreen = () => {
<div className="file"> <div className="file">
<div className="input__wrapper"> <div className="input__wrapper">
<input <input
name="file" name="file"
id="input__file" id="input__file"
type="file" type="file"
accept="image/*,.png,.jpg,.svg,.jpeg" accept="image/*,.png,.jpg,.svg,.jpeg"
className="input__file" className="input__file"
onChange={handleUpload} onChange={handleUpload}
/> />
<label htmlFor="input__file" className="button-add-file"> <label
htmlFor="input__file"
className="button-add-file"
>
<img src={file}></img> <img src={file}></img>
Загрузить файл Загрузить файл
</label> </label>

4
src/utils/helper.js
View File

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