|
|
|
@@ -23,6 +23,7 @@ import PropTypes from "prop-types"; |
|
|
|
import FileViewer from "react-file-viewer"; |
|
|
|
import { useLocation } from "react-router"; |
|
|
|
import deleteIcon from "../../assets/images/delete.png"; |
|
|
|
import ConfirmDialog from "../../components/MUI/ConfirmDialog"; |
|
|
|
|
|
|
|
const FilesViewPage = ({ history }) => { |
|
|
|
const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false); |
|
|
|
@@ -32,6 +33,7 @@ const FilesViewPage = ({ history }) => { |
|
|
|
const { t } = useTranslation(); |
|
|
|
const [isSearchFieldVisible, setIsSearchFieldVisible] = useState(false); |
|
|
|
const [file, setFile] = useState(null); |
|
|
|
const [fileForDelete, setFileForDelete] = useState({open: false, title: '', streamId: null}); |
|
|
|
const { state } = useLocation(); |
|
|
|
|
|
|
|
const dispatch = useDispatch(); |
|
|
|
@@ -190,112 +192,132 @@ const FilesViewPage = ({ history }) => { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
) : ( |
|
|
|
<div onClick={() => setIsSearchFieldVisible(false)}> |
|
|
|
<div className="l-t-rectangle"></div> |
|
|
|
<div className="r-b-rectangle"></div> |
|
|
|
<DocsFilters |
|
|
|
open={toggleFiltersDrawer} |
|
|
|
handleClose={handleToggleFiltersDrawer} |
|
|
|
setPage={setPage} |
|
|
|
category={state && state.category} |
|
|
|
/> |
|
|
|
<div |
|
|
|
className="pl-144 flex-center" |
|
|
|
style={{ |
|
|
|
paddingTop: "36px", |
|
|
|
justifyContent: "space-between", |
|
|
|
postion: "relative", |
|
|
|
<> |
|
|
|
<ConfirmDialog |
|
|
|
open={fileForDelete.open} |
|
|
|
title="Brisanje dokumenta" |
|
|
|
subtitle={fileForDelete.title} |
|
|
|
imgSrc={deleteIcon} |
|
|
|
content="Da li ste sigurni za brisanje dokumenta?" |
|
|
|
onClose={() => { |
|
|
|
setFileForDelete({open: false, title: '', streamId: null}); |
|
|
|
}} |
|
|
|
> |
|
|
|
<h1 className="page-heading">Pregled dokumenata</h1> |
|
|
|
<div style={{ postion: "relative" }}> |
|
|
|
<Fade in={isSearchFieldVisible} timeout={500} className="proba"> |
|
|
|
{input} |
|
|
|
</Fade> |
|
|
|
<Fade in={isSearchFieldVisible} timeout={500}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
position: "absolute", |
|
|
|
zIndex: 10000, |
|
|
|
right: 95, |
|
|
|
marginTop: 0, |
|
|
|
}} |
|
|
|
> |
|
|
|
<img src={searchImage} /> |
|
|
|
</div> |
|
|
|
</Fade> |
|
|
|
</div> |
|
|
|
<div className="flex-center"> |
|
|
|
<IconButton |
|
|
|
className="c-btn c-btn--primary-outlined candidate-btn search-field userPageBtn ml-20px no-padding custom-filter-button" |
|
|
|
onClick={handleChangeVisibility} |
|
|
|
> |
|
|
|
{t("candidates.search")} |
|
|
|
<img src={searchImage} alt="filter" className="candidates-image" /> |
|
|
|
</IconButton> |
|
|
|
<FilterButton onShowFilters={handleToggleFiltersDrawer} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
className="pl-144" |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
marginTop: "39px", |
|
|
|
flexDirection: "column", |
|
|
|
justifyContent: "space-between", |
|
|
|
minHeight: "500px", |
|
|
|
onConfirm={() => { |
|
|
|
deleteFileHandler(fileForDelete.streamId) |
|
|
|
setFileForDelete({open: false, title: '', streamId: null}); |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className="table-cont"> |
|
|
|
<div style={{ display: "flex", height: "300px" }}> |
|
|
|
<table |
|
|
|
className={"usersTable-users mini"} |
|
|
|
style={{ width: file === null ? "100%" : "800px", height: "50%" }} |
|
|
|
/> |
|
|
|
<div onClick={() => setIsSearchFieldVisible(false)}> |
|
|
|
<div className="l-t-rectangle"></div> |
|
|
|
<div className="r-b-rectangle"></div> |
|
|
|
<DocsFilters |
|
|
|
open={toggleFiltersDrawer} |
|
|
|
handleClose={handleToggleFiltersDrawer} |
|
|
|
setPage={setPage} |
|
|
|
category={state && state.category} |
|
|
|
/> |
|
|
|
<div |
|
|
|
className="pl-144 flex-center" |
|
|
|
style={{ |
|
|
|
paddingTop: "36px", |
|
|
|
justifyContent: "space-between", |
|
|
|
postion: "relative", |
|
|
|
}} |
|
|
|
> |
|
|
|
<h1 className="page-heading">Pregled dokumenata</h1> |
|
|
|
<div style={{ postion: "relative" }}> |
|
|
|
<Fade in={isSearchFieldVisible} timeout={500} className="proba"> |
|
|
|
{input} |
|
|
|
</Fade> |
|
|
|
<Fade in={isSearchFieldVisible} timeout={500}> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
position: "absolute", |
|
|
|
zIndex: 10000, |
|
|
|
right: 95, |
|
|
|
marginTop: 0, |
|
|
|
}} |
|
|
|
> |
|
|
|
<img src={searchImage} /> |
|
|
|
</div> |
|
|
|
</Fade> |
|
|
|
</div> |
|
|
|
<div className="flex-center"> |
|
|
|
<IconButton |
|
|
|
className="c-btn c-btn--primary-outlined candidate-btn search-field userPageBtn ml-20px no-padding custom-filter-button" |
|
|
|
onClick={handleChangeVisibility} |
|
|
|
> |
|
|
|
<thead> |
|
|
|
<tr |
|
|
|
className="headingRow headingRowFiles" |
|
|
|
style={{ cursor: "pointer" }} |
|
|
|
> |
|
|
|
<th>Putanja dokumenta</th> |
|
|
|
<th>Naziv dokumenta</th> |
|
|
|
<th>Tip dokumenta</th> |
|
|
|
{file === null ? <th>Veličina dokumenta</th> : ""} |
|
|
|
<th>Obrisi dokument</th> |
|
|
|
<th>Preuzmi dokument</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
{data && |
|
|
|
data.data?.length > 0 && |
|
|
|
data.data?.map((n, index) => ( |
|
|
|
<tr |
|
|
|
key={index} |
|
|
|
className="secondaryRow" |
|
|
|
onClick={() => |
|
|
|
displayFile(n.file_stream, n.stream_id, n.file_type) |
|
|
|
} |
|
|
|
> |
|
|
|
<td className="docs-name">{n.fileName}</td> |
|
|
|
<td className="docs-name">{n.title}</td> |
|
|
|
<td>{n.file_type && n.file_type}</td> |
|
|
|
{file === null ? ( |
|
|
|
<td className="profession">{n.cached_file_size}kB</td> |
|
|
|
) : ( |
|
|
|
"" |
|
|
|
)} |
|
|
|
<td className="profession"> |
|
|
|
<IconButton |
|
|
|
className="c-btn c-btn--primary-outlined files-view-page-delete-btn" |
|
|
|
onClick={() => deleteFileHandler(n.stream_id)} |
|
|
|
> |
|
|
|
<img |
|
|
|
style={{ width: "12px", height: "12px" }} |
|
|
|
src={deleteIcon} |
|
|
|
/> |
|
|
|
</IconButton> |
|
|
|
</td> |
|
|
|
<td> |
|
|
|
{t("candidates.search")} |
|
|
|
<img |
|
|
|
src={searchImage} |
|
|
|
alt="filter" |
|
|
|
className="candidates-image" |
|
|
|
/> |
|
|
|
</IconButton> |
|
|
|
<FilterButton onShowFilters={handleToggleFiltersDrawer} /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
className="pl-144" |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
marginTop: "39px", |
|
|
|
flexDirection: "column", |
|
|
|
justifyContent: "space-between", |
|
|
|
minHeight: "500px", |
|
|
|
}} |
|
|
|
> |
|
|
|
<div className="table-cont"> |
|
|
|
<div style={{ display: "flex", height: "300px" }}> |
|
|
|
<table |
|
|
|
className={"usersTable-users mini"} |
|
|
|
style={{ |
|
|
|
width: file === null ? "100%" : "800px", |
|
|
|
height: "50%", |
|
|
|
}} |
|
|
|
> |
|
|
|
<thead> |
|
|
|
<tr |
|
|
|
className="headingRow headingRowFiles" |
|
|
|
style={{ cursor: "pointer" }} |
|
|
|
> |
|
|
|
<th>Putanja dokumenta</th> |
|
|
|
<th>Naziv dokumenta</th> |
|
|
|
<th>Tip dokumenta</th> |
|
|
|
{file === null ? <th>Veličina dokumenta</th> : ""} |
|
|
|
<th>Obrisi dokument</th> |
|
|
|
<th>Preuzmi dokument</th> |
|
|
|
</tr> |
|
|
|
</thead> |
|
|
|
<tbody> |
|
|
|
{data && |
|
|
|
data.data?.length > 0 && |
|
|
|
data.data?.map((n, index) => ( |
|
|
|
<tr |
|
|
|
key={index} |
|
|
|
className="secondaryRow" |
|
|
|
onClick={() => displayFile(n.file_stream, n.stream_id, n.file_type)} |
|
|
|
> |
|
|
|
<td className="docs-name">{n.fileName}</td> |
|
|
|
<td className="docs-name">{n.title}</td> |
|
|
|
<td>{n.file_type && n.file_type}</td> |
|
|
|
{file === null ? ( |
|
|
|
<td className="profession">{n.cached_file_size}kB</td> |
|
|
|
) : ( |
|
|
|
"" |
|
|
|
)} |
|
|
|
<td className="profession"> |
|
|
|
<IconButton |
|
|
|
className="c-btn c-btn--primary-outlined files-view-page-delete-btn" |
|
|
|
onClick={() => /* deleteFileHandler(n.stream_id) */setFileForDelete({open: true, title: n.title, streamId: n.stream_id})} |
|
|
|
> |
|
|
|
<img |
|
|
|
style={{ width: "12px", height: "12px" }} |
|
|
|
src={deleteIcon} |
|
|
|
/> |
|
|
|
</IconButton> |
|
|
|
</td> |
|
|
|
<td> |
|
|
|
<div onClick={stopPropagation}> |
|
|
|
<a |
|
|
|
className="applicant-cv-button" |
|
|
|
@@ -314,56 +336,65 @@ const FilesViewPage = ({ history }) => { |
|
|
|
</a> |
|
|
|
</div> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
))} |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
{file && ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "500px", |
|
|
|
marginLeft: "30px", |
|
|
|
overflowY: "visible", |
|
|
|
}} |
|
|
|
> |
|
|
|
<FileViewer |
|
|
|
fileType={file.fileType} |
|
|
|
filePath={`data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${file.fileStream}`} |
|
|
|
onError={onError} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
</tr> |
|
|
|
))} |
|
|
|
</tbody> |
|
|
|
</table> |
|
|
|
{file && ( |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
width: "500px", |
|
|
|
marginLeft: "30px", |
|
|
|
overflowY: "visible", |
|
|
|
}} |
|
|
|
> |
|
|
|
<FileViewer |
|
|
|
fileType={file.fileType} |
|
|
|
filePath={`data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${file.fileStream}`} |
|
|
|
onError={onError} |
|
|
|
/> |
|
|
|
</div> |
|
|
|
)} |
|
|
|
</div> |
|
|
|
{/* <a |
|
|
|
className="applicant-cv-button" |
|
|
|
download={"Proba2.docx"} |
|
|
|
href={`data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,${file2}`} |
|
|
|
title="Download pdf document" |
|
|
|
> |
|
|
|
{t("common.download")} file |
|
|
|
</a> */} |
|
|
|
<Pagination |
|
|
|
// size={matches ? "small" : "medium"} |
|
|
|
size={"small"} |
|
|
|
count={ |
|
|
|
parseInt(data.total) <= 6 |
|
|
|
? 1 |
|
|
|
: Math.ceil(parseInt(data.total) / 6) |
|
|
|
} |
|
|
|
color="primary" |
|
|
|
className="candidates-pagination" |
|
|
|
onChange={handleChange} |
|
|
|
shape="rounded" |
|
|
|
page={page} |
|
|
|
/> |
|
|
|
<IconButton |
|
|
|
className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage" |
|
|
|
onClick={() => history.push(ADD_FILE)} |
|
|
|
> |
|
|
|
+ Fajl |
|
|
|
</IconButton> |
|
|
|
</div> |
|
|
|
<Pagination |
|
|
|
// size={matches ? "small" : "medium"} |
|
|
|
size={"small"} |
|
|
|
count={ |
|
|
|
parseInt(data.total) <= 6 |
|
|
|
? 1 |
|
|
|
: Math.ceil(parseInt(data.total) / 6) |
|
|
|
} |
|
|
|
color="primary" |
|
|
|
className="candidates-pagination" |
|
|
|
onChange={handleChange} |
|
|
|
shape="rounded" |
|
|
|
page={page} |
|
|
|
/> |
|
|
|
<IconButton |
|
|
|
className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage" |
|
|
|
onClick={() => history.push(ADD_FILE)} |
|
|
|
> |
|
|
|
+ Fajl |
|
|
|
</IconButton> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
marginBottom: "35px", |
|
|
|
}} |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
<div |
|
|
|
style={{ |
|
|
|
display: "flex", |
|
|
|
justifyContent: "flex-end", |
|
|
|
marginBottom: "35px", |
|
|
|
}} |
|
|
|
></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</> |
|
|
|
); |
|
|
|
}; |
|
|
|
|