Comments management
This commit is contained in:
Alphonse Paix
47
templates/dashboard/comments/card.html
Normal file
47
templates/dashboard/comments/card.html
Normal file
@@ -0,0 +1,47 @@
|
||||
<div id="comment-{{ comment.comment_id }}"
|
||||
class="block py-4 hover:bg-gray-50 px-6 transition-colors group">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center space-x-2 mb-2">
|
||||
<span class="text-sm font-medium text-gray-900">
|
||||
{% if let Some(name) = comment.author %}
|
||||
{{ name }}
|
||||
{% else %}
|
||||
Anonymous
|
||||
{% endif %}
|
||||
</span>
|
||||
<span class="text-gray-400">•</span>
|
||||
<span class="text-xs text-gray-500">on</span>
|
||||
<a href="/posts/{{ comment.post_id }}" class="text-sm text-blue-600 hover:underline truncate">
|
||||
#{{ comment.post_id.to_string()[..8] }}
|
||||
</a>
|
||||
</div>
|
||||
<p class="text-sm text-gray-700 mb-2 line-clamp-2">{{ comment.content }}</p>
|
||||
<div class="flex items-center text-sm text-gray-500">
|
||||
<svg class="w-4 h-4 mr-1.5"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<time datetime="{{ comment.published_at }}">
|
||||
{{ comment.formatted_date() }}
|
||||
</time>
|
||||
</div>
|
||||
</div>
|
||||
<button hx-delete="/admin/comments/{{ comment.comment_id }}"
|
||||
hx-target="#comment-{{ comment.comment_id }}"
|
||||
hx-swap="outerHTML"
|
||||
hx-confirm="Are you sure you want to delete this comment?"
|
||||
class="inline-flex items-center p-2 text-sm font-medium text-red-500 bg-red-50 border-2 border-dashed border-red-300 rounded-md hover:bg-red-100 hover:border-red-400 hover:text-red-600 transition-all duration-200 flex-shrink-0 ml-4">
|
||||
<svg class="w-4 h-4 group-hover:scale-110 transition-transform"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -0,0 +1,59 @@
|
||||
<div class="bg-white rounded-lg shadow-md border border-gray-200 mb-8">
|
||||
<div class="p-6 border-b border-gray-200">
|
||||
<div class="flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-900 flex items-center">
|
||||
<svg class="w-5 h-5 text-orange-600 mr-2"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
||||
</svg>
|
||||
<span>Comments management ({{ comments_count }})</span>
|
||||
</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">View and moderate all comments.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="comments-list" class="space-y-6">
|
||||
{% block comments %}
|
||||
{% if comments.is_empty() %}
|
||||
<div class="p-8 text-center">
|
||||
<div class="w-16 h-16 bg-gray-200 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-gray-500"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
|
||||
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="text-lg font-medium text-gray-900 mb-2">No data to display</h3>
|
||||
<p class="text-gray-600">The request did not return any data.</p>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="divide-y divide-gray-200">
|
||||
{% for comment in comments %}
|
||||
{% include "dashboard/comments/card.html" %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="flex items-center justify-center space-x-2 mb-6">
|
||||
<button hx-get="/admin/comments?page={{ comments_current_page - 1 }}"
|
||||
hx-target="#comments-list"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
|
||||
{% if comments_current_page <= 1 %}disabled{% endif %}><</button>
|
||||
<span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ comments_current_page }}</span>
|
||||
<button hx-get="/admin/comments?page={{ comments_current_page + 1 }}"
|
||||
hx-target="#comments-list"
|
||||
hx-swap="innerHTML"
|
||||
hx-trigger="click"
|
||||
class="px-3 py-1 text-sm font-medium text-gray-500 rounded-md hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-orange-500 {% if comments_current_page >= comments_max_page %}opacity-50 cursor-not-allowed{% endif %}"
|
||||
{% if comments_current_page >= comments_max_page %}disabled{% endif %}>></button>
|
||||
</div>
|
||||
{% endblock %}
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user