as a user I should be able to edit a planetary sector
AC
WHEN the user logs in
THEN there should be an edit button on all planetary sector cards
AND you should be able to update any planetary sector item with a modal form
Dev Notes
[x] add a new <div> with id="edit-planetary-sector-modal" at the top of index.html, under id="add-new-planetary-sector-modal" and above everything else
[x] add a button to each planetary sector card in the buildPlanetarySectorCards function
[x] add class="edit-planetary-sector-btn"
[x] use a font awesome icon with (whatever looks cool) to symbolize editing
[x] add an event listener using jquery
[x] call an editPlanetarySectorForm function
[x] make a component folder/file called editPlanetarySectorForm
[x] make an editPlanetarySectorForm function
[x] import planetarySectorsData
[x] import utils
[x] declare a domString variable
[x] write out the HTML for the form - use bootstrap modal/forms to create - base this on the add modal/form for the key/inputs
[x] give the submit button an id="submit-planetary-sector-edit"
[x] add an event listener
[x] calls a function called editPlanetarySectorItem which lives in planetarySectors.js
[x] in planetarySectorsData.js make a new function called updatePlanetarySectors that uses axios.put(planetarySectorId, editedPlanetarySectorItem) method
[x] create an object called editedPlanetarySectorItem that has the key:value pairs the same as the original seed data objects
[x] call updatePlanetarySectors in editPlanetarySectorItem
[x] .then() calls buildAllPlanetarySectors
[x] .catch() should console.error a comment and the error
User Story
as a user I should be able to edit a planetary sector
AC
WHEN the user logs in THEN there should be an edit button on all planetary sector cards AND you should be able to update any planetary sector item with a modal form
Dev Notes
<div>
withid="edit-planetary-sector-modal"
at the top of index.html, underid="add-new-planetary-sector-modal"
and above everything elsebuildPlanetarySectorCards
functionclass="edit-planetary-sector-btn"
editPlanetarySectorForm
functioneditPlanetarySectorForm
editPlanetarySectorForm
functionplanetarySectorsData
utils
id="submit-planetary-sector-edit"
editPlanetarySectorItem
which lives inplanetarySectors.js
planetarySectorsData.js
make a new function calledupdatePlanetarySectors
that usesaxios.put(planetarySectorId, editedPlanetarySectorItem)
methodeditedPlanetarySectorItem
that has thekey:value
pairs the same as the original seed data objectsupdatePlanetarySectors
ineditPlanetarySectorItem
.then()
callsbuildAllPlanetarySectors
.catch()
should console.error a comment and the error