How to pass variable from stimulus-js to view file of Rails?

Viewed 18

Facing problem

The order of things I want to do is

  1. Open modal from @posts partial
  2. Enter the posting deadline in the form on modal
  3. POST the contents of the form to rails action that updates the posting flag to true

When opening the modal in item 1 of above, it will be lost track of the partial post record information, so I'm getting the partial post.id with the stimulus getter, but I'm having trouble embedding that id in the url specified in the form.

Development Env

ruby 3.1.2
rails 7.0.3
importmap-rails 1.1.2
tailwindcss-rails 2.0.10
stimulus-rail 1.0.4

Related source code

_post.html.erb

 <button data-action="click->modal#open" data-modal-id-param=<%= post.id %> class="flex justify-center ml-1 py-2 px-4">
 </button>

modal_controller.js

import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["modal", "form"]

  open(event) {
    event.preventDefault();

    this.modalTarget.showModal();

    this.modalTarget.addEventListener('click', (e) => this.backdropClick(e));

    this.idValue = event.params

    console.log(this.idValue)

  }

  backdropClick(event) {
    event.target === this.modalTarget && this.close(event)
  }

  close(event) {
    event.preventDefault();

    this.modalTarget.close();

    if (this.hasFormTarget) {
      this.formTarget.reset();
    }
  }
}

_publish_limit_form.html.erb

<dialog class="bg-white shadow-xl w-4/5 md:w-2/5 backdrop:bg-gray-700 backdrop:bg-opacity-50 open:animate-fade-in open:backdrop:animate-fade-in" data-modal2-target="modal">
  <button type="button" data-action="modal#close" class="float-right">
    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
    </svg>
  </button>
  <%= form_with url: start_to_publish_admin_post_path(????), method: :patch, data: { modal2_target: 'form2'} do |f| %> 
// <- Above, I want to embed the id in the specified url by extracting post.id from stimulus.  advice please! ! ->
    <div class="flex px-4 py-5 flex-wrap">
      <p class= "text-lg leading-6 font-base text-gray-800"><%= t('.please_set_publish_limit')%></p>
      <div class="w-full"></div>
      <%= f.datetime_select :publish_limit, { min: Time.zone.now, minute_step: 30, discard_year: true, discard_second: true, start_minite: 30, start_second: 0 }, { class: "leading-none rounded mt-2" } %>
      <span class="ml-2 text-lg leading-6 font-base text-gray-800 pt-3"><%= t('.until') %></span>
    </div>
    <%= f.hidden_field :publish_status, value: 'is_publishing' %>
    <div class="flex items-center justify-center mt-2">
      <%= f.submit 'OK', class: "mt-3 font-bold leading-normal text-white py-4 px-10 bg-blue-700 rounded hover:bg-blue-600 focus:ring-2 focus:ring-offset-2 focus:ring-blue-700 focus:outline-none" %>
    </div>
  <% end %>
</dialog>

Any advice on what to do would be greatly appreciated.

0 Answers
Related