Skip to content

Commit

Permalink
Merge pull request #216 from markalbrand56/angel
Browse files Browse the repository at this point in the history
Angel
  • Loading branch information
markalbrand56 authored Oct 19, 2023
2 parents b0b498e + a329d75 commit 87ab045
Show file tree
Hide file tree
Showing 19 changed files with 596 additions and 38 deletions.
5 changes: 2 additions & 3 deletions uniEmpleos/src/components/Header/Header.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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" }} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
27 changes: 24 additions & 3 deletions uniEmpleos/src/components/InfoStudent/InfoStudent.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}>
Expand All @@ -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>
Expand All @@ -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
28 changes: 25 additions & 3 deletions uniEmpleos/src/components/InfoStudent/InfoStudent.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
height: 100px;
padding: 10px;
animation: aparecer 0.5s ease;
justify-content: space-evenly;
}

@keyframes aparecer {
Expand All @@ -20,7 +21,7 @@

.button {
display: flex;
width: 100%;
width: calc(100% - 20px);
height: 100%;
justify-content: start;
align-items: center;
Expand All @@ -29,7 +30,7 @@
background-color: #8c6fd454;
gap: 20px;
border-radius: 10px;
padding: 0;
padding: 0 10px;
}

.button:hover {
Expand Down Expand Up @@ -62,7 +63,7 @@

.infoContainer {
width: calc(75% - 20px);
height: 80%;
height: 100%;
display: flex;
flex-direction: column;
overflow: auto;
Expand All @@ -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);
}
}
6 changes: 3 additions & 3 deletions uniEmpleos/src/components/InfoTab/InfoTab.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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,
Expand Down
37 changes: 37 additions & 0 deletions uniEmpleos/src/components/Loader/Loader.jsx
Original file line number Diff line number Diff line change
@@ -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
35 changes: 35 additions & 0 deletions uniEmpleos/src/components/Loader/Loader.module.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit 87ab045

Please sign in to comment.