scinote-web/app/views/shared/_invite_users_modal.html.erb

<%
# How to use this modal:
# 1. Render it in the page (HTML) of your choice
# 2. Add an element (e.g. <a href>) with following attributes:
#    * data-trigger="invite-users",
#    * data-modal-id="modal-id",
#
# Modal parameters:
# * modal_id: unique id so the JS works if multiple modals are present
#   on the same page
# * type:
#   * 'invite_to_team' => params: team
#   * 'invite_to_team_with_role' => params: team, role
#   * 'invite',
#   * 'invite_with_team_selector',
#   * 'invite_with_team_selector_and_role' => params: role
# * team: invite users to the specified team
# * role: all users are invited as the specified role
# * (optional) text_title: custom title text for modal
# * (optional) text_invite_heading: custom invite heading text for modal
%>
<%
text_title ||= nil
text_invite_heading ||= nil
invite_to_team = type.in?(%w(invite_to_team invite_to_team_with_role))
invite_with_team_selector = type.in?(%w(invite_new_members invite_with_team_selector invite_with_team_selector_and_role))
%>
<div
  class="modal modal-invite-users"
  tabindex="-1"
  role="dialog"
  aria-labelledby="invite-users-modal-label"
  data-id="<%= modal_id %>"
  data-role="invite-users-modal"
  data-type="<%= type %>"
  data-url="<%= invite_users_path %>"
  data-backdrop="static"
  data-keyboard="false"
  data-max-tags="<%= Constants::INVITE_USERS_LIMIT %>"
  <%= "data-team-id=#{team.id}" if invite_to_team %>
  <%= "data-team-role=#{role}" if type.in?(%w(invite_to_team_with_role invite_with_team_selector_and_role)) %>
>
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">
          <% if text_title %>
            <%= text_title %>
          <% else %>
            <% if invite_to_team %>
              <%= t('invite_users.to_team.title', team: team.name) %>
            <% else %>
              <%= t('invite_users.no_team.title') %>
            <% end %>
          <% end %>
        </h4>
      </div>

      <div class="modal-body">
        <div data-role="step-form">
          <p>
            <% if text_invite_heading %>
              <%= text_invite_heading %>
            <% else %>
              <% if invite_to_team %>
                <%= t('invite_users.to_team.heading', team: team.name) %>
              <% else %>
                <%= t('invite_users.no_team.heading') %>
              <% end %>
            <% end %>
          </p>

          <% if type.in? ['invite_new_members', 'invite'] %>
            <p><%= t('invite_users.new_members.description') %></p>
            <h4 class="heading">
              <span><%= t('invite_users.new_members.input_label') %></span>
            </h4>
            <div class="emails-selector" >
              <div class="select-container">
                <select name="emails[]" class="emails-input"></select>
              </div>
              <p><small><%= t('invite_users.new_members.input_subtitle') %></small></p>
            </div>
          <% else %>
            <div class="user-selector">
              <select class="emails-input" multiple data-role="tags-input" name="emails[]">
              </select>
              <h4><%= t('invite_users.input_subtitle') %></h4>
            </div>
          <% end %>

          <% if current_user && invite_with_team_selector %>
            <% # Only allow inviting to teams where user is admin %>
            <div class="team-selector">
              <h4 class="heading">
                <span><%= t('invite_users.select_team') %></span>
              </h4>
              <div class="team-selector filter-block small-left">
                <div class="select-container select-container--with-search select-container--with-blank">
                  <select class="teams-input" name="teams[]"
                    data-placeholder = "<%= t('invite_users.select_team_blank') %>"
                    data-blank = "<%= t('invite_users.select_team_blank') %>"
                    data-select-all = "false"
                    data-toggle-target = "#role-select-container"
                    data-ajax-url = "<%= invitable_teams_path %>"
                  ></select>
                </div>

                <div id="role-select-container" class="hidden">
                  <h4 class="heading">
                    <span><%= t('invite_users.select_team_role') %></span>
                  </h4>
                  <div class="form-select">
                    <% normal_user_role = UserRole.find_predefined_normal_user_role %>
                    <%= select_tag "role-id",
                      options_for_select(
                        team_user_roles_for_select
                          .map { |name, id| [id == normal_user_role.id ? "#{name} (#{t('invite_users.default')})" : name, id] },
                          normal_user_role.id
                      ), disabled: true, class: "role-input from-control" %>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
          <% if ENV['ENABLE_RECAPTCHA'] == 'true' %>
            <%= recaptcha_input_tag include_description: false %>
            <div class="form-group has-error hidden" id="recaptcha-error-msg" >
              <span class="has-error help-block"></span>
            </div>
          <% end %>
        </div>
        <div class="results-container" data-role="step-results" data-clear="true">
        </div>
      </div>

      <div class="modal-footer">
        <div data-role="step-form">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            <%= t('general.cancel') %>
          </button>

          <!-- Invite buttons -->
          <button type="button" class="btn btn-primary"
                  data-role="invite-btn" data-action="invite"
                  disabled="disabled">
            <%= t('invite_users.invite_btn') %>
          </button>

          <div class="btn-group" data-role="invite-with-role-div">
            <button type="button" class="btn btn-primary dropdown-toggle"
                    data-toggle="dropdown" data-id="invite-btn" aria-haspopup="true"
                    aria-expanded="false" data-role="invite-with-role-btn"
                    disabled="disabled">
              <%= t('invite_users.invite_btn') %>
              &nbsp;
              <span class="caret"></span>
            </button>
            <ul class="dropdown-menu">
              <% team_user_roles_collection.each do |user_role| %>
                <li>
                  <%= link_to '#', data: { action: 'invite', 'team-role-id' => user_role.id, remote: true } do %>
                    <%= t('invite_users.invite_as', role: user_role.name.pluralize) %>
                  <% end %>
                </li>
              <% end %>
            </ul>
          </div>
        </div>
        <div data-role="step-results">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            <%= t('general.close') %>
          </button>
        </div>
      </div>

    </div>
  </div>
</div>