responsive view for files with docx and dox extensions

src/assets/styles/components/_files.scss

@@ -60,7 +60,7 @@
   margin-left: 0px;
 }
 
-.reset-filters{
+.reset-filters {
   margin-left: 30px;
 }
 
@@ -72,13 +72,17 @@
   width: 100% !important;
 }
 
+// for showing pdf file on mobile phone
+// .pdf-canvas canvas {
+//   width: 250% !important;
+// }
+
 .pg-viewer-wrapper .document-container {
   width: 100% !important;
-  background: none;
 }
 
 .document-container {
-  height: 100%;
+  background-color: transparent !important;
 }
 
 .files-page-categories {
@@ -167,6 +171,17 @@
   }
 }
 
+.files-viewer-custom-modal {
+  display: flex;
+  flex-direction: column;
+  @include media-below($bp-xl) {
+    width: 95% !important;
+    height: 90% !important;
+    padding: 0px;
+    margin: 0px;
+  }
+}
+
 .files-edit-note {
   margin-bottom: 12px;
 }
@@ -254,3 +269,17 @@
   width: 105px;
   height: 31px;
 }
+
+.file-viewer-close-btn {
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 20px;
+}
+
+.reset-filter-responsive {
+  align-self: flex-end;
+  padding: 0px;
+  margin-top: 15px;
+  text-decoration: underline;
+  cursor: pointer;
+}

src/components/UI/CustomModal.js

@@ -8,7 +8,7 @@ const style = {
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)",
-  width: 400,
+  width: 1000,
   bgcolor: "background.paper",
   border: "2px solid #000",
   boxShadow: 24,

src/pages/FilesPage/FileTable.js

@@ -11,7 +11,7 @@ import {
   getFilesReq,
   setContent,
   updateFileReq,
-  resetFilters
+  resetFilters,
 } from "../../store/actions/files/fileActions";
 import { Fade, Pagination } from "@mui/material";
 import FilterButton from "../../components/Button/FilterButton";
