added ui for documents preview

src/AppRoutes.js

@@ -48,6 +48,7 @@ import SchedulePage from "./pages/SchedulePage/SchedulePage";
 import StatsPage from "./pages/StatsPage/StatsPage";
 import RegisterPage from "./pages/RegisterPage/RegisterPage";
 import CreateAdPage from "./pages/AdsPage/CreateAdPage";
+import DocsPage from "./pages/DocsPage/DocsPage";
 
 const AppRoutes = () => {
   const dispatch = useDispatch();
@@ -61,6 +62,7 @@ const AppRoutes = () => {
   }, [location]);
   return (
     <Switch>
+      <Route exact path={'/docs'} component={DocsPage} />
       <Route exact path={BASE_PAGE} component={LoginPage} />
       <Route path={NOT_FOUND_PAGE} component={NotFoundPage} />
       {/* <Route path={USERS_PAGE} component={UsersPage} /> */}

src/assets/styles/components/_usersPage.scss

@@ -1,36 +1,35 @@
-.f-1{
+.f-1 {
   flex: 1;
 }
 .usersTable {
-border-radius: 12px;
-overflow: hidden;
-background-color: white;
-@include media-below($bp-xl) {
-  overflow-x: auto !important;
-}
-}
-.table-cont{
-
-@include media-below($bp-xl) {
-  overflow-x: auto !important;
+  border-radius: 12px;
+  overflow: hidden;
+  background-color: white;
+  @include media-below($bp-xl) {
+    overflow-x: auto !important;
+  }
 }
+.table-cont {
+  @include media-below($bp-xl) {
+    overflow-x: auto !important;
+  }
 }
 .usersTable .headingRow {
-background-color: $mainBlueLight;
+  background-color: $mainBlueLight;
 }
 .usersTable .headingRow th {
-font-weight: 600 !important;
+  font-weight: 600 !important;
 }
 .usersTable tr {
-border: 1px solid #f4f4f4;
+  border: 1px solid #f4f4f4;
 }
 .usersTable td,
 .usersTable th {
-width: 20% !important;
-height: 60px;
-padding-left: 35px;
+  width: 20% !important;
+  height: 60px;
+  padding-left: 35px;
 }
-.usersTable > tbody > tr > td:last-of-type{
+.usersTable > tbody > tr > td:last-of-type {
   display: flex !important;
   flex-direction: row !important;
   // justify-content: space-between;
@@ -38,32 +37,32 @@ padding-left: 35px;
   gap: 9px;
 }
 .inviteBtn {
-text-transform: capitalize;
-padding: 10px 40px !important;
-margin-left: 20px;
-font-size: 16px !important;
+  text-transform: capitalize;
+  padding: 10px 40px !important;
+  margin-left: 20px;
+  font-size: 16px !important;
 }
 .secondaryRow:hover {
-background-color: $mainBlueLight;
+  background-color: $mainBlueLight;
 }
 .cvLink {
-text-decoration: underline;
-font-family: "Source Sans Pro";
-font-style: normal;
-font-weight: 400;
-font-size: 14px;
-//   line-height: 15px;
-/* identical to box height */
-text-decoration-line: underline;
-/* Main Blue */
-color: #226cb0;
-//   display: flex;
-//   justify-content: center;
-//   align-items: center;
-//   text-align: center;
-//   padding-left: 35px;
-}
-.dialog-subtitle{
+  text-decoration: underline;
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  //   line-height: 15px;
+  /* identical to box height */
+  text-decoration-line: underline;
+  /* Main Blue */
+  color: #226cb0;
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   text-align: center;
+  //   padding-left: 35px;
+}
+.dialog-subtitle {
   position: relative;
   top: 2.5px;
   color: $mainBlue;
@@ -122,12 +121,6 @@ color: #226cb0;
 .usersTable-users tr {
   border: 1px solid #f4f4f4;
 }
-// .usersTable td,
-// .usersTable th {
-//   width: 20% !important;
-//   height: 60px;
-//   padding-left: 35px;
-// }
 .usersTable-users.normal > tbody > tr > td:last-of-type {
   display: flex !important;
   flex-direction: row !important;
@@ -135,3 +128,8 @@ color: #226cb0;
   align-items: center;
   gap: 9px;
 }
+.docs-name{
+  text-decoration: underline;
+  color: $mainBlue;
+  cursor: pointer;
+}

src/components/Docs/DocsFilters.js

@@ -0,0 +1,162 @@
+import React from "react";
+import PropType from "prop-types";
+import {
+  Box,
+  Checkbox,
+  Drawer,
+  FormControlLabel,
+  FormGroup,
+} from "@mui/material";
+import filterIcon from "../../assets/images/filter_vector.png";
+import x from "../../assets/images/x.png";
+
+const tags = [
+  { name: "Tag", isChecked: false },
+  { name: "Second tag", isChecked: true },
+];
+
+const DocsFilters = ({ open, handleClose }) => {
+  const handleCheckboxes = (e) => {
+    const { value } = e.target;
+    // dispatch(changeIsCheckedValue(value));
+    console.log(value);
+  };
+
+  const submitFiltersHandler = () =>{
+    alert('Pamet u glavu')
+  }
+
+  const list = () => (
+    <Box
+      sx={{
+        width: 360,
+        height: "100%",
+        borderRadius: "18px 0 0 18px",
+        padding: "36px",
+      }}
+      role="presentation"
+      onKeyDown={handleClose}
+    >
+      <form onSubmit={submitFiltersHandler}>
+        <div data-testid="ad-filters-drawer">
+          <div className="ad-filters-header-container">
+            <div className="ad-filters-header">
+              <img src={filterIcon} alt="filter_icon" />
+              {/* <h3>{t("filters.filters")}</h3> */}
+              <h3>Filteri</h3>
+              <p>
+                {/* <sub>| {t("ads.ads")}</sub> */}
+                <sub>| Dokumenti</sub>
+              </p>
+            </div>
+            <div className="ad-filters-header-close" onClick={handleClose}>
+              <img src={x} alt="x" />
+            </div>
+          </div>
+          <div
+            style={{ paddingTop: "30px" }}
+            className="custom-drawer-sub-card-label"
+          >
+            <p>Ekstenzija</p>
+          </div>
+          <div className="ad-filters-technologies-checkboxes">
+            <FormGroup>
+              {tags?.map((tag, index) => (
+                <FormControlLabel
+                  key={index}
+                  control={
+                    <Checkbox
+                      onChange={handleCheckboxes}
+                      value={tag.name}
+                      checked={tag.isChecked}
+                      className="ad-filters-checkbox"
+                    />
+                  }
+                  label={tag.name}
+                />
+              ))}
+            </FormGroup>
+          </div>
+          <div
+            style={{ paddingTop: "10px" }}
+            className="custom-drawer-sub-card-label"
+          >
+            <p>Tagovi</p>
+          </div>
+          <div className="ad-filters-technologies-checkboxes">
+            <FormGroup>
+              {tags?.map((tag, index) => (
+                <FormControlLabel
+                  key={index}
+                  control={
+                    <Checkbox
+                      onChange={handleCheckboxes}
+                      value={tag.name}
+                      checked={tag.isChecked}
+                      className="ad-filters-checkbox"
+                    />
+                  }
+                  label={tag.name}
+                />
+              ))}
+            </FormGroup>
+          </div>
+          <div
+            style={{ paddingTop: "10px" }}
+            className="custom-drawer-sub-card-label"
+          >
+            <p>Kategorija</p>
+          </div>
+          <div className="ad-filters-technologies-checkboxes">
+            <FormGroup>
+              {tags?.map((tag, index) => (
+                <FormControlLabel
+                  key={index}
+                  control={
+                    <Checkbox
+                      onChange={handleCheckboxes}
+                      value={tag.name}
+                      checked={tag.isChecked}
+                      className="ad-filters-checkbox"
+                    />
+                  }
+                  label={tag.name}
+                />
+              ))}
+            </FormGroup>
+          </div>
+        </div>
+        <div className="custom-drawer-submit">
+          <button
+            className="c-btn c-btn--primary"
+            data-testid="custom-drawer-submit-search"
+            // disabled={!hasSelectedFilters()}
+          >
+            {/* {t("common.search")} */}
+            Pretraži
+          </button>
+        </div>
+      </form>
+    </Box>
+  );
+
+  return (
+    <div className="docs-filters">
+      <Drawer
+        // PaperProps={{ style: { minWidth: "300px" } }}
+        anchor="right"
+        open={open}
+        onClose={handleClose}
+      >
+        {list()}
+      </Drawer>
+    </div>
+  );
+};
+
+DocsFilters.propTypes = {
+  open: PropType.any,
+  handleClose: PropType.func,
+};
+
+export default DocsFilters;

src/pages/DocsPage/DocsPage.js

@@ -0,0 +1,126 @@
+import React from "react";
+import { useState } from "react";
+import FilterButton from "../../components/Button/FilterButton";
+import DocsFilters from "../../components/Docs/DocsFilters";
+
+const docs = [
+  {
+    id: 1,
+    name: "probaFile",
+    type: ".jpg",
+    sizeMb: 0.005,
+  },
+  {
+    id: 1,
+    name: "probaFile",
+    type: ".txt",
+    sizeMb: 0.005,
+  },
+  {
+    id: 1,
+    name: "probaFile",
+    type: ".docx",
+    sizeMb: 0.005,
+  },
+];
+const DocsPage = () => {
+  const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
+
+  const handleToggleFiltersDrawer = () => {
+    setToggleFiltersDrawer((oldState) => !oldState);
+  };
+
+  return (
+    <div>
+      <div className="l-t-rectangle"></div>
+      <div className="r-b-rectangle"></div>
+      <DocsFilters
+        open={toggleFiltersDrawer}
+        handleClose={handleToggleFiltersDrawer}
+      />
+      <div
+        //   onClick={() => setIsSearchFieldVisible(false)}
+        className="pl-144 flex-center"
+        style={{
+          paddingTop: "36px",
+          justifyContent: "space-between",
+          postion: "relative",
+        }}
+      >
+        <h1 className="page-heading">
+          {/* {t("users.management")} */}
+          Pregled dokumenata
+        </h1>
+        <div className="flex-center">
+          {/* <button></button> */}
+          <FilterButton onShowFilters={handleToggleFiltersDrawer} />
+        </div>
+      </div>
+      <div
+        className="pl-144"
+        //   onClick={() => setIsSearchFieldVisible(false)}
+        style={{
+          display: "flex",
+          marginTop: "39px",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          minHeight: "500px",
+        }}
+      >
+        <div className="table-cont">
+          <table
+            className={
+              "usersTable-users mini"
+              // editEnable ? "usersTable-users normal" : "usersTable-users mini"
+            } // style={{ width: "893.56px" }}
+          >
+            <thead>
+              <tr className="headingRow">
+                <th>
+                  {/* {t("users.fullName")} */}
+                  {/* 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) */}
+                  {/* Kategorija dokumenta */}
+                {/* </th> */}
+                {/* {editEnable && <th></th>} */}
+              </tr>
+            </thead>
+
+            <tbody>
+              {docs.map((n) => (
+                <tr key={n.id} className="secondaryRow">
+                  <td className="docs-name">{n.name}</td>
+                  <td>{n.type}</td>
+                  <td className="profession">{n.sizeMb}MB</td>
+                  {/* <td className="profession">cat</td> */}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            justifyContent: "flex-end",
+            marginBottom: "35px",
+          }}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default DocsPage;