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-modal inline-template >
  <role-user-list inline-template
    :requestUser="'{{request.user.username}}'"
    @create="create" @create-completed="createCompleted"
    @invite="invite" @invite-completed="inviteCompleted"
    @remove="remove" @remove-completed="removeCompleted"
    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">
      <div class="card bg-light">
        <div class="card-body">
          <form id="add-user" class="mb-4" @submit.prevent="submit">
          {# The following div is required for the typeahead dropbox to show under the input field. #}
            <user-typeahead ref="typeahead" @item-selected="updateItemSelected" @item-save="save" :url="typeaheadUrl" v-bind:itemSelected="unregistered" inline-template>
              <div class="w-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 class="form-control" id="userTypeahead"
                           name="user" type="text" placeholder="{% trans %}Username or e-mail{% endtrans %}"
                           autocomplete="off">
                </div>
                <uiv-typeahead
                    v-model="itemSelected"
                    target="#userTypeahead"
                    :async-function="getUsers"
                    item-key="slug"
                    :open-on-focus="false"
                    class="typeahead-dropdown"
                    />
              </div>
            </user-typeahead>
            <!-- inviting a user to register. -->
            <div class="add-role-modal collapse" title="{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}"
                 tabindex="-1"
                 aria-labelledby="{% trans role_descr=role_descr.title %}Add {{role_descr}}{% endtrans %}" aria-hidden="true">
              <p class="text-danger">
                  {% trans invitee='[[requestedProfilePrintableName]]', 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="row form-group">
                <div class="col-sm-2">
                  <label>{% trans %}Full name{% endtrans %}</label>
                </div>
                <div class="controls col-sm-10">
                  <input id="new-request-full-name"
                         class="form-control" style="width:100%;"
                         name="full_name" type="text" max-length="150"
                         placeholder="John Doe"
                         v-model="unregistered.full_name" />
                </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.full_name]]', 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><!-- add-role-modal -->
            <button class="btn btn-primary btn-md btn-block mt-3"
                    type="submit">{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}</button>
          </form>
        </div>
      </div>
      <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 class="has-no-results" 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>
      <!-- modal dialog to confirm revoking a role -->
      <div id="revoke-action" class="revoke-modal modal fade"
           tabindex="-1" role="dialog"
           aria-labelledby="{% trans %}Revoke{% endtrans %}"
           aria-hidden="true">
        <form class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">{% trans %}Revoke{% endtrans %} ...</h5>
              <button type="button" class="close"
                      data-dismiss="modal" aria-hidden="true">&times;</button>
            </div>
            <div class="modal-body">
              <p>
                {% trans %}You are about to delete yourself from this role. It is possible that you no longer can manage this profile after performing this action.{% endtrans %}
              </p>
              <p>
                {% trans %}Are you sure you want to continue?{% endtrans %}
              </p>
              <div class="modal-footer">
                <button id="cancel-revoke"
                        class="btn btn-secondary"
                        data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
                <button type="submit" id="revoke-btn"
                        class="btn btn-danger"
                        data-dismiss="modal"
                        @click="remove">{% trans %}Revoke{% endtrans %}</button>
              </div>
            </div>
          </div>
        </form>
      </div><!-- /modal dialog to confirm revoke -->
      {% include "_pagination.html" %}
    </div>
</role-user-list>
</role-user-list-modal>
{% endblock %}