transaction dialog now uses sidebar.

This commit is contained in:
2026-05-26 21:58:24 -07:00
parent f42d937691
commit de73233a08
2 changed files with 161 additions and 253 deletions

View File

@@ -163,7 +163,7 @@
:else :else
[:div "No action possible."])]]) [:div "No action possible."])]])
(defn default-render-step [linear-wizard step & {:keys [head body footer validation-route discard-route width-height-class]}] (defn default-render-step [linear-wizard step & {:keys [head body footer validation-route discard-route width-height-class side-panel]}]
(let [is-last? (= (step-key step) (last (steps linear-wizard)))] (let [is-last? (= (step-key step) (last (steps linear-wizard)))]
(com/modal-card-advanced (com/modal-card-advanced
{"@keydown.enter.prevent.stop" "if ($refs.next ) {$refs.next.click()}" {"@keydown.enter.prevent.stop" "if ($refs.next ) {$refs.next.click()}"
@@ -195,12 +195,16 @@
\"htmx-added:opacity-0 opacity-100\": $data.transitionType=='forward', \"htmx-added:opacity-0 opacity-100\": $data.transitionType=='forward',
\"htmx-swapping:translate-x-2/3 htmx-swapping:opacity-0 htmx-swapping:scale-0 htmx-added:-translate-x-2/3 htmx-added:opacity-0 htmx-added:scale-0 scale-100 translate-x-0 opacity-100\": $data.transitionType=='backward' \"htmx-swapping:translate-x-2/3 htmx-swapping:opacity-0 htmx-swapping:scale-0 htmx-added:-translate-x-2/3 htmx-added:opacity-0 htmx-added:scale-0 scale-100 translate-x-0 opacity-100\": $data.transitionType=='backward'
} }
") ")
"x-data" ""} "x-data" ""}
(com/modal-header {} (com/modal-header {}
head) head)
#_(com/modal-header-attachment {}) #_(com/modal-header-attachment {})
[:div.flex.shrink.overflow-auto.grow [:div.flex.shrink.overflow-auto.grow
(when side-panel
[:div.grow-0.w-64.bg-gray-50.border-r.hidden.md:block.overflow-y-auto
{:class "max-h-full"}
side-panel])
(when (:render-timeline? linear-wizard) (when (:render-timeline? linear-wizard)
[:div.grow-0.pr-6.pt-2.bg-gray-100.self-stretch.hidden.md:block #_{:style "margin-left:-20px"} [:div.grow-0.pr-6.pt-2.bg-gray-100.self-stretch.hidden.md:block #_{:style "margin-left:-20px"}
(render-timeline linear-wizard step validation-route)]) (render-timeline linear-wizard step validation-route)])
@@ -215,11 +219,11 @@
(fn [{:keys [wizard multi-form-state] :as request}] (fn [{:keys [wizard multi-form-state] :as request}]
(assert-schema (step-schema (get-current-step wizard)) (:step-params multi-form-state)) (assert-schema (step-schema (get-current-step wizard)) (:step-params multi-form-state))
(handler request)) (handler request))
(wrap-form-4xx-2 (fn [{:keys [wizard] :as request}] ;; THIS MAY BE BETTER TO JUST MAKE THE LINEAR WIZARD POPULATE FROM THE REQUEST (wrap-form-4xx-2 (fn [{:keys [wizard] :as request}] ;; THIS MAY BE BETTER TO JUST MAKE THE LINEAR WIZARD POPULATE FROM THE REQUEST
(html-response (html-response
(render-wizard wizard request) (render-wizard wizard request)
:headers {"x-transition-type" "none" :headers {"x-transition-type" "none"
"HX-reswap" "outerHTML"}))))) "HX-reswap" "outerHTML"})))))
(defn get-transition-type [wizard from-step-key to-step-key] (defn get-transition-type [wizard from-step-key to-step-key]
(let [to-step-index (.indexOf (steps wizard) to-step-key) (let [to-step-index (.indexOf (steps wizard) to-step-key)

View File

@@ -484,135 +484,36 @@
(format "$%,.2f" total)) (format "$%,.2f" total))
(com/data-grid-cell {})))]))) (com/data-grid-cell {})))])))
(defrecord BasicDetailsStep [linear-wizard] (defn transaction-details-panel [tx]
mm/ModalWizardStep [:div.p-4.space-y-4
(step-name [_] [:h3.text-sm.font-semibold.text-gray-900.uppercase.tracking-wider "Details"]
"Transaction Details") [:div.space-y-3
(step-key [_] [:div
:basic-details) [:div.text-xs.font-medium.text-gray-500 "Amount"]
[:div.text-sm.font-medium.text-gray-900 (format "$%,.2f" (Math/abs (:transaction/amount tx)))]]
(edit-path [_ _] [:div
[]) [:div.text-xs.font-medium.text-gray-500 "Date"]
[:div.text-sm.text-gray-900 (some-> tx :transaction/date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
(step-schema [_] [:div
(mc/schema [:map [:div.text-xs.font-medium.text-gray-500 "Bank Account"]
[:db/id {:optional true} [:maybe entity-id]]])) [:div.text-sm.text-gray-900 (or (-> tx :transaction/bank-account :bank-account/name) "-")]]
[:div
(render-step [:div.text-xs.font-medium.text-gray-500 "Post Date"]
[this {:keys [multi-form-state] :as request}] [:div.text-sm.text-gray-900 (some-> tx :transaction/post-date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
(let [tx-id (mm/get-mfs-field multi-form-state :db/id) [:div
tx (d-transactions/get-by-id tx-id)] [:div.text-xs.font-medium.text-gray-500 "Description"]
(alog/info ::TRANSACTION :i multi-form-state) [:div.text-sm.text-gray-900.truncate.cursor-help
(mm/default-render-step {:title (or (:transaction/description-original tx) "No original description")}
linear-wizard this (or (:transaction/description-simple tx) "-")]]
:head [:div.p-2 "Edit transaction"] [:div
:body (mm/default-step-body [:div.text-xs.font-medium.text-gray-500 "Check Number"]
{} [:div.text-sm.text-gray-900 (or (:transaction/check-number tx) "-")]]
[:div {:x-data (hx/json {:clientId (or (fc/field-value (:transaction/client fc/*current*)) [:div
(:db/id (:client request)))})} [:div.text-xs.font-medium.text-gray-500 "Status"]
[:div.text-sm.text-gray-900 (or (some-> tx :transaction/status) "-")]]
;; Read-only transaction details [:div
[:div.mb-6.border.rounded-lg.p-4.bg-gray-50 [:div.text-xs.font-medium.text-gray-500 "Transaction Type"]
[:h3.text-lg.font-semibold.mb-2 "Transaction Details"] [:div.text-sm.text-gray-900 (or (some-> tx :transaction/type) "-")]]]])
[:div.grid.grid-cols-2.gap-4
[:div
[:div.text-sm.font-medium.text-gray-500 "Amount"]
[:div.text-base (format "$%,.2f" (Math/abs (:transaction/amount tx)))]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Date"]
[:div.text-base (some-> tx :transaction/date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Bank Account"]
[:div.text-base (or (-> tx :transaction/bank-account :bank-account/name) "-")]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Post Date"]
[:div.text-base (some-> tx :transaction/post-date coerce/to-date-time (atime/unparse-local atime/normal-date))]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Original Description"]
[:div.text-base (or (:transaction/description-original tx) "-")]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Simplified Description"]
[:div.text-base (or (:transaction/description-simple tx) "-")]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Check Number"]
[:div.text-base (or (:transaction/check-number tx) "-")]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Status"]
[:div.text-base (or (some-> tx :transaction/status) "-")]]
[:div
[:div.text-sm.font-medium.text-gray-500 "Transaction Type"]
[:div.text-base (or (some-> tx :transaction/type) "-")]]]]
;; Transaction Links Section
#_[:div.mb-6.border.rounded-lg.p-4.bg-gray-50
[:h3.text-lg.font-semibold.mb-2 "Transaction Links"]
(let [tx-id (mm/get-mfs-field multi-form-state :db/id)
db-history (dc/history (dc/db conn))
;; Get current and historical payments linked to this transaction
current-payment (when-let [payment-id (-> (dc/pull (dc/db conn)
'[:transaction/payment]
tx-id)
:transaction/payment
:db/id)]
{:entity-id payment-id :active true})
historical-payments (when tx-id
(->> (dc/q '[:find ?payment ?inst ?added
:in $ ?e
:where
[?e :transaction/payment ?payment ?tx ?added]
[?tx :db/txInstant ?inst]]
db-history tx-id)
(map (fn [[id date op]] {:entity-id id
:date date
:op op}))))
all-payments historical-payments]
[:div
;; Payments section
[:div.mb-3
[:h4.font-medium.text-gray-700 "Linked Payments:"]
(if (seq all-payments)
[:ul.list-disc.pl-6.mt-1
(for [{:keys [entity-id date op]} all-payments
:let [payment (dc/pull (dc/db conn)
'[:db/id :payment/invoice-number
[:payment/date :xform clj-time.coerce/from-date]
{:payment/vendor [:vendor/name]}]
entity-id)]]
[:li.text-sm.text-gray-600 {:class (when-not op "line-through")}
(if op [:span.text-green-600 "✓ "] "")
(str "Payment #" (:payment/invoice-number payment) " - "
(-> payment :payment/vendor :vendor/name))])]
[:p.text-sm.text-gray-500.italic "No payments linked to this transaction"])]])]]
;; Invoices section
;; Hidden ID field
(fc/with-field :db/id
(com/hidden {:name (fc/field-name)
:value (fc/field-value)}))
;; Editable fields section
;; Vendor field
)
:footer
(mm/default-step-footer linear-wizard this :validation-route ::route/edit-wizard-navigate)
:validation-route ::route/edit-wizard-navigate)))
mm/Initializable
(init-step-params
[_ current request]
(:step-params current)))
(defn get-available-payments [request] (defn get-available-payments [request]
(let [tx-id (or (get-in request [:form-params :transaction-id]) (let [tx-id (or (get-in request [:form-params :transaction-id])
@@ -856,121 +757,126 @@
(mm/form-schema linear-wizard)) (mm/form-schema linear-wizard))
(render-step [this {{:keys [snapshot] :as multi-form-state} :multi-form-state :as request}] (render-step [this {{:keys [snapshot] :as multi-form-state} :multi-form-state :as request}]
(mm/default-render-step (let [tx-id (mm/get-mfs-field multi-form-state :db/id)
linear-wizard this tx (d-transactions/get-by-id tx-id)]
:head [:div.p-2 "Transaction Actions"] (mm/default-render-step
:body (mm/default-step-body linear-wizard this
{} :head [:div.p-2 "Edit Transaction"]
[:div :width-height-class " md:w-[950px] md:h-[650px] "
(fc/with-field :transaction/memo :side-panel (transaction-details-panel tx)
(com/validated-field :body (mm/default-step-body
{:label "Memo" {}
:errors (fc/field-errors)} [:div
[:div.w-96 (fc/with-field :transaction/memo
(com/text-input {:value (-> (fc/field-value)) (com/validated-field
:name (fc/field-name) {:label "Memo"
:error? (fc/field-errors) :errors (fc/field-errors)}
:placeholder "Optional note"})])) [:div.w-96
[:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request)) (com/text-input {:value (-> (fc/field-value))
"link-payment" :name (fc/field-name)
(or (fc/with-field :action (fc/field-value)) :error? (fc/field-errors)
"manual")) :placeholder "Optional note"})]))
:canChange (boolean (not (:transaction/payment (:entity request))))}) [:div {:x-data (hx/json {:activeForm (if (:transaction/payment (:entity request))
"@unlinked" "canChange=true"} "link-payment"
[:div {:class "flex space-x-2 mb-4"} (or (fc/with-field :action (fc/field-value))
(fc/with-field :action "manual"))
(com/hidden {:name (fc/field-name) :canChange (boolean (not (:transaction/payment (:entity request))))})
:value (fc/field-value) "@unlinked" "canChange=true"}
":value" "activeForm"})) [:div {:class "flex space-x-2 mb-4"}
(com/button-group {:name "method"} (fc/with-field :action
(com/button-group-button {"@click" "activeForm = 'link-payment'" :value "payment" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-payment'}" :class "relative"} (com/hidden {:name (fc/field-name)
(let [count (count-payment-matches request)] :value (fc/field-value)
(when (> count 0) ":value" "activeForm"}))
(com/badge {:color "green"} (str count)))) (com/button-group {:name "method"}
"Link to payment") (com/button-group-button {"@click" "activeForm = 'link-payment'" :value "payment" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-payment'}" :class "relative"}
(com/button-group-button {"@click" "activeForm = 'link-unpaid-invoices'" :value "unpaid" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-unpaid-invoices'}" :class "relative" (let [count (count-payment-matches request)]
":disabled" "!canChange"} (when (> count 0)
(let [count (count-unpaid-invoice-matches request)] (com/badge {:color "green"} (str count))))
(when (> count 0) "Link to payment")
(com/badge {:color "green"} (str count)))) (com/button-group-button {"@click" "activeForm = 'link-unpaid-invoices'" :value "unpaid" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-unpaid-invoices'}" :class "relative"
"Link to unpaid invoices") ":disabled" "!canChange"}
(com/button-group-button {"@click" "activeForm = 'link-autopay-invoices'" :value "autopay" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-autopay-invoices'}" :class "relative" (let [count (count-unpaid-invoice-matches request)]
":disabled" "!canChange"} (when (> count 0)
(let [count (count-autopay-invoice-matches request)] (com/badge {:color "green"} (str count))))
(when (> count 0) "Link to unpaid invoices")
(com/badge {:color "green"} (str count)))) (com/button-group-button {"@click" "activeForm = 'link-autopay-invoices'" :value "autopay" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'link-autopay-invoices'}" :class "relative"
"Link to autopay invoices") ":disabled" "!canChange"}
(com/button-group-button {"@click" "activeForm = 'apply-rule'" :value "rule" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'apply-rule'}" :class "relative" (let [count (count-autopay-invoice-matches request)]
":disabled" "!canChange"} (when (> count 0)
(let [count (count-rule-matches request)] (com/badge {:color "green"} (str count))))
(when (> count 0) "Link to autopay invoices")
(com/badge {:color "green"} (str count)))) (com/button-group-button {"@click" "activeForm = 'apply-rule'" :value "rule" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'apply-rule'}" :class "relative"
"Apply rule") ":disabled" "!canChange"}
(com/button-group-button {"@click" "activeForm = 'manual'" :value "manual" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'manual'}" (let [count (count-rule-matches request)]
":disabled" "!canChange"} (when (> count 0)
"Manual"))] (com/badge {:color "green"} (str count))))
[:div {:x-show "activeForm === 'link-payment'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"} "Apply rule")
(com/button-group-button {"@click" "activeForm = 'manual'" :value "manual" ":class" "{ '!bg-primary-200 text-primary-800': activeForm === 'manual'}"
":disabled" "!canChange"}
"Manual"))]
[:div {:x-show "activeForm === 'link-payment'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
(payment-matches-view request)] (payment-matches-view request)]
[:div {:x-show "activeForm === 'link-unpaid-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"} [:div {:x-show "activeForm === 'link-unpaid-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
(unpaid-invoices-view request)] (unpaid-invoices-view request)]
[:div {:x-show "activeForm === 'link-autopay-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"} [:div {:x-show "activeForm === 'link-autopay-invoices'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
(autopay-invoices-view request)] (autopay-invoices-view request)]
[:div {:x-show "activeForm === 'apply-rule'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"} [:div {:x-show "activeForm === 'apply-rule'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
(transaction-rules-view request)] (transaction-rules-view request)]
[:div {:x-show "activeForm === 'manual'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"} [:div {:x-show "activeForm === 'manual'", :x-transition:enter "transition ease-out duration-500", :x-transition:enter-start "opacity-0 transform scale-95", :x-transition:enter-end "opacity-100 transform scale-100"}
[:div {} [:div {}
[:div {:hx-trigger "change" [:div {:hx-trigger "change"
:hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed) :hx-post (bidi/path-for ssr-routes/only-routes ::route/edit-vendor-changed)
:hx-target "#account-grid-body" :hx-target "#account-grid-body"
:hx-swap "outerHTML" :hx-swap "outerHTML"
:hx-include "closest form"} :hx-include "closest form"}
(fc/with-field :transaction/vendor (fc/with-field :transaction/vendor
(com/validated-field (com/validated-field
{:label "Vendor" {:label "Vendor"
:errors (fc/field-errors)} :errors (fc/field-errors)}
[:div.w-96 [:div.w-96
(com/typeahead {:name (fc/field-name) (com/typeahead {:name (fc/field-name)
:error? (fc/error?) :error? (fc/error?)
:class "w-96" :class "w-96"
:placeholder "Search..." :placeholder "Search..."
:url (bidi/path-for ssr-routes/only-routes :vendor-search) :url (bidi/path-for ssr-routes/only-routes :vendor-search)
:value (fc/field-value) :value (fc/field-value)
:content-fn (fn [c] (pull-attr (dc/db conn) :vendor/name c))})]))] :content-fn (fn [c] (pull-attr (dc/db conn) :vendor/name c))})]))]
;; Memo field ;; Memo field
;; Approval status field ;; Approval status field
(fc/with-field :transaction/approval-status (fc/with-field :transaction/approval-status
(com/validated-field (com/validated-field
{:label "Status" {:label "Status"
:errors (fc/field-errors)} :errors (fc/field-errors)}
(let [current-value (name (or (fc/field-value) :transaction-approval-status/unapproved))] (let [current-value (name (or (fc/field-value) :transaction-approval-status/unapproved))]
[:div {:x-data (hx/json {:approvalStatus current-value})} [:div {:x-data (hx/json {:approvalStatus current-value})}
(com/hidden {:name (fc/field-name) (com/hidden {:name (fc/field-name)
:value current-value :value current-value
":value" "approvalStatus"}) ":value" "approvalStatus"})
[:div {:class "inline-flex rounded-md shadow-sm", :role "group"} [:div {:class "inline-flex rounded-md shadow-sm", :role "group"}
(com/button-group-button {"@click" "approvalStatus = 'approved'" (com/button-group-button {"@click" "approvalStatus = 'approved'"
":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'approved' }" ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'approved' }"
:class "rounded-l-lg"} :class "rounded-l-lg"}
"Approved") "Approved")
(com/button-group-button {"@click" "approvalStatus = 'unapproved'" (com/button-group-button {"@click" "approvalStatus = 'unapproved'"
":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'unapproved' }"} ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'unapproved' }"
"Unapproved") :class "rounded-r-lg"}
(com/button-group-button {"@click" "approvalStatus = 'suppressed'" "Unapproved")
":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'suppressed' }" (com/button-group-button {"@click" "approvalStatus = 'suppressed'"
:class "rounded-r-lg"} ":class" "{ '!bg-primary-200 text-primary-800': approvalStatus === 'suppressed' }"
"Client Review")]]))) :class "rounded-r-lg"}
(fc/with-field :transaction/accounts "Client Review")]])))
(com/validated-field (fc/with-field :transaction/accounts
{:errors (fc/field-errors)} (com/validated-field
[:div#account-grid-body {:errors (fc/field-errors)}
(account-grid-body* request)]))]]]]) [:div#account-grid-body
:footer (account-grid-body* request)]))]]]])
(mm/default-step-footer linear-wizard this :validation-route ::route/edit-wizard-navigate :footer
:next-button (com/button {:color :primary :x-ref "next" :class "w-32 wizard-save-action"} "Done")) (mm/default-step-footer linear-wizard this :validation-route ::route/edit-wizard-navigate
:validation-route ::route/edit-wizard-navigate))) :next-button (com/button {:color :primary :x-ref "next" :class "w-32 wizard-save-action"} "Done"))
:validation-route ::route/edit-wizard-navigate))))
(defmulti save-handler (fn [request] (defmulti save-handler (fn [request]
(-> request :multi-form-state :snapshot :action))) (-> request :multi-form-state :snapshot :action)))
@@ -1369,7 +1275,7 @@
(get-current-step [this] (get-current-step [this]
(if current-step (if current-step
(mm/get-step this current-step) (mm/get-step this current-step)
(mm/get-step this :basic-details))) (mm/get-step this :links)))
(render-wizard [this {:keys [multi-form-state] :as request}] (render-wizard [this {:keys [multi-form-state] :as request}]
(mm/default-render-wizard (mm/default-render-wizard
this request this request
@@ -1379,13 +1285,11 @@
(str (bidi/path-for ssr-routes/only-routes ::route/edit-submit)))) (str (bidi/path-for ssr-routes/only-routes ::route/edit-submit))))
:render-timeline? false)) :render-timeline? false))
(steps [_] (steps [_]
[:basic-details [:links])
:links])
(get-step [this step-key] (get-step [this step-key]
(let [step-key-result (mc/parse mm/step-key-schema step-key) (let [step-key-result (mc/parse mm/step-key-schema step-key)
[step-key-type step-key] step-key-result] [step-key-type step-key] step-key-result]
(get {:basic-details (->BasicDetailsStep this) (get {:links (->LinksStep this)}
:links (->LinksStep this)}
step-key))) step-key)))
(form-schema [_] (form-schema [_]
edit-form-schema) edit-form-schema)