Reorder templates

apps/note/templates/note/amount_input.html

@@ -0,0 +1,12 @@
+<div class="input-group">
+    <input class="form-control mx-auto d-block" type="number" {% if not widget.attrs.negative %}min="0"{% endif %} step="0.01"
+           {% if widget.value != None and widget.value != "" %}value="{{ widget.value }}"{% endif %}
+           name="{{ widget.name }}"
+            {% for name, value in widget.attrs.items %}
+                {% ifnotequal value False %}{{ name }}{% ifnotequal value True %}="{{ value|stringformat:'s' }}"{% endifnotequal %}{% endifnotequal %}
+            {% endfor %}>
+    <div class="input-group-append">
+        <span class="input-group-text">€</span>
+    </div>
+    <p id="amount-required" class="invalid-feedback"></p>
+</div>

apps/note/templates/note/conso_form.html

@@ -0,0 +1,184 @@
+{% extends "base.html" %}
+
+{% load i18n static pretty_money django_tables2 %}
+
+{# Remove page title #}
+{% block contenttitle %}{% endblock %}
+
+{% block content %}
+    <div class="row mt-4">
+        <div class="col-sm-5 col-md-4" id="infos_div">
+            <div class="row">
+                {# User details column #}
+                <div class="col">
+                    <div class="card border-success shadow mb-4 text-center">
+                        <a id="profile_pic_link" href="#">
+                            <img src="/media/pic/default.png"
+                                 id="profile_pic" alt="" class="card-img-top">
+                        </a>
+                        <div class="card-body text-center">
+                            <span id="user_note"></span>
+                        </div>
+                    </div>
+                </div>
+
+                {# User selection column #}
+                <div class="col-xl-7" id="user_select_div">
+                    <div class="card border-success shadow mb-4">
+                        <div class="card-header">
+                            <p class="card-text font-weight-bold">
+                                {% trans "Consum" %}
+                            </p>
+                        </div>
+                        <div class="card-body p-0" style="min-height:125px;">
+                            <ul class="list-group list-group-flush" id="note_list">
+                            </ul>
+                        </div>
+
+                        {# User search with autocompletion #}
+                        <div class="card-footer">
+                            <input class="form-control mx-auto d-block"
+                                placeholder="{% trans "Name or alias..." %}" type="text" id="note" autofocus />
+                        </div>
+                    </div>
+                </div>
+
+                <div class="col-xl-5 d-none" id="consos_list_div">
+                    <div class="card border-info shadow mb-4">
+                        <div class="card-header">
+                            <p class="card-text font-weight-bold">
+                                {% trans "Select consumptions" %}
+                            </p>
+                        </div>
+                        <div class="card-body p-0" style="min-height:125px;">
+                            <ul class="list-group list-group-flush" id="consos_list">
+                            </ul>
+                        </div>
+                        <div class="card-footer text-center">
+                            <span id="consume_all" class="btn btn-primary">
+                                {% trans "Consume!" %}
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {# Buttons column #}
+        <div class="col">
+            {# Show last used buttons #}
+            <div class="card shadow mb-4">
+                <div class="card-header">
+                    <p class="card-text font-weight-bold">
+                        {% trans "Highlighted buttons" %}
+                    </p>
+                </div>
+                <div class="card-body text-nowrap" style="overflow:auto hidden">
+                    <div class="d-inline-flex flex-wrap justify-content-center" id="highlighted">
+                        {% for button in highlighted %}
+                            {% if button.display %}
+                                <button class="btn btn-outline-dark rounded-0 flex-fill"
+                                        id="highlighted_button{{ button.id }}" name="button" value="{{ button.name }}">
+                                    {{ button.name }} ({{ button.amount | pretty_money }})
+                                </button>
+                            {% endif %}
+                        {% endfor %}
+                    </div>
+                </div>
+            </div>
+
+            {# Regroup buttons under categories #}
+	    {# {% regroup transaction_templates by category as categories %} #}
+
+            <div class="card border-primary text-center shadow mb-4">
+                {# Tabs for button categories #}
+                <div class="card-header">
+                    <ul class="nav nav-tabs nav-fill card-header-tabs">
+                        {% for category in categories %}
+                            <li class="nav-item">
+                                <a class="nav-link font-weight-bold" data-toggle="tab" href="#{{ category.name|slugify }}">
+                                    {{ category.name }}
+                                </a>
+                            </li>
+                        {% endfor %}
+                    </ul>
+                </div>
+
+                {# Tabs content #}
+                <div class="card-body">
+                    <div class="tab-content">
+                        {% for category in categories %}
+                            <div class="tab-pane" id="{{ category.name|slugify }}">
+                                <div class="d-inline-flex flex-wrap justify-content-center">
+                                    {% for button in category.templates_filtered %}
+                                        {% if button.display %}
+                                            <button class="btn btn-outline-dark rounded-0 flex-fill"
+                                                    id="button{{ button.id }}" name="button" value="{{ button.name }}">
+                                                {{ button.name }} ({{ button.amount | pretty_money }})
+                                            </button>
+                                        {% endif %}
+                                    {% endfor %}
+                                </div>
+                            </div>
+                        {% endfor %}
+                    </div>
+                </div>
+
+                {# Mode switch #}
+                <div class="card-footer border-primary">
+                    <a class="btn btn-sm btn-secondary float-left" href="{% url 'note:template_list' %}">
+                        <i class="fa fa-edit"></i> {% trans "Edit" %}
+                    </a>
+                    <div class="btn-group btn-group-toggle float-right" data-toggle="buttons">
+                        <label for="single_conso" class="btn btn-sm btn-outline-primary active">
+                            <input type="radio" name="conso_type" id="single_conso" checked>
+                            <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
+                            {% trans "Single consumptions" %}
+                        </label>
+                        <label for="double_conso" class="btn btn-sm btn-outline-primary">
+                            <input type="radio" name="conso_type" id="double_conso">
+                            <i class="fa fa-arrows-h" aria-hidden="true"></i>
+                            {% trans "Double consumptions" %}
+                        </label>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card shadow mb-4" id="history">
+        <div class="card-header">
+            <p class="card-text font-weight-bold">
+                {% trans "Recent transactions history" %}
+            </p>
+        </div>
+        {% render_table table %}
+    </div>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script type="text/javascript" src="{% static "js/consos.js" %}"></script>
+    <script type="text/javascript">
+        {% for button in highlighted %}
+            {% if button.display %}
+                $("#highlighted_button{{ button.id }}").click(function() {
+                    addConso({{ button.destination_id }}, {{ button.amount }},
+                        {{ polymorphic_ctype }}, {{ button.category_id }}, "{{ button.category.name|escapejs }}",
+                        {{ button.id }}, "{{ button.name|escapejs }}");
+                });
+            {% endif %}
+        {% endfor %}
+
+        {% for category in categories %}
+            {% for button in category.templates_filtered %}
+            {% if button.display %}
+                $("#button{{ button.id }}").click(function() {
+                    addConso({{ button.destination_id }}, {{ button.amount }},
+                        {{ polymorphic_ctype }}, {{ button.category_id }}, "{{ button.category.name|escapejs }}",
+                        {{ button.id }}, "{{ button.name|escapejs }}");
+                });
+            {% endif %}
+            {% endfor %}
+        {% endfor %}
+    </script>
+{% endblock %}

apps/note/templates/note/mails/negative_balance.html

@@ -0,0 +1,45 @@
+{% load pretty_money %}
+{% load i18n %}
+
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>Passage en négatif (compte n°{{ note.user.pk }})</title>
+</head>
+<body>
+<p>
+    Bonjour {{ note.user.first_name }} {{ note.user.last_name }},
+</p>
+
+<p>
+    Ce mail t'a été envoyé parce que le solde de ta Note Kfet {{ note }} est négatif !
+</p>
+
+<p>
+    Ton solde actuel est de {{ note.balance|pretty_money }}.
+</p>
+
+<p>
+    Par ailleurs, le BDE ne sert pas d'alcool aux adhérents dont le solde
+    est inférieur à 0 € depuis plus de 24h.
+</p>
+
+<p>
+    Si tu ne comprends pas ton solde, tu peux consulter ton historique
+    sur <a href="{% url "member:user_detail" pk=note.user.pk %}">ton compte</a>.
+</p>
+
+<p>
+    Tu peux venir recharger ta note rapidement à la Kfet, ou envoyer un mail à
+    la trésorerie du BdE (<a href="mailto:tresorerie.bde@lists.crans.org">tresorerie.bde@lists.crans.org</a>)
+    pour payer par virement bancaire.
+</p>
+
+--
+<p>
+    Le BDE<br>
+    {% trans "Mail generated by the Note Kfet on the" %} {% now "j F Y à H:i:s" %}
+</p>
+</body>
+</html>

apps/note/templates/note/mails/negative_balance.txt

@@ -0,0 +1,24 @@
+{% load pretty_money %}
+{% load i18n %}
+
+Bonjour {{ note.user.first_name }} {{ note.user.last_name }},
+
+Ce mail t'a été envoyé parce que le solde de ta Note Kfet
+{{ note }} est négatif !
+
+Ton solde actuel est de {{ note.balance|pretty_money }}.
+
+Par ailleurs, le BDE ne sert pas d'alcool aux adhérents dont le solde
+est inférieur à 0 € depuis plus de 24h.
+
+Si tu ne comprends pas ton solde, tu peux consulter ton historique
+sur ton compte {% url "member:user_detail" pk=note.user.pk %}
+
+Tu peux venir recharger ta note rapidement à la Kfet, ou envoyer un mail à
+la trésorerie du BdE (tresorerie.bde@lists.crans.org) pour payer par
+virement bancaire.
+
+--
+Le BDE
+
+{% trans "Mail generated by the Note Kfet on the" %} {% now "j F Y à H:i:s" %}

apps/note/templates/note/mails/negative_notes_report.html

@@ -0,0 +1,42 @@
+{% load pretty_money %}
+{% load i18n %}
+
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>[Note Kfet] Liste des négatifs</title>
+</head>
+<body>
+<table>
+<thead>
+<tr>
+    <th>Nom</th>
+    <th>Prénom</th>
+    <th>Pseudo</th>
+    <th>Email</th>
+    <th>Solde</th>
+    <th>Durée</th>
+</tr>
+</thead>
+<tbody>
+    {% for note in notes %}
+        <tr>
+            <td>{{ note.user.last_name }}</td>
+            <td>{{ note.user.first_name }}</td>
+            <td>{{ note.user.username }}</td>
+            <td>{{ note.user.email }}</td>
+            <td>{{ note.balance|pretty_money }}</td>
+            <td>{{ note.last_negative_duration }}</td>
+        </tr>
+    {% endfor %}
+</tbody>
+</table>
+
+--
+<p>
+    Le BDE<br>
+    {% trans "Mail generated by the Note Kfet on the" %} {% now "j F Y à H:i:s" %}
+</p>
+</body>
+</html>

apps/note/templates/note/mails/negative_notes_report.txt

@@ -0,0 +1,13 @@
+{% load pretty_money %}
+{% load i18n %}
+
+         Nom         |   Prénom   |     Pseudo      |               Email               |  Solde   |   Durée
+---------------------+------------+-----------------+-----------------------------------+----------+-----------
+{% for note in notes %}
+{{ note.user.last_name }} | {{ note.user.first_name }} | {{ note.user.username }} | {{ note.user.email }} | {{ note.balance|pretty_money }} | {{ note.last_negative_duration }}
+{% endfor %}
+
+--
+Le BDE
+
+{% trans "Mail generated by the Note Kfet on the" %} {% now "j F Y à H:i:s" %}

apps/note/templates/note/mails/weekly_report.html

@@ -0,0 +1,57 @@
+{% load pretty_money %}
+{% load render_table from django_tables2 %}
+{% load i18n %}
+
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <title>[Note Kfet] Rapport de la Note Kfet</title>
+
+    <link rel="stylesheet"
+          href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+          crossorigin="anonymous">
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+            crossorigin="anonymous"></script>
+</head>
+<body>
+<p>
+    Bonjour,
+</p>
+
+<p>
+    Vous recevez ce mail car vous avez défini une « Fréquence des rapports » dans la Note.<br>
+    Le premier rapport récapitule toutes vos consommations depuis la création de votre compte.<br>
+    Ensuite, un rapport vous est envoyé à la fréquence demandée seulement si vous avez consommé
+    depuis le dernier rapport.<br>
+    Pour arrêter de recevoir des rapports, il vous suffit de modifier votre profil Note et de
+    mettre la fréquence des rapports à 0 ou -1.<br>
+    Pour toutes suggestions par rapport à ce service, contactez
+    <a href="mailto:notekfet2020@lists.crans.org">notekfet2020@lists.crans.org</a>.
+</p>
+
+<p>
+    Rapport d'activité de {{ user.first_name }} {{ user.last_name }} (note : {{ user }})
+    depuis le {{ last_report }} jusqu'au {{ now }}.
+</p>
+
+<p>
+    Dépenses totales : {{ outcoming|pretty_money }}<br>
+    Apports totaux : {{ incoming|pretty_money }}<br>
+    Différentiel : {{ diff|pretty_money }}<br>
+    Nouveau solde : {{ user.note.balance|pretty_money }}
+</p>
+
+<h4>Rapport détaillé</h4>
+
+{% render_table table %}
+
+--
+<p>
+    Le BDE<br>
+    {% trans "Mail generated by the Note Kfet on the" %} {% now "j F Y à H:i:s" %}
+</p>
+</body>
+</html>

apps/note/templates/note/search_transactions.html

@@ -0,0 +1,57 @@
+{% extends "member/noteowner_detail.html" %}
+{% load render_table from django_tables2 %}
+{% load crispy_forms_tags %}
+
+{% block profile_info %}
+    {% if note.club.weiclub %}
+        {% with club=note.club.weiclub %}
+            {% include "wei/weiclub_info.html" %}
+        {% endwith %}
+    {% elif note.club %}
+        {% with club=note.club %}
+            {% include "member/club_info.html" %}
+        {% endwith %}
+    {% elif note.user %}
+        {% with user_object=note.user %}
+            {% include "member/profile_info.html"  %}
+        {% endwith %}
+    {% endif %}
+{% endblock %}
+
+{% block profile_content %}
+    {% crispy form %}
+    <div id="table">
+        {% render_table table %}
+    </div>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        function refreshHistory() {
+            $("#history_list").load("{% url 'note:transactions' pk=object.pk %} #history_list");
+            $("#profile_infos").load("{% url 'note:transactions' pk=object.pk %} #profile_infos");
+        }
+
+        function refreshFilters() {
+            let filters = "";
+            filters += "source=" + $("#id_source_pk").val();
+            filters += "&destination=" + $("#id_destination_pk").val();
+            filters += $("input[name='type']:checked").map(function() {
+                return "&type=" + $(this).val();
+            }).toArray().join("");
+            filters += "&reason=" + $("#id_reason").val();
+            filters += "&valid=" + ($("#id_valid").is(":checked") ? "1" : "");
+            filters += "&amount_gte=" + $("#id_amount_gte").val();
+            filters += "&amount_lte=" + $("#id_amount_lte").val();
+            filters += "&created_after=" + $("#id_created_after").val();
+            filters += "&created_before=" + $("#id_created_before").val();
+            console.log(filters.replace(" ", "%20"));
+            $("#table").load(location.pathname + "?" + filters.replaceAll(" ", "%20") + " #table");
+        }
+
+        $(document).ready(function() {
+            $("input").change(refreshFilters);
+            $("input").keyup(refreshFilters);
+        });
+    </script>
+{% endblock %}

apps/note/templates/note/transaction_form.html

@@ -0,0 +1,171 @@
+{% extends "base.html" %}
+{% comment %}
+SPDX-License-Identifier: GPL-2.0-or-later
+{% endcomment %}
+
+{% load i18n static django_tables2 perms %}
+
+{% block content %}
+
+    <div class="row">
+        <div class="col-xl-12">
+            <div class="btn-group btn-group-toggle" style="width: 100%; padding: 0 0 2em 0" data-toggle="buttons">
+                <label for="type_transfer" class="btn btn-sm btn-outline-primary active">
+                    <input type="radio" name="transaction_type" id="type_transfer">
+                    {% trans "Transfer" %}
+                </label>
+                {% if "note.notespecial"|not_empty_model_list %}
+                    <label for="type_credit" class="btn btn-sm btn-outline-primary">
+                        <input type="radio" name="transaction_type" id="type_credit">
+                        {% trans "Credit" %}
+                    </label>
+                    {% if not activities_open %}
+                        <label type="type_debit" class="btn btn-sm btn-outline-primary">
+                            <input type="radio" name="transaction_type" id="type_debit">
+                            {% trans "Debit" %}
+                        </label>
+                    {% endif %}
+                {% endif %}
+                {% for activity in activities_open %}
+                    <a href="{% url "activity:activity_entry" pk=activity.pk %}" class="btn btn-sm btn-outline-primary">
+                        {% trans "Entries" %} {{ activity.name }}
+                    </a>
+                {% endfor %}
+            </div>
+        </div>
+    </div>
+
+    <div class="row">
+        <div class="col-md-3" id="note_infos_div">
+            <div class="card border-success shadow mb-4">
+                <a id="profile_pic_link" href="#"><img src="/media/pic/default.png"
+                        id="profile_pic" alt="" class="img-fluid rounded mx-auto d-block"></a>
+                <div class="card-body text-center">
+                    <span id="user_note"></span>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-3" id="emitters_div">
+            <div class="card border-success shadow mb-4">
+                <div class="card-header">
+                    <p class="card-text font-weight-bold">
+                        {% trans "Select emitters" %}
+                    </p>
+                </div>
+                <ul class="list-group list-group-flush" id="source_note_list">
+                </ul>
+                <div class="card-body">
+                    <input class="form-control mx-auto d-block" type="text" id="source_note" placeholder="{% trans "Name or alias..." %}" />
+                    <div id="source_me_div">
+                        <hr>
+                        <span class="form-control mx-auto d-block btn btn-secondary" id="source_me">
+                            {% trans "I am the emitter" %}
+                        </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-3" id="dests_div">
+            <div class="card border-info shadow mb-4">
+                <div class="card-header">
+                    <p class="card-text font-weight-bold" id="dest_title">
+                        {% trans "Select receivers" %}
+                    </p>
+                </div>
+                <ul class="list-group list-group-flush" id="dest_note_list">
+                </ul>
+                <div class="card-body">
+                    <input class="form-control mx-auto d-block" type="text" id="dest_note" placeholder="{% trans "Name or alias..." %}" />
+                    <ul class="list-group list-group-flush" id="dest_alias_matched">
+                    </ul>
+                </div>
+            </div>
+        </div>
+
+        <div class="col-md-3" id="external_div">
+            <div class="card border-warning shadow mb-4">
+                <div class="card-header">
+                    <p class="card-text font-weight-bold">
+                        {% trans "Action" %}
+                    </p>
+                </div>
+                <ul class="list-group list-group-flush" id="source_note_list">
+                </ul>
+                <div class="card-body">
+                    <div class="form-row">
+                        <div class="col-md-12">
+                            <label for="amount">{% trans "Amount" %} :</label>
+                            {% include "note/amount_input.html" with widget=amount_widget %}
+                        </div>
+                    </div>
+
+                    <div class="form-row">
+                        <div class="col-md-12">
+                            <label for="reason">{% trans "Reason" %} :</label>
+                            <input class="form-control mx-auto d-block" type="text" id="reason" />
+                            <p id="reason-required" class="invalid-feedback"></p>
+                        </div>
+                    </div>
+
+                    <div class="d-none" id="special_transaction_div">
+                        <div class="form-row">
+                            <div class="col-md-12">
+                                <label for="credit_type">{% trans "Transfer type" %} :</label>
+                                <select id="credit_type" class="custom-select">
+                                    {% for special_type in special_types %}
+                                        <option value="{{ special_type.id }}">{{ special_type.special_type }}</option>
+                                    {% endfor %}
+                                </select>
+                            </div>
+                        </div>
+                        <div class="form-row">
+                            <div class="col-md-12">
+                                <label for="last_name">{% trans "Name" %} :</label>
+                                <input type="text" id="last_name" class="form-control" />
+                            </div>
+                        </div>
+                        <div class="form-row">
+                            <div class="col-md-12">
+                                <label for="first_name">{% trans "First name" %} :</label>
+                                <input type="text" id="first_name" class="form-control" />
+                            </div>
+                        </div>
+                        <div class="form-row">
+                            <div class="col-md-12">
+                                <label for="bank">{% trans "Bank" %} :</label>
+                                <input type="text" id="bank" class="form-control" />
+                            </div>
+                        </div>
+                    </div>
+                    <hr>
+                    <div class="form-row">
+                        <div class="col-md-12">
+                            <button id="btn_transfer" class="form-control btn btn-primary">{% trans 'Transfer' %}</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="card shadow mb-4" id="history">
+        <div class="card-header">
+            <p class="card-text font-weight-bold">
+                {% trans "Recent transactions history" %}
+            </p>
+        </div>
+        {% render_table table %}
+    </div>
+{% endblock %}
+
+{% block extrajavascript %}
+    <script>
+        TRANSFER_POLYMORPHIC_CTYPE = {{ polymorphic_ctype }};
+        SPECIAL_TRANSFER_POLYMORPHIC_CTYPE = {{ special_polymorphic_ctype }};
+        user_id = {{ user.note.pk }};
+        username = "{{ user.username|escapejs }}";
+    </script>
+    <script src="/static/js/transfer.js"></script>
+{% endblock %}

apps/note/templates/note/transactiontemplate_form.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% load static %}
+{% load i18n %}
+{% load crispy_forms_tags %}
+{% load pretty_money %}
+
+{% block content %}
+    <p>
+        <a class="btn btn-default" href="{% url 'note:template_list' %}">{% trans "Buttons list" %}</a>
+    </p>
+    <form method="post">
+        {% csrf_token %}
+        {{form|crispy}}
+        <button class="btn btn-primary" type="submit">{% trans "Submit" %}</button>
+    </form>
+
+    {% if price_history and price_history.1 %}
+        <hr>
+
+        <h4>{% trans "Price history" %}</h4>
+        <ul>
+        {% for price in price_history %}
+            <li>{{ price.price|pretty_money }} {% if price.time %}({% trans "Obsolete since" %} {{ price.time }}){% else %}({% trans "Current price" %}){% endif %}</li>
+        {% endfor %}
+        </ul>
+    {% endif %}
+{% endblock %}

apps/note/templates/note/transactiontemplate_list.html

@@ -0,0 +1,63 @@
+{% extends "base.html" %}
+{% load pretty_money %}
+{% load i18n %}
+{% load render_table from django_tables2 %}
+{% block content %}
+<div class="row justify-content-center mb-4">
+    <div class="col-md-10 text-center">
+        <input class="form-control mx-auto w-25" type="text" id="search_field" placeholder="{% trans "Name of the button..." %}">
+        <hr>
+        <a class="btn btn-primary text-center my-1" href="{% url 'note:template_create' %}" data-turbolinks="false">{% trans "New button" %}</a>
+    </div>
+</div>
+<div class="row justify-content-center">   
+    <div class="col-md-10">
+        <div class="card card-border shadow">
+            <div class="card-header text-center">
+                <h5> {% trans "buttons listing "%}</h5>
+            </div>
+            <div class="card-body px-0 py-0" id="buttons_table">
+                {% render_table table %}
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extrajavascript %}
+<script type="text/javascript">
+    $(document).ready(function() {
+        let searchbar_obj = $("#search_field");
+        var timer_on = false;
+        var timer;
+
+        function reloadTable() {
+            let pattern = searchbar_obj.val();
+            $("#buttons_table").load(location.pathname + "?search=" + pattern.replace(" ", "%20") + " #buttons_table");
+        }
+
+        searchbar_obj.keyup(function() {
+            if (timer_on)
+                clearTimeout(timer);
+            timer_on = true;
+            setTimeout(reloadTable, 0);
+        });
+    });
+
+    // on click of button "delete" , call the API
+     function delete_button(button_id) {
+         $.ajax({
+             url:"/api/note/transaction/template/" + button_id + "/",
+             method:"DELETE",
+             headers: {"X-CSRFTOKEN": CSRF_TOKEN}
+         })
+          .done(function() {
+              addMsg('{% trans "button successfully deleted "%}','success');
+            $("#buttons_table").load(location.pathname + "?search=" + $("#search_field").val().replace(" ", "%20") + " #buttons_table");
+          })
+          .fail(function() {
+              addMsg('{% trans "Unable to delete button "%} #' + button_id, 'danger')
+          });
+     }
+</script>
+{% endblock %}