Planetary System Mission: Update

[ConnorSullivan10]

User Story

As a user, I should be able to edit a Mission Planetary System.

AC

GIVEN the user is on the Missions page AND they click the "Edit" button THEN they should be able to update the Planetary System to the selected Mission by entering it into input form of the modal that pops up on click of the "Edit" button

See #72

Dev Notes

• In order to incorporate with ticket #72 to edit a Mission which requires a systemId, but the user needs to select a systemId from a prepopulated selection, we will first create a select menu of planetSystems available in the modal from ticket #72, and each select menu item will have an id of the planetSystem's id.

• First we will add something along the lines of the following html code, into the code of the modal from ticket #72, to print existing planetSystem value pulled from Firebase:

<select class="browser-default custom-select">
  <option selected value="${planetSystem.id}">${planetSystem.name}</option>
</select>

• Then you will have to create a function that will sift through all the planetary systems and create a menu option for each one that will print to the select menu above:

const buildDropdownSelection = () => new Promise((resolve, reject) => {
  let bigBoardString = '';
smash.getAllPlanetarySystemById(mission.planetaryID);
    .then((planetSystem) => {
      planets.forEach((planetSystem) => {
        bigBoardString += `<option value="${planetSystem.id}">${planetSystem.name}</option>`;
      });
      resolve(bigBoardString);
    })
    .catch((error) => reject(error));
});

• Then we will call a function to resolve from buildDropdownSelection, inside the the code for the modal that will be created in ticket #66. Code should look something along the lines of:

 buildDropdownSelection()
    .then((resolve) => {
      boardSelections = resolve;
    });

<select class="browser-default custom-select">
  <option selected value="${planetSystem.id}">${planetSystem.name}</option>${boardSelections}
</select>

• Finally, inside the event listener for the "Edit" button referenced in ticket #72, the value that will be used to create the new Missions systemID will target the selected menu item, by the value of each item that will be predefined as an id. This way the user chooses by name, but firebase recognizes the update planetary System for the mission by systemId.