Check/Expense accounts much cleaner

.gitignore

@@ -20,3 +20,4 @@ data/
 private
 node_modules
 **/*.swp
+**/.DS_Store

resources/public/index.html

@@ -9,6 +9,7 @@
   <link href="/css/font.min.css" rel="stylesheet">
   <link rel="stylesheet" href="/css/bulma.min.css" integrity="sha256-HEtF7HLJZSC3Le1HcsWbz1hDYFPZCqDhZa9QsCgVUdw=" crossorigin="anonymous" />
   <link rel="stylesheet" href="/css/bulma-calendar.min.css" />
+  <link rel="stylesheet" href="/css/bulma-badge.min.css" />
 
   <style>
     form.dz {  border: 2px dashed lightgray;}
@@ -281,7 +282,8 @@
   background-color:#F5F5F5;
 }
     .table { table-layout: fixed }
-    .table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
+    .table td {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; padding: 9px; }
+    .table td.expandable {text-overflow: ellipsis; overflow: visible; white-space: nowrap; padding: 9px; }
 
     .typeahead {
     position:relative;

src/cljs/auto_ap/views/components/invoice_table.cljs

@@ -1,7 +1,7 @@
 (ns auto-ap.views.components.invoice-table
   (:require [re-frame.core :as re-frame]
             [auto-ap.subs :as subs]
-            [auto-ap.views.utils :refer [date->str dispatch-event]]
+            [auto-ap.views.utils :refer [date->str dispatch-event delayed-dispatch]]
             [auto-ap.views.components.paginator :refer [paginator]]
             [auto-ap.views.components.sorter :refer [sorted-column]]
             [reagent.core :as reagent]
@@ -14,6 +14,28 @@
 ;; TODO performance
 ;; TODO refactor graphql
 
+(re-frame/reg-event-fx
+ ::toggle-checks
+ (fn  [{:keys [db] } [_ invoice-id]]
+   {:db
+    (update-in db [::visible-checks] (fn [i] (if (= i invoice-id) nil invoice-id) ))}))
+
+(re-frame/reg-sub
+ ::visible-checks
+ (fn [db]
+   (::visible-checks db)))
+
+(re-frame/reg-event-fx
+ ::toggle-expense-accounts
+ (fn  [{:keys [db] } [_ invoice-id]]
+   {:db
+    (update-in db [::visible-expense-accounts] (fn [i] (if (= i invoice-id) nil invoice-id) ))}))
+
+(re-frame/reg-sub
+ ::visible-expense-accounts
+ (fn [db]
+   (::visible-expense-accounts db)))
+
 
 
 (defn query [params]
@@ -35,12 +57,18 @@
 
 (defn invoice-table [{:keys [id invoice-page status on-params-change vendors params check-boxes checked on-check-changed expense-event]}]
   (let [state (reagent/atom (or @params {}))
+        visible-checks @(re-frame/subscribe [::visible-checks])
+        visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
         opc (fn [p]
               (swap! state merge p)
               (on-params-change p))]
     (fn [{:keys [id invoice-page status on-params-change vendors checked]}]
       (let [{:keys [sort-by asc]} @state
-            {:keys [invoices start end count total]} @invoice-page]
+            {:keys [invoices start end count total]} @invoice-page
+            visible-checks @(re-frame/subscribe [::visible-checks])
+
+            visible-expense-accounts @(re-frame/subscribe [::visible-expense-accounts])
+            ]
         [:div
          [paginator {:start start :end end :count count :total total
                      :on-change (fn [p ]
@@ -96,13 +124,12 @@
                             :asc asc}
              "Outstanding"]
             
-            [sorted-column {:on-sort opc
+            [:th {
-                            :style {:width "8em" :cursor "pointer"}
+                            :style {:width "15em" :cursor "pointer"}
-                            :sort-key "total"
+                            
-                            :sort-by sort-by
+                            
-                            :asc asc}
+                            }
-             "Expense Accounts"]
+             ""]]]
-            [:th {:style {:width "10em"}} "" ]]]
           [:tbody
            (if (:loading @status)
              [:tr 
@@ -126,13 +153,51 @@
 
                 [:td (gstring/format "$%.2f" total )]
                 [:td (gstring/format "$%.2f" outstanding-balance )]
-                [:td (for [e expense-accounts]
+                [:td.expandable
-                       ^{:key (:id e)}
+                 (when (seq expense-accounts)
-                       [:a.tag {:on-click (dispatch-event (conj expense-event id))} (:name (:expense-account e)) " "(gstring/format "$%.2f" (:amount e) ) ])]
-                [:td (for [check checks]
-                       (if (:s3-url (:check check))
-                         ^{:key (:id check)}
-                         [:a.tag {:href (:s3-url (:check check)) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str  " " (:check-number (:check check)) " (" (gstring/format "$%.2f" (:amount check) ) ")")]
 
-                         ^{:key (:id check)}
+                   [:div.dropdown.is-right {:class (if (= id visible-expense-accounts)
-                         [:span.tag [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str  " " (:check-number (:check check)) " (" (gstring/format "$%.2f" (:amount check) ) ")")]))]]))]]]))))
+                                                     "is-active"
+                                                     "")}
+                    [:div.dropdown-trigger
+                     [:a.button.badge {:data-badge (str (clojure.core/count expense-accounts))
+                                       :aria-haspopup true
+                                       :tab-index "0"
+                                       
+                                       :on-blur (delayed-dispatch [::toggle-expense-accounts id]) 
+                                       :on-focus (dispatch-event [::toggle-expense-accounts id])
+                                       } "Accounts"]]
+                    [:div.dropdown-menu {:role "menu"}
+                     [:div.dropdown-content
+                      (for [e expense-accounts]
+                        ^{:key (:id e)}
+                        [:span.dropdown-item  (:name (:expense-account e)) " "(gstring/format "$%.2f" (:amount e) ) ])
+
+                      [:hr.dropdown-divider]
+
+                      [:a.dropdown-item.is-primary {:on-click (dispatch-event (conj expense-event id))} "Change"]]]])
+                 [:span {:style {:margin-left "1em"}}]
+                 (when (seq checks)
+
+                   [:div.dropdown.is-right {:class (if (= id visible-checks)
+                                                     "is-active"
+                                                     "")}
+                    [:div.dropdown-trigger
+                     [:a.button.badge {:data-badge (str (clojure.core/count checks))
+                                       :aria-haspopup true
+                                       :tab-index "0"
+                                       
+                                       :on-blur (delayed-dispatch [::toggle-checks id])
+                                       :on-focus (dispatch-event [::toggle-checks id])
+                                       } "Checks"]]
+                    [:div.dropdown-menu {:role "menu"}
+                     [:div.dropdown-content
+                      (for [check checks]
+                        (if (:s3-url (:check check))
+                          ^{:key (:id check)}
+                          [:a.dropdown-item {:href (:s3-url (:check check)) :target "_new"} [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str  " " (:check-number (:check check)) " (" (gstring/format "$%.2f" (:amount check) ) ")")]
+
+                          ^{:key (:id check)}
+                          [:span.dropdown-item [:i.fa.fa-money-check] [:span.icon [:i.fa.fa-money]] (str  " " (:check-number (:check check)) " (" (gstring/format "$%.2f" (:amount check) ) ")")]))]]])
+                 
+                 ]]))]]]))))

src/cljs/auto_ap/views/components/typeahead.cljs

@@ -31,7 +31,7 @@
                                        (do
                                          (select [nil "" nil])
                                          true)
-                                       true))}
+                                       false))}
             [:div.control
              [:div.tags.has-addons
               [:span.tag @text]

src/cljs/auto_ap/views/pages/unpaid_invoices.cljs

@@ -290,6 +290,7 @@
 (re-frame/reg-event-fx
  ::change-expense-accounts
  (fn [{:keys [db]} [_ id]]
+   (println "HELLLO")
    {:dispatch [::events/modal-status ::change-expense-accounts {:visible? true}]
     :db (assoc-in db [::change-expense-accounts :invoice] (get (by :id (get-in db [::invoice-page :invoices])) id))}))
 

src/cljs/auto_ap/views/utils.cljs

@@ -20,6 +20,11 @@
     (.preventDefault e)
     (re-frame/dispatch (conj event (.. e -target -value)))))
 
+(defn delayed-dispatch [e]
+  (fn [x]
+    (js/setTimeout #(re-frame/dispatch e) 150)
+    false))
+
 (defn dispatch-event [event]
   (fn [e]
     (when (.-stopPropagation e)