notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Made all interactions much better

Browse Source
This commit is contained in:
Bryce Covert
2020-08-17 19:43:31 -07:00
parent dbb671b5d9
commit 6a8bb77e95
10 changed files with 234 additions and 284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/cljs/auto_ap/views/components/grid.cljs
View File

@@ -1,7 +1,9 @@
(ns auto-ap.views.components.grid
(:require [reagent.core :as r]
[auto-ap.views.utils :refer [appearing]]
[react :as react]))
[react :as react]
[re-frame.core :as re-frame]
[auto-ap.views.pages.data-page :as data-page]))
(defonce grid-context (react/createContext "default"))
(def Provider (.-Provider grid-context))
@@ -105,6 +107,7 @@
[:> Consumer {}
(fn [consume]
(let [{:strs [on-params-change params] :as consume} (js->clj consume)]
(println "PARAMS" params)
(r/as-element (into
[:div {:style {:margin-bottom "1rem"}}
[:div.level
@@ -215,19 +218,35 @@
children)
(sort-icon sort-key (:sort params))))))]))
(defn grid [{:keys [on-params-change on-check-changed checked params status column-count check-boxes?]}]
(r/create-element Provider
#js {:value #js {:on-params-change on-params-change
:on-check-changed on-check-changed
:check-boxes? check-boxes?
:checked checked
:params params
:status status
:column-count column-count}}
(r/as-element
(into
[:<> ]
(r/children (r/current-component))))))
(defn grid [{:keys [on-params-change on-check-changed checked params status column-count check-boxes? data-page]}]
(if data-page
(let [page @(re-frame/subscribe [::data-page/page data-page])]
(r/create-element Provider
#js {:value #js {:on-params-change (fn [p]
(re-frame/dispatch [::data-page/table-params-changed data-page p]))
:on-check-changed (fn [new]
(re-frame/dispatch [::data-page/toggle-check data-page new]))
:check-boxes? check-boxes?
:checked (:checked page)
:params (:params page)
:status (:status page)
:column-count column-count}}
(r/as-element
(into
[:<> ]
(r/children (r/current-component))))))
(r/create-element Provider
#js {:value #js {:on-params-change on-params-change
:on-check-changed on-check-changed
:check-boxes? check-boxes?
:checked checked
:params params
:status status
:column-count column-count}}
(r/as-element
(into
[:<> ]
(r/children (r/current-component)))))))
(defn virtual-paginate [start xs ]
(take 100 (drop (or start 0) xs)))

57
src/cljs/auto_ap/views/components/invoice_table.cljs
View File

