Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
(ns ucv.ui.pos-config.tax-master-detail
(:require
[fulcro-css.css :as css]
[fulcro.client.dom :as dom :refer [div]]
[fulcro.client.mutations :as m]
[fulcro.client.primitives :as prim :refer [defsc]]
[fulcro.client.routing :as r :refer [defsc-router]]
[fulcro.incubator.ui-state-machines :as uism :refer-macros [defstatemachine]]
[fulcro.ui.form-state :as fs]
[taoensso.timbre :as log]
[ucv.ui.form-helper :as form-helper]
[ucv.ui.pos-config.state-machine :as sm]
[ucv.ui.menus :as u.menus]
[ucv.ui.pos-config.master-detail :as imd]
[ucv.ui.shared-css :refer [SharedCss]]
[ucv.ui.crud-machine :as crud]
[ucv.util :as util :refer [Defn =>]]
[fulcro.client.data-fetch :as df]
[fulcro.client.localized-dom :as ldom]
[ucv.ui.components :as u.components]
[ucv.lib.math :as math]))
(defsc TaxListItem [this {:tax/keys [id title enabled? percentage]}]
{:query [:tax/id :tax/title :tax/enabled? :tax/percentage]
:ident [:tax/id :tax/id]
:componentDidMount (fn []
(df/load this [:tax/id (:tax/id (prim/props this))]
TaxListItem))}
(let [{:keys [clickable-item]} (css/get-classnames SharedCss)]
(div :.item {:onClick #(uism/trigger! this ::machine :event/edit
{:ident [:tax/id id]})
:classes [clickable-item]}
(div :.right.floated
(u.components/ui-percent {:value percentage}))
(div :.content
(dom/span title)))))
(def ui-tax-list-item (prim/factory TaxListItem {:keyfn :tax/id}))
(defsc TaxList [this {:keys [:entities] :as props}]
{:query [{:entities (prim/get-query TaxListItem)}]
:ident (fn [] [:COMPONENT/by-id ::tax-list])
:initial-state {:entities []}
:componentDidMount (fn []
(df/load this :server/list-of-taxes
TaxList
{:target [:COMPONENT/by-id ::tax-list :entities]}))}
(let [add-tax-button (dom/a :.item {:onClick #(uism/trigger! this ::machine :event/create)}
(dom/i :.plus.icon))]
(div :.ui.container
(u.menus/ui-back-menu {:header "Taxes"
:go-back #(uism/trigger! this ::machine :event/exit)
:right-item add-tax-button})
(util/error-boundary :.ui.basic.segment :.ui.middle.aligned.celled.list.massive
(map ui-tax-list-item (sort-by :tax/title entities)))
(util/divs :.ui.basic.center.aligned.segment :.ui.message
(dom/p "Tax rates can be applied to specific item categories and will be automatically calculated at purchase.")))))
(def ui-tax-list (prim/factory TaxList {:keyfn :db/id}))
(defn tax-form [this {:tax/keys [percentage enabled?]}]
(dom/form :.ui.form
(form-helper/text-input
this {:field :tax/title
:required true
:label "Title"
:error-label "Title is required."})
(div :.field
(form-helper/toggle-input this {:field :tax/enabled?
:label "Enabled"}))
(form-helper/percent-input
this {:field :tax/percentage
:required true
:label "Percentage"
:placeholder "0"
:error-label "Percentage is required."})))
(defsc TaxDetail [this {:ui/keys [show-confirm-delete?]
:tax/keys [id title enabled? percentage]
:as props}]
{:query [:tax/id :tax/title :tax/enabled? :tax/percentage :tax/categories
fs/form-config-join [df/marker-table :actor/detail]
:ui/show-confirm-cancel? :ui/show-confirm-delete?]
:form-fields #{:tax/title :tax/enabled? :tax/percentage}
:ident [:tax/id :tax/id]}
(let [active-state (uism/get-active-state this ::machine)
new? (= :state/creating-entity active-state)]
(div :.ui.container {:onClick #(when show-confirm-delete?
(m/set-value! this :ui/show-confirm-delete? false))}
(imd/detail-menu this props
{:title (if new? "Create Tax" "Edit Tax")
:machine-id ::machine
:save-params (if new?
{:delta {:tax/id id
:tax/title title
:tax/enabled? enabled?
:tax/percentage percentage}}
{:delta (fs/dirty-fields props false)})
:new? new?})
(util/error-boundary
(if (df/loading? (get props [df/marker-table :actor/detail]))
(div :.ui.active.centered.inline.loader)
(prim/fragment
(div :.ui.basic.segment
(tax-form this props))
(div :.ui.basic.segment
(imd/delete-button this props {:new? new? :machine-id ::machine}))))))))
(def ui-tax-detail (prim/factory TaxDetail {:keyfn :tax/id}))
(defsc-router TaxMasterDetail [this {:keys [tax/id] :as props}]
{:router-id ::pos-config-router
:ident (fn [] (if id
[:tax/id id]
[:COMPONENT/by-id ::tax-list]))
:default-route TaxList
:router-targets {:COMPONENT/by-id TaxList
:tax/id TaxDetail}
:componentDidMount (fn []
(log/info "Starting crud-machine for" ::machine)
(uism/begin! this crud/crud-machine ::machine
{:actor/router this
:actor/list TaxList
:actor/list-item (uism/with-actor-class [:tax/id :none] TaxListItem)
:actor/detail (uism/with-actor-class [:tax/id :none] TaxDetail)}
{:create-mutation-sym 'ucv.ui.pos-config.backend/create-tax
:read-list-key :ucv.models.tax/all-taxes
:update-mutation-sym 'ucv.ui.pos-config.backend/update-tax
:delete-mutation-sym 'ucv.ui.pos-config.backend/delete-tax
:parent-machine ::sm/pos-config-machine
:entity-template {:tax/title ""
:tax/percentage (math/bigdecimal "0")
:tax/enabled? true}
:default-complete-fields #{:tax/enabled? :tax/percentage}}))}
(dom/div "Error Router in bad state."))
(def ui-tax-master-detail (prim/factory TaxMasterDetail))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment