From 716b97f7010f3eb9d4e6ed906ec2a1444622cd6e Mon Sep 17 00:00:00 2001 From: Bryce Covert Date: Tue, 28 Apr 2020 11:01:44 -0700 Subject: [PATCH] Simplifying filters --- .../auto_ap/views/pages/ledger/table.cljs | 4 +- .../auto_ap/views/pages/transactions.cljs | 287 +++++------------- .../views/pages/transactions/side_bar.cljs | 141 +++++++++ .../views/pages/transactions/table.cljs | 202 ++++++------ 4 files changed, 324 insertions(+), 310 deletions(-) create mode 100644 src/cljs/auto_ap/views/pages/transactions/side_bar.cljs diff --git a/src/cljs/auto_ap/views/pages/ledger/table.cljs b/src/cljs/auto_ap/views/pages/ledger/table.cljs index 655020f2..ec4ac53e 100644 --- a/src/cljs/auto_ap/views/pages/ledger/table.cljs +++ b/src/cljs/auto_ap/views/pages/ledger/table.cljs @@ -19,10 +19,10 @@ {:db (merge table-params params) :dispatch [:auto-ap.views.pages.ledger/params-change]})) -(defn table [{:keys [id ledger-page status vendors params check-boxes checked on-check-changed expense-event]}] +(defn table [{:keys [id ledger-page status vendors check-boxes checked on-check-changed expense-event]}] (fn [{:keys [id ledger-page status vendors checked status?] :or {status? true}}] - (let [{:keys [sort]} @params + (let [{:keys [sort]} @(re-frame/subscribe [::table-params]) {:keys [journal-entries start end count total]} @ledger-page selected-client @(re-frame/subscribe [::subs/client]) percentage-size (if selected-client "25%" "33%") diff --git a/src/cljs/auto_ap/views/pages/transactions.cljs b/src/cljs/auto_ap/views/pages/transactions.cljs index 93ba1fd6..c0b33a5e 100644 --- a/src/cljs/auto_ap/views/pages/transactions.cljs +++ b/src/cljs/auto_ap/views/pages/transactions.cljs @@ -21,7 +21,9 @@ [auto-ap.views.pages.transactions.manual :as manual] [auto-ap.views.utils :refer [bind-field date->str dispatch-event nf date-picker active-when]] [goog.string :as gstring] - [re-frame.core :as re-frame])) + [re-frame.core :as re-frame] + [auto-ap.views.pages.transactions.side-bar :as side-bar] + [reagent.core :as reagent])) @@ -47,37 +49,31 @@ (re-frame/reg-sub ::params - (fn [db] - (-> db (::params {})))) + :<- [::subs/client] + :<- [::side-bar/filter-params] + :<- [::table/table-params] + (fn [[client filter-params table-params]] + (cond-> {} + client (assoc :client-id (:id client)) + (seq filter-params) (merge filter-params) + (seq table-params) (merge @(re-frame/subscribe [::table/table-params]))))) (re-frame/reg-event-fx ::params-change (fn [cofx [_ params]] - - {:db (-> (:db cofx) - (assoc-in [:status :loading] true) - (assoc-in [::params] params)) - :graphql {:token (-> cofx :db :user) - :query-obj {:venia/queries [[:transaction_page - (assoc params :client-id (:id @(re-frame/subscribe [::subs/client]))) - [[:transactions transaction-read] - :total - :start - :end]]]} - :on-success [::received]}})) - -(re-frame/reg-event-fx - ::transactions-mounted - (fn [{:keys [db]} [_ params]] - (let [already-mounted? (and (db ::params) - (db ::transaction-page)) - params-changed? (not= (db ::params) - (update db ::params merge params))] - - - (if (and already-mounted? (not params-changed?)) - {} - {:dispatch [::params-change (merge (::params db ) params) ]})))) + (let [new-params @(re-frame/subscribe [::params])] + (when (not= (::last-params (:db cofx)) new-params) + {:db (-> (:db cofx) + (assoc-in [:status :loading] true) + (assoc-in [::last-params] new-params)) + :graphql {:token (-> cofx :db :user) + :query-obj {:venia/queries [[:transaction_page + new-params + [[:transactions transaction-read] + :total + :start + :end]]]} + :on-success [::received]}})))) (re-frame/reg-event-fx ::unapprove-all @@ -91,14 +87,18 @@ :operation/name "UnapproveTransactions"} :venia/queries [{:query/data [:unapprove-transactions - (assoc (::params (:db cofx)) :client-id (:id @(re-frame/subscribe [::subs/client]))) + @(re-frame/subscribe [::params]) [[:transactions transaction-read] :total :start :end]]}]} - :on-success [::received]}})) +(re-frame/reg-event-fx + ::unmounted + (fn [{:keys [db]} _] + {:db (dissoc db ::last-params ::table/table-params ::side-bar/filters ::transaction-page)})) + (re-frame/reg-event-db ::received (fn [db [_ data]] @@ -107,194 +107,59 @@ (first (:unapprove-transactions data)))) (assoc-in [:status :loading] false)))) -(re-frame/reg-event-db - ::change-selected-bank-account - (fn [db [_ key value]] - (let [[key] key - updated (assoc-in db [::transaction-page :bank-account-filter key] value)] - (if (and (= key :id) - (not= value (get-in db [::params :bank-account-id]))) - (do - (re-frame/dispatch [::params-change (assoc (::params updated) :bank-account-id value)]) - (assoc-in updated [::params :bank-account-id] value)) - updated)))) - - -(re-frame/reg-event-fx - ::change-selected-date-range - (fn [{:keys [db]} [_ key value]] - (let [[key] key - updated (-> db - (assoc-in [::transaction-page :date-range-filter key] value) - (assoc-in [::params :date-range key] value))] - {:dispatch [::params-change (::params updated)] - :db updated}))) - -(re-frame/reg-event-fx - ::change-selected-amount-range - (fn [{:keys [db]} [_ key value]] - (let [[key] key - updated (-> db - (assoc-in [::transaction-page :amount-range-filter key] value) - (assoc-in [::params key] value))] - {:dispatch [::params-change (::params updated)] - :db updated}))) - -(re-frame/reg-event-fx - ::change-selected-vendor - (fn [{:keys [db]} [_ vendor]] - (let [updated (-> db - (assoc-in [::transaction-page :vendor-filter] vendor) - (assoc-in [::params :vendor-id] (:id vendor)))] - {:dispatch [::params-change (::params updated)] - :db updated}))) - -(re-frame/reg-event-fx - ::description-settled - (fn [{:keys [db]} [_ description]] - (let [updated (-> db - (assoc-in [::params :description] description))] - {:dispatch [::params-change (::params updated)] - :db updated}))) - - -(re-frame/reg-event-fx - ::description-changed - (fn [{:keys [db]} [_ description]] - {:dispatch-debounce - {:event [::description-settled description] - :time 500 - :key ::description} - :db (assoc-in db [::transaction-page :description] description)})) (re-frame/reg-sub ::notification (fn [db] (-> db ::notification))) -(defn content [{:keys [approval-status]}] - (with-meta - (fn [] - (let [notification (re-frame/subscribe [::notification]) - current-client @(re-frame/subscribe [::subs/client]) - user @(re-frame/subscribe [::subs/user])] - [:div - [:h1.title "Transactions"] - (when (= "admin" (:user/role user)) - [:div - (when (:message @notification) - (list - [:div.notification - (:message @notification)] - (when (seq (:errors @notification)) - [:div.notification.is-danger - [:h3 (count (:errors @notification)) " errors:"] - [:ul - (for [transaction (:errors @notification) - error (:errors transaction)] - [:li (:description-original transaction) "-" (:details error)])]]))) - [:div.is-pulled-right - [:div.buttons - [:button.button.is-outlined.is-primary {:on-click (dispatch-event [::manual/opening])} - "Manual Yodlee Import"] - [:button.button.is-outlined.is-danger {:on-click (dispatch-event [::unapprove-all])} - "Unapprove all"]]]]) - [table/table {:id :transactions - :params (re-frame/subscribe [::params]) - :transaction-page (re-frame/subscribe [::transaction-page]) - :status (re-frame/subscribe [::subs/status]) - :on-params-change (fn [params] - (re-frame/dispatch [::params-change params]))}] - ])) - {:component-will-mount #(re-frame/dispatch-sync [::transactions-mounted {:approval-status approval-status}]) })) - -(def main-content {nil (content {:approval-status nil}) - :unapproved (content {:approval-status :unapproved}) - :requires-feedback (content {:approval-status :requires-feedback}) - :approved (content {:approval-status :approved}) - :excluded (content {:approval-status :excluded})}) +(defn content [] + (let [notification (re-frame/subscribe [::notification]) + current-client @(re-frame/subscribe [::subs/client]) + user @(re-frame/subscribe [::subs/user])] + [:div + [:h1.title "Transactions"] + (when (= "admin" (:user/role user)) + [:div + (when (:message @notification) + (list + [:div.notification + (:message @notification)] + (when (seq (:errors @notification)) + [:div.notification.is-danger + [:h3 (count (:errors @notification)) " errors:"] + [:ul + (for [transaction (:errors @notification) + error (:errors transaction)] + [:li (:description-original transaction) "-" (:details error)])]]))) + [:div.is-pulled-right + [:div.buttons + [:button.button.is-outlined.is-primary {:on-click (dispatch-event [::manual/opening])} + "Manual Yodlee Import"] + [:button.button.is-outlined.is-danger {:on-click (dispatch-event [::unapprove-all])} + "Unapprove all"]]]]) + [table/table {:id :transactions + :transaction-page (re-frame/subscribe [::transaction-page]) + :status (re-frame/subscribe [::subs/status])}]])) (defn transactions-page [{:keys [approval-status]}] - (let [{transaction-bar-active? :active?} @(re-frame/subscribe [::forms/form ::edit/form]) - ap @(re-frame/subscribe [::subs/active-page])] - [side-bar-layout - {:side-bar - - [:div - [:div [:p.menu-label "Type"] - [:ul.menu-list - [:li.menu-item - [:a.item {:href (bidi/path-for routes/routes :transactions) - :class [(active-when ap = :transactions)]} - [:span {:class "icon" :style {:font-size "25px"}}] - [:span {:class "name"} "All"]]] - [:li.menu-item - [:a.item {:href (bidi/path-for routes/routes :unapproved-transactions) - :class [(active-when ap = :unapproved-transactions)]} - [:span {:class "icon icon-task-list-text-1" :style {:font-size "25px"}}] - [:span {:class "name"} "Unapproved"]]] - [:li.menu-item - [:a.item {:href (bidi/path-for routes/routes :requires-feedback-transactions) - :class [(active-when ap = :requires-feedback-transactions)]} - - [:span {:class "icon icon-task-list-question" :style {:font-size "25px"}}] - - [:span {:class "name"} "Client Review"]]] - [:li.menu-item - [:a.item {:href (bidi/path-for routes/routes :approved-transactions) - :class [(active-when ap = :approved-transactions)]} - - [:span {:class "icon icon-task-list-check-1" :style {:font-size "25px"}}] - - [:span {:class "name"} "Approved"]]] - [:li.menu-item - [:a.item {:href (bidi/path-for routes/routes :excluded-transactions) - :class [(active-when ap = :excluded-transactions)]} - - [:span {:class "icon icon-task-list-disable" :style {:font-size "25px"}}] - - [:span {:class "name"} "Excluded"]]] - ]] - [:p.menu-label "Bank Account"] - [:div - [bank-account-filter - {:on-change-event [::change-selected-bank-account] - :value (:bank-acount-filter @(re-frame/subscribe [::transaction-page])) - :bank-accounts @(re-frame/subscribe [::subs/bank-accounts])}]] - - [:p.menu-label "Date Range"] - [:div - [date-range-filter - {:on-change-event [::change-selected-date-range] - :value (:date-range-filter @(re-frame/subscribe [::transaction-page]))}]] - - [:p.menu-label "Amount"] - [:div - [number-filter - {:on-change-event [::change-selected-amount-range] - :value (:amount-range-filter @(re-frame/subscribe [::transaction-page]))}]] - - [:p.menu-label "Vendor"] - [:div - [typeahead-entity {:matches @(re-frame/subscribe [::subs/vendors]) - :on-change #(re-frame/dispatch [::change-selected-vendor %]) - :match->text :name - :type "typeahead-entity" - :value (:vendor-filter @(re-frame/subscribe [::transaction-page]))}]] - - [:p.menu-label "Description"] - [:div - [:div.field - [:div.control [:input.input {:placeholder "CHECK 123 ABC" - :value (:description @(re-frame/subscribe [::transaction-page])) - :on-change (fn [e] - (re-frame/dispatch [::description-changed (.. e -target -value) ]))} ]]]]] - :main [(get main-content approval-status)] - - :bottom [:div - [manual/modal {:import-completed [::manual-import-completed ]}]] - :right-side-bar [appearing-side-bar - {:visible? transaction-bar-active?} - [edit/form {:edit-completed [::edit-completed]}]]}])) + (reagent/create-class + {:display-name "transaction-page" + :component-did-mount #(re-frame/dispatch [::params-change {}]) + :component-will-unmount #(re-frame/dispatch [::unmounted]) + :reagent-render + (fn [] + (let [{transaction-bar-active? :active?} @(re-frame/subscribe [::forms/form ::edit/form]) + ap @(re-frame/subscribe [::subs/active-page])] + [side-bar-layout + {:side-bar [side-bar/side-bar] + :main [:div ^{:key approval-status} + [content]] + :bottom [:div + [manual/modal {:import-completed [::manual-import-completed ]}]] + :right-side-bar [appearing-side-bar + {:visible? transaction-bar-active?} + [edit/form {:edit-completed [::edit-completed]}]]}]))}) + ) diff --git a/src/cljs/auto_ap/views/pages/transactions/side_bar.cljs b/src/cljs/auto_ap/views/pages/transactions/side_bar.cljs new file mode 100644 index 00000000..d4183e97 --- /dev/null +++ b/src/cljs/auto_ap/views/pages/transactions/side_bar.cljs @@ -0,0 +1,141 @@ +(ns auto-ap.views.pages.transactions.side-bar + (:require [auto-ap.routes :as routes] + [auto-ap.subs :as subs] + [auto-ap.views.utils :refer [active-when]] + [auto-ap.views.components.date-range-filter :refer [date-range-filter]] + [auto-ap.views.components.number-filter :refer [number-filter]] + [auto-ap.views.components.bank-account-filter :refer [bank-account-filter]] + [auto-ap.views.components.typeahead :refer [typeahead-entity]] + [bidi.bidi :as bidi] + [re-frame.core :as re-frame])) +(re-frame/reg-sub + ::filters + (fn [db ] + (::filters db {}))) + +(re-frame/reg-sub + ::filter + :<- [::filters] + (fn [filters [_ which]] + (filters which))) + +(re-frame/reg-sub + ::filter-params + :<- [::filters] + :<- [::subs/active-page] + (fn [[filters ap]] + {:vendor-id (:id (:vendor filters)) + :date-range (:date-range filters) + :bank-account-id (:id (:bank-account filters)) + :amount-gte (:amount-gte (:amount-range filters)) + :amount-lte (:amount-lte (:amount-range filters)) + :description (:settled (:description filters)) + :approval-status (condp = ap + :transactions nil + :unapproved-transactions :unapproved + :requires-feedback-transactions :requires-feedback + :excluded-transactions :excluded + :approved-transactions :approved)})) + + +(re-frame/reg-event-fx + ::filter-changed + (fn [{:keys [db]} [_ & params]] + (let [[a b c] params + [which val] (if (= 3 (count params)) + [(into [a] b) c] + [[a] b])] + {:dispatch [:auto-ap.views.pages.transactions/params-change] + :db (assoc-in db (into [::filters] which) val)}))) + +(re-frame/reg-event-fx + ::description-settled + [(re-frame/path [::filters :description])] + (fn [{:keys [db]} [_ description]] + {:db (assoc db :settled description) + :dispatch [::filter-changed :description [:settled] description]})) + + +(re-frame/reg-event-fx + ::description-changed + [(re-frame/path [::filters :description])] + (fn [{:keys [db]} [_ description]] + {:dispatch-debounce + {:event [::description-settled description] + :time 500 + :key ::description} + :db (assoc db :raw description)})) + +(defn side-bar [] + (let [ap @(re-frame/subscribe [::subs/active-page]) + user @(re-frame/subscribe [::subs/user])] + [:div + [:div [:p.menu-label "Type"] + [:ul.menu-list + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :transactions) + :class [(active-when ap = :transactions)]} + [:span {:class "icon" :style {:font-size "25px"}}] + [:span {:class "name"} "All"]]] + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :unapproved-transactions) + :class [(active-when ap = :unapproved-transactions)]} + [:span {:class "icon icon-task-list-text-1" :style {:font-size "25px"}}] + [:span {:class "name"} "Unapproved"]]] + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :requires-feedback-transactions) + :class [(active-when ap = :requires-feedback-transactions)]} + + [:span {:class "icon icon-task-list-question" :style {:font-size "25px"}}] + + [:span {:class "name"} "Client Review"]]] + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :approved-transactions) + :class [(active-when ap = :approved-transactions)]} + + [:span {:class "icon icon-task-list-check-1" :style {:font-size "25px"}}] + + [:span {:class "name"} "Approved"]]] + [:li.menu-item + [:a.item {:href (bidi/path-for routes/routes :excluded-transactions) + :class [(active-when ap = :excluded-transactions)]} + + [:span {:class "icon icon-task-list-disable" :style {:font-size "25px"}}] + + [:span {:class "name"} "Excluded"]]] + ]] + [:p.menu-label "Bank Account"] + [:div + [bank-account-filter + {:on-change-event [::filter-changed :bank-account] + :value @(re-frame/subscribe [::filter :bank-account]) + :bank-accounts @(re-frame/subscribe [::subs/bank-accounts])}]] + + [:p.menu-label "Date Range"] + [:div + [date-range-filter + {:on-change-event [::filter-changed :date-range] + :value @(re-frame/subscribe [::filter :date-range])}]] + + [:p.menu-label "Amount"] + [:div + [number-filter + {:on-change-event [::filter-changed :amount-range] + :value @(re-frame/subscribe [::filter :amount-range])}]] + + [:p.menu-label "Vendor"] + [:div + [typeahead-entity {:matches @(re-frame/subscribe [::subs/vendors]) + :on-change #(re-frame/dispatch [::filter-changed :vendor %]) + :match->text :name + :type "typeahead-entity" + :value @(re-frame/subscribe [::filter :vendor])}]] + + [:p.menu-label "Description"] + [:div + [:div.field + [:div.control [:input.input {:placeholder "CHECK 123 ABC" + :value (:raw @(re-frame/subscribe [::filter :description])) + :on-change (fn [e] + (re-frame/dispatch [::description-changed (.. e -target -value) ]))} ]]]]])) + diff --git a/src/cljs/auto_ap/views/pages/transactions/table.cljs b/src/cljs/auto_ap/views/pages/transactions/table.cljs index 643a27d8..cc1a5454 100644 --- a/src/cljs/auto_ap/views/pages/transactions/table.cljs +++ b/src/cljs/auto_ap/views/pages/transactions/table.cljs @@ -36,102 +36,110 @@ :on-success [::editing-matches-found which] :on-error [::editing-matches-failed which]}} )) -(defn table [{:keys [id transaction-page status on-params-change vendors params check-boxes checked on-check-changed expense-event]}] - (let [opc (fn [p] - (on-params-change (merge @params p )))] - (fn [{:keys [id transaction-page status on-params-change vendors checked]}] - (let [{:keys [sort]} @params - {:keys [transactions start end count total]} @transaction-page - selected-client @(re-frame/subscribe [::subs/client]) - percentage-size (if selected-client "25%" "33%")] - [:div - [:div.level - [:div.level-left - [:div.level-item - [paginator {:start start :end end :count count :total total - :on-change (fn [p ] - (on-params-change (merge @params p)))}]] - [:div.level-item - [sort-by-list {:sort sort - :on-change opc}]]]] - - - [:table.table.is-fullwidth - [:thead - [:tr +(re-frame/reg-sub + ::table-params + (fn [db] + (::table-params db))) + +(re-frame/reg-event-fx + ::params-changed + [(re-frame/path [::table-params])] + (fn [{table-params :db} [_ params :as z]] + {:db (merge table-params params) + :dispatch [:auto-ap.views.pages.transactions/params-change]})) + +(defn table [{:keys [id transaction-page status]}] + (let [{:keys [sort]} @(re-frame/subscribe [::table-params]) + {:keys [transactions start end count total]} @transaction-page + opc (fn [e] (re-frame/dispatch [::params-changed e])) + selected-client @(re-frame/subscribe [::subs/client]) + percentage-size (if selected-client "25%" "33%")] + [:div + [:div.level + [:div.level-left + [:div.level-item + [paginator {:start start :end end :count count :total total + :on-change opc}]] + [:div.level-item + [sort-by-list {:sort sort + :on-change opc}]]]] + + [:table.table.is-fullwidth + [:thead + [:tr + (when-not selected-client + [sorted-column {:on-sort opc + :style {:width percentage-size :cursor "pointer"} + :sort-key "client" + :sort-name "Client" + :sort sort} + "Client"]) + + [sorted-column {:on-sort opc + :style {:width percentage-size :cursor "pointer"} + :sort-key "vendor" + :sort-name "Vendor" + :sort sort} + "Vendor"] + + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "date" + :sort-name "Date" + :sort sort} + "Date"] + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "amount" + :sort-name "Amount" + :class "has-text-right" + :sort sort} + "Amount"] + + [sorted-column {:on-sort opc + :style {:width "8em" :cursor "pointer"} + :sort-key "status" + :sort-name "Status" + :sort sort} + "Status"] + [:th {:width percentage-size} "Bank account"] + [:th {:style {:width "14em"}} "" ]]] + [:tbody + (if (:loading @status) + [:tr + [:td {:col-span 5} + [:i.fa.fa-spin.fa-spinner]]] + (for [{:keys [client account vendor approval-status payment status bank-account description-original date amount id yodlee-merchant ] :as i} (:transactions @transaction-page)] + ^{:key id} + [:tr {:class (:class i)} (when-not selected-client - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "client" - :sort-name "Client" - :sort sort} - "Client"]) + [:td (:name client)]) + [:td (cond vendor + (:name vendor) + yodlee-merchant + [:i.has-text-grey (str "Merchant '" (:name yodlee-merchant) "'")] - [sorted-column {:on-sort opc - :style {:width percentage-size :cursor "pointer"} - :sort-key "vendor" - :sort-name "Vendor" - :sort sort} - "Vendor"] - - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "date" - :sort-name "Date" - :sort sort} - "Date"] - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "amount" - :sort-name "Amount" - :class "has-text-right" - :sort sort} - "Amount"] - - [sorted-column {:on-sort opc - :style {:width "8em" :cursor "pointer"} - :sort-key "status" - :sort-name "Status" - :sort sort} - "Status"] - [:th {:width percentage-size} "Bank account"] - [:th {:style {:width "14em"}} "" ]]] - [:tbody - (if (:loading @status) - [:tr - [:td {:col-span 5} - [:i.fa.fa-spin.fa-spinner]]] - (for [{:keys [client account vendor approval-status payment status bank-account description-original date amount id yodlee-merchant ] :as i} (:transactions @transaction-page)] - ^{:key id} - [:tr {:class (:class i)} - (when-not selected-client - [:td (:name client)]) - [:td (cond vendor - (:name vendor) - yodlee-merchant - [:i.has-text-grey (str "Merchant '" (:name yodlee-merchant) "'")] - - :else - [:i.has-text-grey (str description-original)])] - #_[:td description-original] - [:td (date->str date) ] - [:td.has-text-right (nf amount )] - [:td status] - [:td (:name bank-account )] - [:td.expandable - [:div.buttons - [drop-down {:id [::expense-accounts id ] - :header [:a.button {:aria-haspopup true - :on-click (dispatch-event [::events/toggle-menu [::expense-accounts id]]) - :tab-index "0"} - [:span.icon-saving-bank-1]]} - [drop-down-contents - [:div - [:span.dropdown-item description-original ]]]] - [:a.button {:on-click (dispatch-event [::intend-to-edit i])} [:span [:span.icon [:i.fa.fa-pencil]]]] - (when payment - [:a.tag {:href (:s3-url payment) :target "_new"} - #_[:i.fa.fa-money-check] - [:span.icon [:i.fa.fa-money]] - (str " " (:check-number payment) " (" (gstring/format "$%.2f" amount ) ")")])]] - ]))]]])))) + :else + [:i.has-text-grey (str description-original)])] + #_[:td description-original] + [:td (date->str date) ] + [:td.has-text-right (nf amount )] + [:td status] + [:td (:name bank-account )] + [:td.expandable + [:div.buttons + [drop-down {:id [::expense-accounts id ] + :header [:a.button {:aria-haspopup true + :on-click (dispatch-event [::events/toggle-menu [::expense-accounts id]]) + :tab-index "0"} + [:span.icon-saving-bank-1]]} + [drop-down-contents + [:div + [:span.dropdown-item description-original ]]]] + [:a.button {:on-click (dispatch-event [::intend-to-edit i])} [:span [:span.icon [:i.fa.fa-pencil]]]] + (when payment + [:a.tag {:href (:s3-url payment) :target "_new"} + #_[:i.fa.fa-money-check] + [:span.icon [:i.fa.fa-money]] + (str " " (:check-number payment) " (" (gstring/format "$%.2f" amount ) ")")])]] + ]))]]]))