ab/jobia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Correction du jobdetail

Browse source
This commit is contained in:
quasar 2025-05-26 23:46:18 +02:00
parent 1c8d960b52
commit 71f9b8ed82
2 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

54
frontend/src/components/JobDetail.tsx
View file

@ -19,11 +19,11 @@ const JobDetail: React.FC = () => {
const response = await axios.get<JobOffer>(`${API_BASE_URL}/${id}`); const response = await axios.get<JobOffer>(`${API_BASE_URL}/${id}`);
setJob(response.data); setJob(response.data);
} catch (err) { } catch (err) {
console.error('Error fetching job detail:', err); console.error('Erreur lors de la récupération des détails de l\'offre:', err);
if (axios.isAxiosError(err) && err.response?.status === 404) { if (axios.isAxiosError(err) && err.response?.status === 404) {
setError('Job offer not found.'); setError('Offre d\'emploi non trouvée.');
} else { } else {
setError('Failed to load job offer details. Please try again.'); setError('Impossible de charger les détails de l\'offre. Veuillez réessayer.');
} }
} finally { } finally {
setLoading(false); setLoading(false);
@ -36,25 +36,24 @@ const JobDetail: React.FC = () => {
}, [id]); }, [id]);
const handleApplyClick = () => { const handleApplyClick = () => {
// Logique pour trouver la meilleure URL de candidature
const applyUrl = job?.urlOffre || job?.contact?.urlPostulation || job?.origineOffre?.urlOrigine; const applyUrl = job?.urlOffre || job?.contact?.urlPostulation || job?.origineOffre?.urlOrigine;
if (applyUrl) { if (applyUrl) {
window.open(applyUrl, '_blank'); // Ouvre l'URL dans un nouvel onglet window.open(applyUrl, '_blank', 'noopener,noreferrer');
} else { } else {
alert("No application URL available for this job offer."); alert("Aucune URL de candidature disponible pour cette offre.");
} }
}; };
if (loading) { if (loading) {
return <p className="info-message">Loading job details...</p>; return <p className="info-message">Chargement des détails de l'offre...</p>;
} }
if (error) { if (error) {
return ( return (
<div className="job-detail-container"> <div className="job-detail-container">
<p className="info-message" style={{ color: 'red' }}>Error: {error}</p> <p className="info-message" style={{ color: 'red' }}>Erreur : {error}</p>
<Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Back to Search</Link> <Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Retour à la recherche</Link>
</div> </div>
); );
} }
@ -62,8 +61,8 @@ const JobDetail: React.FC = () => {
if (!job) { if (!job) {
return ( return (
<div className="job-detail-container"> <div className="job-detail-container">
<p className="info-message">No job details available.</p> <p className="info-message">Aucun détail d'offre disponible.</p>
<Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Back to Search</Link> <Link to="/" style={{ display: 'block', textAlign: 'center', marginTop: '20px' }}>Retour à la recherche</Link>
</div> </div>
); );
} }
@ -71,24 +70,24 @@ const JobDetail: React.FC = () => {
return ( return (
<div className="job-detail-container" style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}> <div className="job-detail-container" style={{ padding: '20px', maxWidth: '800px', margin: '20px auto', backgroundColor: '#fff', borderRadius: '8px', boxShadow: '0 4px 8px rgba(0,0,0,0.1)' }}>
<Link to="/" style={{ textDecoration: 'none', color: '#3498db', fontWeight: 'bold', marginBottom: '20px', display: 'inline-block' }}> <Link to="/" style={{ textDecoration: 'none', color: '#3498db', fontWeight: 'bold', marginBottom: '20px', display: 'inline-block' }}>
&larr; Back to Job Search &larr; Retour à la recherche
</Link> </Link>
<h1 style={{ color: '#2c3e50', marginBottom: '10px' }}>{job.title}</h1> <h1 style={{ color: '#2c3e50', marginBottom: '10px' }}>{job.title}</h1>
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}> <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
<strong>Company:</strong> {job.companyName || 'N/A'} <strong>Entreprise :</strong> {job.companyName || 'Non spécifié'}
</p> </p>
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}> <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
<strong>Location:</strong> {job.locationLabel || job.cityName || 'N/A'} <strong>Localisation :</strong> {job.locationLabel || job.cityName || 'Non spécifié'}
</p> </p>
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}> <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
<strong>Contract:</strong> {job.contractLabel || job.contractType || 'N/A'} <strong>Type de contrat :</strong> {job.contractLabel || job.contractType || 'Non spécifié'}
</p> </p>
<p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}> <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}>
<strong>Published:</strong> {new Date(job.publicationDate).toLocaleDateString()} <strong>Date de publication :</strong> {new Date(job.publicationDate).toLocaleDateString('fr-FR')}
</p> </p>
{job.romeLabel && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>ROME:</strong> {job.romeLabel}</p>} {job.romeLabel && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Code ROME :</strong> {job.romeLabel}</p>}
{job.postalCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Postal Code:</strong> {job.postalCode}</p>} {job.postalCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Code postal :</strong> {job.postalCode}</p>}
{job.departmentCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Department Code:</strong> {job.departmentCode}</p>} {job.departmentCode && <p style={{ fontSize: '1.1em', color: '#555', marginBottom: '15px' }}><strong>Département :</strong> {job.departmentCode}</p>}
<h2 style={{ color: '#2c3e50', marginTop: '30px', marginBottom: '10px' }}>Description</h2> <h2 style={{ color: '#2c3e50', marginTop: '30px', marginBottom: '10px' }}>Description</h2>
<p style={{ lineHeight: '1.6', whiteSpace: 'pre-wrap' }}>{job.description}</p> <p style={{ lineHeight: '1.6', whiteSpace: 'pre-wrap' }}>{job.description}</p>
@ -98,7 +97,7 @@ const JobDetail: React.FC = () => {
<button <button
onClick={handleApplyClick} onClick={handleApplyClick}
style={{ style={{
backgroundColor: '#28a745', // Vert pour le bouton "Postuler" backgroundColor: '#28a745',
color: 'white', color: 'white',
border: 'none', border: 'none',
borderRadius: '5px', borderRadius: '5px',
@ -109,10 +108,21 @@ const JobDetail: React.FC = () => {
display: 'block', display: 'block',
width: 'fit-content', width: 'fit-content',
margin: '30px auto 0 auto', margin: '30px auto 0 auto',
transition: 'background-color 0.3s ease', transition: 'all 0.3s ease',
boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
}}
onMouseOver={(e) => {
e.currentTarget.style.backgroundColor = '#218838';
e.currentTarget.style.transform = 'translateY(-1px)';
e.currentTarget.style.boxShadow = '0 4px 8px rgba(0,0,0,0.2)';
}}
onMouseOut={(e) => {
e.currentTarget.style.backgroundColor = '#28a745';
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
}} }}
> >
Apply Now Postuler maintenant
</button> </button>
)} )}
</div> </div>

1
frontend/tsconfig.node.json
View file

@ -17,7 +17,6 @@
"strict": true, "strict": true,
"noUnusedLocals": true, "noUnusedLocals": true,
"noUnusedParameters": true, "noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true, "noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true "noUncheckedSideEffectImports": true
}, },