Angel

uniEmpleos/src/components/Header/Header.jsx

@@ -69,9 +69,8 @@ export const Header = () => {
         return (
           <div className="actions">
             <div className="actionlinks">
-              <a href="/profile">Perfil</a>
-              <a href="/profileadmin">Vacantes</a>
-              <a href="/postulantes">Postulantes</a>
+              <a href="/profileadmin">Empresas</a>
+              <a href="/profileadminstudent">Estudiantes</a>
             </div>
             <div className="buttonLogoutMobile" onClick={handleClick}>
               <LuLogOut size={30} style={{ color: "#000" }} />

uniEmpleos/src/components/ImageDirectUploader/ImageDirectUploader.module.css

@@ -23,6 +23,11 @@
     cursor: pointer;
     border-radius: 5px;
     border: 2px solid #ccc;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-height: 2;
 }
 
 .UploaderInput {

uniEmpleos/src/components/InfoStudent/InfoStudent.jsx

@@ -2,7 +2,15 @@ import React from "react"
 import PropTypes from "prop-types"
 import style from "./InfoStudent.module.css"
 
-const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
+const InfoStudent = ({
+  nombre,
+  apellido,
+  universidad,
+  pfp,
+  onClick,
+  showState,
+  state,
+}) => {
   return (
     <div className={style.mainContainer}>
       <button type="button" className={style.button} onClick={onClick}>
@@ -11,7 +19,19 @@ const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
         </div>
         <div className={style.infoContainer}>
           <span className={style.name}>{`${nombre} ${apellido}`}</span>
-          <span className={style.university}>{universidad}</span>
+          {universidad && (
+            <span className={style.university}>{universidad}</span>
+          )}
+          {showState && (
+            <div className={style.stateContainer}>
+              <span>Estado:</span>
+              <span
+                style={state ? { color: "#FF0000" } : { color: "#00FF00" }}
+              >
+                {`${state}`}
+              </span>
+            </div>
+          )}
         </div>
       </button>
     </div>
@@ -21,9 +41,10 @@ const InfoStudent = ({ nombre, apellido, universidad, pfp, onClick }) => {
 InfoStudent.propTypes = {
   nombre: PropTypes.string.isRequired,
   apellido: PropTypes.string.isRequired,
-  universidad: PropTypes.string.isRequired,
+  universidad: PropTypes.string,
   pfp: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
+  estado: PropTypes.string,
 }
 
 export default InfoStudent

uniEmpleos/src/components/InfoStudent/InfoStudent.module.css

@@ -5,6 +5,7 @@
   height: 100px;
   padding: 10px;
   animation: aparecer 0.5s ease;
+  justify-content: space-evenly;
 }
 
 @keyframes aparecer {
@@ -20,7 +21,7 @@
 
 .button {
   display: flex;
-  width: 100%;
+  width: calc(100% - 20px);
   height: 100%;
   justify-content: start;
   align-items: center;
@@ -29,7 +30,7 @@
   background-color: #8c6fd454;
   gap: 20px;
   border-radius: 10px;
-  padding: 0;
+  padding: 0 10px;
 }
 
 .button:hover {
@@ -62,7 +63,7 @@
 
 .infoContainer {
   width: calc(75% - 20px);
-  height: 80%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   overflow: auto;
@@ -84,3 +85,24 @@
   color: #333333;
   text-align: left;
 }
+
+.stateContainer {
+  display: flex;
+  flex-direction: row;
+  gap: 5px;
+}
+
+@media (max-width: 767px) {
+  .mainContainer {
+    width: calc(100% - 20px);
+    height: 150px;
+  }
+
+  .pfpContainer {
+    width: calc(30% - 20px);
+  }
+
+  .infoContainer {
+    width: calc(70% - 20px);
+  }
+}

uniEmpleos/src/components/InfoTab/InfoTab.jsx

@@ -33,7 +33,7 @@ const InfoTab = ({
       <div className={styles.button}>
         <Button label={labelbutton} onClick={onClick} />
         {verPostulantes && (
-          <Button label="Ver postulantes" onClick={verPostulantes}backgroundColor={"#a08ae5"}/>
+          <Button label="Ver postulantes" onClick={verPostulantes} backgroundColor={"#a08ae5"}/>
         )}
       </div>
     </div>
@@ -42,9 +42,9 @@ const InfoTab = ({
 
 InfoTab.propTypes = {
   title: PropTypes.string.isRequired,
-  area: PropTypes.string.isRequired,
+  area: PropTypes.string,
   salary: PropTypes.string.isRequired,
-  company: PropTypes.string.isRequired,
+  company: PropTypes.string,
   labelbutton: PropTypes.string.isRequired,
   onClick: PropTypes.func.isRequired,
   verPostulantes: PropTypes.func.isRequired,

uniEmpleos/src/components/Loader/Loader.jsx

@@ -0,0 +1,37 @@
+import React from "react"
+import style from "./Loader.module.css"
+
+const Loader = ({ size }) => {
+  const customStyle = [
+    {
+      "--d": "200ms",
+    },
+    {
+      "--d": "400ms",
+    },
+    {
+      "--d": "600ms",
+    },
+    {
+      "--d": "800ms",
+    },
+    {
+      "--d": "1000ms",
+    },
+  ]
+
+  return (
+    <div
+      className={style.loader}
+      style={{ width: `${size}px`, height: `${size}px` }}
+    >
+      <span className={style.loader__bar} style={customStyle[0]}></span>
+      <span className={style.loader__bar} style={customStyle[1]}></span>
+      <span className={style.loader__bar} style={customStyle[2]}></span>
+      <span className={style.loader__bar} style={customStyle[3]}></span>
+      <span className={style.loader__bar} style={customStyle[4]}></span>
+    </div>
+  )
+}
+
+export default Loader

uniEmpleos/src/components/Loader/Loader.module.css

@@ -0,0 +1,35 @@
+.loader {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 5px;
+  margin: 50px;
+}
+
+.loader__bar {
+  display: inline-block;
+  width: 15%;
+  height: 30%;
+  background-color: #000;
+  opacity: .5;
+  border-radius: 10px;
+  animation: scale-up 1000ms
+  var(--d) linear infinite;
+}
+
+.loader__bar:nth-child(even) {
+  height: 70%;
+}
+
+.loader__bar:nth-child(3) {
+  height: 100%;
+}
+
+@keyframes scale-up {
+  25% {
+    opacity: 1;
+    scale: 1 1.5;
+  }
+  50% {
+    scale: 1;
+  }
+}

uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx

@@ -0,0 +1,148 @@
+import react, { useEffect, useState } from "react"
+import useApi from "../../Hooks/useApi"
+import Popup from "../../components/Popup/Popup"
+import style from "./AdminShowPostulationDetails.module.css"
+import Loader from "../../components/Loader/Loader"
+import OfertaInfo from "../../components/ofertaInfo/OfertaInfo"
+import { useQuill } from "react-quilljs"
+import Button from "../../components/Button/Button"
+import { navigate } from "../../store"
+
+const AdminShowPostulationDetails = ({ id }) => {
+  const postulationDetails = useApi()
+  const api = useApi()
+  const [data, setData] = useState(null)
+  const [warning, setWarning] = useState(false)
+  const [error, setError] = useState("")
+  const [typeError, setTypeError] = useState(1)
+  const [loading, setLoading] = useState(false)
+  const { quill, quillRef } = useQuill({
+    readOnly: true, // Establecer el editor Quill en modo de solo lectura
+    modules: {
+      toolbar: false, // Ocultar la barra de herramientas
+    },
+  })
+  const [detalles, setDetalles] = useState("")
+
+  const getPostulationsDetails = async () => {
+    setLoading(true)
+    const datos = await postulationDetails.handleRequest(
+      "POST",
+      "/offers/all",
+      {
+        id_oferta: id,
+      }
+    )
+
+    if (datos.status === 200) {
+      setData(datos.data)
+    } else {
+      setTypeError(1)
+      setError("Ups, algo salio mal al obtener la oferta")
+      setWarning(true)
+    }
+    setLoading(false)
+  }
+
+  useEffect(() => {
+    getPostulationsDetails()
+  }, [])
+
+  useEffect(() => {
+    if (data) {
+      const { offer } = data
+      setDetalles(offer.descripcion)
+    }
+  }, [data])
+
+  useEffect(() => {
+    if (quill && detalles) {
+      try {
+        quill.setContents(JSON.parse(detalles))
+      } catch (error) {
+        quill.setText(detalles)
+      }
+    }
+  }, [quill, detalles])
+
+  const onclickAccept = async () => {
+    const variableApi = `/admins/delete/offers?id_oferta=${id}`
+    const apiResponse = await api.handleRequest("DELETE", variableApi)
+    if (apiResponse.status === 200) {
+      setTypeError(3)
+      setError("Oferta eliminada con éxito")
+      setWarning(true)
+      setTimeout(() => {
+        navigate("/profileadmin")
+      }, 5000)
+    } else {
+      setTypeError(1)
+      setError("Upss algo salió mal, intentalo de nuevo")
+      setWarning(true)
+    }
+  }
+
+  const handleReturn = () => {
+    navigate("/profileadmin")
+  }
+
+  return (
+    <div className={style.container}>
+      <Popup
+        message={error}
+        status={warning}
+        style={typeError}
+        close={() => setWarning(false)}
+      />
+      {data && !loading ? (
+        <div className={style.postulacionContainer}>
+          <div className={style.headertittlecontainer}>
+            <div className={style.titleContainer}>
+              <h4>{data.offer.puesto}</h4>
+              <button
+                onClick={onclickAccept}
+                type="button"
+                className={style.deleteButton}
+              >
+                <img src="/images/delete.svg" alt="trash" />
+              </button>
+            </div>
+          </div>
+          <div className={style.dataContainer}>
+            <OfertaInfo img="/images/empresa.svg" label={data.company.nombre} />
+            <OfertaInfo img="/images/email.svg" label={data.company.correo} />
+            <OfertaInfo
+              img="/images/telefono.svg"
+              label={data.company.telefono}
+            />
+            <OfertaInfo
+              img="/images/requisitos.svg"
+              label={data.offer.requisitos}
+            />
+            <OfertaInfo
+              img="/images/salario.svg"
+              label={data.offer.salario.toString()}
+            />
+          </div>
+          <div className={style.label}>
+            Detalles
+            <div ref={quillRef} className={style.Editor} />
+          </div>
+          <div className={style.buttonContainer}>
+            <Button
+              label="Regresar"
+              backgroundColor="transparet"
+              onClick={handleReturn}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className={style.loaderContainer}>
+          <Loader size={100} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AdminShowPostulationDetails