createCarouselSlideTeamMembers()

in source/webapp/src/lib/js/workteam.js [284:353]

• 65 lines of code
• 1 McCabe index (conditional complexity)

  createCarouselSlideTeamMembers() {
    const slide = WorkteamWizard.Constants.Carousel.Slide;
    const element = `
    <div
    class="carousel-item"
    id="${slide.TeamMember.Id}"
    style="height: 400px">
      <div
      class="container"
      style="height: 100%; width: 96%;">
        <div
        class="row d-flex justify-content-center align-items-center"
        style="height: 90%;">
          <!-- graphics -->
          <div class="col-sm-3 px-0 text-center">
            <i class="fas fa-user-plus" style="color: #ccc; font-size: 6em"></i>
          </div>

          <!-- description -->
          <div class="col-sm-9 px-0">
            <h4>Manage team member</h4>
            <p class="lead mt-3">
              Enter email address(es) to add member. Use 'comma' delimiter to add multiple email addresses. To remove a member, click on 'x' next to the email address.
            </p>

            <!-- content -->
            <form id="${slide.TeamMember.Form.AddMember}">
              <div class="input-group mb-3">
                <input type="text" class="form-control" placeholder="Email addresses (comma delimiter)" aria-label="email address (comma separator)" aria-describedby="${slide.TeamMember.Action.Add}">
                <div class="input-group-append">
                  <button type="submit" class="btn btn-primary" data-action="${slide.TeamMember.Action.Add}">Add member</button>
                </div>
              </div>
            </form>
            <!-- current members -->
            <div id="${slide.TeamMember.Badges}" style="overflow-y: scroll;height: 4.5em;">
            </div>
          </div>
        </div>

        <div class="row d-flex justify-content-end align-items-end">
          <!-- Cancel -->
          <button
          type="button"
          class="btn btn-sm btn-light px-4 mx-1"
          data-action="${slide.Cancel.Id}">
            Cancel
          </button>

          <!-- Private team -->
          <button
          type="button"
          class="btn btn-sm btn-primary px-4 mx-1"
          data-action="${slide.PrivateTeam.Id}">
            Back
          </button>

          <!-- Finish -->
          <button
          type="button"
          class="btn btn-sm btn-success px-4 mx-1"
          data-action="${slide.Finish.Id}">
            Next
          </button>
        </div>
      </div>
    </div>
    `;
    return element;
  }