Fork me on GitHub
#fulcro
<
2023-12-22
>
Tobias Burger11:12:31

Is it possible to define/refer to a report inside a RAD form? Use case: I want to show reports that are filtered by the ident of the form's entity. For example in the RAD demo a use case could be to show the list of the invoices that were created by the account. AccountInvoices would be a perfect fit to be shown inside the AccountForm. I've managed to get it working with my own defsc component and customize the render of the form but couldn't figure out a way to render a report. I am pretty sure that I need to use the report/render-report method but couldn't figure out a way to create the instance of a report.

Jakub Holý (HolyJak)11:12:57

A report is still just a defsc. Can't you, in the rendering of the form body, simply do ((comp/factory MyReport) props)?

Tobias Burger15:12:06

I've tried using comp/factory but it tells me that it expects a map and not a vector of elements. But maybe I need to load the report data independently from the form data (or rather the data gets loaded by the report). At the moment it is using the 'edge' field (defattr :account/account-invoices) on the accounts model where I have defined the necessary Pathom query functionality. So by querying for the {:account/invoices [...]} field I get all the invoices that are associated with the account. Maybe I am thinking way to complicated... I will test again the comp/factory approach with other parameters. Now that I think about it I probably have to specify the filter expression (filter by the account/id) and not provide the data beforehand.

Jakub Holý (HolyJak)15:12:52

Both ways should work (report loading / getting data passed). For the former, you'd need to trigger it's UISM to do the load (normally done automatically in its will-enter when accessed via routing). For the latter - use the report under a root router first & check what it's props look like, so you know what to pass to it. Report loading itself might be easier as it is closer to how it normally is used.

Tobias Burger15:12:27

Thanks! That was exactly my next question: how do I know which parameters I need to define! 😅 At the moment nothing gets loaded because as you said the report/load! wasn't executed.

Jakub Holý (HolyJak)15:12:29

Of course you could simply (comp/get-query ReportComp)

Tobias Burger16:12:04

Sorry again, I struggle with the :will-enter function. I can't find the place where the function gets defined in RAD and when I read the value from the REPL I simply get a #object[Function]. The following works, but the state machine doesn't get started.

:will-enter (fn [app {:keys [id]}]
                 (let [ident (comp/get-ident AccountForm {:account/id (new-uuid id)})]
                   (dr/route-deferred ident #(df/load! app ident AccountForm {:post-mutation `dr/target-ready
                                                                              :post-mutation-params {:target ident}}))))}

Tobias Burger16:12:00

Now I am pretty sure I need to start the form state machine (with form/start-form!) but struggle with the necessary parameters.

Tobias Burger16:12:58

Okay, got it to work with the following code:

:will-enter (fn [app {:keys [id] :as params}]
                 (let [id (ids/id-string->id :uuid id)
                       form-ident [:account/id id]]
                   (dr/route-deferred
                    form-ident
                    (fn []
                      (form/start-form! app id AccountForm params)))))

Tobias Burger16:12:37

Side note: shouldn't the code call dr/target-ready? I've extracted the code as it is defined under form/form-will-enter where the target-ready is missing. report/report-will-enter does define the dr/target-ready.

Jakub Holý (HolyJak)08:12:19

Why would you call deferred & ready at the same time? Then you could just use dr/immediate. I assume the form uism calls target ready when it is ready.

Eric Dvorsak13:12:13

I was having a hard time figuring out how to solve this: I have a component (with defsc) to wrap a QuillJS editor. I wanted to call an "onEnter" function when the user presses Enter, to submit the current value, but only when "disabled" (a prop I pass) is false. What was difficult is that I init QuillJS in a useEffect, and the keybinding is set there, but it closes on the initial value of onEnter and value. I tried various things but ultimately it was as simple as using (comp/props this) to get the current value of onEnter, value and disable instead of a closed one

❤️ 1