Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Inline invite forms #77 #165

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
102 changes: 44 additions & 58 deletions djaoapp/templates/saas/profile/roles/role.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,13 @@
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">
<div class="input-group-prepend">
<span class="input-group-text" id="filter-inp">{% trans %}User{% endtrans %}</span>
</div>
<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">
autocomplete="off" required :disabled="this.$parent.formVisible">
<div class="input-group-append" v-if="!this.$parent.formVisible">
<button class="btn btn-primary" type="submit">{% trans role_descr=role_descr.title%}Add {{role_descr}}{% endtrans %}</button>
</div>
</div>
Expand All @@ -37,56 +40,9 @@
</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 v-show="formVisible" v-cloak>
<form class="form-horizontal" @submit.prevent="create">
<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 %}
Expand Down Expand Up @@ -121,20 +77,50 @@ <h4 class="modal-title">{% trans role_descr=role_descr.title %}Invite {{role_des
</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>
data-dismiss="modal">{% trans role_descr=role_descr.title %}Invite {{role_descr}}{% endtrans %}</button>
<button type="button" @click="formVisible = false"
class="btn btn-secondary"
data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
</div>
</div>
</form>
</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 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" %}
</div>
</role-user-list>
{% endblock %}
97 changes: 40 additions & 57 deletions djaoapp/templates/saas/users/roles.html
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,11 @@

<!-- Text and Button Input -->
<div class="input-group w-100">
<input type="text" id="userTypeahead" name="organization" autocomplete="off" class="form-control" placeholder="{% trans %}Name or e-mail{% endtrans %}" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<div class="input-group-prepend">
<span class="input-group-text" id="filter-inp">{% trans %}Profile{% endtrans %}</span>
</div>
<input type="text" id="userTypeahead" name="organization" autocomplete="off" class="form-control" placeholder="{% trans %}Name or e-mail{% endtrans %}" aria-label="Recipient's username" aria-describedby="basic-addon2" required>
<div class="input-group-append" v-if="!this.$parent.formVisible">
<button class="btn btn-primary" type="submit">{% trans %}Add Profile{% endtrans %}</button>
</div>
</div>
Expand All @@ -33,6 +36,41 @@
</user-typeahead>
</div>
</div>
<div class="row pt-3">
<div class="col-md-6">
<div v-show="formVisible" v-cloak>
<div class="modal-content">
<form>
<div class="modal-body">
<p class="text-danger">
{% trans full_name='[[unregistered.full_name]]', site=site.printable_name %}{{full_name}} was not found. This is an opportunity to invite a profile manager for {{full_name}} to join {{site}}.{% endtrans %}
</p>
<div class="form-group">
<div class="controls">
<label>{% trans %}The following invite message will be sent:{% endtrans %}</label>
<textarea class="form-control"
name="message"
maxlength="255" type="text" rows="10">
{% trans organization_name="[[unregistered.full_name]]", user=request.user.first_name %}Hello,

I would like to request access to {{organization_name}}

Thank you,
- {{user}}{% endtrans %}
</textarea>
</div>
</div>
<button type="submit"
class="btn btn-primary"
data-dismiss="modal"
@click="create">{% trans %}Request access{% endtrans %}</button>
</div>
</form>
</div>

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

<div class="row">
<div class="col-md-12">
Expand Down Expand Up @@ -71,61 +109,6 @@ <h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
<!-- Start Pagination -->
{% include "_pagination.html" %}
<!-- End Pagination -->

<!-- Modal Dialogs -->

<!-- Modal Dialog to add a request to add a role to a user on an organization. -->
<div class="add-role-modal modal fade" tabindex="-1" role="dialog"
aria-labelledby="{% trans %}Request access{% endtrans %}" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans %}Request access{% endtrans %} ...</h5>
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<form>
<div class="modal-body">
<p class="text-danger">
{% trans full_name='[[unregistered.full_name]]', site=site.printable_name %}{{full_name}} was not found. This is an opportunity to invite a profile manager for {{full_name}} to join {{site}}.{% endtrans %}
</p>
<div class="form-group" style="margin-bottom: 15px;">
<label>{% trans %}To{% endtrans %}</label>
<input id="new-request-email" class="email form-control"
name="email" type="text"
max-length="150" placeholder="[email protected]"
style="width:100%;" autofocus
v-model="unregistered.email" />
</div>
<div class="form-group">
<div class="controls">
<label>{% trans %}The following invite message will be sent:{% endtrans %}</label>
<textarea class="form-control"
name="message"
maxlength="255" type="text" rows="10">
{% trans organization_name="[[unregistered.full_name]]", user=request.user.first_name %}Hello,

I would like to request access to {{organization_name}}

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 %}Request access{% endtrans %}</button>
</div>
</form>
</div>
</div>
</div>
</div>
</role-profile-list>
{% endblock %}