Posts management widget

This commit is contained in:
Alphonse Paix
2025-10-03 18:30:09 +02:00
parent 9296187181
commit ce8c602ddb
10 changed files with 203 additions and 15 deletions

View File

View File

@@ -33,6 +33,8 @@
{% include "users/list.html" %}
{% include "users/form.html" %}
</div>
{% include "posts/list.html" %}
{% include "comments/list.html" %}
</div>
{% endif %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">

View File

@@ -0,0 +1,51 @@
<div id="post-{{ post.post_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">
<a href="/posts/{{ post.post_id }}" class="block mb-1">
<h3 class="text-base font-medium text-gray-900 group-hover:text-blue-600 transition-colors">
{{ post.title }}
</h3>
</a>
<div class="flex items-center text-sm text-gray-500 space-x-4">
<div class="flex items-center">
<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="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
</svg>
<a href="/users/{{ post.author }}" class="hover:text-blue-600 hover:underline">
{{ post.author }}
</a>
</div>
<div class="flex items-center">
<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="{{ post.published_at }}">
{{ post.formatted_date() }}
</time>
</div>
</div>
</div>
<button hx-delete="/admin/posts/{{ post.post_id }}"
hx-target="#post-{{ post.post_id }}"
hx-swap="outerHTML"
hx-confirm="Are you sure you want to delete this post?"
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>

View File

@@ -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-indigo-600 mr-2"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
Posts management
</h2>
<p class="text-sm text-gray-600 mt-1">View and manage all published posts.</p>
</div>
</div>
</div>
<div id="posts-list" class="py-6 space-y-6">
{% block posts %}
{% if posts.is_empty() %}
<div class="bg-gray-50 rounded-lg p-8 border-2 border-dashed border-gray-300 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="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
</svg>
</div>
<h3 class="text-lg font-medium text-gray-900 mb-2">No posts yet</h3>
<p class="text-gray-600">Published posts will appear here.</p>
</div>
{% else %}
<div class="divide-y divide-gray-200">
{% for post in posts %}
{% include "dashboard/posts/card.html" %}
{% endfor %}
</div>
{% endif %}
<div class="flex items-center justify-center space-x-2">
<button hx-get="/admin/posts?page={{ posts_current_page - 1 }}"
hx-target="#posts-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-indigo-500 {% if posts_current_page <= 1 %}opacity-50 cursor-not-allowed{% endif %}"
{% if posts_current_page <= 1 %}disabled{% endif %}>&lt;</button>
<span class="px-3 py-1 text-sm font-medium text-gray-700 bg-gray-100 rounded-md">Page: {{ posts_current_page }}</span>
<button hx-get="/admin/posts?page={{ posts_current_page + 1 }}"
hx-target="#posts-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-indigo-500 {% if posts_current_page >= posts_max_page %}opacity-50 cursor-not-allowed{% endif %}"
{% if posts_current_page >= posts_max_page %}disabled{% endif %}>&gt;</button>
</div>
{% endblock %}
</div>
</div>