Attempted to implement sorting/filtering for popoutpanel. Reverted all changes
This commit is contained in:
parent
eb2670346c
commit
a1a8f9c7dc
@ -100,6 +100,42 @@
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* 🔹 Filter Section Styling */
|
||||
.filter-section {
|
||||
background: #f8f8f8;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.filter-section h3 {
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.filter-section label {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.filter-section input {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.filter-section select {
|
||||
width: 100%;
|
||||
padding: 5px;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Schools section: Grid layout with clear separation */
|
||||
.schools-offering {
|
||||
display: grid;
|
||||
|
||||
@ -15,18 +15,27 @@ function PopoutPanel({
|
||||
const [isCalculated, setIsCalculated] = useState(false);
|
||||
const [results, setResults] = useState([]); // Store loan repayment calculation results
|
||||
const [loadingCalculation, setLoadingCalculation] = useState(false);
|
||||
const [persistedROI, setPersistedROI] = useState({});
|
||||
|
||||
const {
|
||||
jobDescription = null,
|
||||
tasks = null,
|
||||
title = 'Career Details',
|
||||
economicProjections = {},
|
||||
salaryData = [],
|
||||
schools = [],
|
||||
} = data || {};
|
||||
|
||||
|
||||
// ✅ Reset `results` when a new career is selected
|
||||
useEffect(() => {
|
||||
console.log(`Career changed to: ${data?.title}, clearing previous loan results.`);
|
||||
setResults([]); // ✅ Clears results when a new career is selected
|
||||
setIsCalculated(false); // ✅ Reset calculation state
|
||||
}, [data]); // Runs whenever `data` changes (i.e., new career is selected)
|
||||
setResults([]);
|
||||
setIsCalculated(false);
|
||||
}, [schools]);
|
||||
|
||||
if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the whole dashboard
|
||||
|
||||
// Handle loading state
|
||||
if (loading) {
|
||||
if (!isVisible) return null;
|
||||
|
||||
if (loading || loadingCalculation) {
|
||||
return (
|
||||
<div className="popout-panel">
|
||||
<button className="close-btn" onClick={closePanel}>X</button>
|
||||
@ -36,15 +45,18 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
|
||||
);
|
||||
}
|
||||
|
||||
// Safely access nested data with fallbacks
|
||||
const {
|
||||
jobDescription = null, // Default to null if not provided
|
||||
tasks = null, // Default to null if not provided
|
||||
title = 'Career Details',
|
||||
economicProjections = {},
|
||||
salaryData = [],
|
||||
schools = [],
|
||||
} = data;
|
||||
if (!isVisible) return null;
|
||||
|
||||
// Handle loading state
|
||||
if (loading || loadingCalculation) {
|
||||
return (
|
||||
<div className="popout-panel">
|
||||
<button className="close-btn" onClick={closePanel}>X</button>
|
||||
<h2>Loading Career Details...</h2>
|
||||
<ClipLoader size={35} color="#4A90E2" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Get program length for calculating tuition
|
||||
const getProgramLength = (degreeType) => {
|
||||
@ -62,7 +74,6 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
|
||||
closePanel(); // Maintain existing close behavior
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="popout-panel">
|
||||
<button onClick={closePanel}>Close</button>
|
||||
@ -87,27 +98,6 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Schools Offering Programs Section */}
|
||||
<h3>Schools Offering Programs</h3>
|
||||
<div className="schools-offering">
|
||||
{Array.isArray(schools) && schools.length > 0 ? (
|
||||
schools.map((school, index) => (
|
||||
<div key={index} className="school-card">
|
||||
<div><strong>{school['INSTNM']}</strong></div>
|
||||
<div>Degree Type: {school['CREDDESC'] || 'Degree type information is not available for this program'}</div>
|
||||
<div>In-State Tuition: ${school['In_state cost'] || 'Tuition information is not available for this school'}</div>
|
||||
<div>Out-of-State Tuition: ${school['Out_state cost'] || 'Tuition information is not available for this school'}</div>
|
||||
<div>Distance: {school['distance'] || 'Distance to school not available'}</div>
|
||||
<div>
|
||||
Website: <a href={school['Website']} target="_blank" rel="noopener noreferrer">{school['Website']}</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Economic Projections */}
|
||||
<div className="economic-projections">
|
||||
<h3>Economic Projections for {userState}</h3>
|
||||
@ -147,23 +137,40 @@ if (!isVisible) return null; // ✅ Prevents rendering instead of hiding the who
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Schools Offering Programs Section */}
|
||||
<h3>Schools Offering Programs</h3>
|
||||
<div className="schools-offering">
|
||||
{schools.length > 0 ? (
|
||||
schools.map((school, index) => (
|
||||
<div key={index} className="school-card">
|
||||
<div><strong>{school['INSTNM']}</strong></div>
|
||||
<div>Degree Type: {school['CREDDESC'] || 'Degree type information is not available for this program'}</div>
|
||||
<div>In-State Tuition: ${school['In_state cost'] || 'Tuition information is not available for this school'}</div>
|
||||
<div>Out-of-State Tuition: ${school['Out_state cost'] || 'Tuition information is not available for this school'}</div>
|
||||
<div>Distance: {school['distance'] || 'Distance to school not available'}</div>
|
||||
<div>
|
||||
Website: <a href={school['Website']} target="_blank" rel="noopener noreferrer">{school['Website']}</a>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
) : (
|
||||
<p className="no-schools-message">No schools of higher education are available in your state for this career path.</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Loan Repayment Analysis */}
|
||||
<h3>Loan Repayment Analysis</h3>
|
||||
|
||||
{/* Loan Repayment Calculation Results */}
|
||||
<LoanRepayment
|
||||
schools={schools.map((school) => {
|
||||
const years = getProgramLength(school['CREDDESC']);
|
||||
return {
|
||||
schools={schools.map(school => ({
|
||||
schoolName: school['INSTNM'],
|
||||
inState: parseFloat(school['In_state cost'] * years) || 0,
|
||||
outOfState: parseFloat(school['Out_state cost'] * years) || 0,
|
||||
inState: parseFloat(school['In_state cost']) || 0,
|
||||
outOfState: parseFloat(school['Out_state cost']) || 0,
|
||||
degreeType: school['CREDDESC'],
|
||||
};
|
||||
})}
|
||||
}))}
|
||||
salaryData={salaryData}
|
||||
setResults={setResults}
|
||||
setLoading={setLoadingCalculation}
|
||||
setPersistedROI={setPersistedROI} // ✅ Store ROI after calculation
|
||||
/>
|
||||
|
||||
{/* Results Display */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user