From 38d9c1a1d30b7d653ca7064129ec9bff55326b7c Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Thu, 12 Apr 2018 15:26:18 -0700 Subject: [PATCH] added sortability --- src/clj/auto_ap/db/invoices.clj | 12 +-- src/clj/auto_ap/graphql.clj | 3 +- .../views/components/invoice_table.cljs | 95 ++++++++++--------- .../auto_ap/views/pages/unpaid_invoices.cljs | 3 +- 4 files changed, 59 insertions(+), 54 deletions(-) diff --git a/src/clj/auto_ap/db/invoices.clj b/src/clj/auto_ap/db/invoices.clj index 75dd3d54..e35027c0 100644 --- a/src/clj/auto_ap/db/invoices.clj +++ b/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! diff --git a/src/clj/auto_ap/graphql.clj b/src/clj/auto_ap/graphql.clj index 78b89416..31b1be83 100644 --- a/src/clj/auto_ap/graphql.clj +++ b/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) diff --git a/src/cljs/auto_ap/views/components/invoice_table.cljs b/src/cljs/auto_ap/views/components/invoice_table.cljs index c54b4a27..46a24f77 100644 --- a/src/cljs/auto_ap/views/components/invoice_table.cljs +++ b/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 - ::invoices - (fn [db [_ id]] - (get-in db [:invoice-table id :invoices]))) +(defn toggle-sort-by [params key] + (-> params + (assoc :sort-by key) + (assoc :asc (if (:asc params) + false + true)))) -(re-frame/reg-sub - ::status - (fn [db [_ id]] - (get-in db [:invoice-table id :status]))) +(defn sort-icon [which sort-by asc] + (cond + (and (= sort-by which) asc) + [:span.icon + [:i.fa.fa-sort-up]] -(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]}})) + (and (= sort-by which) (not asc)) + [:span.icon + [:i.fa.fa-sort-down]] -(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))})) + :else + [:span.icon + [:i.fa.fa-sort]])) (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]]))]]) + (let [state (reagent/atom {})] + (fn [] + (let [{:keys [sort-by asc]} @state] + [:table {:class "table", :style {:width "100%"}} + [:thead + [:tr + [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "vendor")))} "Vendor" + (sort-icon "vendor" sort-by asc) + ] + [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "company")))} "Company" + (sort-icon "company" sort-by asc)] + [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "invoice-number")))} "Invoice #" + (sort-icon "invoice-number" sort-by asc)] + [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "date")))} "Date" + (sort-icon "date" sort-by asc)] + [:th {:on-click (fn [e] (on-params-change (swap! state toggle-sort-by "total")))} "Amount" + (sort-icon "total" sort-by asc)]]] + [: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]]))]])))) diff --git a/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs b/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs index 35b42567..657498ea 100644 --- a/src/cljs/auto_ap/views/pages/unpaid_invoices.cljs +++ b/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]}}))