Merge branch 'feature/1563_filter_button' of Neca/HRCenter into FE_dev

src/assets/styles/components/_ads.scss

@@ -273,3 +273,70 @@ h3 {
   background: #226cb0;
   border-radius: 9px;
 }
+
+.ad-filters-header-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ad-filters-header {
+  display: flex;
+  align-items: center;
+}
+
+.ad-filters-header-close {
+  cursor: pointer;
+}
+
+.ad-filters-header > * {
+  margin-right: 0.25rem;
+}
+
+.ad-filters-header img {
+  width: 18px;
+  height: 15.75px;
+}
+
+.ad-filters-header sub {
+  color: #226cb0;
+}
+
+.ad-filters-sub-title {
+  font-family: "Source Sans Pro";
+  font-style: normal;
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: #272727;
+}
+
+.ad-filters-experience {
+  margin-top: 18px;
+  box-sizing: border-box;
+}
+
+.ad-filters-experience-slider {
+  margin-top: 5px;
+}
+
+.ad-filters-technologies {
+  margin-top: 18px;
+}
+
+.ad-filters-employment-type {
+  display: flex;
+}
+
+.ad-filters-employment-type > button {
+  margin-right: 0.5rem;
+  margin-top: 18px;
+}
+
+.ad-filters-search {
+  margin-top: 18px;
+  padding-bottom: 18px;
+}
+
+.ad-filters-search > * {
+  width: 100%;
+}

src/components/Ads/AdFilters.js

@@ -1,9 +1,114 @@
-import React from 'react'
+import React, { useState } from "react";
+import PropType from "prop-types";
+import Box from "@mui/material/Box";
+import Drawer from "@mui/material/Drawer";
+import FormGroup from "@mui/material/FormGroup";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Checkbox from "@mui/material/Checkbox";
+import Slider from "@mui/material/Slider";
+import filterIcon from "../../assets/images/filter_vector.png";
+import x from "../../assets/images/x.png";
+
+const AdFilters = ({ open, handleClose }) => {
+  const [value, setValue] = useState([0, 10]);
+
+  const handleSliderChange = (_, newValue) => {
+    setValue(newValue);
+  };
+
+  const list = () => (
+    <Box
+      sx={{
+        width: 360,
+        height: "100%",
+        borderRadius: "18px 0 0 18px",
+        padding: "36px",
+      }}
+      role="presentation"
+      // onClick={handleClose}
+      onKeyDown={handleClose}
+    >
+      <div>
+        <div className="ad-filters-header-container">
+          <div className="ad-filters-header">
+            <img src={filterIcon} alt="filter_icon" />
+            <h3>Filteri</h3>
+            <p>
+              <sub>| Oglasi</sub>
+            </p>
+          </div>
+          <div className="ad-filters-header-close" onClick={handleClose}>
+            <img src={x} alt="x" />
+          </div>
+        </div>
+        <div className="ad-filters-experience">
+          <div className="ad-filters-sub-title">
+            <p>Godine iskustva</p>
+          </div>
+          <div className="ad-filters-experience-slider">
+            <Slider
+              getAriaLabel={() => "Temperature range"}
+              value={value}
+              onChange={handleSliderChange}
+              valueLabelDisplay="auto"
+              max={20}
+            />
+          </div>
+        </div>
+        <div className="ad-filters-technologies">
+          <div className="ad-filters-sub-title">
+            <p>Tehnologije</p>
+          </div>
+          <div className="ad-filters-technologies-checkboxes">
+            <FormGroup>
+              <FormControlLabel control={<Checkbox />} label="HTML/CSS" />
+              <FormControlLabel control={<Checkbox />} label="Vanilla JS" />
+              <FormControlLabel control={<Checkbox />} label="React" />
+              <FormControlLabel control={<Checkbox />} label="Angular" />
+              <FormControlLabel control={<Checkbox />} label="SQL" />
+              <FormControlLabel control={<Checkbox />} label="Node.js" />
+              <FormControlLabel control={<Checkbox />} label="PHP" />
+              <FormControlLabel control={<Checkbox />} label="Git" />
+            </FormGroup>
+          </div>
+        </div>
+        <div className="ad-filters-technologies">
+          <div className="ad-filters-sub-title">
+            <p>Tip zaposlenja</p>
+          </div>
+          <div className="ad-filters-employment-type">
+            <button className="c-btn c-btn--primary-outlined">Intership</button>
+            <button className="c-btn c-btn--primary">Posao</button>
+          </div>
+        </div>
+        <div className="ad-filters-technologies">
+          <div className="ad-filters-sub-title">
+            <p>Radno vreme</p>
+          </div>
+          <div className="ad-filters-employment-type">
+            <button className="c-btn c-btn--primary-outlined">Part-time</button>
+            <button className="c-btn c-btn--primary-outlined">Full-time</button>
+          </div>
+        </div>
+        <div className="ad-filters-search">
+          <button className="c-btn c-btn--primary">Pretrazi</button>
+        </div>
+      </div>
+    </Box>
+  );
 
-const AdFilters = () => {
   return (
-    <div>AdFilter</div>
-  )
-}
+    <div>
+      <Drawer anchor="right" open={open} onClose={handleClose}>
+        {list()}
+      </Drawer>
+    </div>
+  );
+};
+
+AdFilters.propTypes = {
+  open: PropType.any,
+  handleClose: PropType.func,
+};
 
-export default AdFilters
+export default AdFilters;

src/pages/AdsPage/AdsPage.js

@@ -10,10 +10,14 @@ import AddAdModal from "../../components/Ads/AddAdModal";
 import AdFilters from "../../components/Ads/AdFilters";
 
 const AdsPage = () => {
-  const [showFilterComponent, setShowFilterComponent] = useState(false);
+  const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
   const [toggleModal, setToggleModal] = useState(false);
   const { t } = useTranslation();
 
+  const handleToggleFiltersDrawer = () => {
+    setToggleFiltersDrawer((oldState) => !oldState);
+  };
+
   const handleToggleModal = () => {
     setToggleModal((oldState) => !oldState);
   };
@@ -22,7 +26,11 @@ const AdsPage = () => {
     <>
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
-      {showFilterComponent && <AdFilters />}
+      <AdFilters />
+      <AdFilters
+        open={toggleFiltersDrawer}
+        handleClose={handleToggleFiltersDrawer}
+      />
       <AddAdModal open={toggleModal} handleClose={handleToggleModal} />
       <div className="ads">
         <div className="active-ads">
@@ -31,7 +39,7 @@ const AdsPage = () => {
             <IconButton
               sx={{ marginLeft: "15px" }}
               className="c-btn c-btn--primary-outlined"
-              onClick={() => setShowFilterComponent((oldState) => !oldState)}
+              onClick={handleToggleFiltersDrawer}
             >
               Filteri{" "}
               <img src={filterVector} alt="filter" className="filter-vector" />