adding new invoices.

resources/public/index.html

@@ -12,7 +12,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css" integrity="sha256-HEtF7HLJZSC3Le1HcsWbz1hDYFPZCqDhZa9QsCgVUdw=" crossorigin="anonymous" />
 
   <style>
-    form {  border: 2px dashed lightgray;}
+    form.dz {  border: 2px dashed lightgray;}
 
     html,body {
   font-family: 'Open Sans', serif;

src/cljs/auto_ap/db.cljs

@@ -5,4 +5,5 @@
    :invoices {:pending #{}
               :unpaid #{}}
    :status {:loading false}
+   :new-invoice {}
    })

src/cljs/auto_ap/effects.cljs

@@ -14,9 +14,11 @@
 
 (re-frame/reg-fx
  :http
- (fn [{:keys [method uri on-success]}]
+ (fn [{:keys [method uri on-success body headers]}]
    (go
      (->> (http/request {:method method
+                         :body body
+                         :headers headers
                         :url uri})
          (<! )
          :body

src/cljs/auto_ap/events.cljs

@@ -52,6 +52,21 @@
            :uri "/api/invoices/reject"
            :on-success [::received-invoices :pending]
            }}))
+(re-frame/reg-event-db
+ ::submitted-new-invoice
+ (fn  [db [_ invoice]]
+   (assoc db :new-invoice {})))
+
+(re-frame/reg-event-fx
+ ::submit-new-invoice
+ (fn  [{:keys [db]} [_ invoice]]
+
+   {:http {:method :post
+           :uri "/api/invoices"
+           :body (pr-str {:rows [(assoc invoice :imported true)]})
+           :headers {"Content-Type" "application/edn"}
+           :on-success [::submitted-new-invoice]}
+    :db (assoc-in db [:new-invoice :loading?] true)}))
 
 (re-frame/reg-event-db
  ::received-invoices
@@ -60,3 +75,8 @@
        (assoc-in [:invoices type] new-invoices)
        (assoc-in [:status :loading] false)
        )))
+
+(re-frame/reg-event-db
+ ::change-form-state
+ (fn  [db [_ target value]]
+   (assoc-in db target value)))

src/cljs/auto_ap/routes.cljs

@@ -5,4 +5,5 @@
                   "invoices/" {""  :invoices
                                "import" :import-invoices
                                "unpaid" :unpaid-invoices
-                               "paid" :paid-invoices}}])
+                               "paid" :paid-invoices
+                               "new" :new-invoice}}])

src/cljs/auto_ap/subs.cljs

@@ -25,3 +25,8 @@
  ::status
  (fn [db]
    (:status db)))
+
+(re-frame/reg-sub
+ ::new-invoice-form
+ (fn [db]
+   (:new-invoice db)))

src/cljs/auto_ap/views.cljs

@@ -17,7 +17,7 @@
 (def dropzone
   (with-meta
     (fn []
-      [:form {:action "/pdf-upload"}
+      [:form.dz {:action "/pdf-upload"}
        [:div.tile.notification
         [:div.has-text-centered {:style {:padding "80px 0px" :width "100%"}}
          [:span
@@ -133,6 +133,66 @@
       {:component-will-mount (fn []
                                (re-frame/dispatch [::events/view-pending-invoices]))})])
 
+
+(defmethod active-page :new-invoice []
+  (let [form-data (re-frame/subscribe [::subs/new-invoice-form])]
+    [:div {:class "inbox-messages"}
+     [:form 
+      [:h1.title "New Invoice"]
+      [:div.field
+       [:label.label "Customer"]
+       [:div.control
+        [:input.input {:type "text"
+                       :placeholder "Campbell's Brewery"
+                       :value (:customer-identifier @form-data)
+                       :on-change (fn [e]
+                                    (re-frame/dispatch [::events/change-form-state
+                                                        [:new-invoice :customer-identifier]
+                                                        (.. e -target -value)]))}]]]
+      [:div.field
+       [:label.label "Invoice #"]
+       [:div.control
+        [:input.input {:type "text"
+                       :placeholder "12345"
+                       :value (:invoice-number @form-data)
+                       :on-change (fn [e]
+                                    (re-frame/dispatch [::events/change-form-state
+                                                        [:new-invoice :invoice-number]
+                                                        (.. e -target -value)]))}]]]
+      [:div.field
+       [:label.label "Date"]
+       [:div.control
+        [:input.input {:type "text"
+                       :placeholder "11/11/2011"
+                       :value (:date @form-data)
+                       :on-change (fn [e]
+                                    (re-frame/dispatch [::events/change-form-state
+                                                        [:new-invoice :date]
+                                                        (.. e -target -value)]))}]]]
+      [:div.field
+       [:label.label "Total"]
+       [:div.control
+        [:input.input {:type "text"
+                       :placeholder "$14.50"
+                       :value (:total @form-data)
+                       :on-change (fn [e]
+                                    (re-frame/dispatch [::events/change-form-state
+                                                        [:new-invoice :total]
+                                                        (.. e -target -value)]))}]]]
+      [:div.control
+       [:submit.button.is-large.is-primary {
+                                            :disabled (if (and (:total @form-data) (:date @form-data) (:customer-identifier @form-data) (:invoice-number @form-data))
+                                                       ""
+                                                       "disabled")
+                                            :on-click
+                                           (fn [x]
+                                             (.preventDefault x)
+                                             (re-frame/dispatch [::events/submit-new-invoice @form-data]))}
+        [:span
+         (when (:loading? @form-data)
+           [:i.fa.fa-spin.fa-spinner])
+         "Save"]]]]]))
+
 (defn main-panel []
   (let [name (re-frame/subscribe [::subs/name])
         ap (re-frame/subscribe [::subs/active-page])]
@@ -190,7 +250,7 @@
 
        [:div.left-nav
         [:div {:class "compose has-text-centered"}
-         [:a {:class "button is-danger is-block is-bold"}
+         [:a {:class "button is-danger is-block is-bold" :href (bidi/path-for routes/routes :new-invoice)}
           [:span {:class "compose"} "New Invoice"]]]]]
       [:div {:class "column messages hero is-fullheight", :id "message-feed"}
        [active-page @ap]]]