Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
236 lines (234 sloc) 10.9 KB
{% extends "saas/base_dashboard.html" %}
{% block saas_title %}
{% trans organization=organization.printable_name %}{{organization}} Subscriptions{% endtrans %}
{% endblock %}
{% block saas_content %}
<subscription-list-container inline-template id="subscriptions">
<div>
<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>
{% 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>
</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 %}
You can’t perform that action at this time.