Filtering files by content completed

src/assets/styles/components/_candidatesPage.scss

@@ -239,9 +239,9 @@
   border-radius: 10px;
   padding: 20px;
   background-color: white;
-  position: absolute;
-  top: 112px;
-  right: 70px;
+  // position: absolute;
+  // top: 112px;
+  // right: 70px;
   z-index: 1000;
 }
 

src/assets/styles/components/_files.scss

@@ -51,7 +51,7 @@
 }
 
 .filesPage {
-  align-self: flex-end;
+  align-self: flex-start;
 }
 
 .document-container p {
@@ -137,4 +137,8 @@
 
 .files-custom-modal-buttons button {
   margin-left: 8px;
+}
+
+.pg-viewer-wrapper .document-container{
+  margin:0 !important;
 }

src/pages/FilesPage/FileTable.js

@@ -2,8 +2,8 @@ import React, { useState, useEffect } from "react";
 import IconButton from "../../components/IconButton/IconButton";
 import deleteIcon from "../../assets/images/delete.png";
 import editIcon from "../../assets/images/edit.png";
-import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
 import { useSelector, useDispatch } from "react-redux";
 import {
   deleteFileReq,
@@ -26,7 +26,7 @@ import { selectIsLoadingByActionType } from "../../store/selectors/loadingSelect
 import { FETCH_FILES_LOADING } from "../../store/actions/files/fileActionConstants";
 import { useHistory } from "react-router";
 
-const FileTable = () => {
+const FileTable = ({ trigger }) => {
   const [file, setFile] = useState(null);
   const { data } = useSelector((s) => s.files);
   const { filters } = useSelector((s) => s.fileFilters);
@@ -47,6 +47,12 @@ const FileTable = () => {
   const dispatch = useDispatch();
   const history = useHistory();
 
+  useEffect(() => {
+    if (trigger) {
+      handleChangeVisibility();
+    }
+  }, [trigger]);
+
   const handleToggleFiltersDrawer = () => {
     setToggleFiltersDrawer((oldState) => !oldState);
     setFile(null);
@@ -109,7 +115,7 @@ const FileTable = () => {
   );
 
   const handleChangeVisibility = () => {
-    setIsSearchFieldVisible(!isSearchFieldVisible);
+    setIsSearchFieldVisible(false);
   };
 
   const stopPropagation = (e) => {
@@ -146,7 +152,7 @@ const FileTable = () => {
           payload: {
             pageSize: 3,
             currentPage: page,
-            categories:  catFilters,
+            categories: catFilters,
             extensions: extFilters,
             tags: tagFilters,
             content: filters.content,
@@ -215,7 +221,7 @@ const FileTable = () => {
       </div>
     </div>
   ) : (
-    <>
+    <div>
       <ConfirmDialog
         open={fileForDelete.open}
         title="Brisanje dokumenta"
@@ -297,16 +303,16 @@ const FileTable = () => {
         setPage={setPage}
         category={null}
       />
+
       <div
-        className="flex-center"
         style={{
-          paddingTop: "36px",
+          display: "flex",
           justifyContent: "space-between",
-          postion: "relative",
+          position: "relative",
+          width: "100%",
         }}
       >
-        <h1 className="page-heading">Pregled dokumenata</h1>
-        <div style={{ postion: "relative" }}>
+        <div>
           <Fade in={isSearchFieldVisible} timeout={500} className="proba">
             {input}
           </Fade>
@@ -315,7 +321,8 @@ const FileTable = () => {
               style={{
                 position: "absolute",
                 zIndex: 10000,
-                right: 95,
+                left: 780,
+                top: 20,
                 marginTop: 0,
               }}
             >
@@ -323,14 +330,22 @@ const FileTable = () => {
             </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>
+        <div style={{ display: "flex" }}>
+          {isSearchFieldVisible ? (
+            ""
+          ) : (
+            <IconButton
+              className="c-btn c-btn--primary-outlined candidate-btn search-field userPageBtn ml-20px no-padding custom-filter-button"
+              onClick={() => setIsSearchFieldVisible(true)}
+            >
+              {t("candidates.search")}
+              <img
+                src={searchImage}
+                alt="filter"
+                className="candidates-image"
+              />
+            </IconButton>
+          )}
           <FilterButton onShowFilters={handleToggleFiltersDrawer} />
         </div>
       </div>
@@ -341,6 +356,7 @@ const FileTable = () => {
           flexDirection: "column",
           justifyContent: "space-between",
           minHeight: "500px",
+          width: "100%",
         }}
       >
         <div className="table-cont">
@@ -466,7 +482,7 @@ const FileTable = () => {
             shape="rounded"
             page={page}
           />
-          
+
           <IconButton
             className="c-btn ads-page-btn c-btn--primary add-ad-btn filesPage"
             onClick={() => history.push(ADD_FILE)}
@@ -482,19 +498,12 @@ const FileTable = () => {
           }}
         ></div>
       </div>
-    </>
+    </div>
   );
 };
 
 FileTable.propTypes = {
-  // history: PropTypes.shape({
-  //   replace: PropTypes.func,
-  //   push: PropTypes.func,
-  //   location: PropTypes.shape({
-  //     pathname: PropTypes.string,
-  //   }),
-  // }),
-  files: PropTypes.array,
+  trigger: PropTypes.number,
 };
 
 export default FileTable;

src/pages/FilesPage/FilesPage.js

@@ -15,6 +15,7 @@ const FilesPage = ({ history }) => {
   const categories = useSelector(selectCategories);
   const [categoryName, setCategoryName] = useState("");
   const dispatch = useDispatch();
+  const [trigger, setTrigger] = useState(0);
 
   useEffect(() => {
     dispatch(setCategoriesReq());
@@ -43,7 +44,13 @@ const FilesPage = ({ history }) => {
     <>
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
-      <div className="pl-144" style={{ paddingTop: "36px" }}>
+      <div
+        className="pl-144"
+        style={{ paddingTop: "36px" }}
+        onClick={() => {
+          setTrigger((trigger) => trigger + 1);
+        }}
+      >
         <div style={{ marginBottom: "50px" }}>
           <div style={{ marginBottom: "30px" }}>
             <h1 className="page-heading">Folderi</h1>
@@ -82,7 +89,7 @@ const FilesPage = ({ history }) => {
             <h1 className="page-heading">Fajlovi</h1>
           </div>
           <div className="files-page-categories">
-            <FileTable />
+            <FileTable trigger={trigger} />
           </div>
         </div>
       </div>