Merge branch 'feature/update_applicant-fe' of Neca/HRCenter into FE_dev

src/assets/styles/components/_ads.scss

   height: 10.5px !important;
 }
 
+.uploadCV-input {
+  width: 100%;
+  height: 140px;
+  border: 1px solid #e4e4e4;
+  border-radius: 6px;
+  margin-top: 6px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.uploadCV-content-sub-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.uploadCV-content-sub-container > p {
+  font-family: Source Sans Pro;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0em;
+  text-align: left;
+}
+
+.uploadCV-input-sub-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.uploadCV-input-sub-container img {
+  width: 22px;
+  height: 22px;
+}
+
+.uploadCV-input-sub-container p {
+  width: 332px;
+  height: 40px;
+  font-family: Source Sans Pro;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 20.11px;
+  letter-spacing: 0em;
+  text-align: center;
+}
+
 .apply-for-ad-modal-form-control {
   display: flex;
   flex-direction: column;

src/assets/styles/components/_uploadCVPage.scss

-.uploadCV-main-container {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  background-color: gray;
-  justify-content: center;
-  align-items: center;
-}
-
-.uploadCV-container {
-  display: flex;
-  width: 512px;
-  height: 591px;
-  background-color: #fff;
-  border-radius: 18px;
-  padding: 36px;
-  flex-direction: column;
-}
-
-.uploadCV-top-container {
-  display: flex;
-  align-items: center;
-  height: fit-content;
-  justify-content: space-between;
-}
-
-.uploadCV-top-container-image1 {
-  width: 18px;
-  height: 16.88px;
-}
-
-.uploadCV-top-container-image2 {
-  width: 9px;
-  height: 10.5px;
-  margin-left: 54px;
-}
-
-.uploadCV-top-container-text {
-  margin-left: 9px;
-}
-
-.uploadCV-top-container-text > p:first-child {
-  font-family: Source Sans Pro;
-  font-size: 24px;
-  font-weight: 600;
-  line-height: 32px;
-  letter-spacing: 0.02em;
-  text-align: left;
-}
-
-.uploadCV-top-container-text > p:last-child {
-  font-family: Source Sans Pro;
-  font-size: 16px;
-  font-weight: 600;
-  line-height: 20px;
-  letter-spacing: 0em;
-  text-align: left;
-  color: #226cb0;
-}
-
-.uploadCV-content-container {
-  display: flex;
-  flex-direction: column;
-  margin-top: 36px;
-}
-
-.uploadCV-input {
-  width: 100%;
-  height: 140px;
-  border: 1px solid #e4e4e4;
-  border-radius: 6px;
-  margin-top: 6px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.uploadCV-content-sub-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.uploadCV-content-sub-container > p {
-  font-family: Source Sans Pro;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0em;
-  text-align: left;
-}
-
-.uploadCV-input-sub-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.uploadCV-input-sub-container img {
-  width: 22px;
-  height: 22px;
-}
-
-.uploadCV-input-sub-container p {
-  width: 332px;
-  height: 40px;
-  font-family: Source Sans Pro;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 20.11px;
-  letter-spacing: 0em;
-  text-align: center;
-}
-
-.uploadCV-input2 {
-  width: 100%;
-  height: 140px;
-  border: 1px solid #e4e4e4;
-  border-radius: 6px;
-  margin-top: 6px;
-  padding: 15px;
-  resize: none;
-}
-
-.uploadCV-input2::placeholder {
-  color: #9d9d9d;
-  font-family: Source Sans Pro;
-  font-size: 14px;
-  font-style: italic;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: 0em;
-  text-align: left;
-  word-break: break-all;
-  white-space: normal;
-}
-
-.uploadCV-buttons-container {
-  display: flex;
-  margin-top: 35px;
-  justify-content: space-between;
-  flex-direction: row;
-}
-
-.uploadCV-button {
-  width: 202px;
-  height: 51px;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-
-  gap: 10;
-  border-radius: 9px;
-  border: none;
-  font-family: "Source Sans Pro";
-  font-style: normal;
-  font-size: 12px;
-  line-height: 15px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-  color: #ffffff;
-  cursor: pointer;
-}
-
-.uploadCV-buttons-container > button:first-child {
-  @extend .uploadCV-button;
-  background: #ffffff;
-  color: #226cb0;
-  border: 1px solid #226cb0;
-  padding: 18px 72px;
-  font-weight: 600;
-}
-
-.uploadCV-buttons-container > button:last-child {
-  @extend .uploadCV-button;
-  background: #226cb0;
-  color: #ffffff;
-  padding: 18px 22px;
-  border: 1px solid #226cb0;
-}

src/components/Ads/ApplyForAd.js

   const [stage, setStage] = useState(1);
   const [firstName, setFirstName] = useState("");
   const [lastName, setLastName] = useState("");
+  const [gender, setGender] = useState("");
   const [dateOfBirth, setDateOfBirth] = useState("");
   const [phoneNumber, setPhoneNumber] = useState("");
   const [mappedTechnologies, setMappedTechnologies] = useState([]);
   const [experience, setExperience] = useState(0);
+  const [professionalQualification, setProfessionalQualification] = useState("");
   const [linkedinLink, setLinkedinLink] = useState("");
   const [githubLink, setGithubLink] = useState("");
   const [email, setEmail] = useState("");
         adId,
         firstName,
         lastName,
+        gender,
         dateOfBirth,
         phoneNumber,
         technologiesIds,
         experience,
+        professionalQualification,
         linkedinLink,
         githubLink,
         bitBucketLink,
           setFirstName={setFirstName}
           lastName={lastName}
           setLastName={setLastName}
+          gender={gender}
+          setGender={setGender}
           dateOfBirth={dateOfBirth}
           setDateOfBirth={setDateOfBirth}
           phoneNumber={phoneNumber}
           technologies={mappedTechnologies}
           setTechnologies={setMappedTechnologies}
           experience={experience}
+          professionalQualification={professionalQualification}
+          setProfessionalQualification={setProfessionalQualification}
           setExperience={setExperience}
           onIncreaseStage={increaseStageHandler}
           onDecreaseStage={decreaseStageHandler}

src/components/Ads/ApplyForAdFirstStage.js

   firstName,
   setFirstName,
   lastName,
+  gender,
+  setGender,
   setLastName,
   dateOfBirth,
   setDateOfBirth,
     firstName.length === 0 ||
     lastName.length === 0 ||
     dateOfBirth === "" ||
-    phoneNumber.length === 0;
+    phoneNumber.length === 0 ||
+    gender.length === 0;
 
   return (
     <div>
           onChange={(e) => setLastName(e.target.value)}
         />
       </div>
+      <div className="apply-for-ad-modal-form-control">
+        <label>Pol</label>
+        <div style={{ display: "flex" }}>
+          <div style={{ display: "flex" }}>
+            <input
+              type="radio"
+              name="gender"
+              value="Muski"
+              checked={gender === "Muski"}
+              onChange={(e) => setGender(e.target.value)}
+            />
+            <p style={{ marginLeft: "5px" }}>Muski</p>
+          </div>
+          <div style={{ display: "flex", marginLeft: "50px" }}>
+            <input
+              type="radio"
+              name="gender"
+              value="Zenski"
+              checked={gender === "Zenski"}
+              onChange={(e) => setGender(e.target.value)}
+            />
+            <p style={{ marginLeft: "5px" }}>Zenski</p>
+          </div>
+        </div>
+      </div>
       <div className="apply-for-ad-modal-form-control">
         <label>Datum Rodjenja</label>
         <input
   firstName: PropTypes.string,
   setFirstName: PropTypes.any,
   lastName: PropTypes.string,
+  gender: PropTypes.string,
+  setGender: PropTypes.func,
   setLastName: PropTypes.any,
   dateOfBirth: PropTypes.any,
   setDateOfBirth: PropTypes.any,

src/components/Ads/ApplyForAdSecondStage.js

 import { Checkbox, FormControlLabel } from "@mui/material";
 
 const ApplyForAdSecondStage = ({
+  professionalQualification,
+  setProfessionalQualification,
   technologies,
   setTechnologies,
   experience,
   onDecreaseStage,
 }) => {
   let disabled = true;
+  let isTechnologySelected = false;
   if (technologies.length > 0) {
-    disabled = technologies.some((x) => x.isChecked === true);
+    isTechnologySelected = technologies.some((x) => x.isChecked === true);
+  }
+  if (isTechnologySelected) {
+    if (professionalQualification.length > 0) {
+      disabled = false;
+    }
   }
 
   const handleCheckboxes = (technologyId) => {
 
   return (
     <div>
+      <div className="apply-for-ad-header-title">
+        <p>Strucna sprema</p>
+      </div>
+      <div className="apply-for-ad-modal-form-control">
+        <input
+          type="text"
+          placeholder="ex. Elektrotehnicki fakultet"
+          value={professionalQualification}
+          onChange={(e) => setProfessionalQualification(e.target.value)}
+        />
+      </div>
       <div className="apply-for-ad-header-title">
         <p>Tehnologije koje znaš</p>
       </div>
-
       <div className="apply-for-ad-header-sub">
         <div className="apply-for-ad-header-sub-group">
           <label>Back-End</label>
       </div>
       <div className="apply-for-ad-buttons">
         <button onClick={onDecreaseStage}>NAZAD</button>
-        <button onClick={onIncreaseStage} disabled={!disabled}>
+        <button onClick={onIncreaseStage} disabled={disabled}>
           NASTAVI
         </button>
       </div>
 };
 
 ApplyForAdSecondStage.propTypes = {
+  professionalQualification: PropTypes.string,
+  setProfessionalQualification: PropTypes.func,
   technologies: PropTypes.any,
   setTechnologies: PropTypes.any,
   experience: PropTypes.number,

src/pages/CandidatesPage/CandidateDetailsPage.js

             ))}
           </div>
           <div className="candidate-informations-container">
+            <div className="candidate-informations-sub-container">
+              <div className="candidate-property-container">
+                <p className="informations-candidate-header">Informacije</p>
+                <p className="candidate-property">Pol:</p>
+                <p className="candidate-property">Strucna sprema:</p>
+              </div>
+              <div
+                style={{ alignSelf: "flex-end", marginLeft: 42 }}
+                className="candidate-property-container"
+              >
+                <p className="candidate-property-value">
+                  {candidate.gender === "M" ? "Muski" : "Zenski"}
+                </p>
+                <p className="candidate-property-value">
+                  {candidate.professionalQualification === ""
+                    ? "/"
+                    : candidate.professionalQualification}
+                </p>
+              </div>
+            </div>
             <div className="candidate-informations-sub-container">
               <div className="candidate-property-container">
                 <p className="informations-candidate-header">Kontakt</p>

src/store/saga/applicantsSaga.js

     formData.append("adId", payload.adId);
     formData.append("firstName", payload.firstName);
     formData.append("lastName", payload.lastName);
+    formData.append("gender", payload.gender);
     formData.append("dateOfBirth", payload.dateOfBirth);
     formData.append("phoneNumber", payload.phoneNumber);
+    formData.append("professionalQualification", payload.professionalQualification);
     formData.append("technologiesIds", payload.technologiesIds);
     formData.append("experience", payload.experience);
     formData.append("linkedinLink", payload.linkedinLink);