Planetary System Mission: Create

[ConnorSullivan10]

User Story

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

AC

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

Dev Notes

• In order to incorporate with ticket #66 for the creation of a new Mission which requires a systemId, but the user needs to select a systemId from a prepopulated selection, we will first create a dropdown menu of planetSystems available in the dropdown menu from ticket #66, and each dropdown menu item will have an id of the planetSystem's id.
• First we will add something along the lines of the following bootstrap code, into the code of the modal from ticket #66, to print the planet system options available:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown button
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
  </div>
</div>

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

const buildDropdownSelection = () => new Promise((resolve, reject) => {
  let bigBoardString = '';
smash.getAllPlanetarySystemById(mission.planetaryID);
    .then((planetSystem) => {
      planets.forEach((planetSystem) => {
        bigBoardString += `<a class="dropdown-item" href="#" data-boardID="${planetSystem.id}">${planetSystem.name}</a>`;
      });
      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;
    });

<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dropdownMenuButton">${boardSelections}</div>

• Finally, inside the event listener for the "Save" button referenced in ticket #66, the value that will be used to create the new Missions systemID will target the dropdown menu item selected, by the value of it's id. This way the user chooses by name, but firebase recognizes the new mission by systemId.