UPDATE - excursions

[denzelb5]

User Story:

As a user, I should be able to edit an excursion from the excursions dashboard.

AC:

WHEN I am logged in, THEN an edit button should appear on each excursion. WHEN I click the edit button, THEN a modal should appear that has fields for name, date, and destination. AND there will also be crew members listed with checkboxes. THEN I should be able to click the checkboxes to choose my crew.

Dev Notes:

• On each excursion there should be an edit button that when clicked, a modal should appear with the current excursion's info auto populated.

• Add two axios calls to the excursionsData.js file.

  • A get request to populate the edit modal.
    • const getExcursionById = (excursionId) => axios.get(${baseUrl}/excursions/${excursionId}.json);
    • A put request to update firebase.
    • const updateExcursion = (excursionId, updatedExcursion) => axios.put(${baseUrl}/excursions/${excursionId}.json`, updatedExcursion);

• Add two axios calls to the excursionsCrewData.js file.

  • A get request to populate the edit modal.
    • const getCrewByExcursionId = (excursionId) => axios.get(${baseUrl}/excursionCrew/${excursionCrewId}.json);
    • A put request to update firebase.
    • const updateExcursionCrew = (excursionCrewId, updatedExcursionCrew) => axios.put(${baseUrl}/excursionCrew/${excursionCrewId}.json, updatedExcursionCrew);

• In the module excursions.js, write a function called getPrefilledExcursionsModal() that will automatically populate the edit excursion modal.

  ---

  const getPreFilledExcursionModal = (event) => { const excursionId = event.target.id.split('update-')[1]; const excursionCrewId = event.target.id.split('crew-')[1]; excursionsData.getExcursionById(excursionId) .then((response) => { $('#updateExcursionModal').modal('show'); const excursion = response.data; name: $('#edit-excursion-name').val(), date: $('#edit-excursion-date').val(), destination: $('#edit-excursion-destination').val(), crew1: $('#edit-crew1').val(), crew2: $('#edit-crew2').val(), crew3: $('#edit-crew3').val(), crew4: $('#edit-crew4').val(), crew5: $('#edit-crew5').val(), crew6: $('#edit-crew6').val(), $('.update-excursion-button').attr('id', excursionId, excursionCrewId); }) .catch((error) => console.error(error)); };

• In the module excursions.js, write a function called updateExcursions().

  • This function will grab the excursion Id and update the destinationId and crewId's in firebase.

    ---

    `const updateExcursion = (event) => { event.stopImmediatePropagation(); const excursionId = event.target.id; const excursionCrewId = event.target.id.split('updateCrew-')[1]; const updatedExcursion = { name: $('#edit-excursion-name').val(), date: $('#edit-excursion-date').val(), destination: $('#edit-excursion-destination').val(), crew1: $('#edit-crew1').val(), crew2: $('#edit-crew2').val(), crew3: $('#edit-crew3').val(), crew4: $('#edit-crew4').val(), crew5: $('#edit-crew5').val(), crew6: $('#edit-crew6').val(), }; excursionData.updateExcursions(excursionId, updatedExcursion); excursionCrewData.updateExcursionCrew(excursionCrewId, updatedExcursionCrew); destinationData.updateDestinations(destinationId, updatedDestination)

    .then(() => { $('#updateExcursionModal').modal('hide'); $('#excursions').removeClass('hide'); excursionBuilder.printExcursionCards(); }) .catch((error) => console.error(error)); };`

    ---

[gregkorte]

In dev notes: Bullet 3, sub-bullet 1, sub-bullet 1: getExcursionCrewById should read getCrewByExcursionId, and it get the excursionId passed in.

[phillipsja97]

updated the ticket to show getCrewByExcursionId(excursionId) in bullet 3, sub-bullet 1, sub-bullet 1.