Add Delete row

assets/oval.svg

@@ -0,0 +1,17 @@
+<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
+<svg width="38" height="38" viewBox="0 0 38 38" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
+    <g fill="none" fill-rule="evenodd">
+        <g transform="translate(1 1)" stroke-width="2">
+            <circle stroke-opacity=".5" cx="18" cy="18" r="18"/>
+            <path d="M36 18c0-9.94-8.06-18-18-18">
+                <animateTransform
+                    attributeName="transform"
+                    type="rotate"
+                    from="0 18 18"
+                    to="360 18 18"
+                    dur="1s"
+                    repeatCount="indefinite"/>
+            </path>
+        </g>
+    </g>
+</svg>

src/main.rs

@@ -1,13 +1,7 @@
 use diesel::prelude::*;
 use anyhow::{anyhow, Result, Context};
 use askama_axum::Template;
-use axum::{
+use axum::{extract::{Path, State}, http::{Method, header, StatusCode, Request, Uri}, response::{IntoResponse, Response, Html}, routing::{get, post}, Json, Router, Form, http};
-    extract::{Path, State},
-    http::{Method, header, StatusCode, Request, Uri},
-    response::{IntoResponse, Response, Html},
-    routing::{get, post},
-    Json, Router, Form
-};
 use axum::http::HeaderValue;
 use deadpool_diesel::sqlite::{Runtime, Manager, Pool};
 use clap::Parser;
@@ -97,7 +91,7 @@ async fn main() -> Result<()> {
         .nest_service("/assets", ServeDir::new("assets"))
         .route("/", get(index))
         .route("/feed/", get(get_list_feed).post(post_feed))
-        .route("/feed/:id/", get(get_feed))
+        .route("/feed/:id", get(get_feed).delete(delete_feed))
         .layer(middlewares)
         .with_state(context.clone());
     // Run our app with hyper
@@ -170,7 +164,10 @@ async fn post_feed(
 
 
 #[derive(Template)]
-#[template(path = "feeds.html")]
+#[template(source="\
+{% for feed in feeds %}
+{% include \"feed.html\" %}
+{% endfor %}", ext="html")]
 struct FeedsTemplate {
     feeds: Vec<RssFeed>
 }
@@ -189,6 +186,26 @@ async fn get_list_feed(
     FeedsTemplate{ feeds: result }
 }
 
+async fn delete_feed(
+    State(ctx): State<AppContext>,
+    Path(feed_id): Path<i32>,
+) -> impl IntoResponse {
+    let conn = ctx.pool.get().await.unwrap();
+    use self::schema::rss_feeds::dsl::*;
+    let num_deleted = conn.interact(move |conn| {
+        diesel::delete(rss_feeds.find(feed_id))
+            .execute(conn)
+            .expect("Error deleting posts")
+    }).await.unwrap();
+    if num_deleted == 0 {
+        (StatusCode::NOT_FOUND, "Not found")
+    } else {
+        // HTMX swaps only on 200, so we cannot use NO_CONTENT
+        // In fact, MSDN says that NO_CONTENT means "do nothing", but this is debated.
+        (StatusCode::OK, "")
+    }
+}
+
 #[derive(Template)]
 #[template(path = "index.html")]
 struct IndexTemplate {

templates/base.html

@@ -8,6 +8,15 @@
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.8/dist/cdn.min.js"></script>
     <style>
         [x-cloak] { display: none !important; }
+        .htmx-indicator{
+            display:none;
+        }
+        .htmx-request .htmx-indicator{
+            display:inline;
+        }
+        .htmx-request.htmx-indicator{
+            display:inline;
+        }
     </style>
     {% block head %}{% endblock %}
 </head>

templates/feed.html

@@ -3,11 +3,17 @@
     <td>{{feed.feed_url}}</td>
     <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
     <td>
-        <button hx-get="/feed/{{feed.id}}/"
+        <button hx-get="/feed/{{feed.id}}"
                 hx-target="#feed_{{feed.id}}"
-                hx-swap="outerHTML"
+                hx-swap="outerHTML">
-                hx-trigger="click">
             Refresh
         </button>
+        <button class="danger"
+                hx-confirm="Are you sure?"
+                hx-delete="/feed/{{feed.id}}"
+                hx-target="#feed_{{feed.id}}"
+                hx-swap="outerHTML">
+            Delete
+        </button>
     </td>
 </tr>

templates/feeds.html

@@ -1,3 +0,0 @@
-{% for feed in feeds %}
-{% include "feed.html" %}
-{% endfor %}

templates/index.html

@@ -37,14 +37,14 @@
 <div style="height: 48px; margin-bottom: 8px"></div>
 <div x-data="{'isModalOpen': false}">
     <div style="display:flex; justify-content:flex-end">
-        <button x-on:click="isModalOpen = true">Create</button>
+        <button @click="isModalOpen = true">Create</button>
     </div>
     <div class="overlay" style="z-index: 30" x-show="isModalOpen" x-cloak></div>
     <dialog open style="z-index: 31" x-show="isModalOpen" x-cloak x-transition>
         <header>
             <h2>Create new RSS Feed subscription</h2>
         </header>
-        <form id="create_form" hx-post="/feed/" hx-swap="none">
+        <form id="create_form" hx-post="/feed/" hx-swap="none" x-ref="create_form" hx-indicator="#indicator">
             <label>
                 Name
                 <input type="text" name="name">
@@ -55,8 +55,11 @@
             </label>
         </form>
         <footer>
-            <button form="create_form" type="reset" x-on:click="isModalOpen = false">Close</button>
+            <button form="create_form" type="reset" @click="isModalOpen = false">Close</button>
-            <button form="create_form" type="submit">Submit</button>
+            <button form="create_form" type="submit">
+                Submit
+                <img id="indicator" class="htmx-indicator" src="/assets/oval.svg" style="height: 1rem; margin-left: 2px" alt="...">
+            </button>
         </footer>
     </dialog>
     <table style="text-align:center">
@@ -68,7 +71,7 @@
             <th>Actions</th>
         </tr>
         </thead>
-        <tbody hx-get="/feed/" hx-trigger="newFeed from:body" x-on:htmx:after-settle="isModalOpen = false">
+        <tbody hx-get="/feed/" hx-trigger="newFeed from:body" @htmx:after-settle="isModalOpen = false;$refs['create_form'].reset()">
         {{ feeds|safe }}
         </tbody>
     </table>