From 20ed9e09dcffc94ae6853ecb7548080ccf5ce77c Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Tue, 9 Apr 2024 17:57:27 +0300
Subject: [PATCH] Add a feature to preview a article for the admin panel.

---
 src/main/blog/handlers.cljs             |  8 ++++----
 src/main/blog/server.cljs               |  3 +++
 views/admin_article_preview_content.hbs |  3 +++
 views/admin_panel.hbs                   | 11 +++++++----
 views/partials/article_row.hbs          | 18 ++++++++++++------
 5 files changed, 29 insertions(+), 14 deletions(-)
 create mode 100644 views/admin_article_preview_content.hbs

diff --git a/src/main/blog/handlers.cljs b/src/main/blog/handlers.cljs
index 7eef0c1..56080ab 100644
--- a/src/main/blog/handlers.cljs
+++ b/src/main/blog/handlers.cljs
@@ -71,13 +71,13 @@
               (do
                 (res/status 200)
                 (.render res "article_row"
-                         (-> {:article article :layout false}
+                         (-> {:article article :layout false }
                              (cljs.core/clj->js))))))
           (catch js/Error err
             (res/status 500)
             (res/send (ex-message err))))))))
 
-(defn htmx-get-article-row-handler-factory
+(defn htmx-get-article-preview-content-handler-factory
   [client]
   (fn [req res]
     (let [channel (chan)
@@ -91,8 +91,8 @@
                 (res/send (ex-message "404")))
               (do
                 (res/status 200)
-                (.render res "article_row"
-                         (-> {:article article :layout false}
+                (.render res "admin_article_preview_content"
+                         (-> {:article article :layout false }
                              (cljs.core/clj->js))))))
           (catch js/Error err
             (res/status 500)
diff --git a/src/main/blog/server.cljs b/src/main/blog/server.cljs
index 5cc0143..cd1deec 100644
--- a/src/main/blog/server.cljs
+++ b/src/main/blog/server.cljs
@@ -40,6 +40,9 @@
 
   (. app get "/htmx/admin/rows/article/:id/"
      (handlers/htmx-get-article-row-handler-factory client))
+
+  (. app get "/htmx/admin/modals/article/content/:id/"
+     (handlers/htmx-get-article-preview-content-handler-factory client))
   )
 
 (defn start
diff --git a/views/admin_article_preview_content.hbs b/views/admin_article_preview_content.hbs
new file mode 100644
index 0000000..a1c2c5d
--- /dev/null
+++ b/views/admin_article_preview_content.hbs
@@ -0,0 +1,3 @@
+<p id="read-drawer-label-content" class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
+  {{ article.content }}
+</p>
\ No newline at end of file
diff --git a/views/admin_panel.hbs b/views/admin_panel.hbs
index f44f1a4..02e3867 100644
--- a/views/admin_panel.hbs
+++ b/views/admin_panel.hbs
@@ -69,9 +69,12 @@
 
 
   <!-- Preview Drawer -->
-  <div id="drawer-read-product-advanced" class="overflow-y-auto fixed top-0 left-0 z-40 p-4 w-full max-w-lg h-screen bg-white transition-transform -translate-x-full dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
+  <div id="drawer-read-product-advanced"
+       x-data="{ title: '', created: '' }"
+       @preview_article.window="title = $event.detail.title; created = $event.detail.created;"
+       class="overflow-y-auto fixed top-0 left-0 z-40 p-4 w-full max-w-lg h-screen bg-white transition-transform -translate-x-full dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label" aria-hidden="true">
     <div>
-      <h4 id="read-drawer-label" class="mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white">Article title</h4>
+      <h4 id="read-drawer-label" class="mb-1.5 leading-none text-xl font-semibold text-gray-900 dark:text-white" x-text="title"></h4>
     </div>
     <button type="button" data-drawer-dismiss="drawer-read-product-advanced" aria-controls="drawer-read-product-advanced" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 absolute top-2.5 right-2.5 inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
       <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
@@ -79,8 +82,8 @@
       </svg>
       <span class="sr-only">Close menu</span>
     </button>
-    <p class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
-      Article full content
+    <h2 class="mb-2 font-semibold leading-none text-gray-900 dark:text-white" x-text="created"></h2>
+    <p id="read-drawer-label-content" class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
     </p>
   </div>
 
diff --git a/views/partials/article_row.hbs b/views/partials/article_row.hbs
index 8c7ab2a..b69ec9a 100644
--- a/views/partials/article_row.hbs
+++ b/views/partials/article_row.hbs
@@ -1,13 +1,14 @@
-<tr class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
+<tr id="row-{{ article.id }}"
+  x-data='{ title: "{{ article.title }}", created: "{{ article.created }}" }'
+  class="border-b dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
   <th scope="row" class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-    <div class="flex items-center mr-3">
-      {{ article.title }}
+    <div class="flex items-center mr-3" x-text="title">
     </div>
   </th>
   <td class="px-4 py-3">
     <span class="bg-primary-100 text-primary-800 text-xs font-medium px-2 py-0.5 rounded dark:bg-primary-900 dark:text-primary-300"> {{ article.content }} </span>
   </td>
-  <td class="px-4 py-3"> {{ article.created }} </td>
+  <td class="px-4 py-3" x-text="created"></td>
   <td class="px-4 py-3 font-medium text-gray-900 whitespace-nowrap dark:text-white">
     <div class="flex items-center space-x-4">
       <button type="button" data-drawer-target="drawer-update-product" data-drawer-show="drawer-update-product" aria-controls="drawer-update-product" class="py-2 px-3 flex items-center text-sm font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
@@ -17,14 +18,19 @@
         </svg>
         Edit
       </button>
-      <button type="button" data-drawer-target="drawer-read-product-advanced" data-drawer-show="drawer-read-product-advanced" aria-controls="drawer-read-product-advanced" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+      <button type="button"
+        @click="$dispatch('preview_article', { title: '{{ article.title }}', created: created })"
+        hx-get="/htmx/admin/modals/article/content/{{ article.id }}/"
+	hx-swap="outerHTML"
+        hx-target="#read-drawer-label-content"
+        data-drawer-target="drawer-read-product-advanced" data-drawer-show="drawer-read-product-advanced" aria-controls="drawer-read-product-advanced" class="py-2 px-3 flex items-center text-sm font-medium text-center text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-primary-700 focus:z-10 focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
         <svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2 -ml-0.5">
           <path d="M12 15a3 3 0 100-6 3 3 0 000 6z" />
           <path fill-rule="evenodd" clip-rule="evenodd" d="M1.323 11.447C2.811 6.976 7.028 3.75 12.001 3.75c4.97 0 9.185 3.223 10.675 7.69.12.362.12.752 0 1.113-1.487 4.471-5.705 7.697-10.677 7.697-4.97 0-9.186-3.223-10.675-7.69a1.762 1.762 0 010-1.113zM17.25 12a5.25 5.25 0 11-10.5 0 5.25 5.25 0 0110.5 0z" />
         </svg>
         Preview
       </button>
-      <button type="button" data-modal-target="delete-modal" data-modal-toggle="delete-modal" class="flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-2 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">
+      <button x-on:click="currentRowID = {{ article.id }}" type="button" data-modal-target="delete-modal" data-modal-toggle="delete-modal" class="flex items-center text-red-700 hover:text-white border border-red-700 hover:bg-red-800 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-3 py-2 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-2 -ml-0.5" viewbox="0 0 20 20" fill="currentColor" aria-hidden="true">
           <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
         </svg>