refactor/ new plan as a modal pop up. Deletion and edition on plan created
This commit is contained in:
nicoagostini committed
1 parent
e320459955
commit
f1afcbd785
7 files changed
+414
-73
No files matched your search
+125
-2
@@ -4,7 +4,8 @@
|
||||
<main class="container mx-auto p-4 pt-28">
|
||||
<div class="max-w-md mx-auto bg-white p-8 mb-10 rounded-lg shadow-md space-y-4">
|
||||
<h3 class="text-lg font-medium mb-6">My Retirement Plans</h3>
|
||||
<a href="/newPlan" class="block max-w-sm p-2"><div class="text-center bg-blue-600 text-white py-1 w-full rounded-md hover:bg-blue-700 hover:text-white font-semibold">New Plan</div></a>
|
||||
<!-- Changed link to a button to open modal -->
|
||||
<button id="openNewPlanModalBtn" class="block w-full max-w-sm p-2"><div class="text-center bg-blue-600 text-white py-1 w-full rounded-md hover:bg-blue-700 hover:text-white font-semibold">New Plan</div></button>
|
||||
<hr class="mt-3">
|
||||
<% plans.forEach(plan => { %>
|
||||
<a href="/plans/<%= plan._id %>" class="block max-w-sm p-6 border rounded-lg shadow-sm bg-gray-800 border-gray-700 hover:bg-gray-700">
|
||||
@@ -16,9 +17,131 @@
|
||||
</a>
|
||||
<% }) %>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- New Plan Modal - Styled like createAsset.ejs -->
|
||||
<dialog id="newPlanDialog" class="w-lg mx-auto bg-white p-8 mt-10 rounded-lg shadow-md">
|
||||
<!-- Header: Title and Cancel button -->
|
||||
<div class="flex flex-row justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-bold text-gray-900">Create New Retirement Plan</h3>
|
||||
<form method="dialog" id="cancelNewPlanDialogForm">
|
||||
<button type="submit" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 cursor-pointer">Cancel</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Form Content -->
|
||||
<div>
|
||||
<form id="newPlanForm" class="space-y-4">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 text-left">Plan Name</label>
|
||||
<input type="text" name="name" id="planName" placeholder="e.g., My Awesome Plan" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="retirementAge" class="block text-sm font-medium text-gray-700 text-left">Desired Retirement Age</label>
|
||||
<input type="number" name="retirementAge" id="retirementAge" placeholder="e.g., 65" min="18" max="120" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="retirementExpenses" class="block text-sm font-medium text-gray-700 text-left">Estimated Monthly Retirement Expenses</label>
|
||||
<input type="number" name="retirementExpenses" id="retirementExpenses" min="0" placeholder="e.g., 3000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="retirementAssets" class="block text-sm font-medium text-gray-700 text-left">Estimated Retirement Assets</label>
|
||||
<input type="number" name="retirementAssets" id="retirementAssets" min="0" placeholder="e.g., 500000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
|
||||
</div>
|
||||
<div>
|
||||
<label for="retirementLiabilities" class="block text-sm font-medium text-gray-700 text-left">Estimated Retirement Liabilities</label>
|
||||
<input type="number" name="retirementLiabilities" id="retirementLiabilities" min="0" placeholder="e.g., 50000" class="mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" required>
|
||||
</div>
|
||||
<div id="newPlanError" class="text-red-500 text-sm mt-2" style="display: none;"></div>
|
||||
<!-- Form Buttons: Save Plan and Reset -->
|
||||
<div class="mt-6 flex flex-row justify-between">
|
||||
<button type="button" id="resetNewPlanFormBtn" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Reset</button>
|
||||
<button id="submitNewPlanBtn" type="submit" class="py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Save Plan</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</main>
|
||||
|
||||
<%- include("./partials/navBar") %>
|
||||
<%- include("./partials/scriptLoader") %>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const openModalBtn = document.getElementById('openNewPlanModalBtn');
|
||||
const newPlanDialog = document.getElementById('newPlanDialog');
|
||||
const newPlanForm = document.getElementById('newPlanForm');
|
||||
const submitNewPlanBtn = document.getElementById('submitNewPlanBtn');
|
||||
const newPlanError = document.getElementById('newPlanError');
|
||||
const resetNewPlanFormBtn = document.getElementById('resetNewPlanFormBtn');
|
||||
|
||||
openModalBtn.addEventListener('click', () => {
|
||||
newPlanDialog.showModal();
|
||||
// Error reset is now handled by 'close' event, but good to clear on open too
|
||||
newPlanError.style.display = 'none';
|
||||
newPlanError.textContent = '';
|
||||
});
|
||||
|
||||
// Handles form reset and error clearing when dialog is closed by any means (Esc, Cancel button, backdrop click, successful submit)
|
||||
newPlanDialog.addEventListener('close', () => {
|
||||
newPlanForm.reset();
|
||||
newPlanError.style.display = 'none';
|
||||
newPlanError.textContent = '';
|
||||
});
|
||||
|
||||
// Close dialog if user clicks on the backdrop
|
||||
newPlanDialog.addEventListener('click', (event) => {
|
||||
if (event.target === newPlanDialog) {
|
||||
newPlanDialog.close(); // This will trigger the 'close' event listener above
|
||||
}
|
||||
});
|
||||
|
||||
resetNewPlanFormBtn.addEventListener('click', () => {
|
||||
newPlanForm.reset();
|
||||
newPlanError.style.display = 'none';
|
||||
newPlanError.textContent = '';
|
||||
});
|
||||
|
||||
newPlanForm.addEventListener('submit', async (event) => {
|
||||
event.preventDefault();
|
||||
submitNewPlanBtn.disabled = true;
|
||||
submitNewPlanBtn.textContent = 'Saving...';
|
||||
newPlanError.style.display = 'none';
|
||||
|
||||
const formData = new FormData(newPlanForm);
|
||||
const data = Object.fromEntries(formData.entries());
|
||||
|
||||
try {
|
||||
const response = await fetch('/newPlan', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
newPlanDialog.close(); // This will trigger the 'close' event listener
|
||||
window.location.reload(); // Reload to see the new plan
|
||||
} else {
|
||||
newPlanError.textContent = result.message || 'Failed to create plan. Please try again.';
|
||||
newPlanError.style.display = 'block';
|
||||
}
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
newPlanError.textContent = errorData.message || `Error: ${response.status} - ${response.statusText}`;
|
||||
newPlanError.style.display = 'block';
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error submitting new plan:', error);
|
||||
newPlanError.textContent = 'An unexpected error occurred. Please try again.';
|
||||
newPlanError.style.display = 'block';
|
||||
}
|
||||
finally {
|
||||
submitNewPlanBtn.disabled = false;
|
||||
submitNewPlanBtn.textContent = 'Save Plan';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
<%- include("./partials/footer") %>
|
||||
Reference in new issue
Block a user