setting up sorted table.

src/clj/auto_ap/db/invoices.clj

@@ -10,12 +10,14 @@
             [honeysql.core :as sql]
             [honeysql.helpers :as helpers]))
 
+(def all-keys #{:company-id :vendor-id :imported :potential-duplicate :total :invoice-number :date})
+
 (defn insert-multi! [rows]
   (j/insert-multi! (get-conn)
                    :invoices
                    (map clj->db rows)))
 
-(def base-query (sql/build :select :*
+(def base-query (sql/build :select :invoices.*
                            :from :invoices))
 
 
@@ -46,11 +48,31 @@
      (-> base-query
          (helpers/merge-where [:= :imported false])))))
 
-(defn get-graphql [{:keys [imported company-id]}]
+(defn add-sort-by [q sort-by]
+  (let [sort-by-key (keyword sort-by)]
+    (cond (all-keys  sort-by-key)
+          (helpers/merge-order-by q sort-by-key)
+
+          (= :vendor sort-by-key)
+          (-> q
+              (helpers/merge-left-join [:vendors :v] [:= :v.id :invoices.vendor-id] )
+              (helpers/merge-order-by [:v.name]))
+
+          (= :company sort-by-key)
+          (-> q
+              (helpers/merge-left-join [:companies :c] [:= :c.id :invoices.company-id] )
+              (helpers/merge-order-by [:c.name]))
+
+          :else
+          q)))
+
+
+(defn get-graphql [{:keys [imported company-id sort-by]}]
   (query
    (cond-> base-query
      (not (nil? imported)) (helpers/merge-where [:= :imported imported])
-     (not (nil? company-id)) (helpers/merge-where [:= :company-id company-id]))))
+     (not (nil? company-id)) (helpers/merge-where [:= :company-id company-id])
+     (not (nil? sort-by) ) (add-sort-by sort-by))))
 
 (defn import [parsed-invoices companies vendors]
   (insert-multi!

src/clj/auto_ap/graphql.clj

@@ -40,7 +40,8 @@
    :queries
    {:invoice {:type '(list :invoice)
               :args {:imported {:type 'Boolean}
-                     :company_id {:type 'Int}}
+                     :company_id {:type 'Int}
+                     :sort_by {:type 'String}}
               
               :resolve :get-invoice}
     :company {:type '(list :company)

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

@@ -0,0 +1,54 @@
+(ns auto-ap.views.components.invoice-table
+  (:require [re-frame.core :as re-frame]
+            [auto-ap.subs :as subs]))
+
+(re-frame/reg-sub
+ ::invoices
+ (fn [db [_ id]]
+   (get-in db [:invoice-table id :invoices])))
+
+(re-frame/reg-sub
+ ::status
+ (fn [db [_ id]]
+   (get-in db [:invoice-table id :status])))
+
+(re-frame/reg-event-fx
+ ::mounted
+ (fn [{:keys [db] :as cofx} [_ id]]
+   {:db (assoc-in db [:invoice-table id :status :loading] true )
+    :graphql {:token (-> cofx :db :user)
+              :query-obj {:venia/queries [[:invoice
+                                           {:imported false :company_id (:id @(re-frame/subscribe [::subs/company]))}
+                                           [:id :total :invoice-number :date [:vendor [:name :id]] [:company [:name :id]]]]]}
+              
+              :on-success [::received-invoices id]}}))
+
+(re-frame/reg-event-fx
+ ::received-invoices
+ (fn [{:keys [db] :as cofx} [_ id invoices]]
+   {:db (-> db
+            (assoc-in [:invoice-table id :invoices] (:invoice invoices))
+            (assoc-in [:invoice-table id :status :loading] false))}))
+
+(defn invoice-table [{:keys [id invoices status on-params-change]}]
+  [:table {:class "table", :style {:width "100%"}}
+   [:thead  
+    [:tr  
+     [:th {:on-click (fn [e] (on-params-change {:sort-by "vendor"}))}  "Vendor" ]
+     [:th {:on-click (fn [e] (on-params-change {:sort-by "company"}))} "Company"]
+     [:th {:on-click (fn [e] (on-params-change {:sort-by "invoice-number"}))} "Invoice #"]
+     [:th {:on-click (fn [e] (on-params-change {:sort-by "date"}))} "Date"]
+     [:th {:on-click (fn [e] (on-params-change {:sort-by "total"}))} "Amount"]]]
+   [:tbody
+    (if (:loading @status)
+      [:tr 
+       [:td {:col-span 5}
+        [:i.fa.fa-spin.fa-spinner]]]
+      (for [{:keys [company invoice-number date total id vendor] :as i} @invoices]
+        ^{:key (str company "-" invoice-number "-" date "-" total "-" id)}
+        [:tr
+         [:td (:name vendor)]
+         [:td (:name company)]
+         [:td invoice-number]
+         [:td date]
+         [:td total]]))]])

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

@@ -2,36 +2,32 @@
   (:require [re-frame.core :as re-frame]
             [auto-ap.entities.companies :as company]
             [auto-ap.entities.vendors :as vendor]
-            [auto-ap.subs :as subs]
             [auto-ap.events :as events]
-            ))
 
+            [auto-ap.views.components.invoice-table :refer [invoice-table]]
+            [auto-ap.subs :as subs]
+            [auto-ap.events :as events]))
+
+(re-frame/reg-event-fx
+ ::params-change
+ (fn [cofx [_ params]]
+   {:db (assoc-in (:db cofx) [:status :loading] true)
+    :graphql {:token (-> cofx :db :user)
+              :query-obj {:venia/queries [[:invoice
+                                           {:imported true
+                                            :company_id (:id @(re-frame/subscribe [::subs/company]))
+                                            :sort-by (:sort-by params)}
+                                           [:id :total :invoice-number :date [:vendor [:name :id]] [:company [:name :id]]]]]} 
+              :on-success [::events/received-invoices :unpaid]}}))
 
 (def unpaid-invoices-page
   (with-meta
     (fn []
-      (let [invoices (re-frame/subscribe [::subs/unpaid-invoices])
+      [:div {:class "inbox-messages"}
-            status (re-frame/subscribe [::subs/status])]
+       [:h1.title "Unpaid invoices"]
-        [:div {:class "inbox-messages"}
+       [invoice-table {:id :unpaid
-         [:h1.title "Unpaid invoices"]
+                       :invoices (re-frame/subscribe [::subs/unpaid-invoices])
-         (if (:loading @status)
+                       :status (re-frame/subscribe [::subs/status])
-           [:div {:class "inbox-messages"}
+                       :on-params-change (fn [params]
-            [:h1.title
+                                           (re-frame/dispatch [::params-change params])) }]])
-             [:i.fa.fa-spin.fa-spinner]]]
-           [:table {:class "table", :style {:width "100%"}}
-            [:thead  
-             [:tr  
-              [:th "Vendor"]
-              [:th "Customer"]
-              [:th "Invoice #"]
-              [:th "Date"]
-              [:th "Amount"]]]
-            [:tbody (for [{:keys [company invoice-number date total id vendor] :as i} @invoices]
-                      ^{:key (str company "-" invoice-number "-" date "-" total "-" id)}
-                      [:tr
-                       [:td (:name vendor)]
-                       [:td (:name company)]
-                       [:td invoice-number]
-                       [:td date]
-                       [:td total]])]])]))
     {:component-will-mount #(re-frame/dispatch-sync [::events/view-unpaid-invoices]) }))