Merge branch 'feature/2331_suggestion' of Neca/HRCenter into FE_dev

src/assets/styles/components/_candidatesPage.scss

@@ -176,7 +176,7 @@
 }
 
 .ads-search-field-responsive {
-  min-width: 350px !important;
+  min-width: 350px;
   border: 1px solid #226cb0;
   border-radius: 10px;
   padding: 20px;
@@ -185,6 +185,9 @@
   top: 100px;
   right: 9px;
   z-index: 1000;
+  &.smaller{
+    min-width: 250px !important;
+  }
 }
 
 .ads-search-field-responsive::placeholder {

src/components/MUI/StatusDialog.js

@@ -23,7 +23,7 @@ import { format, isValid } from "date-fns";
 import { useEffect } from "react";
 import { SelectionContext } from "../../context/SelectionContext";
 import { setUpdateStatusReq } from "../../store/actions/processes/processAction";
-import { createScreeningTest } from "../../store/actions/screeningTests/screeningTestActions";
+import { createScreeningTest, fetchScreeningTests } from "../../store/actions/screeningTests/screeningTestActions";
 
 const StatusDialog = ({
   title,
@@ -68,6 +68,12 @@ const StatusDialog = ({
     setSelectedScreeningTest("")
   }, [onClose]);
 
+  useEffect(()=>{
+    if(activeProcess?.process.selectionLevelId === 2){
+      dispatch(fetchScreeningTests());
+    }
+  },[activeProcess])
+
   const handleClose = () => {
     onClose();
   };

src/pages/AdsPage/AdsPage.js

@@ -207,7 +207,7 @@ const AdsPage = ({ history }) => {
         placeholder="Pretrazi..."
         value={searchInput}
         onChange={(e) => setSearchInput(e.target.value)}
-        className="ads-search-field-responsive"
+        className="ads-search-field-responsive smaller"
         onClick={stopPropagation}
         style={{ zIndex: 1000 }}
       />

src/pages/SelectionProcessPage/SelectionProcessPage.js

@@ -19,7 +19,6 @@ import forbiden from "../../assets/images/forbiden.png";
 import { AdapterDateFns } from "@mui/x-date-pickers/AdapterDateFns";
 import { LocalizationProvider } from "@mui/x-date-pickers";
 import { fetchCandidateOptions } from "../../store/actions/candidates/candidatesActions";
-import { fetchScreeningTests } from "../../store/actions/screeningTests/screeningTestActions";
 import { SelectionContext } from "../../context/SelectionContext";
 import { setUsersReq } from "../../store/actions/users/usersActions";
 import StatusDialog from "../../components/MUI/StatusDialog";
@@ -53,7 +52,6 @@ const SelectionProcessPage = ({ history }) => {
   useEffect(() => {
     dispatch(fetchCandidateOptions());
     dispatch(setProcessesReq());
-    dispatch(fetchScreeningTests());
     dispatch(setUsersReq());
     const s = [
       { isChecked: false, name: "Zakazan" },

src/pages/UsersPage/UsersPage.js

@@ -19,7 +19,7 @@ import {
   setUsersReq,
 } from "../../store/actions/users/usersActions";
 import { useTheme } from "@mui/system";
-import { Fade, TextField, useMediaQuery } from "@mui/material";
+import { Fade,  useMediaQuery } from "@mui/material";
 // import DialogComponent from "../../components/MUI/DialogComponent";
 import InviteDialog from "../../components/MUI/InviteDialog";
 // import { Link } from "react-router-dom";
@@ -45,7 +45,7 @@ const UsersPage = (props) => {
   const { t } = useTranslation();
 
   const handleChangeVisibility = () => {
-    setIsSearchFieldVisible(!isSearchFieldVisible);
+    setIsSearchFieldVisible(s=> !s);
   };
 
   useEffect(() => {
@@ -103,15 +103,28 @@ const UsersPage = (props) => {
     e.stopPropagation();
   };
 
-  const input = (
+  const inputNormal = (
     <div>
       <input
         placeholder="Pretrazi..."
         value={search}
         onChange={(e) => setSearch(e.target.value)}
-        className="candidate-search-field"
+        className="ads-search-field"
         onClick={stopPropagation}
-        role="input"
+        style={{ zIndex: 1000 }}
+      />
+    </div>
+  );
+
+  const inputResponsive = (
+    <div>
+      <input
+        placeholder="Pretrazi..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className="ads-search-field-responsive smaller"
+        onClick={stopPropagation}
+        style={{ zIndex: 1000, width:'300px' }}
       />
     </div>
   );
@@ -120,6 +133,50 @@ const UsersPage = (props) => {
     <div data-testid="users">
       <div className="l-t-rectangle"></div>
       <div className="r-b-rectangle"></div>
+      <div style={{ postion: "absolute" }}>
+        {!matches && (
+          <>
+            <Fade
+              in={isSearchFieldVisible}
+              timeout={500}
+              className="ads-page-search-by-title"
+            >
+              {inputNormal}
+            </Fade>
+            <Fade in={isSearchFieldVisible} timeout={500}>
+              <div
+                style={{
+                  position: "absolute",
+                  zIndex: 10000,
+                  marginTop: 52.5,
+                  right: "87.5px",
+                }}
+              >
+                <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: 47.5,
+                  right: "26px",
+                }}
+              >
+                <img src={searchImage} />
+              </div>
+            </Fade>
+          </>
+        )}
+      </div>
       <ConfirmDialog
         open={showConfirm}
         title={"Disable user"}
@@ -187,6 +244,7 @@ const UsersPage = (props) => {
       />
       <div>
         <div
+          onClick={handleChangeVisibility}
           className="pl-144 flex-center"
           style={{
             paddingTop: "36px",
@@ -195,21 +253,6 @@ const UsersPage = (props) => {
           }}
         >
           <h1 className="page-heading">{t("users.management")}</h1>
-          <Fade in={isSearchFieldVisible} timeout={500} className="proba">
-            {input}
-          </Fade>
-          <Fade in={isSearchFieldVisible} timeout={500}>
-            <div
-              style={{
-                position: "absolute",
-                zIndex: 10000,
-                right: 95,
-                marginTop: 15,
-              }}
-            >
-              <img src={searchImage} />
-            </div>
-          </Fade>
           <div className="flex-center">
             {/* <button></button> */}
             <EditButton
@@ -217,19 +260,22 @@ const UsersPage = (props) => {
                 setEdit((s) => !s);
               }}
             />
-            <div style={{ display: "none" }}>
-              <IconButton
-                className="c-btn c-btn--primary-outlined candidate-btn"
-                onClick={handleChangeVisibility}
-              >
-                Pretraga
-                <img
-                  src={searchImage}
-                  alt="filter"
-                  className="candidates-image"
-                />
-              </IconButton>
-            </div>
+            <IconButton
+              className={
+                "c-btn--primary-outlined c-btn ads-page-btn userPageBtn ml-20px no-padding"
+              }
+              onClick={handleChangeVisibility}
+            >
+              {!matches && "Pretraga"}
+              <img
+                style={{
+                  position: "relative",
+                  top: -0.25,
+                  paddingLeft: matches ? "0px" : "10px",
+                }}
+                src={searchImage}
+              />
+            </IconButton>
             <IconButton
               className={"c-btn--primary c-btn inviteBtn"}
               onClick={() => {
@@ -250,6 +296,7 @@ const UsersPage = (props) => {
         </div>
         <div
           className="pl-144"
+          onClick={handleChangeVisibility}
           style={{
             display: "flex",
             marginTop: "39px",
@@ -259,16 +306,6 @@ const UsersPage = (props) => {
           }}
         >
           <div className="table-cont">
-            <TextField
-              name="username"
-              label={t("common.labelUsername")}
-              margin="normal"
-              value={search}
-              onChange={(e) => setSearch(e.target.value)}
-              style={{
-                width: editEnable ? "960px" : "720px",
-              }}
-            />
             <table
               className={
                 editEnable ? "usersTable-users normal" : "usersTable-users mini"
@@ -334,21 +371,19 @@ const UsersPage = (props) => {
                                 src={forbiden}
                               />
                             </IconButton>
-                              <IconButton
-                              onClick={()=>{
-                                props.history.push(`/users/${n.id}`)
+                            <IconButton
+                              onClick={() => {
+                                props.history.push(`/users/${n.id}`);
                               }}
-                                className={
-                                  "c-btn--primary-outlined c-btn td-btn"
-                                }
-                              >
-                                <img
-                                  style={{
-                                    position: "relative",
-                                  }}
-                                  src={edit}
-                                />
-                              </IconButton>
+                              className={"c-btn--primary-outlined c-btn td-btn"}
+                            >
+                              <img
+                                style={{
+                                  position: "relative",
+                                }}
+                                src={edit}
+                              />
+                            </IconButton>
                           </>
                         </td>
                       )}