add_comment

myapp/migrations/0012_alter_post_time.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.1.8 on 2024-12-12 13:21
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('myapp', '0011_alter_post_time'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='post',
+            name='time',
+            field=models.CharField(blank=True, default='12 December 2024', max_length=100),
+        ),
+    ]

myapp/models.py

@@ -74,7 +74,8 @@ class Comment(models.Model):
     time = models.DateTimeField(auto_now_add=True, blank=True)
     post = models.ForeignKey(CKPost, related_name="comments", on_delete=models.CASCADE)
     user = models.CharField(max_length=100)
-    to_field="slug",
+
+
 
     def __str__(self):
         return f"{self.id}.{self.content[:20]}..."

myapp/views.py

@@ -358,50 +358,60 @@ def get_subcategories(request):
 
 
 
+from django.shortcuts import get_object_or_404
+
 @csrf_exempt
 def add_comment(request):
     if request.method == "POST":
-        # Extract data from the request
+        # Extraire les données
+        slug = request.POST.get("slug")
         username = request.POST.get("username")
         content = request.POST.get("content")
-        post_id = request.POST.get("post_id")
-
-        # Validate that required fields are provided
-        if not all([username, content, post_id]):
+        parent_id = request.POST.get("parent_id")  # ID du commentaire parent (s'il existe)
+        
+        # Vérification des champs requis
+        if not all([slug, username, content]):
             return JsonResponse({"error": "Missing fields in the form."}, status=400)
+
+        # Vérifier l'existence du post
+        post = get_object_or_404(CKPost, slug=slug)
 
-        # Find the related post
-        post = get_object_or_404(CKPost, id=post_id)
+        # Récupérer le commentaire parent s'il existe
+        parent_comment = None
+        if parent_id:
+            parent_comment = get_object_or_404(Comment, id=parent_id)
 
-        # Create and save the comment
+        # Créer le commentaire
         comment = Comment.objects.create(
             user=username,
             content=content,
-            post=post
+            post=post,
+
         )
 
-        # Create the comment HTML (No escaping)
+        # Générer le HTML du commentaire (ou de la réponse)
         comment_html = f"""
         <div class="media p-3 border rounded mb-3 bg-white shadow-sm">
           <a class="pull-left" href="#">
             <div class="avatar">
-              <img src="/path/to/avatar.jpg" alt="{comment.user}" class="media-object" />
+              <img src="/static/assets/images/user.png" alt="{comment.user}" class="media-object" />
             </div>
           </a>
           <div class="media-body">
             <h5 class="media-heading">{comment.user}</h5>
             <h6 class="text-muted">{comment.time.strftime('%B %d, %Y %I:%M %p')}</h6>
             <p>{comment.content}</p>
-            <a href="#" class="btn-link pull-right btn btn-info">
+            <a href="#" class="btn-link pull-right btn btn-info reply-btn" data-comment-id="{comment.id}">
               <i class="fa fa-reply mr-1"></i> Reply
             </a>
           </div>
         </div>
         """
-
         return HttpResponse(comment_html, content_type="text/html")
-    else:
-        return JsonResponse({"error": "Invalid request method."}, status=405)
+
+    return JsonResponse({"error": "Invalid request method."}, status=405)
+
+
 
 
 

templates/blog/post-detail.html

@@ -46,10 +46,11 @@ <h4>{{ post.content | safe }}</h4>
         </div>
       </div>
 
-      <hr><br>
+
 
       <!-- Author Profile -->
       <div class="row" style="margin-left: 100px; margin-right: 100px;">
+        <hr><br>
         <div class="media">
           <a class="pull-left" href="{% url 'author_profile' author_profile.user.username %}">
             <div class="avatar big-avatar">
@@ -69,65 +70,71 @@ <h4 class="media-heading" style="color: #403d39; display: inline-block; font-wei
             {% endif %}
           </div>
         </div>
+        <hr><br>
       </div>
 
-      <hr><br>
+
 
      <!-- Comments Section -->
-<div class="row">
-  <div class="comments media-area">
-      <h3 class="text-center">Comments</h3>
-      {% if not post.comments.all %}
-          <p>No comments yet ... <a href="#">Add one</a></p>
-      {% else %}
-          <div id="comments-container">
-              <!-- Display all comments -->
-              {% for comment in post.comments.all %}
-                  <div class="media p-3 border rounded mb-3 bg-white shadow-sm">
-                      <a class="pull-left" href="#">
-                          <div class="avatar">
-                              <img src="/path/to/avatar.jpg" alt="{{ comment.user }}" class="media-object" />
-                          </div>
-                      </a>
-                      <div class="media-body">
-                          <h5 class="media-heading">{{ comment.user }}</h5>
-                          <h6 class="text-muted">{{ comment.time }}</h6>
-                          <p>{{ comment.content }}</p>
-                          <a href="#" class="btn-link pull-right btn btn-info">
-                              <i class="fa fa-reply mr-1"></i> Reply
-                          </a>
-                      </div>
-                  </div>
-              {% endfor %}
-              <!-- Placeholder for new comments -->
-              <div class="fake-comment-placeholder"></div>
-          </div>
-      {% endif %}
+      <div class="row"style="margin-left: 100px; margin-right: 100px;">
+        <div class="comments media-area">
+            <h3 class="text-center">Comments</h3>
+
+                <div id="comments-container">
+                    <!-- Display all comments -->
+                    {% for comment in post.comments.all %}
+                        <div class="media p-3 border rounded mb-3 bg-white shadow-sm">
+                            <a class="pull-left" href="#">
+                                <div class="avatar">
+                                    <img src="\static\assets\images\user.png" alt="{{ comment.user }}" class="media-object" />
+                                </div>
+                            </a>
+                            <div class="media-body">
+                                <h5 class="media-heading">{{ comment.user }}</h5>
+                                <div style="text-align: right;">
+                                  <h6 style="color: #6c757d;">{{ comment.time }}</h6>
+                                  <a href="#pablo" class="btn-link pull-right btn btn-info">
+                                    <i class="fa fa-reply mr-1">
+
+                                    </i>Reply</a>
+                                </div>
+
+
+                                <p>{{ comment.content }}</p>
+
+                            </div>
+                        </div>
+                    {% endfor %}
+                    <!-- Placeholder for new comments -->
+                    <div class="fake-comment-placeholder"></div>
+                </div>
+
 
-      <!-- Add a New Comment Form -->
-      <form 
-          method="POST" 
-          action="{% url 'add_comment' %}" 
-          hx-post="{% url 'add_comment' %}" 
-          hx-target=".fake-comment-placeholder" 
-          hx-swap="beforeend" 
-          class="border p-4 rounded shadow-sm bg-light mt-4" 
-          id="comment-form"
-      >
-          {% csrf_token %}
-          <div class="form-group mb-3">
-              <label for="username" class="form-label fw-bold">Your Name</label>
-              <input type="text" id="username" name="username" placeholder="Enter your name" required class="form-control">
-          </div>
-          <div class="form-group mb-3">
-              <label for="content" class="form-label fw-bold">Your Comment</label>
-              <textarea id="content" name="content" placeholder="Write your comment here..." required class="form-control"></textarea>
-          </div>
-          <input type="hidden" name="post_id" value="{{ post.id }}">
-          <button type="submit" class="btn btn-primary w-100">Add Comment</button>
-      </form>
-  </div>
-</div>
+            <!-- Add a New Comment Form -->
+            <form 
+                method="POST" 
+                action="{% url 'add_comment' %}" 
+                hx-post="{% url 'add_comment' %}" 
+                hx-target=".fake-comment-placeholder" 
+                hx-swap="beforeend" 
+                class="border p-4 rounded shadow-sm bg-light mt-4" 
+                id="comment-form"
+            >
+                {% csrf_token %}
+                <div class="form-group mb-3">
+                    <label for="username" class="form-label fw-bold">Your Name</label>
+                    <input type="text" id="username" name="username" placeholder="Enter your name" required class="form-control">
+                </div>
+                <div class="form-group mb-3">
+                    <label for="content" class="form-label fw-bold">Your Comment</label>
+                    <textarea id="content" name="content" placeholder="Write your comment here..." required class="form-control"></textarea>
+                </div>
+                <input type="hidden" name="slug" value="{{ post.slug }}">
+
+                <button type="submit" class="btn btn-primary w-100">Add Comment</button>
+            </form>
+        </div>
+      </div>
 
       <!-- Related Articles -->
       <div class="related-articles">