Clojurians Log v2

Normally, you put join in the query only when you want to go one level deeper into the child, because the shape of the query is supposed to match the shape of the ui. Therefore, :account/edit should be a property just like :account/id, :account/name, etc. In Tony's book, he actually gave an excellent example to show you how editing? can be done. Do check this out: https://book.fulcrologic.com/#_focusing_an_input

@alexpiers.fp thank you

So adding the :account/editing? to my data worked when I want to support multiple rows being edited at the same time. However if I only want 1 row being edited at a time what's best practice? First thing I thought of was write a mutation that toggles all :account/editing? to false and then toggling the 1 record that needs to be edited to true.

ah nvm I think I got it 😄

Am I doing something wrong? I'm unable to get fs/dirty? to print true when I make changes to the form. Or when I try to get fs/dirty-fields I get an empty map as if nothing changed.

(defsc AccountItemForm
  "User Account Edit Form"
  [this {:account/keys [id name email active? editing?] :as props}]
  {:query [:account/editing? :account/id :account/name :account/email :account/active? fs/form-config-join]
   :ident :account/id
   :form-fields #{:account/name :account/email :account/active?}}
  (let [form-dirty? (fs/dirty? (prim/props this))]
    (println "Form DIrty?" form-dirty? (fs/dirty? props))
    (dom/tr :.ui.form {:classes [(when form-dirty? "warning")]}
            (dom/td (dom/input {:value name
                                :name :account/name
                                :onChange #(m/set-string! this :account/name :event %)}))
            (dom/td (dom/input {:value email
                                :name :account/email
                                :type "email"
                                :onChange #(m/set-string! this :account/email :event %)}))
            (dom/td (dom/input {:checked active? :name :account/active? :type "checkbox"}))
            (dom/td (dom/div
                     (dom/button {:onClick
                                  #(prim/transact! this `[(app.model.account/submit-account-changes {:account-id ~id :delta ~(fs/dirty-fields props true)})])}
                                 "Save")
                     (dom/button {:onClick
                                  #(prim/transact! this `[(app.model.account/cancel-account-edit {:account-id ~id})])}
                                 "Cancel"))))))

I think you must first mark the changed fields as "done". Or perhaps this only applies to validation checks?

Remember UI = f(data) so look at what data and form data is in the DB. Also, is the initial form state added correctly when adding account data to the DB?

If you use this component to load data, try adding

{:pre-merge (fn [{:keys [data-tree current-normalized]}]
              (merge current-normalized (fs/add-form-config AccountItemForm data-tree)))}

Other than potentially that, I can't see anything that sticks out.