notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

improve look of search

Browse Source
This commit is contained in:
Bryce
2024-10-16 15:37:22 -07:00
parent 70e76347e3
commit acaa2a7d1e
5 changed files with 75 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
src/clj/auto_ap/ssr/components/inputs.clj
View File

@@ -36,6 +36,14 @@
(:allow-blank? params) (conj [:option {:value "" :selected (not (:value params))} ""]))]
children))
(defn checkbox- [params & rest]
(if (seq rest)
[:label {:class "text-sm text-gray-800 dark:text-gray-300"}
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})]
[:span.ml-2
rest]]
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})
]))
(defn typeahead- [params]
[:div.relative {:x-data (hx/json { :baseUrl (if (str/includes? (:url params) "?")
@@ -113,6 +121,64 @@
[: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 "}
"No results found"]]]]]])
(defn multi-typeahead-dropdown- [params]
[:template {:x-ref "dropdown"}
[:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1 p-4"
"@keydown.escape.prevent" "tippy.hide();"
:x-destroy "if ($refs.input) {$refs.input.focus();}"}
[:div {:class (-> "relative"
#_(hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full"))}
[:div {:class "absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"}
[:svg {:class "w-4 h-4 text-gray-500 dark:text-gray-400", :aria-hidden "true", :xmlns "http://www.w3.org/2000/svg", :fill "none", :viewbox "0 0 20 20"}
[:path {:stroke "currentColor", :stroke-linecap "round", :stroke-linejoin "round", :stroke-width "2", :d "m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"}]]]
[:input {:type "text"
:class (-> (:class params)
(or "")
(hh/add-class "block w-full p-2 ps-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 focus:border-blue-500 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")
(hh/add-class default-input-classes))
"x-model" "search"
"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]) { 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" " $el.focus(); $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 "overflow-hidden divide-y divide-gray-200 "}
[:template {:x-for "(element, index) in elements"}
[:li {":style" "index == 0 && 'border: 0 !important;'"}
[:label {:class "p-3 rounded flex gap-2 items-center outline-0 focus:bg-neutral-100 hover:bg-neutral-100 whitespace-nowrap [&.active]:bg-primary-300 [&.active]:dark:bg-primary-700 text-gray-800 dark:text-gray-100 cursor-pointer"
:href "#"
":class" "active == index ? 'active' : ''"
"@mouseover" "active = index"
"@mouseout" "active = -1"
"@click.prevent" "if (value.has(element.value)) { value.delete(element.value) } else {value.add(element.value); lookup[element.value] = element.label}"}
(checkbox- {":checked" "value.has(element.value)"}
)
#_[:input {:type "checkbox" }]
[:span {"x-html" "element.label"}]]]]
[:template {:x-if "elements.length == 0"}
[:li {:class "px-4 pt-4 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 " "style" "border: 0 !important"}
"No results found"]]]]])
(defn multi-typeahead-selected-pill- [params]
[:div.flex-grow.flex
[:template {:x-if "value.size > 0"}
[:a.bg-blue-100.rounded-full.px-3 {:x-tooltip "{content: ()=>$refs.selected_tt.innerHTML, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, placement: 'bottom', theme: 'light', allowHTML: true, appendTo: $el}"}
[:span.text-left {:x-ref "source"}
[:span {"x-text" "value.size"}]
" selected"]
[:template {:x-ref "selected_tt"}
[:div.flex.flex-wrap.gap-4.w-64.p-4
[:template {:x-for "v in Array.from(value.values())"}
[:div.bg-green-50.rounded-full.px-3.text-ellipsis.whitespace-nowrap.shrink.overflow-hidden.text-green-800 {:x-text "lookup[v]"}]]]]]]
[:template {:x-if "value.size == 0"}
[:span.text-left.text-gray-400 "None selected"]]
[:div {:class "w-4 h-4 ml-2 inline text-gray-500 self-center rounded-full bg-gray-100 text-gray-500"
"@click.prevent.stop" "value = new Set([])"
:x-show "value.size > 0"}
svg/x]])
(defn multi-typeahead- [params]
[:div.relative {:x-data (hx/json {:baseUrl (if (str/includes? (:url params) "?")
(str (:url params) "&q=")
@@ -151,23 +217,7 @@
:type "hidden"
"x-bind:value" "v"))]]
[:div.flex.w-full.justify-items-stretch
[:div.flex-grow.flex
[:template {:x-if "value.size > 0"}
[:a.bg-blue-100.rounded-full.px-3 {:x-tooltip "{content: ()=>$refs.selected_tt.innerHTML, popperOptions: {strategy: 'fixed', modifiers: [{name: 'flip', options: {fallbackPlacements: ['top']}}]}, placement: 'bottom', theme: 'light', allowHTML: true, appendTo: $el}"}
[:span.text-left {:x-ref "source"}
[:span {"x-text" "value.size"}]
" selected"]
[:template {:x-ref "selected_tt"}
[:div.flex.flex-wrap.gap-4.w-64.p-4
[:template {:x-for "v in Array.from(value.values())"}
[:div.bg-green-50.rounded-full.px-3.text-ellipsis.whitespace-nowrap.shrink.overflow-hidden.text-green-800 {:x-text "lookup[v]"}]]]]]]
[:template {:x-if "value.size == 0"}
[:span.text-left.text-gray-400 "None selected"]]
[:div {:class "w-4 h-4 ml-2 inline text-gray-500 self-center rounded-full bg-gray-100 text-gray-500"
"@click.prevent.stop" "value = new Set([])"
:x-show "value.size > 0"}
svg/x]]
(multi-typeahead-selected-pill- params)
[:div {:class "w-3 h-3 m-1 inline ml-1 justify-self-end text-gray-500 self-center"}
svg/drop-down]
[:div {:x-show "value.warning"
@@ -180,36 +230,7 @@
:x-ref "warning_pop"
:class "hidden peer-hover:block bg-red-50 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 p-4"
:x-text "value.warning"}]]]
[:template {:x-ref "dropdown"}
[:ul.dropdown-contents {:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 ring-1"
"@keydown.escape.prevent" "tippy.hide();"
:x-destroy "if ($refs.input) {$refs.input.focus();}"}
[:input {:type "text"
:class (-> (:class params)
(or "")
(hh/add-class default-input-classes)
(hh/replace-wildcard ["rounded" "border"] "border-bottom bg-gray-100 rounded-t-lg w-full"))
"x-model" "search"
"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]) { 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" " $el.focus(); $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"}
[:li
[:label {: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-300 [&.active]:dark:bg-primary-700 text-gray-800 dark:text-gray-100 cursor-pointer"
:href "#"
":class" "active == index ? 'active' : ''"
"@mouseover" "active = index"
"@mouseout" "active = -1"
"@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.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 "}
"No results found"]]]]]])])
(multi-typeahead-dropdown- params) ])])
(defn use-size [size]
@@ -328,14 +349,7 @@
(defn hidden- [{:keys [name value] :as params}]
[:input (merge {:type "hidden" :value value :name name} params)])
(defn checkbox- [params & rest]
(if (seq rest)
[:label {:class "text-sm text-gray-800 dark:text-gray-300"}
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})]
[:span.ml-2
rest]]
[:input (merge params {:type "checkbox" :class (hh/add-class default-checkbox-classes (:class params ""))})
]))
(defn toggle- [params & children]
[:label {:class "inline-flex items-center cursor-pointer"}

1
src/clj/auto_ap/ssr/ledger/balance_sheet.clj
View File

@@ -310,6 +310,7 @@
(com/validated-inline-field
{:label "Customers" :errors (fc/field-errors)}
(com/multi-typeahead {:name (fc/field-name)
:placeholder "Search for companies..."
:class "w-64"
:id "client"
:url (bidi/path-for ssr-routes/only-routes :company-search)

1
src/cljs/auto_ap/views/pages/ledger/balance_sheet.cljs
View File

@@ -74,7 +74,6 @@
(assoc :client-ids (map (comp :id :client) (:clients (:data db)))))
[[:balance-sheet-accounts [:name :amount :account-type :id :numeric-code :client-id]]
[:comparable-balance-sheet-accounts [:name :amount :account-type :id :client-id :numeric-code]]]]]}
:owns-state {:single ::page}
:on-success [::received]}}))