Stimulus JS integration and Custom Assets feedback

[adrianthedev]

Let's use this space to provide feedback for the Stimulus JS integration.

Post an issue if something is broken.

[lpe]

I am trying to integrate Stimulus but it is not working. The JS assets are present but the basic connect event is not even triggered. I'm probably making a mistake but I can't see where, here's the information:

1. ruby 3.1.2p20 / Rails 7.0.4
2. I use Esbuild / jsbundling-rails
3. Stimulus 3.1.0 works on my main application
4. avo.custom.js works
5. The concerned resource is AccountResource, I set self.stimulus_controllers = "account-resource", the controller account_resource_controller.js is well compiled and put in assets/builds, . _head.html.erb contains <%= javascript_include_tag "account_resource_controller", "data-turbo-track": "reload", defer: true %>, the controller and data attributes are well present in the html code
6. The code of my JS controller is as simple as :

import { Controller } from "@hotwired/stimulus"
// Connects to data-controller="account-resource"
export default class extends Controller {
  static values = {
    view: String,
  }
  async connect() {
    console.log('view ->', this.viewValue)
  }
}

Thanks in advance for your help.

[adrianthedev]

I think you need to register that controller. Please check out https://github.com/avo-hq/avo/blob/main/spec/dummy/app/javascript/avo.custom.js#L11 how we import and register it in the avo.custom.js file.
You'll be able to remove the <%= javascript_include_tag "account_resource_controller", "data-turbo-track": "reload", defer: true %> from the _head.

Let me know if this fixes it.

[lpe]

Great, this is working. Plesa note that the "usual way" (import / resgister via index.js) did not work too. Thx for your help.

[adrianthedev]

🙌 Perf! Anytime!

[rkumar]

Hi Adrian,
I am trying out the part relating to country and cities. I have modified the country and cities part to use the city-state gem. It works fine in New mode. However, in edit mode, the second select (I have replaced city with state) needs to know the existing value of state, so that the list can be populated.

In a resource file, I don't know how to call instance methods of the model, or how to refer to a value in the model.

If I print the state on the form, it prints correctly.
field :state_label, as: :text, name: "State", disabled: true, only_on: [:show, :index, :edit]

However, the code for the state select is:
field :state, as: :select, options: Challan.states(:IN).invert, ....

Here in place of :IN, I need to have the value of country.

[adrianthedev]

Can you try using a block?

field :state, as: :select, options: ->(model:, resource:, field:, view:) {
  Challan.states(model.country).invert
}

[rkumar]

Thanks a lot, Adrian. This worked fine. I have another two simple questions.

1. I don't see a radio button in the fields. Am I missing something ?
2. How do I access the via_resource_id params in the resource file. I have tried in the resource file and the controller and model but get an error about params not being a variable or method. I notice that Avo does use it to get values in the breadcrumbs on top.

[adrianthedev]

1. There isn't one. We have the select field which can be used like that. We'd merge a PR if we had one.
2. You'd have to show me some code to see where you want to use it. But you can at anytime use Avo::App.params almost everywhere, and that will contain the params.

[rkumar]

Adrian, sorry for the simple questions.
Is it possible to display a computed field on the :new page. I have a computed field that shows fine on the show and index, but not new. I've tried adding only_on: [:new] but it won't show on new.

field 'Ministry', as: :text do |model, resource, view|
   model.department.ministry.name
 rescue
   false
 end

[adrianthedev]

Computed fields are rendered only on Show and Index views, and that's by design. So when you add a computed field, you are creating a property on the record that doesn't exist in the database. That's why it's not rendered on the edit views.

What are you trying to achieve?

[rkumar]

Adrian, thanks a lot for your replies. Let's say a Ministry has many Departments, and Departments have Officers. When creating a new officer from the Department page, if we wish to display the Ministry too (through Department), then I'd like to show it in some way. If not a field, then something else ?

That was my use case. Thanks a lot.

[adrianthedev]

Got it. Thanks for explaining. That's an interesting use case.

You need to add two methods to your model so Avo can use them as properties.

# In your model
# This will add the getter which will find the ministry name (use title or whatever other attribute you have on the Ministry model)
def ministry_label
  department&.ministry&.name
end

# Add an empty setter. Avo will use this when the user submits the form.
def ministry_label=(value)
end

# In your Avo resource use that property as a regular one
field :ministry_label, as: :text, disabled: true

[rkumar]

Thanks a lot, Adrian. Worked beautifully.