Skip to content

Commit

Permalink
use active/expired tabs on subscriptions page (#104)
Browse files Browse the repository at this point in the history
  • Loading branch information
@smirolo
smirolo committed Oct 30, 2019
1 parent 0d333f3 commit 704fbd7
Showing 1 changed file with 216 additions and 156 deletions.
372 changes: 216 additions & 156 deletions djaoapp/templates/saas/profile/subscriptions.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,170 +7,230 @@
{% block saas_content %}
<subscription-list-container inline-template id="subscriptions">
<div>
<subscription-list inline-template id="subscriptions-list-container"
@expired="expired"
data-trip data-trip-index="1"
data-trip-content="<h2>{% trans %}Subscriptions{% endtrans %}</h2><p>{% trans %}List of all your active subscriptions.{% endtrans %}<br />{% trans %}You can manage all your active subscriptions here.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
data-trip-position="screen-center">
<div>
<h4>{% trans %}Active subscriptions{% endtrans %}</h4>
<div class="table-responsive mb-4">
<table class="table" infinite-wrapper>
<thead>
<tr>
<th>{% trans %}Plan{% endtrans %}</th>
<th>{% trans %}Until{% endtrans %}</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
{% if plans %}
<tr>
<td colspan="4">
<form id="subscribe" class="form-inline" @submit.prevent="subscribe('{{organization}}')">
<select class="form-control mr-2" name="plan" v-model="plan">
<option selected
value="{}"
:value="{}">{% trans %}Select a plan...{% endtrans %}</option>
{% for choice in plans %}
<option value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'
:value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'>{{choice.title}}</option>
{% endfor %}
</select>
<button type="submit" class="btn btn-primary"><i class="fa fa-plus"></i> {% trans %}Subscribe{% endtrans %}</button>
</form>
</td>
</tr>
{% endif %}
<tr v-show="!itemsLoaded">
<td colspan="4">
<h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
</td>
</tr>
<tr v-show="itemsLoaded && items.count === 0" v-cloak>
<td colspan="4">
<h5 class="text-center"><em>{% trans %}No subcriptions{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></h5>
</td>
</tr>
</tbody>
<tbody v-show="itemsLoaded && items.results.length > 0" v-cloak>
<tr :class="endsSoon(entry)" v-for="(entry, index) in items.results">
<td>
<a :href="entry.plan.app_url + entry.organization.slug + '/' + entry.plan.slug + '/'">[[entry.plan.title]]</a>
</td>
<td>
<div style="display:inline-block" v-if="entry.editable">
<uiv-dropdown class="form-group mb-0" append-to-body>
<btn class="dropdown-toggle"><i class="fa fa-calendar"></i></btn>
<template slot="dropdown">
<li>
<uiv-date-picker
v-model="entry.ends_at"
@input="selected(index)"
icon-control-left="fa fa-caret-left"
icon-control-right="fa fa-caret-right" />
</li>
</template>
</uiv-dropdown>
<span class="date"></span>
</div>
<span style="display: inline-block;">
[[entry.ends_at ? ($options.filters.formatDate(entry.ends_at)) : "{% trans %}Never{% endtrans %}" ]]
</span>
</td>
<td>
[[entry.ends_at | relativeDate]]
</td>
<td style="text-align: right;" v-if="!entry.request_key">
<button class="btn btn-danger unsubscribe"
data-toggle="modal" data-target="#unsubscribe-action"
@click="unsubscribeConfirm(entry.organization.slug, entry.plan.slug)">
{% trans %}Unsubscribe Now{% endtrans %}
</button>
</td>
<td style="text-align: right;" v-if="entry.request_key && entry.editable">
<button class="btn btn-danger unsubscribe"
data-toggle="modal" data-target="#unsubscribe-action"
@click="unsubscribeConfirm(entry.organization.slug, entry.plan.slug)">
{% trans %}Deny{% endtrans %}
</button>
<button class="btn btn-primary"
@click="acceptRequest(entry.plan.organization, entry.request_key)">
{% trans %}Accept subscription{% endtrans %}
</button>
</td>
<td style="text-align: right;" v-if="entry.request_key && !entry.editable">
{% trans %}Request pending approval ...{% endtrans %}
</td>
</tr>
</tbody>
</table>
</div>
{% include "_pagination.html" %}
<!-- modal dialog to confirm unsubscribe -->
<div class="modal fade"
id="unsubscribe-action" tabindex="-1" role="dialog"
aria-labelledby="{% trans %}Unsubscribe{% endtrans %}" aria-hidden="true">
<form class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans %}Unsubscribe{% endtrans %} ...</h5>
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">&times;</button>
<ul class="nav nav-tabs dashboard-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" href="#active_subscriptions" data-toggle="tab">{% trans %}Active{% endtrans %}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#expired_subscriptions" data-toggle="tab">{% trans %}Expired{% endtrans %}</a>
</li>
</ul>
<div class="tab-content">
<subscription-list inline-template id="active_subscriptions"
class="tab-pane active"
role="tabpanel"
@expired="expired">
<div id="subscriptions-list-container"
data-trip data-trip-index="1"
data-trip-content="<h2>{% trans %}Subscriptions{% endtrans %}</h2><p>{% trans %}List of all your active subscriptions.{% endtrans %}<br />{% trans %}You can manage all your active subscriptions here.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
data-trip-position="screen-center">
{% if plans %}
<div class="row my-3">
<div class="col-md-8">
<form id="subscribe" @submit.prevent="subscribe('{{organization}}')">
<div class="row">
<div class="col-md-8">
<select class="form-control mr-2" name="plan" v-model="plan">
<option selected
value="{}"
:value="{}">{% trans %}Select a plan...{% endtrans %}</option>
{% for choice in plans %}
<option value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'
:value='{"slug":"{{choice.slug}}","organization":"{{choice.organization.slug}}"}'>{{choice.title}}</option>
{% endfor %}
</select>
</div>
<div class="col-md-4 text-right">
<button type="submit" class="btn btn-block btn-primary"><i class="fa fa-plus"></i> {% trans %}Subscribe{% endtrans %}</button>
</div>
</div>
</form>
</div>
<div class="modal-body">
<p>
{% trans plan_name="[[toDelete.plan]]" %}You are about to unsubscribe from <em>{{plan_name}}</em>{% endtrans %}.
{% trans %}This operation cannot be reversed.{% endtrans %}
</p>
<p>
{% trans %}Are you sure you want to continue?{% endtrans %}
</p>
<div class="modal-footer">
</div>
{% endif %}
<div class="table-responsive mb-4">
<table class="table" infinite-wrapper>
<thead>
<tr>
<th>
{% trans %}Plan{% endtrans %}
<a class="btn-sort"
@click.prevent="sortBy('plan')">
<i :class="sortIcon('plan')"></i>
</a>
</th>
<th>
{% trans %}Until{% endtrans %}
<a class="btn-sort"
@click.prevent="sortBy('ends_at')">
<i :class="sortIcon('ends_at')"></i>
</a>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-show="!itemsLoaded">
<td colspan="4">
<h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
</td>
</tr>
<tr v-show="itemsLoaded && items.count === 0" v-cloak>
<td colspan="4">
<h5 class="text-center"><em>{% trans %}No subcriptions{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></h5>
</td>
</tr>
</tbody>
<tbody v-show="itemsLoaded && items.results.length > 0" v-cloak>
<tr :class="endsSoon(entry)" v-for="(entry, index) in items.results">
<td>
<a :href="entry.plan.app_url + entry.organization.slug + '/' + entry.plan.slug + '/'">[[entry.plan.title]]</a>
</td>
<td>
<span style="display: inline-block;">
[[entry.ends_at ? ($options.filters.formatDate(entry.ends_at)) : "{% trans %}Never{% endtrans %}" ]]
</span>
<div style="display:inline-block" v-if="entry.editable">
<uiv-dropdown class="form-group mb-0" append-to-body>
<btn class="dropdown-toggle"><i class="fa fa-calendar"></i></btn>
<template slot="dropdown">
<li>
<uiv-date-picker
v-model="entry.ends_at"
@input="selected(index)"
icon-control-left="fa fa-caret-left"
icon-control-right="fa fa-caret-right" />
</li>
</template>
</uiv-dropdown>
<span class="date"></span>
</div>
</td>
<td>
[[entry.ends_at | relativeDate]]
</td>
<td style="text-align: right;" v-if="!entry.request_key">
<button class="btn btn-danger unsubscribe"
data-toggle="modal" data-target="#unsubscribe-action"
@click="unsubscribeConfirm(entry.organization.slug, entry.plan.slug)">
{% trans %}Unsubscribe Now{% endtrans %}
</button>
</td>
<td style="text-align: right;" v-if="entry.request_key && entry.editable">
<button class="btn btn-danger unsubscribe"
data-toggle="modal" data-target="#unsubscribe-action"
@click="unsubscribeConfirm(entry.organization.slug, entry.plan.slug)">
{% trans %}Deny{% endtrans %}
</button>
<button class="btn btn-primary"
@click="acceptRequest(entry.plan.organization, entry.request_key)">
{% trans %}Accept subscription{% endtrans %}
</button>
</td>
<td style="text-align: right;" v-if="entry.request_key && !entry.editable">
{% trans %}Request pending approval ...{% endtrans %}
</td>
</tr>
</tbody>
</table>
</div>
{% include "_pagination.html" %}
<!-- modal dialog to confirm unsubscribe -->
<div class="modal fade"
id="unsubscribe-action" tabindex="-1" role="dialog"
aria-labelledby="{% trans %}Unsubscribe{% endtrans %}"
aria-hidden="true">
<form class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">{% trans %}Unsubscribe{% endtrans %} ...</h5>
<button type="button" class="close"
data-dismiss="modal" aria-hidden="true">&times;</button>
</div>
<div class="modal-body">
<p>
{% trans plan_name="[[toDelete.plan]]" %}You are about to unsubscribe from <em>{{plan_name}}</em>{% endtrans %}.
{% trans %}This operation cannot be reversed.{% endtrans %}
</p>
<p>
{% trans %}Are you sure you want to continue?{% endtrans %}
</p>
<div class="modal-footer">
<button id="cancel-unsubscribe"
class="btn btn-secondary"
data-dismiss="modal">{% trans %}Cancel{% endtrans %}</button>
<button type="submit" id="unsubscribe-btn"
class="btn btn-danger"
data-dismiss="modal"
@click="unsubscribe">{% trans %}Unsubscribe{% endtrans %}</button>
</div>
</div>
</div>
</div>
</form>
</div>
<!-- /modal dialog to confirm unsubscribe -->
</div>
</subscription-list> <!-- /controller -->
<expired-subscription-list inline-template
id="expired-subscriptions-list-container"
ref="expired">
<div v-show="itemsLoaded && items.results.length > 0" v-cloak>
<h4>{% trans %}Expired subscriptions{% endtrans %}</h4>
<div class="table-responsive" style="min-height: 400px;">
<table class="table" infinite-wrapper>
<thead>
<tr>
<th>{% trans %}Plan{% endtrans %}</th>
<th>{% trans %}Expired{% endtrans %}</th>
</tr>
</thead>
<tbody>
<tr v-for="(entry, index) in items.results">
<td>
<a :href="entry.plan.app_url + entry.organization.slug + '/' + entry.plan.slug + '/'">[[entry.plan.title]]</a>
</td>
<td>
[[entry.ends_at ? ($options.filters.formatDate(entry.ends_at)) : "{% trans %}Never{% endtrans %}" ]] ([[entry.ends_at | relativeDate]])
</td>
</tr>
</tbody>
</table>
</div>
{% include "_pagination.html" %}
</div>
</expired-subscription-list> <!-- /controller -->
</div>
</div>
</form>
</div>
</div><!-- /modal dialog to confirm unsubscribe -->
</subscription-list> <!-- /controller -->
<expired-subscription-list inline-template id="expired_subscriptions"
class="tab-pane" role="tabpanel" ref="expired">
<div id="expired-subscriptions-list-container">
<div class="table-responsive mb-4">
<table class="table" infinite-wrapper>
<thead>
<tr>
<th>
{% trans %}Plan{% endtrans %}
<a class="btn-sort"
@click.prevent="sortBy('plan')">
<i :class="sortIcon('plan')"></i>
</a>
</th>
<th>
{% trans %}Until{% endtrans %}
<a class="btn-sort"
@click.prevent="sortBy('ends_at')">
<i :class="sortIcon('ends_at')"></i>
</a>
</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-show="!itemsLoaded">
<td colspan="4">
<h3 class="text-center"><i class="fa fa-refresh fa-spin fa-2x"></i></h3>
</td>
</tr>
<tr v-show="itemsLoaded && items.count === 0" v-cloak>
<td colspan="4">
<h5 class="text-center"><em>{% trans %}No subcriptions{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></h5>
</td>
</tr>
</tbody>
<tbody v-show="itemsLoaded && items.results.length > 0" v-cloak>
<tr :class="endsSoon(entry)" v-for="(entry, index) in items.results">
<td>
<a :href="entry.plan.app_url + entry.organization.slug + '/' + entry.plan.slug + '/'">[[entry.plan.title]]</a>
</td>
<td>
<span style="display: inline-block;">
[[entry.ends_at ? ($options.filters.formatDate(entry.ends_at)) : "{% trans %}Never{% endtrans %}" ]]
</span>
</td>
<td>
[[entry.ends_at | relativeDate]]
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
{% include "_pagination.html" %}
</div> <!-- /controller -->
</expired-subscription-list>
</div>
</div>
</subscription-list-container>
{% endblock %}

0 comments on commit 704fbd7

Please sign in to comment.