making main form better.
This commit is contained in:
@@ -103,7 +103,6 @@
|
||||
updated-accounts (if-let [location (get-in updated-accounts [(first field) :account :location])]
|
||||
(assoc-in updated-accounts [(first field) :location] location)
|
||||
updated-accounts)]
|
||||
(println updated-accounts)
|
||||
{:dispatch (into event [updated-accounts])})))
|
||||
|
||||
|
||||
@@ -163,7 +162,6 @@
|
||||
[:div.column.is-narrow
|
||||
[:p.help "Location"]
|
||||
[:div.control
|
||||
(println account)
|
||||
(if-let [forced-location (:location account)]
|
||||
[:div.select
|
||||
[:select {:disabled "disabled" :style {:width "5em"} :value forced-location} [:option {:value forced-location} forced-location]]]
|
||||
|
||||
@@ -1,23 +1,71 @@
|
||||
(ns auto-ap.views.components.money-field
|
||||
(:require [reagent.core :as r]
|
||||
[clojure.string :as str]))
|
||||
[auto-ap.views.utils :refer [->short$]]
|
||||
[clojure.string :as str]
|
||||
[react :as react]))
|
||||
(def good-$ #"^\-?[0-9]+(\.[0-9][0-9])?$")
|
||||
|
||||
(defn money-field [{:keys [min max disabled on-change value]}]
|
||||
(let [parsed-amount (r/atom {:parsed value
|
||||
:raw (str value)})]
|
||||
(fn [{:keys [min max disabled on-change value]}]
|
||||
[:input.input {:type "number"
|
||||
:disabled disabled
|
||||
:on-change (fn [e]
|
||||
(let [raw (.. e -target -value)
|
||||
new-value (when (and raw (not (str/blank? raw)))
|
||||
(js/parseFloat raw))]
|
||||
(swap! parsed-amount assoc
|
||||
:raw raw
|
||||
:parsed new-value)
|
||||
(when (not= value new-value)
|
||||
(on-change new-value))))
|
||||
:value (:raw @parsed-amount)
|
||||
:min min
|
||||
:max max
|
||||
:step "0.01"}])))
|
||||
(defn -money-field [{:keys [min max disabled on-change value class style]}]
|
||||
(let [[ parsed-amount set-parsed-amount] (react/useState {:parsed value
|
||||
:raw (cond
|
||||
(str/blank? value)
|
||||
""
|
||||
|
||||
(js/Number.isNaN (js/parseFloat value))
|
||||
""
|
||||
|
||||
:else
|
||||
(->short$ (js/parseFloat value)))})]
|
||||
(react/useEffect (fn []
|
||||
;; allow the controlling field to change the raw representation
|
||||
;; when the raw amount is a valid representation, so that 33.
|
||||
;; doesn't get unset
|
||||
(when (or
|
||||
(and (:raw parsed-amount)
|
||||
(re-find good-$ (:raw parsed-amount)))
|
||||
(str/blank? (:raw parsed-amount)))
|
||||
(set-parsed-amount
|
||||
(assoc parsed-amount
|
||||
:parsed value
|
||||
:raw (cond
|
||||
(str/blank? value)
|
||||
""
|
||||
|
||||
(js/Number.isNaN (js/parseFloat value))
|
||||
""
|
||||
|
||||
:else
|
||||
(->short$ (js/parseFloat value))))))
|
||||
nil))
|
||||
[:div.control.has-icons-left
|
||||
[:input.input {:type "text"
|
||||
:disabled disabled
|
||||
:class class
|
||||
:on-change (fn [e]
|
||||
(let [raw (.. e -target -value)
|
||||
new-value (when (and raw
|
||||
(not (str/blank? raw))
|
||||
(re-find good-$ raw))
|
||||
(js/parseFloat raw))]
|
||||
(set-parsed-amount {:raw raw
|
||||
:parsed new-value})
|
||||
(when (not= value new-value)
|
||||
(on-change new-value))))
|
||||
:value (or (:raw parsed-amount)
|
||||
"")
|
||||
:on-blur (fn []
|
||||
(when-not (re-find good-$ (:raw parsed-amount))
|
||||
|
||||
(set-parsed-amount {:raw ""
|
||||
:parsed nil})
|
||||
(on-change nil)))
|
||||
:min min
|
||||
:max max
|
||||
:step "0.01"
|
||||
:style (or style
|
||||
{:width "8em"})}]
|
||||
[:span.icon.is-left
|
||||
[:i.fa.fa-usd]]]))
|
||||
|
||||
(defn money-field []
|
||||
[:f> -money-field (r/props (r/current-component))])
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
::search-completed
|
||||
(fn [_ [_ set-items set-loading-status result]]
|
||||
(set-loading-status nil)
|
||||
(set-items (:search-results result))
|
||||
(set-items (into-array (:search-results result)))
|
||||
{}))
|
||||
(re-frame/reg-event-fx
|
||||
::search-failed
|
||||
@@ -54,31 +54,40 @@
|
||||
(re-frame/reg-event-fx
|
||||
::input-value-changed
|
||||
(fn [_ [_ input-value search-query set-items set-loading-status]]
|
||||
(set-items [])
|
||||
(set-items #js [])
|
||||
(when (> (count input-value) 2)
|
||||
(set-loading-status :loading)
|
||||
{:dispatch-debounce {:event [::input-value-settled input-value search-query set-items set-loading-status]
|
||||
:time 250
|
||||
:key ::input-value-settled}})))
|
||||
|
||||
(defn typeahead-v3-internal [{:keys [class entity->text entities on-input-change style ^js on-change disabled value name auto-focus] :or {disabled false} :as i}]
|
||||
(let [[items set-items] (react/useState (or (clj->js entities)
|
||||
(defn typeahead-v3-internal [{:keys [class entity->text entities on-input-change style ^js on-change disabled value name auto-focus] :or {disabled false}
|
||||
prop-value :value
|
||||
:as i}]
|
||||
(let [[items set-items] (react/useState (or entities
|
||||
[]))
|
||||
[focused set-focus] (react/useState (boolean auto-focus))
|
||||
[loading-status set-loading-status] (react/useState false)
|
||||
[value set-value] (react/useState value)
|
||||
|
||||
;; resets internal representation of value when props change
|
||||
_ (react/useEffect (fn []
|
||||
(set-value prop-value)))
|
||||
[getMenuProps getComboboxProps getInputProps getItemProps isOpen highlightedIndex selectItem selectedItem setInputValue]
|
||||
(as-> (useCombobox (clj->js {:items items
|
||||
:defaultHighlightedIndex 0
|
||||
:defaultSelectedItem value
|
||||
:itemToString (fn []
|
||||
;; once an item is selected, you just use empty text
|
||||
"")
|
||||
:onInputValueChange (fn [input]
|
||||
(on-input-change input set-items set-loading-status))
|
||||
:stateReducer state-reducer
|
||||
:onSelectedItemChange (fn [z]
|
||||
(when on-change
|
||||
(on-change (js->clj (aget z "selectedItem") :keywordize-keys true))))})) $
|
||||
(as-> (useCombobox #js {:items (into-array items)
|
||||
:defaultHighlightedIndex 0
|
||||
:defaultSelectedItem value
|
||||
:itemToString (fn []
|
||||
;; once an item is selected, you just use empty text
|
||||
"")
|
||||
:onInputValueChange (fn [input]
|
||||
(on-input-change input set-items set-loading-status))
|
||||
:stateReducer state-reducer
|
||||
:selectedItem value
|
||||
:onSelectedItemChange (fn [z]
|
||||
(set-value (aget z "selectedItem"))
|
||||
(when on-change
|
||||
(on-change (aget z "selectedItem"))))}) $
|
||||
(map #(aget $ %) ["getMenuProps" "getComboboxProps" "getInputProps" "getItemProps" "isOpen" "highlightedIndex" "selectItem" "selectedItem" "setInputValue"]))]
|
||||
[:<>
|
||||
[:div.typeahead (assoc (js->clj (getComboboxProps))
|
||||
@@ -110,7 +119,7 @@
|
||||
[:div.level-item
|
||||
[:div.control
|
||||
[:div.tags.has-addons
|
||||
[:span.tag (:name (js->clj selectedItem :keywordize-keys true))]
|
||||
[:span.tag (:name selectedItem)]
|
||||
(when name
|
||||
[:input {:type "hidden" :name name :value (:id (js->clj selectedItem :keywordize-keys true))}])
|
||||
(when-not disabled
|
||||
@@ -166,11 +175,12 @@
|
||||
(fn [input set-items]
|
||||
(if entities-by-id
|
||||
(do
|
||||
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
|
||||
clj->js
|
||||
(take 10)
|
||||
(set-items)))
|
||||
(set-items
|
||||
(into-array
|
||||
(->> (.search entity-index (or (aget input "inputValue") "") #js {:fuzzy 0.2} )
|
||||
(take 10)))))
|
||||
|
||||
(set-items (map clj->js (take 10 (filter (fn [x] (str/includes? (or (some-> (entity->text x) str/lower-case) "")
|
||||
(or (some-> (aget input "inputValue") str/lower-case) "")))
|
||||
entities)))))))]])
|
||||
(set-items (into-array
|
||||
(take 10 (filter (fn [x] (str/includes? (or (some-> (entity->text x) str/lower-case) "")
|
||||
(or (some-> (aget input "inputValue") str/lower-case) "")))
|
||||
entities)))))))]])
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
:name name
|
||||
:print-as print-as
|
||||
:terms (or (str->int terms)
|
||||
0)
|
||||
nil)
|
||||
:default-account-id (:id default-account)
|
||||
:address address
|
||||
:primary-contact primary-contact
|
||||
|
||||
Reference in New Issue
Block a user