Enabling signature editing.
This commit is contained in:
Bryce Covert
@@ -9,7 +9,58 @@
|
||||
[cljs-time.core :as t]
|
||||
[clojure.spec.alpha :as s]
|
||||
[re-frame.core :as re-frame]
|
||||
[clojure.string :as str]))
|
||||
[reagent.core :as r]
|
||||
[clojure.string :as str]
|
||||
[react-signature-canvas :as canvas]
|
||||
[auto-ap.views.components.buttons :as buttons]))
|
||||
|
||||
(def signature-canvas (r/adapt-react-class (.-default canvas)))
|
||||
|
||||
(defn signature [{:keys [signature-file signature-data on-change]}]
|
||||
(let [canvas (atom nil)
|
||||
edit-mode? (r/atom false)
|
||||
w (* 1.5 464)
|
||||
h (* 1.5 174)]
|
||||
(fn [{:keys [signature-file signature-data on-change]}]
|
||||
[:div
|
||||
(if @edit-mode?
|
||||
[:div
|
||||
[signature-canvas {"canvasProps" {"width" w
|
||||
"height" h
|
||||
"style" #js {"border" "1px solid rgb(219,219,219)"
|
||||
"border-radius" "4px"}}
|
||||
"backgroundColor" "#FFF"
|
||||
:ref (fn [el]
|
||||
(reset! canvas el))}]
|
||||
[:div.buttons
|
||||
[:a.button.is-primary.is-outlined {:on-click (fn []
|
||||
(on-change (.toDataURL @canvas "image/jpeg"))
|
||||
(reset! edit-mode? false))}
|
||||
"Accept"]
|
||||
[:a.button.is-warning.is-outlined {:on-click (fn []
|
||||
(.clear @canvas)
|
||||
(reset! edit-mode? false))}
|
||||
"Cancel"]]]
|
||||
(if (or signature-data signature-file)
|
||||
[:div
|
||||
[:img {:src (or signature-data signature-file)
|
||||
:style {:width w
|
||||
:height h}}]
|
||||
[:div.buttons
|
||||
[:a.button {:on-click (fn []
|
||||
(reset! edit-mode? true))}
|
||||
"Replace Signature"]]]
|
||||
[:div
|
||||
[:div.has-text-centered.is-vcentered {:style {:width w
|
||||
:height h
|
||||
:margin-bottom "8px"
|
||||
:background "#EEE"}}
|
||||
"No signature"]
|
||||
[:div.buttons
|
||||
[:a.button.is-primary.is-outlined {:on-click (fn []
|
||||
(reset! edit-mode? true))}
|
||||
"New Signature"]]]))
|
||||
])))
|
||||
|
||||
(re-frame/reg-sub
|
||||
::can-submit
|
||||
@@ -23,56 +74,58 @@
|
||||
::new-client-request
|
||||
:<- [::forms/form ::form]
|
||||
(fn [{new-client-data :data} _]
|
||||
{:id (:id new-client-data),
|
||||
:name (:name new-client-data)
|
||||
:code (:code new-client-data) ;; TODO add validation can't change
|
||||
:email (:email new-client-data)
|
||||
:locations (mapv :location (:locations new-client-data))
|
||||
:matches (mapv :match (:matches new-client-data))
|
||||
:location-matches (:location-matches new-client-data)
|
||||
:week-a-credits (:week-a-credits new-client-data)
|
||||
:week-a-debits (:week-a-debits new-client-data)
|
||||
:week-b-credits (:week-b-credits new-client-data)
|
||||
:week-b-debits (:week-b-debits new-client-data)
|
||||
:address {:street1 (:street1 (:address new-client-data))
|
||||
:street2 (:street2 (:address new-client-data)),
|
||||
:city (:city (:address new-client-data))
|
||||
:state (:state (:address new-client-data))
|
||||
:zip (:zip (:address new-client-data))}
|
||||
:forecasted-transactions (map (fn [{:keys [id day-of-month identifier amount]}]
|
||||
{:id id
|
||||
:day-of-month day-of-month
|
||||
:identifier identifier
|
||||
:amount amount})
|
||||
(:forecasted-transactions new-client-data))
|
||||
:bank-accounts (map (fn [{:keys [number name check-number include-in-reports type id code start-date bank-name routing bank-code new? sort-order visible yodlee-account-id locations]}]
|
||||
{:number number
|
||||
:name name
|
||||
:check-number check-number
|
||||
:include-in-reports include-in-reports
|
||||
:start-date (cond (not start-date)
|
||||
nil
|
||||
(cond->
|
||||
{:id (:id new-client-data),
|
||||
:name (:name new-client-data)
|
||||
:code (:code new-client-data) ;; TODO add validation can't change
|
||||
:email (:email new-client-data)
|
||||
:locations (mapv :location (:locations new-client-data))
|
||||
:matches (mapv :match (:matches new-client-data))
|
||||
:location-matches (:location-matches new-client-data)
|
||||
:week-a-credits (:week-a-credits new-client-data)
|
||||
:week-a-debits (:week-a-debits new-client-data)
|
||||
:week-b-credits (:week-b-credits new-client-data)
|
||||
:week-b-debits (:week-b-debits new-client-data)
|
||||
:address {:street1 (:street1 (:address new-client-data))
|
||||
:street2 (:street2 (:address new-client-data)),
|
||||
:city (:city (:address new-client-data))
|
||||
:state (:state (:address new-client-data))
|
||||
:zip (:zip (:address new-client-data))}
|
||||
:signature-data (:signature-data new-client-data)
|
||||
:forecasted-transactions (map (fn [{:keys [id day-of-month identifier amount]}]
|
||||
{:id id
|
||||
:day-of-month day-of-month
|
||||
:identifier identifier
|
||||
:amount amount})
|
||||
(:forecasted-transactions new-client-data))
|
||||
:bank-accounts (map (fn [{:keys [number name check-number include-in-reports type id code start-date bank-name routing bank-code new? sort-order visible yodlee-account-id locations]}]
|
||||
{:number number
|
||||
:name name
|
||||
:check-number check-number
|
||||
:include-in-reports include-in-reports
|
||||
:start-date (cond (not start-date)
|
||||
nil
|
||||
|
||||
(instance? goog.date.Date start-date)
|
||||
(date->str start-date standard)
|
||||
(instance? goog.date.Date start-date)
|
||||
(date->str start-date standard)
|
||||
|
||||
:else
|
||||
start-date
|
||||
)
|
||||
:type type
|
||||
:id id
|
||||
:sort-order sort-order
|
||||
:visible visible
|
||||
:locations (mapv :location locations)
|
||||
:yodlee-account-id (when-not (str/blank? yodlee-account-id)
|
||||
(js/parseInt yodlee-account-id))
|
||||
:code (if new?
|
||||
(str (:code new-client-data) "-" code)
|
||||
code)
|
||||
:bank-name bank-name
|
||||
:routing routing
|
||||
:bank-code bank-code})
|
||||
(:bank-accounts new-client-data))}))
|
||||
:else
|
||||
start-date
|
||||
)
|
||||
:type type
|
||||
:id id
|
||||
:sort-order sort-order
|
||||
:visible visible
|
||||
:locations (mapv :location locations)
|
||||
:yodlee-account-id (when-not (str/blank? yodlee-account-id)
|
||||
(js/parseInt yodlee-account-id))
|
||||
:code (if new?
|
||||
(str (:code new-client-data) "-" code)
|
||||
code)
|
||||
:bank-name bank-name
|
||||
:routing routing
|
||||
:bank-code bank-code})
|
||||
(:bank-accounts new-client-data))})))
|
||||
|
||||
(re-frame/reg-event-fx
|
||||
::editing
|
||||
@@ -107,7 +160,7 @@
|
||||
:operation/name "EditClient"}
|
||||
:venia/queries [{:query/data [:edit-client
|
||||
{:edit-client new-client-req}
|
||||
[:id :name :code :email :locations :matches :week-a-debits :week-a-credits :week-b-debits :week-b-credits
|
||||
[:id :name :signature-file :code :email :locations :matches :week-a-debits :week-a-credits :week-b-debits :week-b-credits
|
||||
[:location-matches [:location :match :id]]
|
||||
[:address [:street1 :street2 :city :state :zip]]
|
||||
[:forecasted-transactions [:id :amount :identifier :day-of-month]]
|
||||
@@ -362,6 +415,7 @@
|
||||
:spec ::entity/name
|
||||
}])
|
||||
|
||||
|
||||
[:div.field
|
||||
[:p.help "Client code"
|
||||
]
|
||||
@@ -380,7 +434,12 @@
|
||||
:field :email
|
||||
:spec ::entity/email}])
|
||||
|
||||
|
||||
[:div.field
|
||||
[:p.help "Signature"]
|
||||
[signature {:signature-file (:signature-file new-client)
|
||||
:signature-data (:signature-data new-client)
|
||||
:on-change (fn [uri]
|
||||
(re-frame/dispatch [::forms/change ::form [:signature-data] uri]))}]]
|
||||
|
||||
[:h2.subtitle.is-5 "Name matches"]
|
||||
[:div.control
|
||||
|
||||
Reference in New Issue
Block a user