djaoapp/djaoapp/templates/saas/metrics/coupons.html at main · djaodjin/djaoapp · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
{% extends "saas/base_dashboard.html" %}

{% block saas_title %}
    {% trans coupon=coupon.code %}{{coupon}} Performance{% endtrans %}
{% endblock %}

{% block saas_content %}
<coupon-user-list inline-template id="coupon-performance">
  <div id="coupon-users-container">
    <!-- Download as .CSV -->
    <div class="col-offset-md-9 col-md-3 mb-3">
      <div class="btn-actions text-end">
        <a id="download" class="btn btn-outline-primary btn-md w-100" role="button" :href="'{{urls.coupon_uses_download}}' + getQueryString(['page'])">
          <i class="fa-solid fa-cloud-download me-2"></i> {% trans %}Download .CSV{% endtrans %}
        </a>
      </div>
    </div>
    <hr />
    <div class="row my-3">
        {% include "saas/_filter.html" %}
    </div>
    <p v-show="itemsLoaded" v-cloak>
        {% trans coupon=coupon.code %}{{coupon}} was used{% endtrans %} [[totalItems]] [[totalItems > 0 ? "{% trans %}times{% endtrans %}" : "{% trans %}time{% endtrans %}"]].
    </p>
    <table class="table table-sm table-striped" infinite-wrapper>
        <thead>
            <tr>
                <th>{% trans %}User{% endtrans %}
                    <a href="#" class="btn-link btn-sort"
                      data-trip data-trip-index="5"
                      data-trip-content="<p>{% trans %}Sort coupon use by ascending and descending order.{% endtrans %}</p>"
                      data-trip-position="s"
                      @click.prevent="sortBy('slug')">
                      <i :class="sortIcon('slug')"></i>
                    </a>
                </th>
                <th>{% trans %}Plan{% endtrans %}
                    <a href="#" class="btn-link btn-sort"
                      data-trip data-trip-index="5"
                      data-trip-content="<p>{% trans %}Sort coupon use by ascending and descending order.{% endtrans %}</p>"
                      data-trip-position="s"
                      @click.prevent="sortBy('plan')">
                      <i :class="sortIcon('plan')"></i>
                    </a>
                </th>
                <th>{% trans %}Used at{% endtrans %}
                    <a href="#" class="btn-link btn-sort"
                      data-trip data-trip-index="5"
                      data-trip-content="<p>{% trans %}Sort coupon use by ascending and descending order.{% endtrans %}</p>"
                      data-trip-position="s"
                      @click.prevent="sortBy('created_at')">
                        <i :class="sortIcon('created_at')"></i>
                    </a>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr v-show="!itemsLoaded">
                <td colspan="3">
                    <h3  class="text-center"><i class="fa-solid fa-refresh fa-spin fa-2x"></i></h3>
                </td>
            </tr>
            <tr v-show="itemsLoaded && items.results.length == 0" v-cloak>
                <td colspan="3">
                    <p class="text-center my-2"><em>{% trans coupon=coupon.code %}No use of {{coupon}} coupon{% endtrans %}<span v-show="params.q"> [[params.q]]</span></em></p>
                </td>
            </tr>
            <tr :id="item.user.slug" v-for="item in items.results" v-show="itemsLoaded && items.results.length" v-cloak>
                <td><a :href="'{{urls.profile_redirect}}' + item.user.slug + '/'">[[item.user.printable_name]]</a></td>
                <td>[[item.plan.title]]</td>
                <td>[[$globals.humanizeDate(item.created_at)]]</td>
            </tr>
        </tbody>
    </table>
    {% include "_pagination.html" %}
  </div>
</coupon-user-list>
{% endblock %}