121 lines
3.9 KiB
JavaScript
121 lines
3.9 KiB
JavaScript
import React from 'react';
|
|
import { Button } from './ui/button.js';
|
|
|
|
export default function MilestoneModal({
|
|
show,
|
|
onClose,
|
|
milestones,
|
|
editingMilestone,
|
|
showForm,
|
|
handleNewMilestone,
|
|
handleEditMilestone,
|
|
handleDeleteMilestone,
|
|
handleAddTask,
|
|
showTaskForm,
|
|
editingTask,
|
|
handleEditTask,
|
|
deleteTask,
|
|
saveTask,
|
|
saveMilestone,
|
|
copyWizardMilestone,
|
|
setCopyWizardMilestone
|
|
}) {
|
|
if (!show) return null; // if we don't want to render at all when hidden
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 z-50 flex items-start justify-center overflow-auto">
|
|
<div className="bg-white p-4 m-4 max-w-4xl w-full relative">
|
|
<h3 className="text-xl font-bold mb-4">Edit Milestones</h3>
|
|
|
|
<Button onClick={handleNewMilestone}>+ New Milestone</Button>
|
|
|
|
{/*
|
|
1) Render existing milestones
|
|
*/}
|
|
{milestones.map((m) => {
|
|
const tasks = m.tasks || [];
|
|
return (
|
|
<div key={m.id} className="border p-2 my-2">
|
|
<h5>{m.title}</h5>
|
|
{m.description && <p>{m.description}</p>}
|
|
<p>
|
|
<strong>Date:</strong> {m.date} —
|
|
<strong>Progress:</strong> {m.progress}%
|
|
</p>
|
|
|
|
{/* tasks list */}
|
|
{tasks.length > 0 && (
|
|
<ul>
|
|
{tasks.map((t) => (
|
|
<li key={t.id}>
|
|
<strong>{t.title}</strong>
|
|
{t.description ? ` - ${t.description}` : ''}
|
|
{t.due_date ? ` (Due: ${t.due_date})` : ''}{' '}
|
|
<Button onClick={() => handleEditTask(m.id, t)}>Edit</Button>
|
|
<Button style={{ color: 'red' }} onClick={() => deleteTask(t.id)}>
|
|
Delete
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<Button onClick={() => handleAddTask(m.id)}>+ Task</Button>
|
|
<Button onClick={() => handleEditMilestone(m)}>Edit</Button>
|
|
<Button
|
|
onClick={() => setCopyWizardMilestone(m)}
|
|
style={{ marginLeft: '0.5rem' }}
|
|
>
|
|
Copy
|
|
</Button>
|
|
<Button
|
|
style={{ marginLeft: '0.5rem', background: 'red', color: 'black' }}
|
|
onClick={() => handleDeleteMilestone(m)}
|
|
>
|
|
Delete
|
|
</Button>
|
|
|
|
{/* The "Add/Edit Task" form if showTaskForm === m.id */}
|
|
{showTaskForm === m.id && (
|
|
<div style={{ border: '1px solid #aaa', padding: '0.5rem', marginTop: '0.5rem' }}>
|
|
<h5>{editingTask.id ? 'Edit Task' : 'New Task'}</h5>
|
|
{/* same form logic... */}
|
|
<Button onClick={() => saveTask(m.id)}>
|
|
{editingTask.id ? 'Update' : 'Add'} Task
|
|
</Button>
|
|
<Button /* ... */>Cancel</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/*
|
|
2) The big milestone form if showForm is true
|
|
*/}
|
|
{showForm && (
|
|
<div className="form border p-2 my-2">
|
|
<h4>{editingMilestone ? 'Edit Milestone' : 'New Milestone'}</h4>
|
|
{/* ... your milestone form code (title, date, impacts, etc.) */}
|
|
<Button onClick={saveMilestone}>
|
|
{editingMilestone ? 'Update' : 'Add'} Milestone
|
|
</Button>
|
|
<Button onClick={onClose}>Cancel</Button>
|
|
</div>
|
|
)}
|
|
|
|
{/* Copy wizard if copyWizardMilestone */}
|
|
{copyWizardMilestone && (
|
|
<div>
|
|
{/* your copy wizard UI */}
|
|
</div>
|
|
)}
|
|
|
|
<div className="text-right">
|
|
<Button onClick={onClose}>Close</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|