@@ -16,13 +16,29 @@
[clojure.string :as str]
[goog.string :as gstring]
[re-frame.core :as re-frame]
[auto-ap.views.components.expense-accounts-dialog :as expense-accounts-dialog]))
[auto-ap.views.components.expense-accounts-dialog :as expense-accounts-dialog]
[auto-ap.views.pages.data-page :as data-page]))
(defn query [params]
{:venia/queries [[:invoice_page
(-> params
(assoc
:client-id (:id @(re-frame/subscribe [::subs/client]))))
{
:start (:start params 0)
:sort (:sort params)
:vendor-id (:id (:vendor params))
:date-range (:date-range params)
:due-range (:due-range params)
:amount-gte (:amount-gte (:amount-range params))
:amount-lte (:amount-lte (:amount-range params))
:invoice-number-like (:invoice-number-like params)
:client-id (:id @(re-frame/subscribe [::subs/client]))
:import-status (:import-status params)
:status (condp = @(re-frame/subscribe [::subs/active-page])
:invoices nil
:import-invoices nil
:unpaid-invoices :unpaid
:paid-invoices :paid
:voided-invoices :voided)}
[[:invoices [:id :total :outstanding-balance :invoice-number :date :due :status :client-identifier :automatically-paid-when-due
[:vendor [:name :id]]
[:expense_accounts [:amount :id :location
@@ -35,24 +51,7 @@
:start
:end]]]})
(re-frame/reg-sub
::specific-table-params
(fn [db]
(::table-params db)))
(re-frame/reg-sub
::table-params
:<- [::specific-table-params]
:<- [::subs/query-params]
(fn [[specific-table-params query-params]]
(update (merge (select-keys query-params #{:start :sort}) specific-table-params )
:sort seq)))
(re-frame/reg-event-fx
::params-changed
[(re-frame/path [::table-params])]
(fn [{table-params :db} [_ params :as z]]
{:db (merge table-params params)}))
(re-frame/reg-event-fx
::void-invoice
@@ -92,7 +91,7 @@
(fn [{:keys [db]} [_ invoice]]
{:db db}))
(defn row [{:keys [invoice check-boxes checked selected-client overrides expense-event actions]}]
(defn row [{:keys [invoice check-boxes selected-client overrides expense-event actions]}]
(let [{:keys [client payments expense-accounts invoice-number date due total outstanding-balance id vendor checkable?] :as i} invoice
accounts-by-id @(re-frame/subscribe [::subs/accounts-by-id client])
account->name #(:name (accounts-by-id (:id %)))]
@@ -180,12 +179,13 @@
[buttons/fa-icon {:icon "fa-undo"
:event [::unvoid-invoice i]}])]]]))
(defn invoice-table [{:keys [id data checked status check-boxes on-check-changed overrides actions]}]
(defn invoice-table [{:keys [id check-boxes overrides actions data-page]}]
(let [selected-client @(re-frame/subscribe [::subs/client])
{:keys [sort]} @(re-frame/subscribe [::table-params])
{:keys [data status table-params]} @(re-frame/subscribe [::data-page/page data-page])
selected-client @(re-frame/subscribe [::subs/client])
is-loading? (= :loading (:state status))
is-sorted-by-vendor? (and (= "vendor" (:sort-key (first sort)))
is-sorted-by-vendor? (and (= "vendor" (:sort-key (first (:sort table-params))))
(not is-loading?)
(or (apply <= (map (comp :name :vendor) (:data data)))
(apply >= (map (comp :name :vendor) (:data data)))))
@@ -202,12 +202,7 @@
[[] nil]
(:data data))
[[(:data data)]])]
[grid/grid {:on-params-change (fn [p]
(re-frame/dispatch [::params-changed p]))
:on-check-changed on-check-changed
:params @(re-frame/subscribe [::table-params])
:checked checked
:status status
[grid/grid {:data-page data-page
:check-boxes? check-boxes
:column-count (if selected-client 8 9)}
[grid/controls data

108
src/cljs/auto_ap/views/components/invoices/side_bar.cljs
View File

@@ -13,93 +13,16 @@
[auto-ap.views.components.typeahead :refer [typeahead-entity]]
[auto-ap.views.utils :refer [active-when dispatch-event bind-field horizontal-field date->str str->date pretty standard query-params dispatch-value-change]]
[auto-ap.subs :as subs]
[auto-ap.events :as events]))
[auto-ap.events :as events]
[auto-ap.views.pages.data-page :as data-page]))
(re-frame/reg-sub
::specific-filters
(fn [db ]
(::filters db nil)))
(re-frame/reg-sub
::filters
:<- [::specific-filters]
:<- [::subs/vendors-by-id]
:<- [::subs/query-params]
(fn [[specific-filters vendors-by-id query-params] ]
(let [url-filters (-> query-params
(select-keys #{:vendor-id
:date-range
:due-range
:invoice-number-like
:amount-gte
:amount-lte
:status}))
url-filters {:vendor (when-let [vendor-id (:vendor-id url-filters)]
{:id (str vendor-id)
:name (get-in vendors-by-id [(str vendor-id) :name] "Loading...")})
:date-range (:date-range url-filters)
:due-range (:due-range url-filters)
:amount-range {:amount-gte (:amount-gte url-filters)
:amount-lte (:amount-lte url-filters)}
:invoice-number-like (str (:invoice-number-like url-filters))}]
(deep-merge url-filters (or specific-filters {}) ))))
(re-frame/reg-sub
::filter
:<- [::filters]
(fn [filters [_ which]]
(get filters which)))
(re-frame/reg-sub
::settled-filters
(fn [db ]
(::settled-filters db)))
(re-frame/reg-sub
::filter-params
:<- [::settled-filters]
:<- [::filters]
:<- [::subs/active-page]
(fn [[settled-filters filters ap ]]
(let [filters (or settled-filters filters)]
{:vendor-id (:id (:vendor filters))
:date-range (:date-range filters)
:due-range (:due-range filters)
:amount-gte (:amount-gte (:amount-range filters))
:amount-lte (:amount-lte (:amount-range filters))
:invoice-number-like (:invoice-number-like filters)
:status (condp = ap
:invoices nil
:unpaid-invoices :unpaid
:paid-invoices :paid
:voided-invoices :voided)})))
(re-frame/reg-event-fx
::filters-settled
(fn [{:keys [db]} [_ & params]]
{:db (assoc db ::settled-filters @(re-frame/subscribe [::filters]))}))
(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])]
{:db (assoc-in db (into [::filters] which) val)
:dispatch-debounce
{:event [::filters-settled]
:time 800
:key ::filters}})))
(defn invoice-number-filter []
(defn invoice-number-filter [{:keys [data-page]}]
[:div.field
[:div.control [:input.input {:placeholder "AP-123"
:value @(re-frame/subscribe [::filter :invoice-number-like])
:on-change (dispatch-value-change [::filter-changed :invoice-number-like ])} ]]])
:value @(re-frame/subscribe [::data-page/filter data-page :invoice-number-like])
:on-change (dispatch-value-change [::data-page/filter-changed data-page :invoice-number-like ])} ]]])
(defn invoices-side-bar [params]
(defn invoices-side-bar [{:keys [data-page] :as params}]
(let [ap @(re-frame/subscribe [::subs/active-page])
user @(re-frame/subscribe [::subs/user])]
[:div
@@ -142,28 +65,29 @@
[:p.menu-label "Vendor"]
[:div
[typeahead-entity {:matches @(re-frame/subscribe [::subs/vendors])
:on-change #(re-frame/dispatch [::filter-changed :vendor %])
:on-change #(re-frame/dispatch [::data-page/filter-changed data-page :vendor %])
:match->text :name
:type "typeahead-entity"
:value @(re-frame/subscribe [::filter :vendor])}]]
:value @(re-frame/subscribe [::data-page/filter data-page :vendor])
:include-keys [:name :id]}]]
[:p.menu-label "Date Range"]
[:div
[date-range-filter
{:on-change-event [::filter-changed :date-range]
:value @(re-frame/subscribe [::filter :date-range])}]]
{:on-change-event [::data-page/filter-changed data-page :date-range]
:value @(re-frame/subscribe [::data-page/filter data-page :date-range])}]]
[:p.menu-label "Due Range"]
[:div
[date-range-filter
{:on-change-event [::filter-changed :due-range]
:value @(re-frame/subscribe [::filter :due-range])}]]
{:on-change-event [::data-page/filter-changed data-page :due-range]
:value @(re-frame/subscribe [::data-page/filter data-page :due-range])}]]
[:p.menu-label "Amount"]
[:div
[number-filter
{:on-change-event [::filter-changed :amount-range]
:value @(re-frame/subscribe [::filter :amount-range])}]]
{:on-change-event [::data-page/filter-changed data-page :amount-range]
:value @(re-frame/subscribe [::data-page/filter data-page :amount-range])}]]
[:p.menu-label "Invoice #"]
[:div
[invoice-number-filter]]])]))
[invoice-number-filter params]]])]))

