lazy loading of table using htmx

UWCS · Jul 5, 2023 · 0f87ad1 · 0f87ad1
1 parent dab3ef0
commit 0f87ad1
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 35 deletions.
diff --git a/src/routes/app.rs b/src/routes/app.rs
@@ -22,7 +22,6 @@ pub async fn home() -> impl IntoResponse {
 #[template(path = "app.html")]
 struct PanelTemplate {
     username: String,
-    redirects: Vec<crate::types::Redirect>,
 }
 
 async fn panel(
@@ -32,16 +31,30 @@ async fn panel(
     if session.get::<String>("username").is_none() {
         return Err(Redirect::to("/auth/login").into());
     }
+
     let username = session.get::<String>("username").unwrap();
+    Ok(PanelTemplate { username })
+}
+
+#[derive(Template)]
+#[template(path = "table.html")]
+struct TableTemplate {
+    redirects: Vec<crate::types::Redirect>,
+}
+async fn table(
+    session: ReadableSession,
+    State(state): State<AppState>,
+) -> Result<impl IntoResponse> {
+    if session.get::<String>("username").is_none() {
+        return Err(Redirect::to("/auth/login").into());
+    }
+
     let redirects = crate::db::get_all(&state.pool)
         .await
         .context("Could not get redirects from database")
         .map_err(handle_error)?;
 
-    Ok(PanelTemplate {
-        username,
-        redirects,
-    })
+    Ok(TableTemplate { redirects })
 }
 
 async fn handle_form(
@@ -71,5 +84,7 @@ async fn handle_form(
 }
 
 pub fn app_routes() -> Router<AppState> {
-    Router::new().route("/panel", get(panel).post(handle_form))
+    Router::new()
+        .route("/panel", get(panel).post(handle_form))
+        .route("/panel/table", get(table))
 }
diff --git a/templates/app.html b/templates/app.html
@@ -85,35 +85,13 @@ <h2 class="block font-bold py-2 px-4 mt-5 text-lg">Add new go link</h2>
                 >
               </tr>
             </thead>
-            <tbody class="divide-y divide-gray-200 bg-white">
-              {% for r in redirects %}
-              <tr>
-                <td
-                  class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6"
-                  >{{ r.source }}
-                </td>
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                  >{{ r.usages }}</td
-                >
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                  >{% match r.created %} {% when Some with (val) %} {{
-                  val.format("%d/%m/%Y %H:%M") }} {% when None %} {% endmatch
-                  %}</td
-                >
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                  >{% match r.author %} {% when Some with (val) %} {{ val }} {%
-                  when None %} {% endmatch %}</td
-                >
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                  >{% match r.last_used %} {% when Some with (val) %} {{
-                  val.format("%d/%m/%Y %H:%M") }} {% when None %} {% endmatch
-                  %}</td
-                >
-                <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
-                  >{{ r.sink }}</td
-                >
-              </tr>
-              {% endfor %}
+            <tbody
+              class="divide-y divide-gray-200 bg-white"
+              hx-get="panel/table"
+              hx-trigger="load"
+              hx-swap="outerHTML"
+            >
+              <tr> <td> Links loading...</td> </tr>
             </tbody>
           </table>
         </div>

diff --git a/templates/base.html b/templates/base.html
@@ -11,6 +11,11 @@
       type="image/x-icon"
       href="https://uwcs.co.uk/static/favicon-192.png"
     />
+    <script
+      src="https://unpkg.com/htmx.org@1.9.2"
+      integrity="sha384-L6OqL9pRWyyFU3+/bjdSri+iIphTN/bvYyM37tICVyOJkWZLpP2vGn6VUEXgzg6h"
+      crossorigin="anonymous"
+    ></script>
   </head>
   <body>
     <ul

diff --git a/templates/table.html b/templates/table.html
@@ -0,0 +1,27 @@
+<tbody class="divide-y divide-gray-200 bg-white">
+  {% for r in redirects %}
+  <tr>
+    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900 sm:pl-6"
+      >{{ r.source }}
+    </td>
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      >{{ r.usages }}</td
+    >
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      >{% match r.created %} {% when Some with (val) %} {{ val.format("%d/%m/%Y
+      %H:%M") }} {% when None %} {% endmatch %}</td
+    >
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      >{% match r.author %} {% when Some with (val) %} {{ val }} {% when None %}
+      {% endmatch %}</td
+    >
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      >{% match r.last_used %} {% when Some with (val) %} {{
+      val.format("%d/%m/%Y %H:%M") }} {% when None %} {% endmatch %}</td
+    >
+    <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500"
+      >{{ r.sink }}</td
+    >
+  </tr>
+  {% endfor %}
+</tbody>