From 9177e42fb08ae7b5078ee2fdf0f84afd3527c71a Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Wed, 10 Apr 2024 12:46:09 +0300
Subject: [PATCH] Add the create modal, a route, a handler to create a article.

---
 src/main/blog/handlers.cljs | 20 ++++++++++++++++
 src/main/blog/server.cljs   | 10 ++++++++
 views/admin_panel.hbs       | 46 ++++++++++++++++++++++++++++++++++---
 3 files changed, 73 insertions(+), 3 deletions(-)

diff --git a/src/main/blog/handlers.cljs b/src/main/blog/handlers.cljs
index 56080ab..d601435 100644
--- a/src/main/blog/handlers.cljs
+++ b/src/main/blog/handlers.cljs
@@ -98,3 +98,23 @@
             (res/status 500)
             (res/send (ex-message err))))))))
 
+(defn htmx-create-article-handler-factory
+  [client]
+  (fn [req res]
+    (let [channel (chan)
+          title   (.-title (.-body req))
+          content (.-content (.-body req))]
+      (go
+        (try
+          (let [id (<! (db/insert-article client title content channel))]
+            (if (nil? id)
+              (do
+                (res/status 404)
+                (res/send (ex-message "404")))
+              (do
+                (res/status 200)
+                (.redirect res (str "/htmx/admin/rows/article/" id)))))
+          (catch js/Error err
+            (res/status 500)
+            (res/send (ex-message err))))))))
+
diff --git a/src/main/blog/server.cljs b/src/main/blog/server.cljs
index cd1deec..01c0d7f 100644
--- a/src/main/blog/server.cljs
+++ b/src/main/blog/server.cljs
@@ -1,6 +1,7 @@
 (ns blog.server
   (:require ["express" :as express]
             ["express-handlebars" :refer [engine]]
+            ["body-parser" :as body-parser]
             [blog.db :as db]
             [blog.env :as env]
             [blog.handlers :as handlers]))
@@ -28,6 +29,12 @@
 (defn set-routes
   "Sets the routes for server."
   []
+
+  ;; need to parse request body for forms.
+  (. app use (.urlencoded body-parser
+                          (-> {:extended false}
+                              (clj->js))))
+
   (. app get "/"
      (handlers/index-page-handler-factory client))
      (fn [req res]
@@ -35,6 +42,9 @@
   (. app get "/admin"
      (handlers/admin-panel-handler-factory client))
 
+  (. app post "/htmx/articles/"
+     (handlers/htmx-create-article-handler-factory client))
+
   (. app get "/htmx/articles/:id"
      (handlers/htmx-get-article-handler-factory client))
 
diff --git a/views/admin_panel.hbs b/views/admin_panel.hbs
index f7d854d..ba6d494 100644
--- a/views/admin_panel.hbs
+++ b/views/admin_panel.hbs
@@ -34,9 +34,8 @@
           <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"
                     id="createArticleButton"
-	            hx-get="/htmx/forms/article/create/"
-	            hx-target="#articles"
-	            hx-swap="afterbegin"
+                    data-modal-target="createArticleModal"
+                    data-modal-toggle="createArticleModal"
                     class="flex items-center justify-center text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 font-medium rounded-lg text-sm px-4 py-2 dark:bg-primary-600 dark:hover:bg-primary-700 focus:outline-none dark:focus:ring-primary-800">
               <svg class="h-3.5 w-3.5 mr-1.5 -ml-1" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
                 <path clip-rule="evenodd" fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" />
@@ -77,6 +76,47 @@
     </div>
   </section>
 
+  <!-- Create modal -->
+  <div id="createArticleModal" tabindex="-1" aria-hidden="true" class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 justify-center items-center w-full md:inset-0 h-[calc(100%-1rem)] max-h-full">
+    <div class="relative p-4 w-full max-w-2xl max-h-full">
+      <!-- Modal content -->
+      <div class="relative p-4 bg-white rounded-lg shadow dark:bg-gray-800 sm:p-5">
+        <!-- Modal header -->
+        <div class="flex justify-between items-center pb-4 mb-4 rounded-t border-b sm:mb-5 dark:border-gray-600">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Add Article</h3>
+          <button type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" data-modal-target="createArticleModal" data-modal-toggle="createArticleModal">
+            <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+            <span class="sr-only">Close modal</span>
+          </button>
+        </div>
+        <!-- Modal body -->
+        <form action="#">
+          <div class="grid gap-4 mb-4 sm:grid-cols-1">
+            <div>
+              <label for="title" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Title</label>
+              <input type="text" name="title" id="title" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 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" placeholder="Type article title" required="">
+            </div>
+            <div><label for="content" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Content</label><textarea id="content" name="content" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 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" placeholder="Write article here"></textarea></div>
+          </div>
+          <button type="submit"
+            hx-post="/htmx/articles/"
+	    hx-target="#articles"
+	    hx-swap="afterbegin"
+            data-modal-target="createArticleModal"
+            data-modal-toggle="createArticleModal"
+            class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
+            <svg class="mr-1 -ml-1 w-6 h-6" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd" />
+              </svg>
+              Add new article
+          </button>
+        </form>
+      </div>
+    </div>
+  </div>
+
   <!-- Preview Drawer -->
   <div id="drawer-read-product-advanced"
        x-data="{ title: '', created: '' }"