Add the search for articles for the admin panel.

src/main/blog/handlers.cljs

@@ -26,10 +26,12 @@
   [client]
   (fn [req res]
     (let [channel (chan)
-          id (.-id (.-params req))]
+          search (.-search (.-query req))]
       (go
         (try
-          (let [articles (<! (db/get-articles-briefly client channel))]
+          (let [articles (if (nil? search)
+                           (<! (db/get-articles-briefly client channel))
+                           (<! (db/search-articles-briefly client search channel)))]
             (res/status 200)
             (.render res "admin_panel"
                      (-> {:articles articles
@@ -133,6 +135,23 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-admin-search-articles-handler-factory
+  [client]
+  (fn [req res]
+    (let [channel (chan)
+          search (.-search (.-body req))]
+      (go
+        (try
+          (let [articles (<! (db/search-articles-briefly client search channel))]
+            (res/status 200)
+            (.render res "article_rows"
+                     (-> {:articles articles
+                          :layout false}
+                         (cljs.core/clj->js))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
 (defn htmx-create-article-handler-factory
   [client]
   (fn [req res]

src/main/blog/server.cljs

@@ -79,6 +79,9 @@
   (. app get "/htmx/articles/:id"
      (handlers/htmx-get-article-handler-factory client))
 
+  (. app post "/htmx/admin/search/articles/"
+     (handlers/htmx-admin-search-articles-handler-factory client))
+
   (. app get "/htmx/admin/rows/article/:id/"
      (handlers/htmx-get-article-row-handler-factory client))
 

views/admin_panel.hbs

@@ -1,4 +1,4 @@
-<main class="bg-white dark:bg-gray-800 grow">
+<main class="bg-white dark:bg-gray-600 grow">
   <section class="bg-gray-300 dark:bg-gray-600 p-3 sm:p-5 antialiased">
     <div class="mx-auto max-w-screen-2xl px-4 lg:px-12">
       <div class="bg-white dark:bg-gray-800 relative shadow-md sm:rounded-lg overflow-hidden">
@@ -17,17 +17,24 @@
         </div>
         <div class="flex flex-col md:flex-row items-stretch md:items-center md:space-x-3 space-y-3 md:space-y-0 justify-between mx-4 py-4 border-t dark:border-gray-700">
           <div class="w-full md:w-1/2">
-          <form class="flex items-center">
-            <label for="simple-search" class="sr-only">Search</label>
+          <div class="flex items-center">
             <div class="relative w-full">
               <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                 <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                 <path fill-rule="evenodd" clip-rule="evenodd" d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z" />
                 </svg>
               </div>
-              <input type="text" id="simple-search" placeholder="Search for article" required="" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+              <input type="text"
+                     id="search"
+                     name="search"
+                     hx-post="/htmx/admin/search/articles/"
+                     hx-trigger="input changed delay:500ms, search"
+                     hx-target="#articles"
+                     hx-swap="outerHTML"
+                     placeholder="Search articles by title or content"
+                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full pl-10 p-2 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
+            </div>
           </div>
-          </form>
           </div>
           <div class="w-full md:w-auto flex flex-col md:flex-row space-y-2 md:space-y-0 items-stretch md:items-center justify-end md:space-x-3 flex-shrink-0">
             <button type="button"
@@ -52,11 +59,7 @@
                 <th scope="col" class="p-4"></th>
               </tr>
             </thead>
-            <tbody id="articles">
-              {{#each articles as |article|}}
-                {{> article_row article=article }}
-              {{/each}}
-            </tbody>
+            {{> article_rows articles=articles }}
           </table>
         </div>
         <nav class="flex flex-col md:flex-row justify-between items-start md:items-center space-y-3 md:space-y-0 p-4" aria-label="Table navigation">
@@ -170,3 +173,6 @@
     </div>
   </div>
 </main>
+
+{{> search_articles_update_param_script }}
+

views/partials/article_rows.hbs

@@ -0,0 +1,5 @@
+<tbody id="articles">
+  {{#each articles as |article| }}
+    {{> article_row article=article }}
+  {{/each}}
+</tbody>