As a user, I should be able to edit missions in the list.
AC
WHEN the mission page loads
THEN each mission should have an edit button
AND when I click that edit button a modal should pop up
AND the modal should be populated with the info from that mission
AND when I hit the save button it updates firebase
Dev Notes
in index.html add bootstrap modal
change the id from exampleModal to missionEditModal
in mission component Add an edit button - use fontawesome pencil, give it a class of edit-missionMake sure there is a mission id on the card in the-galaxy component
add an event listener to the clickEvents function on .edit-mission that called editMissionEvent on click
editMissionEvent should open the modal - $('#missionEditModal').modal('show')
v2 in the-galaxy component
modify editMissionEvent to call missionData.getSingleMission (pass in the missionId from the closest card)
missionData.getSingleMission accept a missionId and should do axios.get to missions/${missionId}.jsonon failure of missionData.getSingleMission promise console.error('could not get mission')
on success of missionData.getSingleMission promise target every input on the modal and set the value to what comes back:
$('#edit-mission-name').val();^^ mission is the the thing that comes back in .then
add an event listener to the edit button on the modal - this should call updateMissionEventupdateMissionEvent should build up the mission object (grabs values from each input)
to get the uid firebase.auth().currentUser.uid
missionData.updateMission and passes in the new mission object AND the missionId
missionData.updateMission takes in updatedMission and missionId, and does axios.put to missions.json
on failure of missionData.updateMission promise console.error('not able to update')
on success of missionData.updateMission close the modal AND recall printMission
User Story
As a user, I should be able to edit missions in the list.
AC
WHEN the mission page loads THEN each mission should have an edit button AND when I click that edit button a modal should pop up AND the modal should be populated with the info from that mission AND when I hit the save button it updates firebase
Dev Notes
in index.html add bootstrap modal change the id from exampleModal to missionEditModal in mission component Add an edit button - use fontawesome pencil, give it a class of
edit-missionMake sure there is a mission id on the card inthe-galaxycomponent add an event listener to the clickEvents function on.edit-missionthat callededitMissionEventon clickeditMissionEventshould open the modal -$('#missionEditModal').modal('show')v2 inthe-galaxycomponent modifyeditMissionEventto callmissionData.getSingleMission(pass in the missionId from the closest card)missionData.getSingleMissionaccept a missionId and should do axios.get tomissions/${missionId}.jsonon failure ofmissionData.getSingleMissionpromise console.error('could not get mission') on success ofmissionData.getSingleMissionpromise target every input on the modal and set the value to what comes back:$('#edit-mission-name').val();^^ mission is the the thing that comes back in .then add an event listener to the edit button on the modal - this should callupdateMissionEventupdateMissionEventshould build up the mission object (grabs values from each input) to get the uid firebase.auth().currentUser.uidmissionData.updateMissionand passes in the new mission object AND the missionIdmissionData.updateMissiontakes in updatedMission and missionId, and does axios.put to missions.json on failure ofmissionData.updateMissionpromise console.error('not able to update') on success ofmissionData.updateMissionclose the modal AND recallprintMission