From fc64f81aced5adc99af7370d5654a1f031a9c4b2 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Sat, 12 Oct 2024 20:19:22 -0700
Subject: [PATCH] progress on sheet

---
 src/clj/auto_ap/ssr/components/inputs.clj | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/clj/auto_ap/ssr/components/inputs.clj b/src/clj/auto_ap/ssr/components/inputs.clj
index b5927407..19a5fb26 100644
--- a/src/clj/auto_ap/ssr/components/inputs.clj
+++ b/src/clj/auto_ap/ssr/components/inputs.clj
@@ -130,14 +130,16 @@
        "No results found"]]]]])
 
 (defn multi-typeahead- [params]
-  (println "VALUE IS" (:value params))
   [:div.relative {:x-data (hx/json {:open false
                                     :baseUrl (if (str/includes? (:url params) "?")
                                                (str (:url params) "&q=")
                                                (str (:url params) "?q="))
-                                    :value (map (fn [v] {:value ((:value-fn params identity) v)
-                                                         :label ((:content-fn params identity) v)})
+                                    :value (map (fn [v] ((:value-fn params identity) v))
                                                 (:value params))
+                                    :lookup (into {}
+                                                  (map (fn [v] [ ((:value-fn params identity) v)
+                                                                ((:content-fn params identity) v)])
+                                                       (:value params)))
                                     :x-init (str "$watch('value', v => $dispatch('change')); ")
                                     :search ""
                                     :active -1
@@ -148,7 +150,7 @@
                                     :warning_badge nil})
                   ;; :x-modelable "value.value" TODO
                   ;; :x-model (:x-model params) TODO
-                  :x-init "popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 10]}}})
+                  :x-init "value=new Set(value || []); popper = Popper.createPopper($refs.input, $refs.dropdown, {placement: 'bottom-start', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [0, 10]}}})
                   warning_badge = Popper.createPopper($refs.warning_badge, $refs.warning_pop, {placement: 'top', strategy: 'fixed', modifiers: {name: 'offset', options: {offset: [10,0 ]}}})"}
    (if (:disabled params)
      [:span {:x-text "value.label"}]
@@ -159,15 +161,15 @@
           :tabindex                     0
           :x-init                       (:x-init params)
           :x-ref                        "input"}
-      [:template {:x-for "v in value"}
+      [:template {:x-for "v in Array.from(value.values())"}
        [:input (-> params
                    (dissoc :class :value-fn :content-fn :placeholder :x-model)
                    (assoc
                     :type    "hidden"
-                    "x-bind:value" "v.value"
+                    "x-bind:value" "v"
                     ))]]
       [:div.flex.w-full.justify-items-stretch
-       [:span.flex-grow.text-left [:span {"x-text" "value.length"} ]
+       [:span.flex-grow.text-left [:span {"x-text" "value.size"} ]
         " selected"]
        
        [:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
@@ -205,7 +207,7 @@
              "placeholder"            (:placeholder params)
              "@keydown.down.prevent"  "active ++; active = active >= elements.length - 1 ? elements.length - 1 : active"
              "@keydown.up.prevent"    "active --; active = active < 0 ? 0 : active"
-             "@keydown.enter.prevent.stop" "if ($data.elements[active]) { value.push($data.elements[active]) }"
+             "@keydown.enter.prevent.stop" "if ($data.elements[active]) { if (value.has($data.elements[active].value)) { value.delete($data.elements[active].value) } else {value.add($data.elements[active].value); lookup[$data.elements[active].value] = $data.elements[active].label} } "
              "x-init"                 "$watch('search', s => { if($el.value.length > 2) {fetch(baseUrl + s).then(data=>data.json()).then(data => {elements = data; active=-1}) }})"}]
     [:div.dropdown-options {:class "rounded-b-lg overflow-hidden"}
      [:template {:x-for "(element, index) in elements"}
@@ -215,9 +217,9 @@
             ":class"         "active == index ? 'active' : ''"
             "@mouseover"     "active = index"
             "@mouseout"      "active = -1"
-            "@click.prevent" "value.push({value: element.value, label: element.label});"
+            "@click.prevent" "if (value.has(element.value)) { value.delete(element.value) } else {value.add(element.value); lookup[element.value] = element.label}"
             }
-        [ :input {:type "checkbox" ":checked" "value.map(i=>i.value).includes(element.value)"} ]
+        [ :input {:type "checkbox" ":checked" "value.has(element.value)"} ]
         [:span {"x-html"         "element.label"}]]]]
      [:template {:x-if "elements.length == 0"}
       [:li {:class "px-4 py-2 flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-500 text-gray-800  dark:text-gray-100 text-xs "}