Made accounts page look great

This commit is contained in:
2023-10-23 10:57:35 -07:00
parent 2f05197f5b
commit 825443ef2c
5 changed files with 337 additions and 265 deletions

View File

@@ -401,189 +401,192 @@
;; TODO dialog is no longer closeable
(defn dialog* [& {:keys [entity form-params form-errors]}]
(com/modal
{:modal-class "max-w-2xl"}
(fc/start-form entity form-errors
(com/modal
{:modal-class "max-w-2xl"}
[:form#edit-form (merge {:hx-ext "response-targets"
:hx-swap "outerHTML swap:300ms"
:hx-target "#modal-holder" ;; TODO sort
:hx-target-400 "#form-errors .error-content"
:x-trap "true"
:class "group/form"}
form-params)
(com/modal-card
{}
[:div.flex [:div.p-2 "Transaction Rule"]]
[:fieldset {:class "hx-disable"
:hx-disinherit "hx-target" ;; TODO why disinherit
:x-data (hx/json {:clientId (or (:db/id (:transaction-rule/client entity))
(:transaction-rule/client entity))})}
[:form#edit-form (merge {:hx-ext "response-targets"
:hx-swap "outerHTML swap:300ms"
:hx-target "#modal-holder" ;; TODO sort
:hx-target-400 "#form-errors .error-content"
:x-trap "true"
:class "group/form"}
form-params)
(com/modal-card
{}
[:div.flex [:div.p-2 "Transaction Rule"]]
[:fieldset {:class "hx-disable"
:hx-disinherit "hx-target" ;; TODO why disinherit
:x-data (hx/json {:clientId (or (:db/id (:transaction-rule/client entity))
(:transaction-rule/client entity))})}
(fc/start-form entity form-errors
[:div.space-y-1
(when-let [id (:db/id entity)]
(com/hidden {:name "db/id"
:value id}))
(fc/with-field :transaction-rule/description
(com/validated-field {:label "Description"
:errors (fc/field-errors)}
(com/text-input {:name (fc/field-name)
:error? (fc/error?)
:x-init "$el.focus()"
:placeholder "HOME DEPOT"
:class "w-96"
:value (fc/field-value)})))
[:div.filters {:x-data (hx/json {:clientFilter (boolean (fc/field-value (:transaction-rule/client fc/*current*)))
:bankAccountFilter (boolean (fc/field-value (:transaction-rule/bank-account fc/*current*)))
:amountFilter (boolean (or (fc/field-value (:transaction-rule/amount-gte fc/*current*))
(fc/field-value (:transaction-rule/amount-lte fc/*current*))))
:domFilter (boolean (or (fc/field-value (:transaction-rule/dom-gte fc/*current*))
(fc/field-value (:transaction-rule/dom-lte fc/*current*))))})}
[:div.space-y-1
(when-let [id (:db/id entity)]
(com/hidden {:name "db/id"
:value id}))
(fc/with-field :transaction-rule/description
(com/validated-field {:label "Description"
:errors (fc/field-errors)}
(com/text-input {:name (fc/field-name)
:error? (fc/error?)
:x-init "$el.focus()"
:placeholder "HOME DEPOT"
:class "w-96"
:value (fc/field-value)})))
[:div.filters {:x-data (hx/json {:clientFilter (boolean (fc/field-value (:transaction-rule/client fc/*current*)))
:bankAccountFilter (boolean (fc/field-value (:transaction-rule/bank-account fc/*current*)))
:amountFilter (boolean (or (fc/field-value (:transaction-rule/amount-gte fc/*current*))
(fc/field-value (:transaction-rule/amount-lte fc/*current*))))
:domFilter (boolean (or (fc/field-value (:transaction-rule/dom-gte fc/*current*))
(fc/field-value (:transaction-rule/dom-lte fc/*current*))))})}
[:div.flex.gap-2.mb-2
(com/a-button {"@click" "clientFilter=true"
"x-show" "!clientFilter"} "Filter client")
(com/a-button {"@click" "bankAccountFilter=true"
"x-show" "clientFilter && !bankAccountFilter"} "Filter bank account")
(com/a-button {"@click" "amountFilter=true"
"x-show" "!amountFilter"} "Filter amount")
(com/a-button {"@click" "domFilter=true"
"x-show" "!domFilter"} "Filter day of month")]
(fc/with-field :transaction-rule/client
[:div.flex.gap-2.mb-2
(com/a-button {"@click" "clientFilter=true"
"x-show" "!clientFilter"} "Filter client")
(com/a-button {"@click" "bankAccountFilter=true"
"x-show" "clientFilter && !bankAccountFilter"} "Filter bank account")
(com/a-button {"@click" "amountFilter=true"
"x-show" "!amountFilter"} "Filter amount")
(com/a-button {"@click" "domFilter=true"
"x-show" "!domFilter"} "Filter day of month")]
(fc/with-field :transaction-rule/client
(com/validated-field
(-> {:label "Client"
:errors (fc/field-errors)
:x-show "clientFilter"}
(hx/alpine-appear))
[:div.w-96
(com/typeahead-2 {:name (fc/field-name)
:error? (fc/error?)
:class "w-96"
:placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :company-search)
:x-model "clientId"
:value (fc/field-value)
:value-fn (some-fn :db/id identity)
:content-fn (fn [c] (cond->> c
(nat-int? c) (dc/pull (dc/db conn) '[:client/name])
true :client/name))})]))
(com/validated-field
(-> {:label "Client"
:errors (fc/field-errors)
:x-show "clientFilter"}
(hx/alpine-appear))
[:div.w-96
(com/typeahead-2 {:name (fc/field-name)
:error? (fc/error?)
:class "w-96"
:placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :company-search)
:x-model "clientId"
:value (fc/field-value)
:value-fn (some-fn :db/id identity)
:content-fn (fn [c] (cond->> c
(nat-int? c) (dc/pull (dc/db conn) '[:client/name])
true :client/name))})]))
(fc/with-field :transaction-rule/bank-account
(com/validated-field
(-> {:label "Bank Account"
:errors (fc/field-errors)
:x-show "bankAccountFilter"}
hx/alpine-appear)
[:div.w-96
[:div#bank-account-changer {:hx-get (bidi/path-for ssr-routes/only-routes :bank-account-typeahead)
:hx-trigger "changed"
:hx-target "next *"
:hx-include "#bank-account-changer"
:hx-swap "innerHTML"
(fc/with-field :transaction-rule/bank-account
(com/validated-field
(-> {:label "Bank Account"
:errors (fc/field-errors)
:x-show "bankAccountFilter"}
hx/alpine-appear)
[:div.w-96
[:div#bank-account-changer {:hx-get (bidi/path-for ssr-routes/only-routes :bank-account-typeahead)
:hx-trigger "changed"
:hx-target "next *"
:hx-include "#bank-account-changer"
:hx-swap "innerHTML"
:hx-vals (format "js:{name: '%s', 'client-id': event.detail.clientId}" (fc/field-name))
:x-init "$watch('clientId', cid => $dispatch('changed', $data))"}]
:hx-vals (format "js:{name: '%s', 'client-id': event.detail.clientId}" (fc/field-name))
:x-init "$watch('clientId', cid => $dispatch('changed', $data))"}]
(bank-account-typeahead* {:client-id ((some-fn :db/id identity) (:transaction-rule/client entity))
:name (fc/field-name)
:value (fc/field-value)})]))
(bank-account-typeahead* {:client-id ((some-fn :db/id identity) (:transaction-rule/client entity))
:name (fc/field-name)
:value (fc/field-value)})]))
(com/field (-> {:label "Amount"
:x-show "amountFilter"}
hx/alpine-appear)
[:div.flex.gap-2
(fc/with-field :transaction-rule/amount-gte
[:div.flex.flex-col
(com/money-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})
(com/errors {:errors (fc/field-errors)})])
(fc/with-field :transaction-rule/amount-lte
[:div.flex.flex-col
(com/money-input {:name (fc/field-name)
:placeholder "<="
:class "w-24"
:value (fc/field-value)})
(com/errors {:errors (fc/field-errors)})])])
(com/field (-> {:label "Amount"
:x-show "amountFilter"}
hx/alpine-appear)
[:div.flex.gap-2
(fc/with-field :transaction-rule/amount-gte
[:div.flex.flex-col
(com/money-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})
(com/errors {:errors (fc/field-errors)})])
(fc/with-field :transaction-rule/amount-lte
[:div.flex.flex-col
(com/money-input {:name (fc/field-name)
:placeholder "<="
:class "w-24"
:value (fc/field-value)})
(com/errors {:errors (fc/field-errors)})])])
(com/field (-> {:label "Day of month"
:x-show "domFilter"}
hx/alpine-appear)
[:div.flex.gap-2
(fc/with-field :transaction-rule/dom-gte
(com/validated-field
{:errors (fc/field-errors)}
(com/int-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})))
(fc/with-field :transaction-rule/dom-lte
(com/validated-field
{:errors (fc/field-errors)}
(com/int-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})))])]
(com/field (-> {:label "Day of month"
:x-show "domFilter"}
hx/alpine-appear)
[:div.flex.gap-2
(fc/with-field :transaction-rule/dom-gte
(com/validated-field
{:errors (fc/field-errors)}
(com/int-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})))
(fc/with-field :transaction-rule/dom-lte
(com/validated-field
{:errors (fc/field-errors)}
(com/int-input {:name (fc/field-name)
:placeholder ">="
:class "w-24"
:value (fc/field-value)})))])]
[:h2.text-lg "Outcomes"]
(fc/with-field :transaction-rule/vendor
(com/validated-field {:label "Assign Vendor"
:errors (fc/field-errors)}
[:div.w-96
(com/typeahead-2 {:name (fc/field-name)
:placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :vendor-search)
:id (str "form-vendor-search")
:class "w-96"
:value (fc/field-value)
:value-fn (some-fn :db/id identity)
:content-fn (some-fn :vendor/name #(pull-attr (dc/db conn) :vendor/name %))})]))
[:h2.text-lg "Outcomes"]
(fc/with-field :transaction-rule/vendor
(com/validated-field {:label "Assign Vendor"
:errors (fc/field-errors)}
[:div.w-96
(com/typeahead-2 {:name (fc/field-name)
:placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :vendor-search)
:id (str "form-vendor-search")
:class "w-96"
:value (fc/field-value)
:value-fn (some-fn :db/id identity)
:content-fn (some-fn :vendor/name #(pull-attr (dc/db conn) :vendor/name %))})]))
(fc/with-field :transaction-rule/accounts
(list
(com/data-grid {:headers [(com/data-grid-header {} "Account")
(com/data-grid-header {:class "w-32"} "Location")
(com/data-grid-header {:class "w-16"} "%")
(com/data-grid-header {:class "w-16"})]
:id "transaction-rule-account-table"}
(when @fc/*current*
(doall (for [tra fc/*current*]
(fc/with-cursor tra
(transaction-rule-account-row* entity tra)))))
(com/data-grid-row
{:class "new-row"}
(com/data-grid-cell {:colspan 4
:class "bg-gray-100"}
[:div.flex.justify-center
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
:admin-transaction-rule-new-account)
:color :secondary
:hx-include "#edit-form"
:hx-ext "rename-params"
;; TODO
:hx-rename-params-ex (cheshire/generate-string {"transaction-rule/client" "client-id"
"index" "index"})
:hx-vals (hiccup/raw "js:{index: countRows(\"#transaction-rule-account-table\")}")
:hx-target "#edit-form .new-row"
:hx-swap "beforebegin"}
"New account")])))
(com/errors {:errors (fc/field-errors)})))
(fc/with-field :transaction-rule/accounts
(list
(com/data-grid {:headers [(com/data-grid-header {} "Account")
(com/data-grid-header {:class "w-32"} "Location")
(com/data-grid-header {:class "w-16"} "%")
(com/data-grid-header {:class "w-16"})]
:id "transaction-rule-account-table"}
(when @fc/*current*
(doall (for [tra fc/*current*]
(fc/with-cursor tra
(transaction-rule-account-row* entity tra)))))
(com/data-grid-row
{:class "new-row"}
(com/data-grid-cell {:colspan 4
:class "bg-gray-100"}
[:div.flex.justify-center
(com/a-button {:hx-get (bidi/path-for ssr-routes/only-routes
:admin-transaction-rule-new-account)
:color :secondary
:hx-include "#edit-form"
:hx-ext "rename-params"
;; TODO
:hx-rename-params-ex (cheshire/generate-string {"transaction-rule/client" "client-id"
"index" "index"})
:hx-vals (hiccup/raw "js:{index: countRows(\"#transaction-rule-account-table\")}")
:hx-target "#edit-form .new-row"
:hx-swap "beforebegin"}
"New account")])))
(com/errors {:errors (fc/field-errors)})))
(fc/with-field :transaction-rule/transaction-approval-status
(com/validated-field {:label "Approval status"
:errors (fc/field-errors)}
(com/radio {:options (ref->radio-options "transaction-approval-status")
:value (fc/field-value)
:name (fc/field-name)
:size :small
:orientation :horizontal})))
(fc/with-field :transaction-rule/transaction-approval-status
(com/validated-field {:label "Approval status"
:errors (fc/field-errors)}
(com/radio {:options (ref->radio-options "transaction-approval-status")
:value (fc/field-value)
:name (fc/field-name)
:size :small
:orientation :horizontal})))
[:div#form-errors (when (:errors fc/*form-errors*)
[:span.error-content
(com/errors {:errors (:errors fc/*form-errors*)})])]])]
(com/validated-save-button {:errors form-errors} "Save rule"))]))
;; TODO componentize
]]
[:div
[:div#form-errors (when (:errors fc/*form-errors*)
[:span.error-content
(com/errors {:errors (:errors fc/*form-errors*)})])]
(com/validated-save-button {:errors form-errors} "Save rule")])])))
;; TODO Should forms have some kind of helper to render an individual field? saving
@@ -592,8 +595,8 @@
;; pull out the single field to swap
(defn new-account [{{:keys [client-id index]} :query-params}]
(let [index (or index 0) ;; TODO schema decode is not working
transaction-rule {:transaction-rule/client (dc/pull (dc/db conn) '[:client/name :client/locations :db/id]
(let [index (or index 0) ;; TODO schema decode is not working
transaction-rule {:transaction-rule/client (dc/pull (dc/db conn) '[:client/name :client/locations :db/id]
client-id)
:transaction-rule/accounts (conj (into [] (repeat index {} ))
{:db/id (str (java.util.UUID/randomUUID))