Merge branch 'feature/added_filter_ads_by_title' of Neca/HRCenter into FE_dev

src/assets/styles/components/_ads.scss

@@ -23,6 +23,14 @@ h3 {
   }
 }
 
+.active-ads-header-buttons {
+  display: flex;
+}
+
+.active-ads-header-buttons > button {
+  margin-left: 18px;
+}
+
 .filter-vector {
   margin-left: 0.5rem !important;
 }
@@ -103,6 +111,20 @@ h3 {
   }
 }
 
+.active-ads-ads-ad .slick-slider,
+.archived-ads-ads-ad .slick-slider {
+  width: 100% !important;
+}
+
+.active-ads-ads-ad .slick-slider .slick-list .slick-track {
+  transform: translate3d(0 0 0) !important;
+}
+
+.active-ads-ads-ad .slick-track,
+.archived-ads-ads-ad .slick-track {
+  margin: 0 !important;
+}
+
 .archived-ads,
 .ad-details-applicants {
   margin-top: 56px;

src/assets/styles/components/_candidatesPage.scss

@@ -175,6 +175,42 @@
   margin-left: 42px;
 }
 
+.ads-search-field-responsive {
+  min-width: 350px !important;
+  border:1px solid #226CB0;
+  border-radius:10px;
+  padding: 20px;
+  background-color: white;
+  position: absolute;
+  top: 100px;
+  right: 9px;
+  z-index: 1000;
+}
+
+.ads-search-field-responsive::placeholder{
+  font-size: 1rem;
+  color: #9D9D9D;
+  font-style: italic;
+}
+
+.ads-search-field{
+  min-width: 700px !important;
+  border:1px solid #226CB0;
+  border-radius:10px;
+  padding: 20px;
+  background-color: white;
+  position: absolute;
+  top: 112px;
+  right: 72px;
+  z-index: 1000;
+}
+
+.ads-search-field::placeholder{
+  font-size: 1rem;
+  color: #9D9D9D;
+  font-style: italic;
+}
+
 .candidate-search-field{
   width: 816px;
   border:1px solid #226CB0;

src/pages/AdsPage/AdsPage.js

@@ -5,6 +5,7 @@ import ArchiveAd from "../../components/Ads/ArchiveAd";
 import IconButton from "../../components/IconButton/IconButton";
 import arrow_left from "../../assets/images/arrow_left.png";
 import arrow_right from "../../assets/images/arrow_right.png";
+import searchImage from "../../assets/images/search.png";
 import { useTranslation } from "react-i18next";
 import AddAdModal from "../../components/Ads/AddAdModal";
 import AdFilters from "../../components/Ads/AdFilters";
@@ -28,12 +29,16 @@ import noActiveAds from "../../assets/images/no_active_ads.png";
 import { setTechnologiesReq } from "../../store/actions/technologies/technologiesActions";
 import { selectTechnologies } from "../../store/selectors/technologiesSelectors";
 import { useLocation } from "react-router-dom";
+import Fade from "@mui/material/Fade";
 
 const AdsPage = ({ history }) => {
   const theme = useTheme();
   const matches = useMediaQuery(theme.breakpoints.down("sm"));
   const [toggleFiltersDrawer, setToggleFiltersDrawer] = useState(false);
+  const [isSearchFieldVisible, setIsSearchFieldVisible] = useState(false);
+  const [searchInput, setSearchInput] = useState("");
   const [toggleModal, setToggleModal] = useState(false);
+  const [tmp, setTmp] = useState(null);
   const ads = useSelector(selectAds);
   const technologies = useSelector(selectTechnologies);
   const archiveAds = useSelector(selectArchiveAds);
@@ -48,6 +53,23 @@ const AdsPage = ({ history }) => {
     dispatch(setArchiveAdsReq());
   }, []);
 
+  var slider1 = document.querySelector(".active-ads-ads-ad .slick-track");
+  var slider2 = document.querySelector(".archived-ads-ads-ad .slick-track");
+
+  useEffect(() => {
+    if (slider1 && slider2) {
+      setTmp(1);
+    }
+  }, [searchInput]);
+
+  useEffect(() => {
+    if (slider1 && slider2) {
+      slider1.style.transform = null;
+      slider2.style.transform = null;
+    }
+    setTmp(null);
+  }, [tmp]);
+
   useEffect(() => {
     if (search) {
       // history.push("/ads");
@@ -160,6 +182,40 @@ const AdsPage = ({ history }) => {
     return ads;
   };
 
+  const handleChangeVisibility = (state) => {
+    setIsSearchFieldVisible(state);
+  };
+
+  const stopPropagation = (e) => {
+    e.stopPropagation();
+  };
+
+  const inputNormal = (
+    <div>
+      <input
+        placeholder="Pretrazi..."
+        value={searchInput}
+        onChange={(e) => setSearchInput(e.target.value)}
+        className="ads-search-field"
+        onClick={stopPropagation}
+        style={{ zIndex: 1000 }}
+      />
+    </div>
+  );
+
+  const inputResponsive = (
+    <div>
+      <input
+        placeholder="Pretrazi..."
+        value={searchInput}
+        onChange={(e) => setSearchInput(e.target.value)}
+        className="ads-search-field-responsive"
+        onClick={stopPropagation}
+        style={{ zIndex: 1000 }}
+      />
+    </div>
+  );
+
   return (
     <>
       <div className="l-t-rectangle"></div>
@@ -170,13 +226,71 @@ const AdsPage = ({ history }) => {
         handleClose={handleToggleFiltersDrawer}
         technologies={technologies}
       />
+      <div style={{ postion: "absolute" }}>
+        {!matches && (
+          <>
+            <Fade in={isSearchFieldVisible} timeout={500}>
+              {inputNormal}
+            </Fade>
+            <Fade in={isSearchFieldVisible} timeout={500}>
+              <div
+                style={{
+                  position: "absolute",
+                  zIndex: 10000,
+                  marginTop: 15,
+                  right: "80px",
+                }}
+              >
+                <img src={searchImage} />
+              </div>
+            </Fade>
+          </>
+        )}
+        {matches && (
+          <>
+            <Fade in={isSearchFieldVisible} timeout={500}>
+              {inputResponsive}
+            </Fade>
+            <Fade in={isSearchFieldVisible} timeout={500}>
+              <div
+                style={{
+                  position: "absolute",
+                  zIndex: 10000,
+                  marginTop: 10,
+                  right: "16px",
+                }}
+              >
+                <img src={searchImage} />
+              </div>
+            </Fade>
+          </>
+        )}
+      </div>
       <AddAdModal open={toggleModal} handleClose={handleToggleModal} />
-      <div className="ads">
+      <div className="ads" onClick={() => handleChangeVisibility(false)}>
         {ads && ads.length > 0 && (
           <div className="active-ads">
             <div className="active-ads-header">
               <h1>{t("ads.activeAds")}</h1>
-              <FilterButton onShowFilters={handleToggleFiltersDrawer} />
+              <di className="active-ads-header-buttons">
+                <IconButton
+                  className={
+                    "c-btn--primary-outlined c-btn userPageBtn ml-20px no-padding"
+                  }
+                  onClick={() => handleChangeVisibility(true)}
+                >
+                  {!matches && "Pretraga"}
+                  <img
+                    style={{
+                      position: "relative",
+                      top: -0.25,
+                      paddingLeft: matches ? "0px" : "10px",
+                    }}
+                    src={searchImage}
+                  />
+                </IconButton>
+                <FilterButton onShowFilters={handleToggleFiltersDrawer} />
+              </di>
             </div>
             <div className="active-ads-ads">
               <div className="active-ads-ads-a">
@@ -201,19 +315,23 @@ const AdsPage = ({ history }) => {
                   style={{ width: "100%" }}
                   ref={activeAdsSliderRef}
                 >
-                  {ads.map((ad, index) => (
-                    <Ad
-                      onShowAdDetails={() =>
-                        history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
-                      }
-                      key={index}
-                      title={ad.title}
-                      minimumExperience={ad.minimumExperience}
-                      createdAt={ad.createdAt}
-                      expiredAt={ad.expiredAt}
-                    />
-                  ))}
-                  {ads.length <= 5 && getDummyAds(ads.length)}
+                  {ads
+                    .filter((ad) =>
+                      ad.title.toLowerCase().includes(searchInput.toLowerCase())
+                    )
+                    .map((ad, index) => (
+                      <Ad
+                        onShowAdDetails={() =>
+                          history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
+                        }
+                        key={index}
+                        title={ad.title}
+                        minimumExperience={ad.minimumExperience}
+                        createdAt={ad.createdAt}
+                        expiredAt={ad.expiredAt}
+                      />
+                    ))}
+                  {ads.length <= 3 && getDummyAds(ads.length)}
                 </Slider>
               </div>
             </div>
@@ -277,18 +395,22 @@ const AdsPage = ({ history }) => {
                   slidesToScroll={5}
                   style={{ width: "100%" }}
                 >
-                  {archiveAds.map((ad, index) => (
-                    <ArchiveAd
-                      key={index}
-                      title={ad.title}
-                      minimumExperience={ad.minimumExperience}
-                      createdAt={ad.createdAt}
-                      expiredAt={ad.expiredAt}
-                      onShowAdDetails={() =>
-                        history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
-                      }
-                    />
-                  ))}
+                  {archiveAds
+                    .filter((ad) =>
+                      ad.title.toLowerCase().includes(searchInput.toLowerCase())
+                    )
+                    .map((ad, index) => (
+                      <ArchiveAd
+                        key={index}
+                        title={ad.title}
+                        minimumExperience={ad.minimumExperience}
+                        createdAt={ad.createdAt}
+                        expiredAt={ad.expiredAt}
+                        onShowAdDetails={() =>
+                          history.push(AD_DETAILS_PAGE.replace(":id", ad.id))
+                        }
+                      />
+                    ))}
                   {archiveAds.length <= 5 &&
                     getDummyArchiveAds(archiveAds.length)}
                 </Slider>