alphonse/zero2prod
1
0
Fork 0
Code Issues 6 Pull Requests Actions Packages Projects Releases Wiki Activity

Posts management widget

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

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

15
src/routes/admin/dashboard.rs
View File

@@ -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())
}

10
src/routes/admin/subscribers.rs
View File

@@ -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 {
let mut max_page = count.div_euclid(SUBS_PER_PAGE);
if count % SUBS_PER_PAGE > 0 {
pub fn get_max_page(count: i64, num_per_page: i64) -> i64 {
let mut max_page = count.div_euclid(num_per_page);
if count % num_per_page > 0 {
max_page += 1;
}
max_page

66
src/routes/posts.rs
View File

@@ -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 posts = get_posts(&connection_pool, NUM_PER_PAGE, None)
let next_page = if count > POSTS_PER_PAGE {
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(&connection_pool, NUM_PER_PAGE, Some(offset))
let posts = get_posts_page(&connection_pool, page)
.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

1
src/startup.rs
View File

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

11
src/templates.rs
View File

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

0
templates/dashboard/comments/list.html Normal file
View File

2
templates/dashboard/dashboard.html
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">

51
templates/dashboard/posts/card.html Normal file
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>

59
templates/dashboard/posts/list.html Normal file
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>