119 lines
3.3 KiB
JavaScript
119 lines
3.3 KiB
JavaScript
// src/components/MilestoneCopyWizard.js
|
|
import React, { useEffect, useState } from 'react';
|
|
import { Button } from './ui/button.js';
|
|
import authFetch from '../utils/authFetch.js';
|
|
|
|
export default function MilestoneCopyWizard({ milestone, onClose }) {
|
|
const [scenarios, setScenarios] = useState([]);
|
|
const [selectedScenarios, setSelectedScenarios] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (!milestone) return;
|
|
// 1) load all scenarios
|
|
async function loadAllScenarios() {
|
|
try {
|
|
const resp = await authFetch('/api/premium/career-profile/all');
|
|
if (!resp.ok) {
|
|
console.error('Failed to load all scenarios =>', resp.status);
|
|
return;
|
|
}
|
|
const data = await resp.json();
|
|
setScenarios(data.careerProfiles || []);
|
|
} catch (err) {
|
|
console.error('MilestoneCopyWizard => error loading scenarios:', err);
|
|
}
|
|
}
|
|
loadAllScenarios();
|
|
}, [milestone]);
|
|
|
|
function toggleScenario(id) {
|
|
setSelectedScenarios((prev) =>
|
|
prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
|
|
);
|
|
}
|
|
|
|
async function handleCopy() {
|
|
if (!milestone || !selectedScenarios.length) {
|
|
onClose(false);
|
|
return;
|
|
}
|
|
try {
|
|
// 2) call your copy endpoint
|
|
const payload = {
|
|
milestoneId: milestone.id,
|
|
scenarioIds: selectedScenarios
|
|
};
|
|
const res = await authFetch('/api/premium/milestone/copy', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(payload)
|
|
});
|
|
if (!res.ok) {
|
|
const txt = await res.text();
|
|
alert(txt || 'Failed to copy milestone');
|
|
onClose(false);
|
|
return;
|
|
}
|
|
onClose(true); // success
|
|
} catch (err) {
|
|
console.error('Error copying milestone =>', err);
|
|
alert('Error copying milestone');
|
|
onClose(false);
|
|
}
|
|
}
|
|
|
|
if (!milestone) return null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100vw',
|
|
height: '100vh',
|
|
background: 'rgba(0,0,0,0.4)',
|
|
zIndex: 99999,
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center'
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
background: '#fff',
|
|
width: '400px',
|
|
padding: '1rem',
|
|
borderRadius: '4px'
|
|
}}
|
|
>
|
|
<h4>Copy Milestone:</h4>
|
|
<p style={{ fontWeight: 'bold' }}>{milestone.title}</p>
|
|
|
|
<div style={{ maxHeight: '250px', overflowY: 'auto', border: '1px solid #ccc', padding: '0.5rem' }}>
|
|
{scenarios.length === 0 && <p>No scenarios found.</p>}
|
|
{scenarios.map((s) => (
|
|
<div key={s.id} style={{ marginBottom: '0.25rem' }}>
|
|
<label>
|
|
<input
|
|
type="checkbox"
|
|
checked={selectedScenarios.includes(s.id)}
|
|
onChange={() => toggleScenario(s.id)}
|
|
/>
|
|
{s.scenario_title || s.career_name || '(Untitled)'}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div style={{ marginTop: '1rem', textAlign: 'right' }}>
|
|
<Button onClick={() => onClose(false)} style={{ marginRight: '0.5rem' }}>
|
|
Cancel
|
|
</Button>
|
|
<Button onClick={handleCopy}>Copy</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|