@@ -191,6 +191,7 @@ const FileTable = ({ trigger }) => {
 
   const displayFile = (fileStream, streamId, fileType) => {
     setFile({ fileStream, streamId, fileType });
+    console.log("Matches je", matches);
   };
 
   const getPathForFile = (fileType, fileStream) => {
@@ -222,7 +223,7 @@ const FileTable = ({ trigger }) => {
   };
 
   const resFilters = () => {
-    dispatch(resetFilters())
+    dispatch(resetFilters());
     dispatch(
       getFilesReq({
         payload: {
@@ -261,7 +262,7 @@ const FileTable = ({ trigger }) => {
       </div>
     </div>
   ) : (
-    <div>
+    <div style={{ display: "flex", flexDirection: "column" }}>
       <ConfirmDialog
         open={fileForDelete.open}
         title={t("files.confirmDialogTitle")}
@@ -276,6 +277,38 @@ const FileTable = ({ trigger }) => {
           setFileForDelete({ open: false, title: "", streamId: null });
         }}
       />
+      <CustomModal
+        classes="files-viewer-custom-modal"
+        open={file && matches}
+        onCloseModal={() => setFile(null)}
+      >
+        {file !== null ? (
+          <div
+            style={{
+              width: "100%",
+              overflowY: "auto",
+              overflowX: "auto",
+              height: "95%",
+            }}
+          >
+            <FileViewer
+              fileType={file.fileType}
+              filePath={getPathForFile(file.fileType, file.fileStream)}
+              onError={onError}
+            />
+          </div>
+        ) : (
+          ""
+        )}
+        <Button
+          type="button"
+          variant="contained"
+          className="c-btn c-btn--primary-outlined file-viewer-close-btn"
+          onClick={() => setFile(null)}
+        >
+          {t("files.close")}
+        </Button>
+      </CustomModal>
       <CustomModal
         classes="files-custom-modal"
         open={openNoteModal.open}
@@ -387,18 +420,33 @@ const FileTable = ({ trigger }) => {
             </IconButton>
           )}
           <FilterButton onShowFilters={handleToggleFiltersDrawer} />
-          <IconButton
-            className="c-btn c-btn--primary-outlined candidate-btn reset-filters userPageBtn ml-20px no-padding custom-filter-button"
-            onClick={resFilters}
-          >
-            {!matches ? t("filters.resetFilters") : null}
-          </IconButton>
+          {!matches ? (
+            <IconButton
+              className="c-btn c-btn--primary-outlined candidate-btn reset-filters userPageBtn ml-20px no-padding custom-filter-button"
+              onClick={resFilters}
+            >
+              {t("filters.resetFilters")}
+            </IconButton>
+          ) : (
+            ""
+          )}
         </div>
       </div>
+      {matches ? (
+        <p
+          className="reset-filter-responsive"
+          onClick={resFilters}
+          style={{ alignSelf: "flex-end" }}
+        >
+          {t("filters.resetFilters")}
+        </p>
+      ) : (
+        ""
+      )}
       <div
         style={{
           display: "flex",
-          marginTop: "39px",
+          marginTop: "30px",
           justifyContent: "space-between",
         }}
       >
@@ -409,6 +457,7 @@ const FileTable = ({ trigger }) => {
               display: "flex",
               width: matches ? "75vw" : "85vw",
               flexDirection: "row",
+              justifyContent: "space-between",
             }}
           >
             <table
@@ -424,12 +473,24 @@ const FileTable = ({ trigger }) => {
                   className="headingRow headingRowFiles"
                   style={{ cursor: "pointer" }}
                 >
-                  {file === null ? <th>{t("files.doucmentPath")}</th> : ""}
+                  {file === null || matches ? (
+                    <th>{t("files.doucmentPath")}</th>
+                  ) : (
+                    ""
+                  )}
                   <th>{t("files.doucmentName")}</th>
-                  {file === null ? <th>{t("files.doucmentType")}</th> : ""}
-                  {file === null ? <th>{t("files.doucmentSize")} (kB)</th> : ""}
-                  {file === null ? <th>{t("files.deleteDocument")}</th> : ""}
-                  {file === null ? <th>{t("files.note")}</th> : ""}
+                  {file === null || matches ? (
+                    <th>{t("files.doucmentType")}</th>
+                  ) : (
+                    ""
+                  )}
+                  {file === null || matches ? (
+                    <th>{t("files.doucmentSize")} (kB)</th>
+                  ) : (
+                    ""
+                  )}
+                  <th>{t("files.deleteDocument")}</th>
+                  {file === null || matches ? <th>{t("files.note")}</th> : ""}
                   <th>{t("files.downloadDocument")}</th>
                 </tr>
               </thead>
@@ -442,43 +503,44 @@ const FileTable = ({ trigger }) => {
                       displayFile(n.file_stream, n.stream_id, n.file_type)
                     }
                   >
-                    {file === null ? (
+                    {file === null || matches ? (
                       <td className="docs-name">{n.fileName}</td>
                     ) : (
                       ""
                     )}
                     <td className="docs-name">{n.title}</td>
-                    {file === null ? <td>{n.file_type && n.file_type}</td> : ""}
-
-                    {file === null ? (
-                      <td className="profession">
-                        {<NumericLabel>{n.cached_file_size}</NumericLabel>}
-                      </td>
+                    {file === null || matches ? (
+                      <td>{n.file_type && n.file_type}</td>
                     ) : (
                       ""
                     )}
-                    {file === null ? (
+
+                    {file === null || matches ? (
                       <td className="profession">
-                        <IconButton
-                          className="c-btn c-btn--primary-outlined"
-                          onClick={() =>
-                            setFileForDelete({
-                              open: true,
-                              title: n.title,
-                              streamId: n.stream_id,
-                            })
-                          }
-                        >
-                          <img
-                            style={{ width: "12px", height: "12px" }}
-                            src={deleteIcon}
-                          />
-                        </IconButton>
+                        {<NumericLabel>{n.cached_file_size}</NumericLabel>}
                       </td>
                     ) : (
                       ""
                     )}
-                    {file === null ? (
+                    <td className="profession">
+                      <IconButton
+                        className="c-btn c-btn--primary-outlined"
+                        onClick={() =>
+                          setFileForDelete({
+                            open: true,
+                            title: n.title,
+                            streamId: n.stream_id,
+                          })
+                        }
+                      >
+                        <img
+                          style={{ width: "12px", height: "12px" }}
+                          src={deleteIcon}
+                        />
+                      </IconButton>
+                    </td>
+
+                    {file === null || matches ? (
                       <td className="profession">
                         <IconButton
                           className="c-btn c-btn--primary-outlined"
@@ -519,13 +581,15 @@ const FileTable = ({ trigger }) => {
                 ))}
               </tbody>
             </table>
-            {file !== null ? (
+            {file !== null && !matches ? (
               <div
                 style={{
-                  width: "100%",
+                  width: "750px",
                   marginLeft: "30px",
                   overflowY: "auto",
                   height: "350px",
+                  zIndex: 1000000,
+                  backgroundColor: "#F0F0F0",
                 }}
               >
                 <FileViewer