Personnel: Create

[EmileeA]

User Story

• As a user, I should be able to add Personnel.

AC

GIVEN the user is logged in and visits the personnel page WHEN the user clicks the add personnel button THEN there will be a modal to create a new personnel member

WHEN the save button is clicked THEN the new personnel member record will be found in personnel collection in firebase AND the page will be updated to show the new record

Dev Notes

• this satisfies the CREATE component of C.R.U.D.

  1. In helpers/data/personnelData.js add this line beneath your deletePersonData function: const createNewPerson = (newPerson) => axios.post(${baseUrl}/personnel.json, newPerson);

• add createNewPerson to your export default line

  2. In javascripts/components/Personnel/personnel.js: *import createNewPerson into this file

• when "Add New Personnel" is pressed a modal appears (consult with team if modal should be in index.html as other modules will also utilize modals)

• within the modal should be three input fields for Person name, Person sector, and weapon (see image in comments)

• the modal's "Save" button should have an id of add-new-person

• write a function called createPersonOnClick that accepts an event (e) that, when initiated, gathers the value of inputs, bundles them, and places them in firebase where they are assigned an personId. the function should look similar to this:

  const createPersonOnClick = (e) => { e.stopImmediatePropagation(); const newPerson= { personImg: $('#person-image-url').val(), name: $('#person-name').val(), position: $('#person-price').val() * 1, uid, } .then(() => { $('#exampleModal').modal('hide'); personneldisplayCrew(personId); }) .catch((error) => console.error(error)); };

• when the modal's "Save" button is clicked, the above function retrieves the data from each input and that data updates the firebase data

• the displayCrew function runs again and a new card on the page displays the information you just entered in the modal

[EmileeA]

[EmileeA]

[ConnorSullivan10]

Currently you have to hard refresh the personnel page after adding, before you can see the new data. Create adds new info to firebase data, but the READ function (whatever function prints the cards) needs to be re-called after the info is added to firebase. Add button should only display when logged in.

[rtate2]

Add New Personnel modal