setting up sorted table.

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]]))]])