notes now can be updated

action/views.py

@@ -2,7 +2,7 @@ from django.views import View
 from django.shortcuts import redirect, get_object_or_404
 from django.contrib import messages
 from action.forms import ChangeStateForm, AddNoteForm
-from django.views.generic.edit import DeleteView, CreateView, FormView
+from django.views.generic.edit import DeleteView, CreateView, UpdateView, FormView
 from django.urls import reverse_lazy
 from django.utils.translation import gettext_lazy as _
 from action.models import State, StateDefinition, Note, DeviceLog
@@ -68,3 +68,29 @@ class AddNoteView(View):
             messages.error(request, "There was an error with your submission.")
 
         return redirect(request.META.get('HTTP_REFERER') )
+
+class UpdateNoteView(UpdateView):
+    model = Note
+    fields = ['description']
+    template_name = 'device/templates/details.html'
+    pk_url_kwarg = 'pk'
+
+    def form_valid(self, form):
+        old_description = self.get_object().description
+        new_description = self.object.description
+        snapshot_uuid = self.object.snapshot_uuid
+
+        if old_description != new_description:
+            message = _("<Updated> Note. Old Description: '{}'. New Description: '{}'").format(old_description, new_description)
+            DeviceLog.objects.create(
+                snapshot_uuid=snapshot_uuid,
+                event=message,
+                user=self.request.user,
+                institution=self.request.user.institution,
+            )
+
+        messages.success(self.request, "Note has been updated.")
+        return super().form_valid(form)
+
+    def get_success_url(self):
+        return self.request.META.get('HTTP_REFERER', reverse_lazy('device:details'))

device/templates/details.html

@@ -20,18 +20,64 @@
     <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
   </div>        
   <div class="offcanvas-body">
-    {% for note in device_notes|slice:":5" %}
+    {% for note in device_notes|slice:":4" %}
       <div class="card mb-3 shadow-sm">
         <div class="card-body">
-          <div class="d-flex justify-content-between">
+          <div>
-            <small class="fw-bold">
-              {{ note.user.get_full_name|default:note.user.username }}
-            </small>
             <small class="text-muted">
               {{ note.date|timesince }} {% trans "ago" %}
             </small>
           </div>
-          <p class="mt-3 ms-2 fst-italic">{{ note.description }}</p>
+          {% if user == note.user or user.is_admin %}
+          <blockquote
+              class="blockquote mt-2 p-2 bg-light fst-italic"
+              contenteditable="true"
+              style="font-size: 1em!important"
+              data-note-id="{{ note.id }}"
+              oninput="toggleSaveLink(this)">
+          {% else %}
+            <blockquote style="font-size: 1em!important" class="blockquote mt-2 p-2 fst-italic">
+          {% endif %}
+          <p data-note-id="{{ note.id }}">
+            {{ note.description }}
+          </p>
+            <footer class="blockquote-footer text-end mt-2" contenteditable="false">
+              <small>{{ note.user.get_full_name|default:note.user.username }}</small>
+            </footer>
+          </blockquote>
+          
+          {% if user == note.user or user.is_admin %}
+            <div class="d-flex justify-content-end align-items-center">
+
+              <form
+                id="updateNoteForm{{ note.id }}"
+                method="post"
+                action="{% url 'action:update_note' note.id %}"
+                class="d-inline"
+              >
+                {% csrf_token %}
+                <input type="hidden" name="description" id="descriptionInput{{ note.id }}" value="">
+                <a
+                  type="submit"
+                  id="saveLink{{ note.id }}"
+                  class="text-muted disabled me-4"
+                  style="pointer-events: none;"
+                  title="{% trans 'Save changes' %}"
+                  onclick="submitUpdatedNote('{{ note.id }}'); return false;"
+                >
+                  <i class="fas fa-save"></i>
+                </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>
+            </div>
+          {% endif %}
+          
         </div>
       </div>
     {% empty %}
@@ -39,7 +85,8 @@
     {% endfor %}
   </div>
 </div>
-<!--  -->
+
+<!-- Top bar buttons -->
 <div class="row">
   <div class="col">
     <h3>{{ object.shortid }}</h3>
@@ -186,5 +233,23 @@
         }
       }
     })
+
+    //Enable save button on note if changes are made to it
+    function toggleSaveLink(blockquoteElem) {
+      const saveLink = document.getElementById("saveLink" + blockquoteElem.dataset.noteId);
+
+      saveLink.classList.remove("disabled", "text-muted");
+      saveLink.classList.add("text-success");
+      saveLink.style.pointerEvents = "auto"; 
+      
+    }
+    //updates note-update-form with new value from blockquote
+    function submitUpdatedNote(noteId) {
+      const noteParagraph = document.querySelector('p[data-note-id="' + noteId + '"]');
+      const newText = noteParagraph.innerText.trim();
+      const descriptionField = document.getElementById('descriptionInput' + noteId);
+      descriptionField.value = newText;
+      document.getElementById('updateNoteForm' + noteId).submit();
+    }
   </script>
 {% endblock %}