From 7991d556009dd02cf7a0cb7d19a224401bddecbe Mon Sep 17 00:00:00 2001
From: KKlochko <KKlochko@protonmail.com>
Date: Mon, 15 Apr 2024 11:15:17 +0300
Subject: [PATCH] Update the search to update without override other parameters
 and use alpinejs.

---
 views/admin_panel.hbs                               | 13 +++++++++++--
 views/index.hbs                                     |  1 -
 views/partials/search_articles.hbs                  | 12 +++++++++++-
 .../search_articles_update_param_script.hbs         |  9 ---------
 4 files changed, 22 insertions(+), 13 deletions(-)
 delete mode 100644 views/partials/search_articles_update_param_script.hbs

diff --git a/views/admin_panel.hbs b/views/admin_panel.hbs
index 78bdf52..3aff9dc 100644
--- a/views/admin_panel.hbs
+++ b/views/admin_panel.hbs
@@ -16,7 +16,16 @@
           </div>
         </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">
+          <div class="w-full md:w-1/2"
+               x-data="{
+                 search: new URLSearchParams(location.search).get('search')
+               }"
+               x-init="$watch('search', (value) => {
+                 const url = new URL(window.location.href);
+                 url.searchParams.set('search', value);
+                 history.replaceState(null, null, '?'+url.searchParams.toString());
+               })"
+          >
           <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">
@@ -27,6 +36,7 @@
               <input type="text"
                      id="search"
                      name="search"
+                     x-model="search"
                      hx-post="/htmx/admin/search/articles/"
                      hx-trigger="input changed delay:500ms, search"
                      hx-target="#articles"
@@ -174,5 +184,4 @@
   </div>
 </main>
 
-{{> search_articles_update_param_script }}
 
diff --git a/views/index.hbs b/views/index.hbs
index eec2d07..7b484a8 100644
--- a/views/index.hbs
+++ b/views/index.hbs
@@ -6,4 +6,3 @@
   {{> articles_briefly }}
 </main>
 
-{{> search_articles_update_param_script }}
diff --git a/views/partials/search_articles.hbs b/views/partials/search_articles.hbs
index 9a83a39..5183999 100644
--- a/views/partials/search_articles.hbs
+++ b/views/partials/search_articles.hbs
@@ -1,4 +1,13 @@
-<div class="max-w-md mx-auto">
+<div class="max-w-md mx-auto"
+     x-data="{
+       search: new URLSearchParams(location.search).get('search')
+     }"
+     x-init="$watch('search', (value) => {
+      const url = new URL(window.location.href);
+      url.searchParams.set('search', value);
+      history.replaceState(null, null, '?'+url.searchParams.toString());
+    })"
+  >
     <label for="default-search" class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white">Search</label>
     <div class="relative">
         <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
@@ -9,6 +18,7 @@
         <input type="search"
                id="search"
                name="search"
+               x-model="search"
                hx-post="/htmx/search/articles/"
                hx-trigger="input changed delay:500ms, search"
                hx-target="#articles"
diff --git a/views/partials/search_articles_update_param_script.hbs b/views/partials/search_articles_update_param_script.hbs
deleted file mode 100644
index 85f2215..0000000
--- a/views/partials/search_articles_update_param_script.hbs
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-  function updateURLSearchParameter() {
-    let search = htmx.find('#search')
-    let qp = new URLSearchParams();
-    qp.set('search', search.value);
-    history.replaceState(null, null, "?"+qp.toString());
-  }
-  document.querySelector('#search').addEventListener('input', updateURLSearchParameter);
-</script>