Admin Profile

Final del perfil de administrador y solucion de UX al momento de ver los postulantes de cada oferta al ser una empresa

uniEmpleos/src/pages/AdminShowPostulationDetails/AdminShowPostulationDetails.jsx

@@ -1,4 +1,4 @@
-import react, { useEffect, useState } from "react"
+import React, { useEffect, useState } from "react"
 import useApi from "../../Hooks/useApi"
 import Popup from "../../components/Popup/Popup"
 import style from "./AdminShowPostulationDetails.module.css"

uniEmpleos/src/pages/AdminShowPostulationDetailsStudent/AdminShowPostulationDetailsStudent.jsx

@@ -0,0 +1,156 @@
+import React, { useEffect, useState } from "react"
+import useApi from "../../Hooks/useApi"
+import Popup from "../../components/Popup/Popup"
+import style from "./AdminShowPostulationDetailsStudent.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 AdminShowPostulationDetailsStudent = ({ param }) => {
+  const idOferta = param.split("-")[0]
+  const idPostulacion = param.split("-")[1]
+  const idEstudiante = param.split("-")[2]
+
+  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: idOferta,
+      }
+    )
+
+    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/postulation?id_postulacion=${parseInt(idPostulacion, 10)}`
+    const apiResponse = await api.handleRequest("DELETE", variableApi)
+    if (apiResponse.status === 200) {
+      setTypeError(3)
+      setError("Postulación eliminada exitosamente")
+      setWarning(true)
+      setTimeout(() => {
+        navigate(`/publicprofileadminstudent/${idEstudiante}`)
+      }, 5000)
+    } else {
+      setTypeError(1)
+      setError("Upss algo salió mal, intentalo de nuevo")
+      setWarning(true)
+    }
+  }
+
+  const handleReturn = () => {
+    navigate(`/publicprofileadminstudent/${idEstudiante}`)
+  }
+
+  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(data.company.correo)
+                }}
+                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(data.company.correo)
+              }}
+            />
+          </div>
+        </div>
+      ) : (
+        <div className={style.loaderContainer}>
+          <Loader size={100} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default AdminShowPostulationDetailsStudent

uniEmpleos/src/pages/AdminShowPostulationDetailsStudent/AdminShowPostulationDetailsStudent.module.css

@@ -0,0 +1,111 @@
+.container {
+  background-color: #fff;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.postulacionContainer {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  gap: 25px;
+  height: calc(100% - 25px);
+  background-color: #f5f5f5;
+  color: #000;
+  padding: 25px;
+}
+
+.titleContainer{
+  width: 80%;
+  background-color: transparent;
+  border-radius: 10px;
+  box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
+  padding: 15px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.buttonContainer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 75%;
+  gap: 25px;
+  padding: 25px 0;
+}
+
+.headertittlecontainer{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  width: 100%;
+}
+
+.headertittlecontainer button {
+  background-color: transparent;
+  margin-left: auto;
+}
+
+.headertittlecontainer button:hover, .headertittlecontainer button:focus, .headertittlecontainer button:active {
+  background-color: transparent;
+  border: none;
+}
+
+.headertittlecontainer h4 {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  left: calc(50% - 30px);
+}
+
+
+.headertittlecontainer img {
+  width: 30px;
+  height: 30px;
+}
+
+button.icontrash{
+  width: 10px;
+  height: 10px;
+}
+
+.dataContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 20px;
+  width: 75%;
+}
+
+.label {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+  width: 75%;
+}
+
+.Editor {
+  width: 100%;
+  border: 0 solid #ccc !important;
+}
+
+.imgLabel {
+  width: 30px;
+  height: 30px;
+}
+
+.loaderContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}

uniEmpleos/src/pages/PostulantesPage/PostulantesPage.jsx

@@ -18,8 +18,6 @@ const PostulantesPage = ({ id }) => {
   const [typeError, setTypeError] = useState(1)
   const [loading, setLoading] = useState(false)
 
-  console.log(id)
-
   const obtainPostulantes = async () => {
     setLoading(true)
     const datos = await api.handleRequest("POST", "/offers/applicants", {
@@ -40,7 +38,7 @@ const PostulantesPage = ({ id }) => {
   }, [])
 
   const handleClickUsuario = (idUsuario) => {
-    navigate(`/publicprofile/${idUsuario}`)
+    navigate(`/publicprofile/${idUsuario}-${id}`)
   }
 
   return (

uniEmpleos/src/pages/PublicProfile/PublicProfile.jsx

@@ -13,7 +13,9 @@ import { navigate } from "../../store"
 import style from "./PublicProfile.module.css"
 import API_URL from "../../api"
 
-const PublicProfile = ({ correo }) => {
+const PublicProfile = ({ params }) => {
+  const correo = params.split("-")[0]
+  const idOferta = params.split("-")[1]
   const api = useApi()
   const carreraApi = useApi()
   const [warning, setWarning] = useState(false)
@@ -57,7 +59,7 @@ const PublicProfile = ({ correo }) => {
       setError("Ups, algo salio mal al obtener el perfil")
       setWarning(true)
       setTimeout(() => {
-        navigate("/postulacionempresa")
+        navigate(`/postulantes/${idOferta}`)
       }, 5000)
     }
   }
@@ -90,7 +92,7 @@ const PublicProfile = ({ correo }) => {
           left: "20px",
           cursor: "pointer",
         }}
-        onClick={() => navigate("/postulacionempresa")}
+        onClick={() => navigate(`/postulantes/${idOferta}`)}
       />
       {usuario ? (
         <div className={style.infoContainer}>