10
src/cljs/auto_ap/views/components/typeahead.cljs
View File

@@ -1,7 +1,8 @@
(ns auto-ap.views.components.typeahead
(:require [reagent.core :as r]
[reagent.ratom :as ra]
[clojure.string :as str]))
[clojure.string :as str]
[clojure.set :as set]))
(defn get-valid-matches [matches not-found-description not-found-value text]
(let [valid-matches (take 15 (for [[[id t :as match] i] (map vector matches (range))
@@ -124,17 +125,18 @@
valid-matches)]
valid-matches))
(defn typeahead-entity [{:keys [matches on-change field value class not-found-description
disabled not-found-value auto-focus name]}]
disabled not-found-value auto-focus name include-keys]}]
(let [text (r/atom (or (second (first (filter #(= (first %) value) matches))) ""))
highlighted (r/atom nil)
]
(r/create-class
{:reagent-render (fn [{:keys [matches on-change disabled match->text field value class not-found-description]}]
{:reagent-render (fn [{:keys [matches on-change disabled match->text field value class not-found-description include-keys]}]
(let [select (fn [entity]
(when on-change
(if (= :not-found entity)
(on-change nil)
(on-change entity))))
(on-change (cond-> entity
(and include-keys entity) (select-keys include-keys))))))
text-atom text
text (or (when value (match->text value)) @text)
valid-matches (get-valid-entity-matches matches not-found-description not-found-value text match->text)]