Posts management widget

.gitignore

@@ -1,3 +1,6 @@
 /target
 /node_modules
 .env
+/.idea
+docker-compose.yml
+

src/routes/admin/dashboard.rs

@@ -1,4 +1,4 @@
-use crate::routes::get_users;
+use crate::routes::{POSTS_PER_PAGE, SUBS_PER_PAGE, get_posts_count, get_posts_page, get_users};
 use crate::{
     authentication::AuthenticatedUser,
     routes::{AppError, get_max_page, get_subs, get_total_subs},
@@ -45,10 +45,18 @@ pub async fn admin_dashboard(
     let count = get_total_subs(&connection_pool)
         .await
         .context("Could not fetch total subscribers count from the database.")?;
-    let max_page = get_max_page(count);
+    let max_page = get_max_page(count, SUBS_PER_PAGE);
     let users = get_users(&connection_pool)
         .await
         .context("Could not fetch users")?;
+    let posts = get_posts_page(&connection_pool, 1)
+        .await
+        .context("Could not fetch posts.")?;
+    let posts_current_page = 1;
+    let count = get_posts_count(&connection_pool)
+        .await
+        .context("Could not fetch posts count.")?;
+    let posts_max_page = get_max_page(count, POSTS_PER_PAGE);
     let template = DashboardTemplate {
         user,
         idempotency_key_1,
@@ -58,6 +66,9 @@ pub async fn admin_dashboard(
         current_page,
         max_page,
         users,
+        posts,
+        posts_current_page,
+        posts_max_page,
     };
     Ok(Html(template.render().unwrap()).into_response())
 }

src/routes/admin/subscribers.rs

@@ -13,7 +13,7 @@ use axum::{
 use sqlx::PgPool;
 use uuid::Uuid;
 
-const SUBS_PER_PAGE: i64 = 5;
+pub const SUBS_PER_PAGE: i64 = 5;
 
 #[tracing::instrument(name = "Retrieving subscribers from database", skip(connection_pool))]
 pub async fn get_subscribers_page(
@@ -26,7 +26,7 @@ pub async fn get_subscribers_page(
         .await
         .context("Could not fetch total subscribers count from the database.")
         .map_err(AppError::unexpected_message)?;
-    let max_page = get_max_page(count);
+    let max_page = get_max_page(count, SUBS_PER_PAGE);
     let subscribers = get_subs(&connection_pool, page)
         .await
         .context("Could not fetch subscribers data.")
@@ -102,9 +102,9 @@ pub async fn get_total_subs(connection_pool: &PgPool) -> Result<i64, sqlx::Error
     Ok(count)
 }
 
-pub fn get_max_page(count: i64) -> i64 {
+pub fn get_max_page(count: i64, num_per_page: i64) -> i64 {
-    let mut max_page = count.div_euclid(SUBS_PER_PAGE);
+    let mut max_page = count.div_euclid(num_per_page);
-    if count % SUBS_PER_PAGE > 0 {
+    if count % num_per_page > 0 {
         max_page += 1;
     }
     max_page

src/routes/posts.rs

@@ -1,3 +1,5 @@
+use crate::routes::get_max_page;
+use crate::templates::PostsPageDashboardTemplate;
 use crate::{
     domain::PostEntry,
     routes::{
@@ -16,7 +18,7 @@ use axum::{
 use sqlx::PgPool;
 use uuid::Uuid;
 
-const NUM_PER_PAGE: i64 = 3;
+pub const POSTS_PER_PAGE: i64 = 3;
 
 #[tracing::instrument(name = "Fetching most recent posts from database", skip_all)]
 pub async fn list_posts(
@@ -24,12 +26,16 @@ pub async fn list_posts(
         connection_pool, ..
     }): State<AppState>,
 ) -> Result<Response, AppError> {
-    let count = get_posts_table_size(&connection_pool)
+    let count = get_posts_count(&connection_pool)
         .await
         .context("Could not fetch posts table size.")
         .map_err(AppError::unexpected_page)?;
-    let next_page = if count > NUM_PER_PAGE { Some(2) } else { None };
+    let next_page = if count > POSTS_PER_PAGE {
-    let posts = get_posts(&connection_pool, NUM_PER_PAGE, None)
+        Some(2)
+    } else {
+        None
+    };
+    let posts = get_posts(&connection_pool, POSTS_PER_PAGE, None)
         .await
         .context("Could not fetch latest posts")
         .map_err(AppError::unexpected_page)?;
@@ -37,6 +43,29 @@ pub async fn list_posts(
     Ok(Html(template.render().unwrap()).into_response())
 }
 
+#[tracing::instrument(name = "Fetching next posts from database", skip_all)]
+pub async fn get_posts_page_dashboard(
+    State(AppState {
+        connection_pool, ..
+    }): State<AppState>,
+    Query(LoadMoreParams { page }): Query<LoadMoreParams>,
+) -> Result<Response, AppError> {
+    let posts = get_posts_page(&connection_pool, page)
+        .await
+        .context("Could not fetch next posts page.")?;
+    let posts_current_page = page;
+    let count = get_posts_count(&connection_pool)
+        .await
+        .context("Could not fetch number of posts.")?;
+    let posts_max_page = get_max_page(count, POSTS_PER_PAGE);
+    let template = HtmlTemplate(PostsPageDashboardTemplate {
+        posts,
+        posts_current_page,
+        posts_max_page,
+    });
+    Ok(template.into_response())
+}
+
 async fn get_posts(
     connection_pool: &PgPool,
     n: i64,
@@ -59,7 +88,29 @@ async fn get_posts(
     .await
 }
 
-async fn get_posts_table_size(connection_pool: &PgPool) -> Result<i64, sqlx::Error> {
+pub async fn get_posts_page(
+    connection_pool: &PgPool,
+    page: i64,
+) -> Result<Vec<PostEntry>, sqlx::Error> {
+    let offset = (page - 1) * POSTS_PER_PAGE;
+    sqlx::query_as!(
+        PostEntry,
+        r#"
+        SELECT p.post_id, u.username AS author, p.title, p.content, p.published_at
+        FROM posts p
+        LEFT JOIN users u ON p.author_id = u.user_id
+        ORDER BY p.published_at DESC
+        LIMIT $1
+        OFFSET $2
+        "#,
+        POSTS_PER_PAGE,
+        offset
+    )
+    .fetch_all(connection_pool)
+    .await
+}
+
+pub async fn get_posts_count(connection_pool: &PgPool) -> Result<i64, sqlx::Error> {
     sqlx::query!("SELECT count(*) FROM posts")
         .fetch_one(connection_pool)
         .await
@@ -156,15 +207,14 @@ pub async fn load_more(
     }): State<AppState>,
     Query(LoadMoreParams { page }): Query<LoadMoreParams>,
 ) -> Result<Response, AppError> {
-    let offset = (page - 1) * NUM_PER_PAGE;
+    let posts = get_posts_page(&connection_pool, page)
-    let posts = get_posts(&connection_pool, NUM_PER_PAGE, Some(offset))
         .await
         .context("Could not fetch posts from database.")?;
     let count = posts.len();
     Ok(Html(
         PostListTemplate {
             posts,
-            next_page: if count as i64 == NUM_PER_PAGE {
+            next_page: if count as i64 == POSTS_PER_PAGE {
                 Some(page + 1)
             } else {
                 None

src/startup.rs

@@ -87,6 +87,7 @@ pub fn app(
     let admin_routes = Router::new()
         .route("/subscribers", get(get_subscribers_page))
         .route("/subscribers/{subscriber_id}", delete(delete_subscriber))
+        .route("/posts", get(get_posts_page_dashboard))
         .route("/posts/{post_id}", delete(delete_post))
         .route("/users", post(create_user))
         .route("/users/{user_id}", delete(delete_user))

src/templates.rs

@@ -65,6 +65,17 @@ pub struct DashboardTemplate {
     pub current_page: i64,
     pub max_page: i64,
     pub users: Vec<UserEntry>,
+    pub posts: Vec<PostEntry>,
+    pub posts_current_page: i64,
+    pub posts_max_page: i64,
+}
+
+#[derive(Template)]
+#[template(path = "dashboard/posts/list.html", block = "posts")]
+pub struct PostsPageDashboardTemplate {
+    pub posts: Vec<PostEntry>,
+    pub posts_current_page: i64,
+    pub posts_max_page: i64,
 }
 
 #[derive(Template)]

templates/dashboard/dashboard.html

@@ -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">

templates/dashboard/posts/card.html

@@ -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>

templates/dashboard/posts/list.html

@@ -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>