Inline Edit

src/main.rs

@@ -92,7 +92,8 @@ async fn main() -> Result<()> {
         .route("/", get(index))
         .route("/feed/", get(get_list_feed).post(post_feed))
         .route("/feed/:id", get(get_feed).delete(delete_feed).put(put_feed))
-        .route("/feedform/:id", get(get_feed_form))
+        .route("/feed/:id/edit/form", get(get_feed_form))
+        .route("/feed/:id/edit/inline", get(get_feed_inline))
         .layer(middlewares)
         .with_state(context.clone());
     // Run our app with hyper
@@ -171,6 +172,40 @@ async fn get_feed_form(
     }
 }
 
+#[derive(Template)]
+#[template(path="feed_inline.html")]
+struct FeedInlineTemplate {
+    feed: RssFeed
+}
+
+async fn get_feed_inline(
+    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 result = conn.interact(move |conn| {
+        rss_feeds
+            .find(feed_id)
+            .select(RssFeed::as_select())
+            .first(conn)
+            .optional()
+            .expect("Error loading feeds")
+    }).await.unwrap();
+    if let Some(feed) = result {
+        FeedInlineTemplate{ feed }
+    } else {
+        FeedInlineTemplate{
+            feed: RssFeed{
+                id: -1,
+                name: "ERROR".to_string(),
+                feed_url: "ERROR".to_string(),
+                last_pub_date: Some("ERROR".to_string())
+            }
+        }
+    }
+}
+
 #[derive(Deserialize, AsChangeset)]
 #[diesel(table_name = crate::schema::rss_feeds)]
 struct PostForm{

templates/feed.html

@@ -3,12 +3,12 @@
     <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}}/edit/inline"
                 hx-target="#feed_{{feed.id}}"
                 hx-swap="outerHTML">
             Edit Inline
         </button>
-        <button hx-get="/feedform/{{feed.id}}"
+        <button hx-get="/feed/{{feed.id}}/edit/form"
                 hx-target="body"
                 hx-swap="beforeend">
             Edit Dialog

templates/feed_inline.html

@@ -0,0 +1,29 @@
+<tr id="feed_{{feed.id}}">
+    <td>
+        <label style="width: 100%">
+            <input type="text" name="name" form="update_feed_{{feed.id}}" value="{{feed.name}}">
+        </label>
+    </td>
+    <td>
+        <label style="width: 100%">
+            <input type="url" name="feed_url" form="update_feed_{{feed.id}}" value="{{feed.feed_url}}">
+        </label>
+    </td>
+    <td>{{feed.last_pub_date.clone().unwrap_or("None".to_string())}}</td>
+    <td>
+        <form id="update_feed_{{feed.id}}" hx-put="/feed/{{feed.id}}" hx-target="#feed_{{feed.id}}" hx-swap="outerHTML"
+              hx-indicator="update_feed_{{feed.id}}_indicator" style="padding: 0; background: unset">
+            <button type="reset"
+                    hx-get="/feed/{{feed.id}}"
+                    hx-target="#feed_{{feed.id}}"
+                    hx-swap="outerHTML">
+                Cancel
+            </button>
+            <button type="submit">
+                Confirm
+                <img id="update_feed_{{feed.id}}_indicator" class="htmx-indicator" src="/assets/oval.svg"
+                     style="height: 1rem; margin-left: 2px" alt="...">
+            </button>
+        </form>
+    </td>
+</tr>

templates/index.html

@@ -22,6 +22,14 @@
         background: #161b22;
         opacity: 0.75;
     }
+
+    th {
+        white-space: nowrap;
+    }
+
+    td {
+        white-space: nowrap;
+    }
 </style>
 {% endblock %}