KKlochko/simple-cljs-blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add the create modal, a route, a handler to create a article.

Browse Source
This commit is contained in:
KKlochko
2024-04-10 12:46:09 +03:00
parent 657d58d15f
commit 9177e42fb0
3 changed files with 73 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/main/blog/handlers.cljs
+20
View File
@@ -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))))))))
src/main/blog/server.cljs
+10
View File
@@ -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))
views/admin_panel.hbs
+43 -3
View File
@@ -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: '' }"