Quellcode durchsuchen

Added confirm dialog & collect name from uploaded document

FE_dev
bronjaermin vor 3 Jahren
Ursprung
Commit
725027e3b6
4 geänderte Dateien mit 12861 neuen und 14390 gelöschten Zeilen
  1. 89
    1257
      package-lock.json
  2. 15
    4
      src/pages/FilesPage/AddFile.js
  3. 181
    150
      src/pages/FilesPage/FilesViewPage.js
  4. 12576
    12979
      yarn.lock

+ 89
- 1257
package-lock.json
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


+ 15
- 4
src/pages/FilesPage/AddFile.js Datei anzeigen

@@ -44,7 +44,7 @@ const AddFile = ({ history }) => {
if (showMessage === true) {
setTimeout(() => {
setShowMessage(false);
}, 1000);
}, 2000);
}
}, [showMessage]);

@@ -56,6 +56,7 @@ const AddFile = ({ history }) => {

const handleChangeInputFile = (e) => {
const selectedFile = e.target.files[0];
setTitle(selectedFile.name.split(".")[0]);
setPdfFile(selectedFile);
};

@@ -72,6 +73,14 @@ const AddFile = ({ history }) => {
.filter((tag) => tag.isChecked === true)
.map((tag) => Number(tag.id));

if (
title === "" ||
tagsIds.length === 0 ||
pdfFile === null ||
selectedCategory === null
)
return;

dispatch(
uploadFileReq({
title,
@@ -87,7 +96,7 @@ const AddFile = ({ history }) => {
<div className="files-page">
<div className="l-t-rectangle"></div>
<div className="r-b-rectangle"></div>
<div className="files-page-card">
{/* <div className="files-page-card">
<div className="files-page-card-title">
<h1>Title</h1>
</div>
@@ -100,7 +109,7 @@ const AddFile = ({ history }) => {
placeholder="Document Title"
/>
</div>
</div>
</div> */}

<div className="files-page-card">
<div className="files-page-card-title">
@@ -214,7 +223,9 @@ const AddFile = ({ history }) => {

<div
className="add-file-message"
style={showMessage === false ? { display: "none" } : { display: "flex" }}
style={
showMessage === false ? { display: "none" } : { display: "flex" }
}
>
<p>Uspesno dodat fajl</p>
</div>

+ 181
- 150
src/pages/FilesPage/FilesViewPage.js Datei anzeigen

@@ -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>
</>
);
};


+ 12576
- 12979
yarn.lock
Datei-Diff unterdrückt, da er zu groß ist
Datei anzeigen


Laden…
Abbrechen
Speichern