makes user page better.

src/clj/auto_ap/ssr/components/inputs.clj

@@ -1,12 +1,13 @@
 (ns auto-ap.ssr.components.inputs
-  (:require [hiccup2.core :as hiccup]
-            [auto-ap.ssr.svg :as svg]
-            [bidi.bidi :as bidi]))
+  (:require
+   [hiccup2.core :as hiccup]))
 
 (defn select- [params & children]
   (into 
-    [:select {:class (str (:class params) " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500")
-              :name  (:name params)}
+    [:select (-> params
+                 (dissoc :allow-blank? :value :options)
+                 (update 
+                   :class str  " bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"))
      (cond->> 
          (map (fn [[k v]]
                 [:option {:value k :selected (= k (:value params))} v])
@@ -15,35 +16,39 @@
     children))
 
 (defn typeahead- [params]
-  [:div {:class (:class params)}
+  [:div {}
    [:select (-> params
                 (dissoc :url)
-                (assoc :width ""))
+                (dissoc :value)
+                (assoc :width "")
+                )
     (for [[k v] (:value params)]
       [:option {:value k :selected true} v]
       )
-    [:script {:lang "javascript"}
-     (hiccup/raw (format "$(document).ready(function() {$(\"#%s\").select2({ajax: {url: '%s', dataType: 'json'}, minimumInputLength: 4, placeholder: \"%s\"})})"
-                         (:id params)
-                         (:url params)
-                         (or (:placeholder params)
-                             "Type to search")))]]])
+    ]
+   [:script {:lang "javascript"}
+    (hiccup/raw (format "
+(function () {
+var element = document.getElementById('%s');
+var c = new Choices(element, {removeItems: true, removeItemButton:true, searchFloor: 3});
+
+element.addEventListener('search', function (e) {
+    let data = fetch('%s?q=' + e.detail.value)
+    .then(res => res.json())
+    .then(data => {
+      c.setChoices(data, 'value', 'label', true)
+    });
+});
+element.addEventListener('choice', function (e) {
+c.clearChoices();
+    })
+})();
+
+"
+                        (:id params)
+                        (:url params)
+                        ))]])
 
-(defn typeahead-results- [{:keys [options]}]
-  [:ul 
-   (for [{:keys [id name]} options]
-     [:li  
-      [:div {:class "flex items-center pl-2 rounded hover:bg-green-100 dark:hover:bg-green-600"}
-       [:a {:href       "#"
-            :class "w-full py-2 ml-2 text-sm font-medium text-gray-900 rounded dark:text-gray-300"
-            #_#_:hx-put     (bidi/path-for ssr-routes/only-routes
-                                       :active-client
-                                       :request-method :put)
-            :hx-target  "#company-dropdown"
-            :hx-headers (format "{\"x-clients\": \"[%d]\"}" id)
-            :hx-swap    "outerHTML"
-            :hx-trigger "click"}
-        name]]])])
 
 (defn use-size [size]
   (if (= :small size)