Add deletion feature for comments

sde_collections/serializers.py

@@ -1,7 +1,7 @@
 from rest_framework import serializers
 
 from .models.candidate_url import CandidateURL
-from .models.collection import Collection
+from .models.collection import Collection, Comments
 from .models.collection_choice_fields import DocumentTypes
 from .models.pattern import (
     DocumentTypePattern,
@@ -197,3 +197,14 @@ def validate_match_pattern(self, value):
         except DocumentTypePattern.DoesNotExist:
             pass
         return value
+
+
+class CommentsSerializer(serializers.ModelSerializer):
+    username = serializers.SerializerMethodField()
+
+    def get_username(self, obj):
+        return obj.user.username
+
+    class Meta:
+        model = Comments
+        fields = ["id", "collection", "username", "text", "created_at"]

sde_collections/urls.py

@@ -14,6 +14,7 @@
 router.register(r"title-patterns", views.TitlePatternViewSet)
 router.register(r"document-type-patterns", views.DocumentTypePatternViewSet)
 router.register(r"environmental-justice", EnvironmentalJusticeRowViewSet)
+router.register(r"comments", views.CommentsViewSet)
 
 app_name = "sde_collections"
 

sde_collections/views.py

@@ -11,7 +11,7 @@
 from django.views.generic.detail import DetailView
 from django.views.generic.edit import DeleteView
 from django.views.generic.list import ListView
-from rest_framework import generics, status, viewsets
+from rest_framework import generics, permissions, status, viewsets
 from rest_framework.generics import ListAPIView
 from rest_framework.response import Response
 from rest_framework.views import APIView
@@ -38,6 +38,7 @@
     CandidateURLSerializer,
     CollectionReadSerializer,
     CollectionSerializer,
+    CommentsSerializer,
     DocumentTypePatternSerializer,
     ExcludePatternSerializer,
     IncludePatternSerializer,
@@ -140,13 +141,9 @@ def get_context_data(self, **kwargs):
         if "comments_form" not in context:
             context["comments_form"] = CommentsForm()
 
-        context["required_urls"] = RequiredUrls.objects.filter(
-            collection=self.get_object()
-        )
+        context["required_urls"] = RequiredUrls.objects.filter(collection=self.get_object())
         context["segment"] = "collection-detail"
-        context["comments"] = Comments.objects.filter(
-            collection=self.get_object()
-        ).order_by("-created_at")
+        context["comments"] = Comments.objects.filter(collection=self.get_object()).order_by("-created_at")
         return context
 
 
@@ -434,3 +431,21 @@ def get_context_data(self, **kwargs):
         context["differences"] = self.data
 
         return context
+
+
+class CommentsViewSet(viewsets.ModelViewSet):
+    queryset = Comments.objects.all()
+    serializer_class = CommentsSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+    def get_permissions(self):
+        if self.action == "destroy":
+            return [permissions.IsAuthenticated()]
+        return super().get_permissions()
+
+    def destroy(self, request, *args, **kwargs):
+        comment = self.get_object()
+        if request.user == comment.user:
+            return super().destroy(request, *args, **kwargs)
+        else:
+            return Response(status=status.HTTP_403_FORBIDDEN)

sde_indexing_helper/static/css/collection_detail.css

@@ -36,3 +36,23 @@
 .comment p {
     margin-top: 5px;
 }
+.delete-button {
+    background-color: #ff4d4d;
+    color: white;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-family: 'Arial', sans-serif;
+    transition: background-color 0.3s, transform 0.2s;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.delete-button:hover {
+    background-color: #ff3333;
+    transform: scale(1.05);
+}
+
+.delete-button:active {
+    transform: scale(0.95);
+}

sde_indexing_helper/static/js/collection_detail.js

@@ -16,3 +16,18 @@ document.getElementById('cancel-github-link-button').addEventListener('click', f
     document.getElementById('github-link-form').style.display = 'none';
     document.getElementById('id_github_issue_link').value = originalValue;
 });
+
+function deleteComment(element) {
+    var commentId = element.getAttribute('data-comment-id');
+    $.ajax({
+        url: `/api/comments/${commentId}/`,
+        type: 'DELETE',
+        headers: { 'X-CSRFToken': csrftoken },
+        success: function(result) {
+            $(element).closest('.comment').remove();
+        },
+        error: function(xhr, status, error) {
+            console.error('Comment deletion failed:', error);
+        }
+    });
+}

sde_indexing_helper/templates/sde_collections/collection_detail.html

@@ -123,6 +123,9 @@ <h1>{{ collection.name }}</h1>
                                 <strong>{{ comment.user.username }}</strong>
                                 <span>{{ comment.created_at|date:"M. d, Y, P" }}</span>
                                 <p>{{ comment.text }}</p>
+                                {% if user.is_authenticated and user == comment.user %}
+                                    <button data-comment-id="{{ comment.id }}" onclick="deleteComment(this)" class="delete-button">Delete</button>
+                                {% endif %}
                             </div>
                         {% empty %}
                             <p>No comments yet</p>
@@ -150,5 +153,8 @@ <h1>{{ collection.name }}</h1>
     </table>
 {% endblock content %}
 {% block javascripts %}
+    <script type="text/javascript">
+        var csrftoken = '{{ csrf_token }}';
+    </script>
     <script src="{% static 'js/collection_detail.js' %}"></script>
 {% endblock javascripts %}