Added FilePage

src/AppRoutes.js

@@ -25,6 +25,7 @@ import {
   STATS_PAGE,
   REGISTER_PAGE,
   CREATE_AD_PAGE,
+  FILES_PAGE,
 } from "./constants/pages";
 
 import LoginPage from "./pages/LoginPage/LoginPageMUI";
@@ -49,6 +50,7 @@ import StatsPage from "./pages/StatsPage/StatsPage";
 import RegisterPage from "./pages/RegisterPage/RegisterPage";
 import CreateAdPage from "./pages/AdsPage/CreateAdPage";
 import DocsPage from "./pages/DocsPage/DocsPage";
+import FilesPage from "./pages/FilesPage/FilesPage";
 
 const AppRoutes = () => {
   const dispatch = useDispatch();
@@ -80,6 +82,7 @@ const AppRoutes = () => {
       <PrivateRoute exact path={USERS_PAGE} component={UsersPage} />
       <PrivateRoute exact path={CANDIDATES_PAGE} component={CandidatesPage} />
       <PrivateRoute exact path={CREATE_AD_PAGE} component={CreateAdPage} />
+      <PrivateRoute exact path={FILES_PAGE} component={FilesPage} />
       <PrivateRoute
         exact
         path={CANDIDATES_DETAILS_PAGE}

src/assets/styles/components/_files.scss

@@ -0,0 +1,32 @@
+.files-page {
+  max-width: 630px;
+  height: 100%;
+  padding: 36px 0 !important;
+  margin: 0 auto;
+}
+
+.files-page-card {
+    margin-bottom: 1.5rem;
+  }
+
+.files-page-card-title {
+  margin-bottom: 1rem;
+}
+
+.files-page-card-content-checkboxes {
+  padding: 0 9px !important;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+}
+
+.files-page-card-content-checkboxes .MuiFormControlLabel-root {
+  width: calc(100% / 3) !important;
+  margin: 0 !important;
+}
+
+.files-page-card-add-button {
+    padding-bottom: 36px;
+    display: flex;
+    justify-content: flex-end;
+}

src/components/MUI/NavbarComponent.js

@@ -45,6 +45,7 @@ const NavbarComponent = () => {
     "patterns",
     "statistics",
     "users",
+    "files",
     // "signOut"
   ];
   const { pathname } = useLocation();

src/constants/pages.js

@@ -20,3 +20,4 @@ export const SCHEDULE_PAGE = '/schedule'
 export const STATS_PAGE = '/statistics';
 export const REGISTER_PAGE = '/register';
 export const CREATE_AD_PAGE = '/create-ad';
+export const FILES_PAGE = '/files';

src/i18n/resources/en.js

@@ -129,7 +129,8 @@ export default {
     statistics: "Statistics",
     users: "Users",
     signOut: "Sign Out",
-    schedule:"Schedule"
+    schedule:"Schedule",
+    files:"Files",
   },
   ads: {
     activeAds: "Active Ads",
@@ -284,5 +285,8 @@ export default {
     number:"Number",
     contacted:"Number of contacted:",
     registered:"Registered by positions"
+  },
+  files: {
+    addFile: "Add File"
   }
 };

src/i18n/resources/rs.js

@@ -147,6 +147,7 @@ export default {
     patterns: "Šabloni",
     statistics: "Statistika",
     users: "Korisnici",
+    files:"Fajlovi",
     signOut: "Izloguj se",
   },
   ads: {
@@ -322,4 +323,7 @@ export default {
     contacted: "Broj kontaktiranih:",
     registered: "Prijavljeni po pozicijama",
   },
+  files: {
+    addFile: "Dodajte Fajl"
+  }
 };

src/main.scss

@@ -35,6 +35,7 @@
 @import './assets/styles/overwrite';
 @import './assets/styles/utility';
 @import './assets/styles/components/patterns';
+@import './assets/styles/components/files';
 
 
 .flex-center{

src/pages/FilesPage/FilesPage.js

@@ -0,0 +1,189 @@
+import React, { useState } from "react";
+import { Checkbox, FormControlLabel, MenuItem, Select } from "@mui/material";
+import { useTranslation } from "react-i18next";
+import uploadIcon from "../../assets/images/upload.png";
+import IconButton from "../../components/IconButton/IconButton";
+
+const FilesPage = () => {
+  const [dropzoneActive, setDropzoneActive] = useState(false);
+  const [pdfFile, setPdfFile] = useState(null);
+  const [categories, setCategories] = useState([
+    { id: 1, value: "a" },
+    { id: 2, value: "b" },
+    { id: 3, value: "c" },
+    { id: 4, value: "d" },
+    { id: 5, value: "e" },
+    { id: 6, value: "f" },
+    { id: 7, value: "g" },
+    { id: 8, value: "h" },
+  ]);
+  const [tags, setTags] = useState([
+    { id: 1, value: "a", isChecked: false },
+    { id: 2, value: "a", isChecked: false },
+    { id: 3, value: "a", isChecked: false },
+    { id: 4, value: "a", isChecked: false },
+    { id: 5, value: "a", isChecked: false },
+    { id: 6, value: "a", isChecked: false },
+    { id: 7, value: "a", isChecked: false },
+    { id: 8, value: "a", isChecked: false },
+  ]);
+  const [selectedCategory, setSelectedCategory] = useState(null);
+  const { t } = useTranslation();
+
+  console.log(selectedCategory);
+
+  const handleDrop = (e) => {
+    e.preventDefault();
+    const selectedFile = e.dataTransfer.files[0];
+    const fileName = selectedFile.name;
+    const fileExtension = selectedFile.name.split(".").pop();
+    const fileSize = selectedFile.size;
+    console.log(fileName, fileExtension, fileSize);
+    setPdfFile(selectedFile);
+  };
+
+  const handleChangeInputFile = (e) => {
+    const selectedFile = e.target.files[0];
+    const fileName = selectedFile.name;
+    const fileExtension = selectedFile.name.split(".").pop();
+    const fileSize = selectedFile.size;
+    console.log(fileName, fileExtension, fileSize);
+    setPdfFile(selectedFile);
+  };
+
+  const selectCategoryHandler = (e) => {
+    setSelectedCategory(e.target.value);
+    setCategories((oldState) => [...oldState]);
+  };
+
+  const onChangeTagsCheckbox = (id) => {
+    const newArr = tags.map((x) =>
+      x.id === id ? { ...x, isChecked: !x.isChecked } : x
+    );
+
+    setTags(newArr);
+  };
+
+  return (
+    <div className="files-page">
+      <div className="files-page-card">
+        <div className="files-page-card-title">
+          <h1>Categories</h1>
+        </div>
+        <div className="files-page-card-content">
+          <Select
+            labelId="files-page-card-content-select"
+            id="files-page-card-content-selectt"
+            sx={{ width: "100%" }}
+            onChange={selectCategoryHandler}
+            value={selectedCategory}
+          >
+            {categories &&
+              categories.map((category, index) => (
+                <MenuItem
+                  key={index}
+                  sx={{ textAlign: "left" }}
+                  value={category.value}
+                >
+                  {category.value}
+                </MenuItem>
+              ))}
+          </Select>
+        </div>
+      </div>
+
+      <div className="files-page-card">
+        <div className="files-page-card-title">
+          <h1>Tags</h1>
+        </div>
+        <div className="files-page-card-content">
+          <div className="files-page-card-content-checkboxes">
+            {tags.map((x) => (
+              <FormControlLabel
+                key={x.id}
+                control={
+                  <Checkbox
+                    value={x.value}
+                    checked={x.isChecked}
+                    onChange={onChangeTagsCheckbox.bind(this, x.id)}
+                    className="create-ad-second-step-checkbox"
+                  />
+                }
+                label={x.value}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="files-page-card">
+        <div className="files-page-card-title">
+          <h1>Drag & Drop File</h1>
+        </div>
+        <div className="files-page-card-content">
+          <div
+            className="uploadCV-input"
+            onDragOver={(e) => {
+              setDropzoneActive(true);
+              e.preventDefault();
+            }}
+            onDragLeave={(e) => {
+              setDropzoneActive(false);
+              e.preventDefault();
+            }}
+            onDrop={(e) => handleDrop(e)}
+            style={{
+              backgroundColor: dropzoneActive ? "#F4F4F4" : "#ffffff",
+            }}
+          >
+            <div className="uploadCV-input-sub-container">
+              <img src={uploadIcon} />
+              <div className="uploadCV-input-sub-container">
+                {pdfFile !== null ? (
+                  <p>{pdfFile.name}</p>
+                ) : (
+                  <>
+                    <p>
+                      {t("ads.dragPdf1")} &nbsp;
+                      <label
+                        htmlFor="upload-file"
+                        style={{
+                          cursor: "pointer",
+                          textDecoration: "underline",
+                          color: "#1E92D0",
+                        }}
+                      >
+                        {t("common.search")}
+                      </label>
+                      &nbsp;{t("ads.dragPdf2")}
+                    </p>
+                    <input
+                      type="file"
+                      name="photo"
+                      id="upload-file"
+                      style={{ display: "none", zIndex: -1 }}
+                      value={pdfFile}
+                      data-testid="apply-for-ad-modal-fourth-stage-pdf-input"
+                      accept=".pdf"
+                      onChange={handleChangeInputFile}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="files-page-card">
+        <div className="files-page-card-add-button">
+          <IconButton className="c-btn ads-page-btn c-btn--primary add-ad-btn">
+            + {t("files.addFile")}
+          </IconButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FilesPage;