adding remove button for notes

action/urls.py

@@ -8,4 +8,5 @@ urlpatterns = [
     path("new/", views.ChangeStateView.as_view(), name="change_state"),
     path('note/add/', views.AddNoteView.as_view(), name='add_note'),
     path('note/edit/<int:pk>', views.UpdateNoteView.as_view(), name='update_note'),
+    path('note/delete/<int:pk>', views.DeleteNoteView.as_view(), name='delete_note'),
 ]

action/views.py

@@ -72,7 +72,7 @@ class AddNoteView(View):
 class UpdateNoteView(UpdateView):
     model = Note
     fields = ['description']
-    template_name = 'device/templates/details.html'
+    template_name = "blank.html"
     pk_url_kwarg = 'pk'
 
     def form_valid(self, form):
@@ -94,3 +94,38 @@ class UpdateNoteView(UpdateView):
 
     def get_success_url(self):
         return self.request.META.get('HTTP_REFERER', reverse_lazy('device:details'))
+
+
+class DeleteNoteView(View):
+    model = Note
+
+    def post(self, request, *args, **kwargs):
+        self.pk = kwargs['pk']
+        referer = request.META.get('HTTP_REFERER')
+        if not referer:
+            raise Http404("No referer header found")
+
+        self.object = get_object_or_404(
+            self.model,
+            pk=self.pk,
+            institution=self.request.user.institution
+        )
+        description = self.object.description
+        snapshot_uuid= self.object.snapshot_uuid
+
+        if request.user != self.object.user and not request.user.is_admin:
+            messages.error(request, _("You do not have permission to delete this note."))
+            return redirect(referer)
+
+        message = _("<Deleted> Note. Description: '{}'. ").format(description)
+        DeviceLog.objects.create(
+            snapshot_uuid=snapshot_uuid,
+            event=message,
+            user=request.user,
+            institution=request.user.institution,
+        )
+        messages.warning(self.request, _("Note '{}' deleted successfully.").format(description))
+
+        self.object.delete()
+
+        return redirect(referer)

device/templates/details.html

@@ -19,10 +19,10 @@
     <h5 id="notesOffcanvasLabel">{% trans "Latest Notes" %}</h5>
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>        
-  <div class="offcanvas-body">
+  <div class="offcanvas-body" style="margin-bottom: 5rem;">
     {% for note in device_notes|slice:":4" %}
       <div class="card mb-3 shadow-sm">
-        <div class="card-body">
+        <div class="card-body"> 
           <div>
             <small class="text-muted">
               {{ note.date|timesince }} {% trans "ago" %}
@@ -49,6 +49,7 @@
           {% if user == note.user or user.is_admin %}
             <div class="d-flex justify-content-end align-items-center">
 
+              <!-- update note button -->
               <form
                 id="updateNoteForm{{ note.id }}"
                 method="post"
@@ -69,13 +70,19 @@
                 </a>
               </form>
 
-              <form class="d-inline" method="post" action="">
-                {% csrf_token %}
-                <a type="submit" class="text-danger" onclick="return confirm('{% trans 'Are you sure you want to delete this note?' %}')" title="{% trans 'Delete note' %}">
-                  <i class="bi bi-trash"></i>
-                </a>
-              </form>
+              <!-- delete note button -->
+              <button type="button" class="btn btn-link btn-outline-danger btn-sm text-danger" id="deleteIcon{{ note.id }}" title="{% trans 'Delete note' %}" data-bs-toggle="collapse" data-bs-target="#confirmDelete{{ note.id }}">
+                <i class="bi bi-trash"></i>
+              </button>
             </div>
+            <form class="d-inline" method="post" action="{% url 'action:delete_note' note.id %}">
+              {% csrf_token %}  
+              <div class="collapse mt-2 text-end" id="confirmDelete{{ note.id }}">
+                <a href="#" class="btn btn-sm btn-outline-danger" onclick="submitDeleteForm({{ note.id }}); return false;">
+                  {% trans 'Confirm delete' %}
+                </a>
+              </div>
+            </form>
           {% endif %}
           
         </div>
@@ -183,6 +190,7 @@
 
   {% include 'tabs/evidences.html' %}
 
+  <!-- Add a note popup -->
   <div class="modal fade" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteModalLabel" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
@@ -246,5 +254,9 @@
       descriptionField.value = newText;
       document.getElementById('updateNoteForm' + noteId).submit();
     }
+    //simpler are u sure? confirmation message
+    function submitDeleteForm(noteId) {
+      document.getElementById('confirmDelete' + noteId).closest('form').submit();
+    }
   </script>
 {% endblock %}