setting up sorted table.

This commit is contained in:
Bryce Covert
2018-04-12 14:59:15 -07:00
parent 812292b5aa
commit f41c0fcba7
4 changed files with 103 additions and 30 deletions

View File

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

View File

@@ -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])
status (re-frame/subscribe [::subs/status])]
[:div {:class "inbox-messages"}
[:h1.title "Unpaid invoices"]
(if (:loading @status)
[:div {:class "inbox-messages"}
[:h1.title
[: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]])]])]))
[:div {:class "inbox-messages"}
[:h1.title "Unpaid invoices"]
[invoice-table {:id :unpaid
:invoices (re-frame/subscribe [::subs/unpaid-invoices])
:status (re-frame/subscribe [::subs/status])
:on-params-change (fn [params]
(re-frame/dispatch [::params-change params])) }]])
{:component-will-mount #(re-frame/dispatch-sync [::events/view-unpaid-invoices]) }))