show files

package.json

@@ -32,6 +32,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.3",
+    "react-file-viewer": "^1.2.1",
     "react-helmet-async": "^1.0.9",
     "react-i18next": "^11.10.0",
     "react-mentions": "^4.4.7",

src/assets/styles/components/_files.scss

@@ -54,6 +54,14 @@
   align-self: flex-end;
 }
 
+.document-container p {
+  word-wrap: break-word !important;
+}
+
+.table-cont #docx .document-container{
+  width: 400px !important;
+}
+
 .files-page-categories {
   display: flex;
   flex-wrap: wrap;

src/assets/styles/components/_usersPage.scss

@@ -101,7 +101,7 @@
     }
   }
   &.mini {
-    min-width: 720px;
+    width: 800px;
     td,
     th {
       width: calc(100% / 3) !important;
@@ -131,7 +131,6 @@
   gap: 9px;
 }
 .docs-name{
-  text-decoration: underline;
   color: $mainBlue;
   cursor: pointer;
 }

src/pages/FilesPage/FilesViewPage.js

@@ -20,6 +20,7 @@ import searchImage from "../../assets/images/search.png";
 import IconButton from "../../components/IconButton/IconButton";
 import { ADD_FILE, FILES_PAGE } from "../../constants/pages";
 import PropTypes from "prop-types";
+import FileViewer from "react-file-viewer";
 import { useLocation } from "react-router";
 import deleteIcon from "../../assets/images/delete.png";
 
@@ -30,8 +31,8 @@ const FilesViewPage = ({ history }) => {
   const { data } = useSelector((s) => s.files);
   const { t } = useTranslation();
   const [isSearchFieldVisible, setIsSearchFieldVisible] = useState(false);
+  const [file, setFile] = useState(null);
   const { state } = useLocation();
-  // const [timer, setTimer] = useState(null);
 
   const dispatch = useDispatch();
 
@@ -41,8 +42,13 @@ const FilesViewPage = ({ history }) => {
 
   const handleToggleFiltersDrawer = () => {
     setToggleFiltersDrawer((oldState) => !oldState);
+    setFile(null);
   };
 
+  useEffect(() => {
+    handleFilters(page);
+  }, [file]);
+
   useEffect(() => {
     dispatch(getFileFiltersReq());
     dispatch(
@@ -60,10 +66,12 @@ const FilesViewPage = ({ history }) => {
   }, []);
 
   const handleChange = (_, value) => {
+    handleFilters(value);
+    setPage(value);
+  };
+
+  const handleFilters = (value) => {
     var catFilters = [state && state.category];
-    // filters.categories
-    //   ?.filter((n) => n.isChecked)
-    //   .forEach((m) => catFilters.push(m.name));
 
     var extFilters = [];
     filters.extensions
@@ -87,7 +95,6 @@ const FilesViewPage = ({ history }) => {
         },
       })
     );
-    setPage(value);
   };
 
   const isLoading = useSelector(
@@ -108,6 +115,11 @@ const FilesViewPage = ({ history }) => {
 
   const deleteFileHandler = (stream_id) => {
     dispatch(deleteFileReq({ id: stream_id }));
+    console.log(stream_id)
+    console.log(file.fileStream)
+    if(file !== null && stream_id === file.streamId){
+      setFile(null)
+    }
   };
 
   const handleKeyDown = (event) => {
@@ -153,6 +165,14 @@ const FilesViewPage = ({ history }) => {
     </div>
   );
 
+  const onError = (e) => {
+    console.log(e, "error in file-viewer");
+  };
+
+  const displayFile = (fileStream,streamId) => {
+    setFile({fileStream,streamId});
+  };
+
   return isLoading ? (
     <div>
       <div className="l-t-rectangle"></div>
@@ -179,10 +199,7 @@ const FilesViewPage = ({ history }) => {
           postion: "relative",
         }}
       >
-        <h1 className="page-heading">
-          {/* {t("users.management")} */}
-          Pregled dokumenata
-        </h1>
+        <h1 className="page-heading">Pregled dokumenata</h1>
         <div style={{ postion: "relative" }}>
           <Fade in={isSearchFieldVisible} timeout={500} className="proba">
             {input}
@@ -222,74 +239,79 @@ const FilesViewPage = ({ history }) => {
         }}
       >
         <div className="table-cont">
-          <table
-            className={
-              "usersTable-users mini"
-              // editEnable ? "usersTable-users normal" : "usersTable-users mini"
-            } // style={{ width: "893.56px" }}
-          >
-            <thead>
-              <tr className="headingRow headingRowFiles">
-                <th>
-                  {/* {t("users.fullName")} */}
-                  {/* Document name */}
-                  Putanja dokumenta
-                </th>
-                <th>
-                  {/* {t("users.title")} */}
-                  {/* Document name */}
-                  Naziv dokumenta
-                </th>
-                <th>
-                  {/* Document type */}
-                  Tip dokumenta
-                </th>
-                <th>
-                  {/* {t("users.position")} */}
-                  {/* Document size (MB) */}
-                  Veličina dokumenta
-                </th>
-                <th>
-                  {/* {t("users.position")} */}
-                  {/* Document size (MB) */}
-                  Obriši dokument
-                </th>
-                {/* <th> */}
-                {/* {t("users.position")} */}
-                {/* Document size (MB) */}
-                {/* Kategorija dokumenta */}
-                {/* </th> */}
-                {/* {editEnable && <th></th>} */}
-              </tr>
-            </thead>
-
-            <tbody>
-              {data &&
-                data.data?.length > 0 &&
-                data.data?.map((n, index) => (
-                  <tr key={index} className="secondaryRow">
-                    <td className="docs-name">{n.fileName}</td>
-                    <td className="docs-name">{n.title}</td>
-                    <td>{n.file_type && n.file_type}</td>
-                    <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>
-                  </tr>
-                ))}
-            </tbody>
-          </table>
+          <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>
+                </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)}
+                    >
+                      <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>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+            {file && (
+              <div
+                style={{
+                  width: "500px",
+                  marginLeft: "30px",
+                  overflowY: "visible",
+                }}
+              >
+                <FileViewer
+                  fileType="docx"
+                  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"}