add money field.

src/cljs/auto_ap/views/components/expense_accounts_field.cljs

@@ -2,6 +2,7 @@
   (:require [auto-ap.forms :as forms]
             [auto-ap.subs :as subs]
             [auto-ap.views.components.typeahead :refer [typeahead typeahead-entity]]
+            [auto-ap.views.components.money-field :refer [money-field]]
             [auto-ap.views.utils :refer [bind-field dispatch-event ->$]]
             [goog.string :as gstring]
             [re-frame.core :as re-frame]
@@ -37,7 +38,7 @@
 
                 (update :amount js/parseFloat)
                 (assoc :amount-percentage  (* 100 (/ (js/parseFloat (:amount a))
-                                                     (Math/abs (js/parseFloat total)))))
+                                                     (Math/abs total))))
                 (assoc :amount-mode "$")))
           accounts))
     [{:id (str "new-" (random-uuid))
@@ -78,7 +79,7 @@
      (assoc ea :amount 
             (js/parseFloat
              (goog.string/format "%.2f"
-                                 (* (/ (js/parseFloat (:amount-percentage ea)) 100.0) (js/parseFloat total))))))
+                                 (* (/ (js/parseFloat (:amount-percentage ea)) 100.0) total)))))
    expense-accounts))
 
 (re-frame/reg-event-fx

src/cljs/auto_ap/views/components/money_field.cljs

@@ -0,0 +1,23 @@
+(ns auto-ap.views.components.money-field
+  (:require [reagent.core :as r]
+            [clojure.string :as str]))
+
+(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"}])))

src/cljs/auto_ap/views/pages/invoices/form.cljs

@@ -7,6 +7,7 @@
             [auto-ap.views.components.dropdown :refer [drop-down]]
             [auto-ap.views.components.expense-accounts-field :as expense-accounts-field :refer [expense-accounts-field recalculate-amounts]]
             [auto-ap.views.components.layouts :as layouts]
+            [auto-ap.views.components.money-field :refer [money-field]]
             [auto-ap.views.components.typeahead :refer [typeahead-entity]]
             [auto-ap.views.pages.invoices.common :refer [invoice-read]]
             [auto-ap.views.utils :refer [date->str date-picker dispatch-event standard with-user]]
@@ -133,7 +134,7 @@
                                    :client (:client edit-invoice)
                                    :expense-accounts (expense-accounts-field/from-graphql (:expense-accounts which)
                                                                                           accounts-by-id
-                                                                                          (:amount which)
+                                                                                          (:total which)
                                                                                           locations)})))))
 
 
@@ -268,12 +269,12 @@
 
 
       [field "Total"
-       [:input.input {:type "number"
-                      :field [:total]
-                      :disabled (if can-change-amount? "" "disabled")
-                      :min min-total
-                      :spec ::invoice/total
-                      :step "0.01"}]]
+       [money-field {:type "money"
+                     :field [:total]
+                     :disabled (if can-change-amount? "" "disabled")
+                     :min min-total
+                     :spec ::invoice/total
+                     :step "0.01"}]]
 
       [field nil
        [expense-accounts-field {:type "expense-accounts"

src/cljs/auto_ap/views/utils.cljs

@@ -247,6 +247,21 @@
         keys (dissoc keys :field :subscription :event :spec)]
     (into [dom keys] (with-keys rest))))
 
+(defmethod do-bind "money" [dom {:keys [field event subscription class spec] :as keys} & rest]
+  (let [field (if (keyword? field) [field] field)
+        event (if (keyword? event) [event] event)
+        keys (assoc keys
+                    :on-change (fn [x]
+                                            (re-frame/dispatch (-> event
+                                                                   (conj field)
+                                                                   (conj x))))
+                    :value (get-in subscription field)
+                    :class (str class
+                                (when (and spec (not (s/valid? spec (get-in subscription field))))
+                                  " is-danger")))
+        keys (dissoc keys :field :subscription :event :spec)]
+    (into [dom keys] (with-keys rest))))
+
 (defmethod do-bind :default [dom {:keys [field event subscription class spec] :as keys} & rest]
   (let [field (if (keyword? field) [field] field)
         event (if (keyword? event) [event] event)