Scheduling - Get Employee List for Assignment

[maggieisgreene]

User Story

As a user, I should see a list of all living staff members in the modal that pops up to assign a staff member.

AC

WHEN the user clicks on Assign Member on the Schedule page THEN a modal should pop up with a dropdown list of all living staff members.

Dev Notes

Inside of the staffData.js, create a new function called getLivingStaffMembers

• This function should include an axios call using the get method and only return the staff members that have isDead set to false

  const getLivingStaffMembers = () => new Promise((resolve, reject) => {
  axios.get(`${baseUrl}/staff.json?orderBy="isDead"&equalTo="false"`)
  .then((response) => {
    const demStaffMembers = response.data;
    const livingStaff = [];
    Object.keys(demStaffMembers).forEach((fbId) => {
      demStaffMembers[fbId].id = fbId;
      livingStaff.push(demStaffMembers[fbId]);
    });
    resolve(livingStaff);
  })
  .catch((error) => reject(error));
  });

  Add bootstrap modal to index.html -- see code below Next, print the living staff members into a dropdown list in the modals --

• Use a click event to run when the Assign Member button is clicked that will pop up open the modal and dynamically print the staff members to a dropdown list inside
• Refer to the code below in the comments for how to dynamically print those members

[maggieisgreene]

staffData.getLivingStaffMembers()
.then((staffMembers) => {
let domstring = '';
domstring += `
<div class="form-group">
   <label for="exampleFormControlSelect1">Select Staff Member</label>
      <select class="form-control" id="exampleFormControlSelect1">`;
      livingStaff.forEach((member) => {
        domString += `<option value="${member.id}">${member.name}</option>`;
      });
      domString += `
      </select>
</div>
`;
utilities.printToDom('assignStaffModal', domstring);
})
.catch((error) => console.error(error));

[maggieisgreene]

Bootstrap Modal Code

<div class="modal fade" id="assignStaffModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Assign Member</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <form id="livingStaffMembers">
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-dismiss="modal">Close</button>
          <button type="button" class="btn btn-light" id="add-new-vendor-staff">Assign</button>
        </div>
      </div>
    </div>
  </div>