popper to tippy

This commit is contained in:
2024-10-15 06:45:33 -07:00
parent ca5d90b17f
commit 631ee905da
10 changed files with 125 additions and 142 deletions

View File

@@ -382,8 +382,8 @@
:hx-get (bidi/path-for ssr-routes/only-routes
::route/pay-wizard)
:hx-trigger "click from:#pay-button"
:x-data "popper()"
}
:x-tooltip "{allowHTML: true, content: () => $refs.template.innerHTML, appendTo: $root}"
}
(com/button {:color :primary
:id "pay-button"
:disabled (or (= (count (:ids params)) 0)
@@ -406,21 +406,21 @@
(when (or (= 0 (count ids))
(> selected-client-count 1))
(com/badge {} "!")))
(com/tooltip {:x-bind "tooltip" }
(cond
(not all-credits-or-debits)
[:div "All vendor totals must be either positive or negative."]
(and (= 0 (count ids))
(not= (count (:ids params))
0))
[:div "No " [:span.font-bold "payable"] " invoices selected."]
[:template {:x-ref "template"}
(cond
(not all-credits-or-debits)
[:div "All vendor totals must be either positive or negative."]
(and (= 0 (count ids))
(not= (count (:ids params))
0))
[:div "No " [:span.font-bold "payable"] " invoices selected."]
(= 0 (count ids))
[:div "Please select some invoices to pay"]
(> selected-client-count 1)
[:div "Can only pay for one client at a time"]
:else
[:div "Click to choose a bank account"]))]))
(= 0 (count ids))
[:div "Please select some invoices to pay"]
(> selected-client-count 1)
[:div "Can only pay for one client at a time"]
:else
[:div "Click to choose a bank account"])]]))
(defn pay-button [request]
@@ -817,9 +817,7 @@
(defn bank-account-card-base [{:keys [bg-color text-color icon bank-account can-handwrite? credit-only?]}]
[:div {:class "w-[30em]"}
(com/card {:class "w-full"}
[:div.flex.items-stretch {:x-data (hx/json {:chosen false
:popper nil})
"x-init" "popper = Popper.createPopper($refs.button, $refs.tooltip, {placement: 'bottom', strategy: 'fixed', modifiers: [{name: 'preventOverflow'}, {name: 'offset', options: {offset: [0, 10]}}]});"}
[:div.flex.items-stretch {}
(com/hidden {:name "item"
:value (:db/id bank-account)})
[:div.grow-0.flex.flex-col.justify-center
@@ -832,7 +830,7 @@
[:div.flex.flex-col.grow.m-2
[:div.font-medium.text-gray-700 (:bank-account/name bank-account)]
[:div.font-light.text-gray-600 (:bank-account/bank-name bank-account)]]
[:div.grow-0.m-2.self-center
[:div.grow-0.m-2.self-center {:x-data (hx/json {})}
(if credit-only?
(com/button {:color :primary
:minimal-loading? true
@@ -843,52 +841,52 @@
:to (mm/encode-step-key :payment-details)})}
"Credit")
(com/button {:x-ref "button"
"@click.prevent.capture" "chosen=true; $nextTick(() => popper.update())"}
"@click.prevent.capture" "$tooltip($refs.tooltip.innerHTML, {allowHTML: true, onMount(i) {htmx.process(i.popper)}, interactive:true, theme:\"light\", timeout:5000})" }
"Pay"))
[:div.flex.flex-col.gap-2 (hx/alpine-appear {:x-show "chosen" :x-ref "tooltip"
:data-key "vis"
:class "bg-gray-100 dark:bg-gray-600 rounded-lg shadow-2xl w-max z-50 p-4"
"@click.outside" "chosen=false"})
(when (= :bank-account-type/check
(:bank-account/type bank-account))
(com/button {:color :primary
:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "print-check"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Print check"))
(when (= :bank-account-type/cash
(:bank-account/type bank-account))
(com/button {:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "cash"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"With cash"))
(when (not= :bank-account-type/cash
(:bank-account/type bank-account))
(com/button {:color (when (= :bank-account-type/credit
(:bank-account/type bank-account))
:primary)
:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "debit"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Debit"))
(when (and (= :bank-account-type/check (:bank-account/type bank-account))
can-handwrite?)
(com/button {:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "handwrite-check"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Handwrite check"))]]])])
[:template { :x-ref "tooltip"}
[:div.flex.flex-col.gap-2 {
:data-key "vis"
:class "p-4 w-max" }
(when (= :bank-account-type/check
(:bank-account/type bank-account))
(com/button {:color :primary
:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "print-check"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Print check"))
(when (= :bank-account-type/cash
(:bank-account/type bank-account))
(com/button {:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "cash"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"With cash"))
(when (not= :bank-account-type/cash
(:bank-account/type bank-account))
(com/button {:color (when (= :bank-account-type/credit
(:bank-account/type bank-account))
:primary)
:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "debit"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Debit"))
(when (and (= :bank-account-type/check (:bank-account/type bank-account))
can-handwrite?)
(com/button {:minimal-loading? true
:hx-vals (hx/json {"step-params[bank-account]" (:db/id bank-account)
"step-params[method]" "handwrite-check"})
:hx-put (hu/url (bidi/path-for ssr-routes/only-routes ::route/pay-wizard-navigate)
{:from (mm/encode-step-key :choose-method)
:to (mm/encode-step-key :payment-details)})}
"Handwrite check"))]]]])])
(defmulti bank-account-card (fn [ba _ _]
(:bank-account/type ba)))