dynamically delete buttons

apps/note/api/views.py

@@ -5,6 +5,7 @@ from django.db.models import Q
 from django_filters.rest_framework import DjangoFilterBackend
 from rest_framework.filters import OrderingFilter, SearchFilter
 from api.viewsets import ReadProtectedModelViewSet, ReadOnlyProtectedModelViewSet
+from rest_framework import viewsets
 
 from .serializers import NotePolymorphicSerializer, AliasSerializer, TemplateCategorySerializer, \
     TransactionTemplateSerializer, TransactionPolymorphicSerializer
@@ -81,7 +82,7 @@ class TemplateCategoryViewSet(ReadProtectedModelViewSet):
     search_fields = ['$name', ]
 
 
-class TransactionTemplateViewSet(ReadProtectedModelViewSet):
+class TransactionTemplateViewSet(viewsets.ModelViewSet):
     """
     REST API View set.
     The djangorestframework plugin will get all `TransactionTemplate` objects, serialize it to JSON with the given serializer,

apps/note/tables.py

@@ -90,5 +90,10 @@ class ButtonTable(tables.Table):
 
         model = TransactionTemplate
 
+    
+    delete = tables.TemplateColumn(template_code="""
+    <button id="{{ record.pk }}" class="btn btn-danger" onclick="delete_button(this.id)"> delete </a>
+    """)
+    
     def render_amount(self, value):
         return pretty_money(value)

templates/note/transactiontemplate_list.html

@@ -14,9 +14,14 @@
     </div>
 </div>
 <div class="row justify-content-center">   
-<div class="col-md-10">
-    {% render_table table %}
-</div>
+    <div class="col-md-10 card shadow">
+        <div class="card-header text-center">
+            <h5> {% trans "buttons listing "%}</h5>
+        </div>
+        <div class="card" id="buttons_table">
+            {% render_table table %}
+        </div>
+    </div>
 </div>
 {% endblock %}
 
@@ -40,7 +45,6 @@ function getInfo() {
         $('table tr').show();
     }       
 }
-
 var timer;
 var timer_on;
 /* Fontion appelée quand le texte change (délenche le timer) */
@@ -54,5 +58,21 @@ function search_field_moved(secondfield) {
         timer_on = true;
     }
 }
+// on click of button "delete" , call the API 
+ function delete_button(button_id){
+     console.log(button_id);
+     $.ajax({
+         url:"/api/note/transaction/template/"+button_id,
+         method:"DELETE",
+         headers: {
+            "X-CSRFTOKEN": CSRF_TOKEN
+         },
+         success: function(){
+             addMsg('{% trans "button successfully deleted "%}','success');
+             $("#buttons_table").load('{% url "note:template_list" %} #buttons_tables');
+         },
+         error: addMsg(' {% trans "Unable to delete button "%} #' + button_id,'danger' )
+     });
+}
 </script>
 {% endblock %}