role.html

{% extends "saas/base_dashboard-2col.html" %}

{% block saas_title %}
{% trans organization=organization.printable_name, role_descr=role_descr.title %}{{organization}} {{role_descr}}s{% endtrans %}
{% endblock %}

{% block saas_content %}
<role-user-list inline-template id="{{role_descr}}"
    data-trip data-trip-index="1"
    data-trip-content="<h2>{% trans role_descr=role_descr.title%}Add/Remove {{role_descr}}{% endtrans %}</h2><p>{% trans %}When a user is listed under a role for an organization, she will be able to view pages and execute actions associated with the role.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
    data-trip-position="screen-center">
    <div id="user-relation-list-container">
      <user-typeahead @item-save="save" :url="typeaheadUrl" inline-template>
        <form id="add-user" class="form-inline mb-4" @submit.prevent="submit">
          {# The following div is required for the typeahead dropbox to show under the input field. #}
          <div style="width:100%;">
            <input type="hidden" name="csrfmiddlewaretoken" value="{{csrf_token}}">
            <div class="input-group"
              data-trip data-trip-index="2"
              data-trip-content="<p>{% trans %}Start typing the username or email of the person you want to add.{% endtrans %}</p>"
              data-trip-position="s">
              <input type="text" class="form-control" id="userTypeahead"
                    name="user" type="text" placeholder="{% trans %}Username or e-mail{% endtrans %}"
                    autocomplete="off">
              <div class="input-group-append">
                <button class="btn btn-primary" type="submit">{% trans role_descr=role_descr.title%}Add {{role_descr}}{% endtrans %}</button>
              </div>
            </div>
            <uiv-typeahead
              v-model="itemSelected"
              target="#userTypeahead"
              :async-function="getUsers"
              item-key="slug"
              :open-on-focus="false"
              class="typeahead-dropdown"
              />
          </div>
        </form>
      </user-typeahead>
      <hr />
      <div class="row mb-2" v-show="items.invited_count > 0 || items.requested_count > 0">
        <div class="col-12">
          <div class="btn-group" role="group" aria-label="{% trans %}Group of buttons to show or hide invited and requested roles{% endtrans %}" v-cloak>
            <button type="button" class="btn" :class="showInvited ? 'btn-primary' : 'btn-outline-primary'" @click="showInvited = !showInvited" v-if="items.invited_count > 0">
              <i class="fa" :class="showInvited ? 'fa-check-circle' : 'fa-circle-o'"></i> {% trans %}Pending Invites{% endtrans %} <span class="badge" :class="showInvited ? 'badge-light' : 'badge-primary'">[[items.invited_count]]</span>
            </button>
            <button type="button" class="btn" :class="showRequested ? 'btn-primary' : 'btn-outline-primary'" @click="showRequested = !showRequested" v-if="items.requested_count > 0">
              <i class="fa" :class="showRequested ? 'fa-check-circle' : 'fa-circle-o'"></i> {% trans %}Roles Requested{% endtrans %} <span class="badge" :class="showRequested ? 'badge-light' : 'badge-primary'">[[items.requested_count]]</span>
            </button>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-12">
          {% include "saas/_filter_match.html" %}
        </div>
      </div>
      <div class="row">
          <div class="col-12 col-md-6">
            <div v-show="!itemsLoaded">
                <h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
            </div>
            <div v-show="itemsLoaded && items.results.length == 0" v-cloak>
                <p class="text-muted mt-2">{% trans role_descr=role_descr.title %}No {{role_descr}}s yet{% endtrans %}</p>
            </div>
          </div>
      </div>
      <div class="row" infinite-wrapper>
        <div class="col-12 my-1" v-for="(item, index) in items.results" v-show="itemsLoaded && items.results.length > 0" v-cloak>
            {% include "saas/_user_card.html" %}
        </div>
      </div>
      {% include "_pagination.html" %}

      <!--
        Modal dialog for adding a userRelation
        when the user must register later.
      -->
      <div class="add-role-modal modal fade" title="{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}"
          tabindex="-1" role="dialog"
          aria-labelledby="{% trans role_descr=role_descr.title %}Add {{role_descr}}{% endtrans %}" aria-hidden="true">
        <div class="modal-dialog">
          <form class="form-horizontal">
            <div class="modal-content">
              <div class="modal-header">
                <h4 class="modal-title">{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %} ...</h4>
                <button type="button" class="close"
                    data-dismiss="modal" aria-hidden="true">&times;</button>
              </div>
              <div class="modal-body">
                <p class="text-danger">
                  {% trans invitee='[[unregistered.slug]]', role_descr=role_descr.title, organization=organization.printable_name %}{{invitee}} is not yet registered. This is an opportunity to invite and add her/him as a {{role_descr}} for {{organization}}.{% endtrans %}
                </p>
                <div class="row form-group">
                  <div class="col-sm-2">
                    <label>{% trans %}To{% endtrans %}</label>
                  </div>
                  <div class="controls col-sm-10">
                    <input id="new-request-email"
                          class="form-control" style="width:100%;"
                          name="email" type="text" max-length="150"
                          placeholder="invitee@example.com"
                          autofocus
                          v-model="unregistered.email" />
                  </div>
                </div>
                <div class="form-group">
                  <div class="controls">
                    <label>{% trans %}The following invite message will be sent:{% endtrans %}</label>
                    <!-- textareas are very special in the way they handle whitespaces. Please do
                         not indent default text. -->
                    <textarea class="form-control"
                              name="message"
                              maxlength="255" type="text" rows="10">
{% trans invitee='[[unregistered.email]]', role_descr=role_descr.title, organization=organization.printable_name, user=request.user.first_name %}Hi {{invitee}},

I am adding you as a {{role_descr}} to {{organization}}.

Thank you,
- {{user}}{% endtrans %}
                    </textarea>
                  </div>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button"
                        class="btn btn-secondary"
                        data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
                <button type="submit"
                        class="btn btn-primary"
                        data-dismiss="modal"
                        @click="create">{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}</button>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
</role-user-list>
{% endblock %}