Problem/Motivation

Currently the user needs to select a component from the drop-down list, save the change, then open the Settings pop-up again to see the props and slots for the component.

If they change the selected, component, the props and slots for the original component remain visible until the Settings pop-up is re-opened.

Steps to reproduce

  1. Install Views Row SDC module
  2. Create a view and select "Single Directory Component" in the "Show" option
  3. Pick a component in the settings. Note the settings page does not update to show props and slots
  4. Save the selection
  5. Click settings, and note that props and slots are now shown
  6. Change to a different component. Note that the previous components' props and slots still shown

Proposed resolution

  1. Update schema, and add "component" above "props" and "slots"
  2. On the options form, add a "div" container for the props and slots
  3. On the component_id element trigger an update of the container div
  4. Investigate using HTMX rather than AJAX for the update

Remaining tasks

  1. Investigate feasibility of HTMX for update
  2. Make form changes

User interface changes

Options form will be more interactive.

API changes

None.

Data model changes

New wrapper around Props and Slots drop-downs.

Issue fork views_row_sdc-3584529

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

lostcarpark created an issue. See original summary.

lostcarpark’s picture

lostcarpark commented
Status: Active » Needs work

Currently I have this working with AJAX, but I have been trying to use HTMX.

With AJAX, I had some trouble getting it to work as it was connecting to the main view form rather than the row popup. This was solved by specifying the AJAX URL using the views_ui_build_form_url($form_state).

Using HTMX, it will replace the props/slots with a blank area, which is not the desired behaviour. I think this also needs views_ui_build_form_url($form_state), passed into the post method, but I seem to be missing something else.

Also working on adding a FunctionalJJavascript test for this.

lostcarpark opened merge request !6

lostcarpark opened merge request !7

lostcarpark’s picture

lostcarpark commented

I now have updates working with both AJAX (MR !6) and HTMX (MR !7).

I was trying to use views_ui_build_form_url to get the URL to fetch the update from, but AJAX expects JSON, while HTMX expects HTML. I've cloned this function into buildFormUrl() which forces HTML return. This works well for updating the form content, but unlike the AJAX update, the modal form doesn't resize.

I have pieced together some JS to resize the form on update, and it's close to working, but has a couple of unintended side effects I'm still working on.

I think the HTMX update is an interesting exercise, but not sure whether it warrants the the extra complexity, and might be better putting on hold until Views updates to use HTMX.

lostcarpark’s picture

lostcarpark commented
Status: Needs work » Reviewed & tested by the community

I have parked the HTMX approach for now. It's been an interesting exercise to try to make it work, but I think adding custom JavaScript to handle resizing is something that should be done at the core level to support HTMX for all modals. I have opened #3587968: PP-1 Look at enabling resize of modal when contents update through HTMX to look at this. There is also #2158943: Add a native dialog element to deprecate the jQuery UI dialog to look at moving from JQuery modals to native HTML ones.

The AJAX update works smoothly. However, the views_ui_build_form_url is deprecated in 11.4.

The replacement is to use ViewsFormHelperTrait, which provides a buildFormUrl() method. However, I couldn't find a clean way of providing both, so for now I've cloned the method into the plugin class. This passes tests for all versions. When 11.5 releases, I will drop support for 11.3 and remove the cloned function to use the trait.

I think we should get this merged and finally get a release out.

  • lostcarpark committed d8ebbb19 on 1.0.x 
    feat: #3584529 Make props and slots update when component selected or...
lostcarpark’s picture

lostcarpark commented
Status: Reviewed & tested by the community » Fixed

Merged and moving to fixed.

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.