subscribers.html

{% extends "saas/base_dashboard.html" %}

{% block saas_title %}
{% trans %}Subscribers{% endtrans %}
{% endblock %}

{% block help_menus %}
{% if urls.provider and urls.provider.subscribers_activity %}
<li class="divider-vertical"></li>
<li class="nav-item">
  <a id="subscribers-activity" class="nav-link{% if request.path == urls.provider.subscribers_activity %} active{% endif %}" href="{{urls.provider.subscribers_activity}}">{% trans %}Subscribers Activity{% endtrans %}</a>
</li>
{% endif %}
{% endblock %}


{% block saas_content %}
<lazy-load-tabs inline-template  class="pt-3" id="subscribers">
  <div id="subscribers-list-container"
       data-trip data-trip-index="1"
       data-trip-content="<h2>{% trans %}Active subscribers{% endtrans %}</h2><p>{% trans %}List of all active subscribers.<br />You will find here the list of all active subscribers,<br />with the plans they are subscribed to, the date they first<br />subscribed as well as when their renewal is due.{% endtrans %}</p><em>{% trans %}Use keyboard navigation or click 'Next' to move forward.{% endtrans %}</em>"
       data-trip-position="screen-center">
    <ul class="nav nav-tabs dashboard-tab" role="tablist">
      {% for tab in tabs %}
      <li class="nav-item">
        <a class="nav-link{% if tab.is_active %} active{% endif %}" href="#{{tab.slug}}" data-bs-toggle="tab" @click="tabClicked('{{tab.slug}}')">{{tab.title}}</a>
      </li>
      {% endfor %}
    </ul>

    <div class="tab-content">
      {% for tab in tabs %}
      {% if tab.slug == 'registered' %}
      <registered inline-template id="registered" class="tab-pane"
                  role="tabpanel" ref="registered">
        <div id="registered-tab-container">
          <div class="mt-2">
            {% include "saas/_filter.html" %}
          </div>
          <div class="table-responsive">
            <table class="table table-sm table-striped w-100" infinite-wrapper>
              <thead>
                <tr>
                  <th>
                    {% trans %}Full name{% endtrans %}
                    <a href="#" @click.prevent="sortBy('full_name')" aria-label="{% trans %}Sort by full name{% endtrans %}">
                      <i :class="sortIcon('full_name')" class="ps-2"></i>
                    </a>
                  </th>
                  <th class="text-center">
                    {% trans %}Created at{% endtrans %}
                    <a href="#" @click.prevent="sortBy('created_at')" aria-label="{% trans %}Sort by created at{% endtrans %}">
                      <i :class="sortIcon('created_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th class="text-center">
                    {% trans %}Last login{% endtrans %}
                    <a href="#" @click.prevent="sortBy('last_login')" aria-label="{% trans %}Sort by last login{% endtrans %}">
                      <i :class="sortIcon('last_login')" class="ps-2"></i>
                    </a>
                  </th>
                </tr>
              </thead>
              <tbody v-show="!itemsLoaded">
                <tr>
                  <td colspan="3">
                    <div  class="text-center h3"><i class="fa-solid fa-refresh fa-spin fa-2x"></i></div>
                  </td>
                </tr>
              </tbody>
              <tbody class="has-no-results" v-show="itemsLoaded && items.results.length == 0" v-cloak>
                <tr>
                  <td colspan="3">
                    <p class="text-center my-2"><em>{% trans %}No registered users{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></p>
                  </td>
                </tr>
              </tbody>
              <tbody class="has-results" v-show="itemsLoaded && items.results.length > 0" v-cloak>
                <tr :id="user.slug" v-for="user in items.results">
                  <td>
                    {# initially copy/paste of _user_card.html #}
                    {# to use `user` instead of `item.user`    #}
                        <div class="row">
                          <div class="col-2">
                            <div>
                              <a :href="'{{urls.profile_redirect}}' + user.slug + '/'"><img class="card-img-top rounded-circle" style="width:64px;height:64px;" v-bind:src="user.picture ? user.picture : '{{'/assets/img/default-user.png'|asset}}'" alt="{% trans %}User picture{% endtrans %}"></a>
                            </div>
                          </div>
                          <div class="col-10 align-self-center">
                                <h5 class="card-title"><a :href="'{{urls.profile_redirect}}' + user.slug + '/'">[[user.printable_name]]</a></h5>
                                <small class="card-subtitle">[[user.email]]</small>
                          </div>
                        </div>
                  </td>
                  <td class="text-center">
                    [[$globals.humanizeDate(user.created_at)]]<br />
                    <small>([[$globals.humanizeTimeDelta(user.created_at, params.ends_at)]])</small>
                  </td>
                  <td class="text-center">
                    [[$globals.humanizeDate(user.last_login)]]<br />
                    <small>([[$globals.humanizeTimeDelta(user.last_login, params.ends_at)]])</small>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          {% include "_pagination.html" %}
        </div>
      </registered>

      {% else %}
      <{{tab.slug}} inline-template id="{{tab.slug}}"
          class="tab-pane{% if tab.is_active %} active{% endif %}"
          role="tabpanel" ref="{{tab.slug}}">
        <div id="{{tab.slug}}-tab-container">
          <div class="mt-2">
            {% include "saas/_filter.html" %}
          </div>
          <div class="table-responsive">
            <table class="table table-sm table-striped" infinite-wrapper>
              <thead>

                <!-- Sort Organization -->
                <tr v-show="sortDir('profile')" class="text-nowrap" v-cloak>
                  <th>
                    {% trans %}Subscriber{% endtrans %}
                    <a href="#" @click.prevent="sortBy('profile')" aria-label="{% trans %}Sort by subscriber{% endtrans %}">
                      <i :class="sortIcon('profile')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a href="#" @click.prevent="sortBy('plan')" aria-label="{% trans %}Sort by plan{% endtrans %}">
                      <i :class="sortIcon('plan')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Since{% endtrans %}
                    <a href="#" @click.prevent="sortBy('created_at')" aria-label="{% trans %}Sort by created at{% endtrans %}">
                      <i :class="sortIcon('created_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Ends at{% endtrans %}
                    <a href="#" @click.prevent="sortBy('ends_at')" aria-label="{% trans %}Sort by ends at{% endtrans %}">
                      <i :class="sortIcon('ends_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>{% trans %}Description{% endtrans %}</th>
                </tr>
                <tr v-show="sortDir('plan')" class="text-nowrap" v-cloak>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a href="#" @click.prevent="sortBy('plan')" aria-label="{% trans %}Sort by plan{% endtrans %}">
                      <i :class="sortIcon('plan')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Subscriber{% endtrans %}
                    <a href="#" @click.prevent="sortBy('profile')" aria-label="{% trans %}Sort by subscriber{% endtrans %}">
                      <i :class="sortIcon('profile')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Since{% endtrans %}
                    <a href="#" @click.prevent="sortBy('created_at')" aria-label="{% trans %}Sort by created at{% endtrans %}">
                      <i :class="sortIcon('created_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Ends At{% endtrans %}
                    <a href="#" @click.prevent="sortBy('ends_at')" aria-label="{% trans %}Sort by ends at{% endtrans %}">
                      <i :class="sortIcon('ends_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>{% trans %}Description{% endtrans %}</th>
                </tr>

                <!-- Sort Created At -->
                <tr v-show="sortDir('created_at')" class="text-nowrap" v-cloak>
                  <th>
                    {% trans %}Since{% endtrans %}
                    <a href="#" @click.prevent="sortBy('created_at')" aria-label="{% trans %}Sort by created at{% endtrans %}">
                      <i :class="sortIcon('created_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Subscriber{% endtrans %}
                    <a href="#" @click.prevent="sortBy('profile')" aria-label="{% trans %}Sort by subscriber{% endtrans %}">
                      <i :class="sortIcon('profile')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a href="#" @click.prevent="sortBy('plan')" aria-label="{% trans %}Sort by plan{% endtrans %}">
                      <i :class="sortIcon('plan')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Ends At{% endtrans %}
                    <a href="#" @click.prevent="sortBy('ends_at')" aria-label="{% trans %}Sort by ends at{% endtrans %}">
                      <i :class="sortIcon('ends_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>{% trans %}Description{% endtrans %}</th>
                </tr>
                <tr v-show="sortDir('ends_at')" class="text-nowrap" v-cloak>
                  <th>
                    {% trans %}Ends At{% endtrans %}
                    <a href="#" @click.prevent="sortBy('ends_at')" aria-label="{% trans %}Sort by ends at{% endtrans %}">
                      <i :class="sortIcon('ends_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Subscriber{% endtrans %}
                    <a href="#" @click.prevent="sortBy('profile')" aria-label="{% trans %}Sort by subscriber{% endtrans %}">
                      <i :class="sortIcon('profile')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Plan{% endtrans %}
                    <a href="#" @click.prevent="sortBy('plan')" aria-label="{% trans %}Sort by plan{% endtrans %}">
                      <i :class="sortIcon('plan')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Since{% endtrans %}
                    <a href="#" @click.prevent="sortBy('created_at')" aria-label="{% trans %}Sort by created at{% endtrans %}">
                      <i :class="sortIcon('created_at')" class="ps-2"></i>
                    </a>
                  </th>
                  <th>
                    {% trans %}Description{% endtrans %}
                  </th>
                </tr>
              </thead>

              <!-- Show Loader -->
              <tbody class="fetching-results" v-show="!itemsLoaded" v-cloak>
                <tr>
                  <td colspan="5">
                    <div class="h3 text-center"><i class="fa-solid fa-refresh fa-spin fa-2x"></i></div>
                  </td>
                </tr>
              </tbody>

              <!-- Show If No Subscribers -->
              <tbody class="has-no-results" v-show="itemsLoaded && items.results.length == 0" v-cloak>
                <tr>
                  <td colspan="5">
                    <p class="text-center my-2">
                      <em>{% trans %}No subscribers{% endtrans %} <span v-show="params.q"> {% trans %}with filter:{% endtrans %} '[[params.q]]'</span></em>
                    </p>
                  </td>
                </tr>
              </tbody>

              <!-- Sort by subscriber's name -->
              <tbody class="has-results" v-for="(group, key) in groupBy(items.results, 'profile.printable_name')"
                     v-show="sortDir('profile') && itemsLoaded && items.results.length > 0" v-cloak>
                <tr v-for="entry in [group[0]]">
                  <td colspan="5" class="text-nowrap">
                    <a :id="entry.profile.slug" :href="'{{urls.profile_base}}' + entry.profile.slug + '/subscriptions/'">[[entry.profile.printable_name]]</a>
                  </td>
                </tr>
                <tr v-for="entry in group" :class="endsSoon(entry)">
                  <td></td>
                  <td>[[entry.plan.title]]</td>
                  <td>[[$globals.humanizeDate(entry.created_at)]]</td>
                  <td class="text-nowrap">[[$globals.humanizeDate(entry.ends_at)]]</td>
                  <td class="description editable" :id="entry.id">
                    <span>[[entry.description]] <i class="fa-solid fa-pencil"></i></span>
                    <input type="text"
                           class="form-control"
                           @blur="saveDescription(entry)"
                           @keyup.13="saveDescription(entry)"
                           v-model="entry.description"
                           :ref="refId(entry, entry.plan.slug)"
                           v-show="entry.edit_description">
                  </td>
                </tr>
              </tbody>

              <!-- Sort by subscription's plan -->
              <tbody class="has-results"
                     v-for="(group, key) in groupBy(items.results, 'plan.title')"
                     v-show="sortDir('plan') && itemsLoaded && items.results.length > 0" v-cloak>
                <tr v-for="entry in [group[0]]">
                  <td colspan="5">
                    [[entry.plan.title]]
                  </td>
                </tr>
                <tr v-for="entry in group" :class="endsSoon(entry)">
                  <td></td>
                  <td class="text-nowrap">
                    <a :id="entry.profile.slug"
                       :href="'{{urls.profile_base}}' + entry.profile.slug + '/subscriptions/'">[[entry.profile.printable_name]]</a>
                  </td>
                  <td>[[$globals.humanizeDate(entry.created_at)]]</td>
                  <td class="text-nowrap">[[$globals.humanizeDate(entry.ends_at)]]</td>
                  <td class="description editable">
                    <span v-show="!entry.edit_description" @click="editDescription(entry, entry.plan.slug)">
                      [[entry.description]] <i class="fa-solid fa-pencil"></i>
                    </span>
                    <input type="text"
                           class="form-control"
                           @blur="saveDescription(entry)"
                           @keyup.13="saveDescription(entry)"
                           v-model="entry.description"
                           :ref="refId(entry, entry.plan.slug)"
                           v-show="entry.edit_description">
                  </td>
                </tr>
              </tbody>

              <!-- Sort by subscription `created_at` date -->
              <tbody class="has-results"
                     v-for="(group, key) in groupBy(items.results, 'created_at')"
                     v-show="sortDir('created_at') && itemsLoaded && items.results.length > 0" v-cloak>
                <tr v-for="entry in [group[0]]">
                  <td colspan="5">
                    [[$globals.humanizeDate(entry.created_at)]]
                  </td>
                </tr>
                <tr v-for="entry in group" :class="endsSoon(entry)">
                  <td></td>
                  <td class="text-nowrap">
                    <a :id="entry.profile.slug" :href="'{{urls.profile_base}}' + entry.profile.slug + '/subscriptions/'">[[entry.profile.printable_name]]</a>
                  </td>
                  <td>[[entry.plan.title]]</td>
                  <td class="text-nowrap">[[$globals.humanizeDate(entry.ends_at)]]</td>
                  <td class="description editable">
                    <span v-show="!entry.edit_description" @click="editDescription(entry, entry.plan.slug)">
                      [[entry.description]] <i class="fa-solid fa-pencil"></i>
                    </span>
                    <input type="text"
                           class="form-control"
                           @blur="saveDescription(entry)"
                           @keyup.13="saveDescription(entry)"
                           v-model="entry.description"
                           :ref="refId(entry, entry.plan.slug)"
                           v-show="entry.edit_description">
                  </td>
                </tr>
              </tbody>

              <!-- Sort by subscription's `ends_at` date -->
              <tbody class="has-results"
                     v-for="(group, key) in groupBy(items.results, 'ends_at')"
                     v-show="sortDir('ends_at') && itemsLoaded && items.results.length > 0" v-cloak>
                <tr v-for="entry in [group[0]]">
                  <td colspan="5">
                    [[$globals.humanizeDate(entry.ends_at)]]
                  </td>
                </tr>
                <tr v-for="entry in group" :class="endsSoon(entry)">
                  <td></td>
                  <td class="text-nowrap">
                    <a :id="entry.profile.slug" :href="'{{urls.profile_base}}' + entry.profile.slug + '/subscriptions/'">[[entry.profile.printable_name]]</a>
                  </td>
                  <td>[[entry.plan.title]]</td>
                  <td class="text-nowrap">[[$globals.humanizeDate(entry.created_at)]]</td>
                  <td class="description editable">
                    <span v-show="!entry.edit_description" @click="editDescription(entry, entry.plan.slug)">
                      [[entry.description]] <i class="fa-solid fa-pencil"></i>
                    </span>
                    <input type="text" class="form-control"
                           @blur="saveDescription(entry)"
                           @keyup.13="saveDescription(entry)"
                           v-model="entry.description"
                           :ref="refId(entry, entry.plan.slug)"
                           v-show="entry.edit_description">
                  </td>
                </tr>
              </tbody>

            </table>
          </div>

          {% include "_pagination.html" %}
        </div>
      </{{tab.slug}}>
      {% endif %}
      {% endfor %}

    </div>{# /.tab-content #}
  </div>
</lazy-load-tabs>
{% endblock %}

{% block saas_bodyscripts %}
<script type="text/javascript" {{request|csp_nonce}}>
Vue.prototype.$sortDirection = "asc";
Vue.prototype.$sortByField = "profile";
</script>
{% endblock %}