added sortability

src/clj/auto_ap/db/invoices.clj

@@ -48,31 +48,31 @@
      (-> base-query
          (helpers/merge-where [:= :imported false])))))
 
-(defn add-sort-by [q sort-by]
+(defn add-sort-by [q sort-by asc]
   (let [sort-by-key (keyword sort-by)]
     (cond (all-keys  sort-by-key)
-          (helpers/merge-order-by q sort-by-key)
+          (helpers/merge-order-by q [sort-by-key (when-not asc :desc)])
 
           (= :vendor sort-by-key)
           (-> q
               (helpers/merge-left-join [:vendors :v] [:= :v.id :invoices.vendor-id] )
-              (helpers/merge-order-by [:v.name]))
+              (helpers/merge-order-by [:v.name (when-not asc :desc)]))
 
           (= :company sort-by-key)
           (-> q
               (helpers/merge-left-join [:companies :c] [:= :c.id :invoices.company-id] )
-              (helpers/merge-order-by [:c.name]))
+              (helpers/merge-order-by [:c.name (when-not asc :desc)]))
 
           :else
           q)))
 
 
-(defn get-graphql [{:keys [imported company-id sort-by]}]
+(defn get-graphql [{:keys [imported company-id sort-by asc]}]
   (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? sort-by) ) (add-sort-by sort-by))))
+     (not (nil? sort-by) ) (add-sort-by sort-by asc))))
 
 (defn import [parsed-invoices companies vendors]
   (insert-multi!

src/clj/auto_ap/graphql.clj

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

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

@@ -1,54 +1,57 @@
 (ns auto-ap.views.components.invoice-table
   (:require [re-frame.core :as re-frame]
-            [auto-ap.subs :as subs]))
+            [auto-ap.subs :as subs]
+            [reagent.core :as reagent]))
 
-(re-frame/reg-sub
+(defn toggle-sort-by [params key]
- ::invoices
+  (-> params
- (fn [db [_ id]]
+      (assoc :sort-by key)
-   (get-in db [:invoice-table id :invoices])))
+      (assoc :asc (if (:asc params)
+                    false
+                    true))))
 
-(re-frame/reg-sub
+(defn sort-icon [which sort-by asc]
- ::status
+  (cond
- (fn [db [_ id]]
+    (and (= sort-by which) asc)
-   (get-in db [:invoice-table id :status])))
+    [:span.icon
+     [:i.fa.fa-sort-up]]
 
-(re-frame/reg-event-fx
+    (and (= sort-by which) (not asc))
- ::mounted
+    [:span.icon
- (fn [{:keys [db] :as cofx} [_ id]]
+     [:i.fa.fa-sort-down]]
-   {: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]}}))
+    :else
-
+    [:span.icon
-(re-frame/reg-event-fx
+     [:i.fa.fa-sort]]))
- ::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%"}}
+  (let [state (reagent/atom {})]
-   [:thead  
+    (fn []
-    [:tr  
+      (let [{:keys [sort-by asc]} @state]
-     [:th {:on-click (fn [e] (on-params-change {:sort-by "vendor"}))}  "Vendor" ]
+        [:table {:class "table", :style {:width "100%"}}
-     [:th {:on-click (fn [e] (on-params-change {:sort-by "company"}))} "Company"]
+         [:thead  
-     [:th {:on-click (fn [e] (on-params-change {:sort-by "invoice-number"}))} "Invoice #"]
+          [:tr  
-     [:th {:on-click (fn [e] (on-params-change {:sort-by "date"}))} "Date"]
+           [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "vendor")))}  "Vendor"
-     [:th {:on-click (fn [e] (on-params-change {:sort-by "total"}))} "Amount"]]]
+            (sort-icon "vendor" sort-by asc)
-   [:tbody
+            ]
-    (if (:loading @status)
+           [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "company")))} "Company"
-      [:tr 
+            (sort-icon "company" sort-by asc)]
-       [:td {:col-span 5}
+           [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "invoice-number")))} "Invoice #"
-        [:i.fa.fa-spin.fa-spinner]]]
+            (sort-icon "invoice-number" sort-by asc)]
-      (for [{:keys [company invoice-number date total id vendor] :as i} @invoices]
+           [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "date")))} "Date"
-        ^{:key (str company "-" invoice-number "-" date "-" total "-" id)}
+            (sort-icon "date" sort-by asc)]
-        [:tr
+           [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "total")))} "Amount"
-         [:td (:name vendor)]
+            (sort-icon "total" sort-by asc)]]]
-         [:td (:name company)]
+         [:tbody
-         [:td invoice-number]
+          (if (:loading @status)
-         [:td date]
+            [:tr 
-         [:td total]]))]])
+             [: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

@@ -16,7 +16,8 @@
               :query-obj {:venia/queries [[:invoice
                                            {:imported true
                                             :company_id (:id @(re-frame/subscribe [::subs/company]))
-                                            :sort-by (:sort-by params)}
+                                            :sort-by (:sort-by params)
+                                            :asc (:asc params true)}
                                            [:id :total :invoice-number :date [:vendor [:name :id]] [:company [:name :id]]]]]} 
               :on-success [::events/received-invoices :unpaid]}}))