As a user, I should be able to edit items on the menu.
AC
WHEN the foods page loads
THEN each food 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 food
AND when I hit the save button it updates firebase
Dev Notes
in index.html
add in boostramp modal
change the id from exampleModal to foodEditModal
in food component
Add an edit button - use fontawesome pencil, give it a class of edit-food
Make sure there is a food id on the card (should have already added this with delete)
in the-table component
add an event listener to the clickEvents function on .edit-food that calls editFoodEvent on click
editFoodEvent should open the modal - $('#foodEditModal').modal('show')
v2 in the-table component
modify editFoodEvent to call foodData.getSingleFood (pass in the foodId from the closest card)
foodData.getSingleFood accept a foodId and should do axios.get to foods/${foodId}.json
on failure of foodData.getSingleFood promise console.error('modals suck')
on success of foodData.getSingleFood promise target every input on the modal and set the value to what comes back:
`$('#edit-food-name').value(food.name);
^^ food is the the thing that comes back in .then
add an event listener to the edit button on the modal - this should call updateFoodEvent
updateFoodEvent should build up the food object (grabs values from each input)
to get the uid firebase.auth().currentUser.uid
foodData.updateFood and passes in the new food object AND the foodId
foodData.updateFood takes in updatedFood and foodId, and does axios.put to foods.json
on failure of foodData.updateFood promise console.error('not able to update')
on success of foodData.updateFood close the modal AND recall printFoods
zoeames
commented
4 years ago
User Story
As a user, I should be able to edit items on the menu.
AC
WHEN the foods page loads THEN each food 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 food AND when I hit the save button it updates firebase
Dev Notes
in index.html
exampleModaltofoodEditModalin food component
in the-table component
clickEventsfunction on .edit-food that calls editFoodEvent on click$('#foodEditModal').modal('show')v2 in the-table component
editFoodEventto callfoodData.getSingleFood(pass in the foodId from the closest card)foodData.getSingleFoodaccept a foodId and should doaxios.gettofoods/${foodId}.jsonfoodData.getSingleFoodpromiseconsole.error('modals suck')foodData.getSingleFoodpromise target every input on the modal and set the value to what comes back:`$('#edit-food-name').value(food.name);^^ food is the the thing that comes back in .thenupdateFoodEventupdateFoodEventshould build up the food object (grabs values from each input)firebase.auth().currentUser.uidfoodData.updateFoodand passes in the new food object AND the foodIdfoodData.updateFoodtakes in updatedFood and foodId, and doesaxios.puttofoods.jsonfoodData.updateFoodpromiseconsole.error('not able to update')foodData.updateFoodclose the modal AND recallprintFoods