StimulusReflex

application_controller.js

import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'

export default class extends Controller {
  connect () {
    StimulusReflex.register(this)
  }

  beforeReflex (element, reflex) {
    document.body.classList.add('wait')
    document.querySelector(".page-spinner").style.visibility = 'visible'

    console.log( "beforeReflex raised" )
    
    console.log( element )

    this.benchmark = performance.now()
  }

  reflexSuccess (element, reflex, error) {
    // show success message etc...
    console.log( "reflexSuccess raised!" )
  }

  reflexError (element, reflex, error) {

    document.querySelector(".page-spinner").style.visibility = 'hidden'

    console.log( "reflexError raised" )
  }

  afterReflex (element, reflex) {
    console.debug(
      reflex,
      `${(performance.now() - this.benchmark).toFixed(0)}ms`
    )

    console.log( "afterReflex raised" )

    document.body.classList.remove('wait')
    document.querySelector(".page-spinner").style.visibility = 'hidden'

    const focusElement = this.element.querySelector('[autofocus]')
    if (focusElement) {
      focusElement.focus()
      const value = focusElement.value
      focusElement.value = ''
      focusElement.value = value
    }
  }

}

index.html.erb

<%
  content_for(:title, ServiceSchedule.model_name.human(count: 2) )
  content_for(:category_1, t(:catalogs) )
%>

<% content_for :heading do %>
  <i class='fal fa-object-group text-primary'></i> <%= ServiceSchedule.model_name.human(count: 2) %>
<% end %>

<% content_for :pagedescription do %>
  <%= t(:service_schedule_description) %>
<% end %>

<!-- RENDERING MESSAGES -->
<%= render 'shared/flash_messages' %>

<%= simple_form_for :service_schedule, data: { controller: "serviceschedule", reflex_root: "#search-results" } do |f| %>
  
  <div class="row" style="margin-bottom: 20px;">

    <div class="col-sm-3">
      <div class="form-group">

        <%= f.input :id, input_html: { class: 'form-control', data: { target: 'serviceschedule.id', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("id"), label_html: { class: 'form-label' }, required: false %>  

      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <%= f.input :schedule_status, :as => :select, :collection => ServiceScheduleStatus.where( is_active: true ), :label_method => :description, :value_method => :id, input_html: { class: 'form-control', data: { target: 'serviceschedule.schedule_status', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("id_service_schedule_status"), label_html: { class: 'form-label' }, required: false %>            
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">

        <%= f.input :scheduled_datetime_begin, input_html: { class: 'form-control datetime-picker', data: { target: 'serviceschedule.scheduled_datetime_begin', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("scheduled_datetime_begin"), label_html: { class: 'form-label' }, required: false %>  

      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">

        <%= f.input :scheduled_datetime_end, input_html: { class: 'form-control datetime-picker', data: { target: 'serviceschedule.scheduled_datetime_end', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("scheduled_datetime_end"), label_html: { class: 'form-label' }, required: false %>
        
      </div>
    </div>

  </div>

  <div class="row" style="margin-bottom: 20px;">

  <div class="col-md-3">
    <div class="form-group">
      <%= f.input :technician, :as => :select, :collection => Technician.where( id_company: current_admin.id_company ), :label_method => :email_with_name, :value_method => :id, input_html: { class: 'form-control', data: { target: 'serviceschedule.technician', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("technician"), label_html: { class: 'form-label' }, required: false %>            
      </div>
    </div>

    <div class="col-md-3">
      <div class="form-group">
        <%= f.input :company_customer, :as => :select, :collection => CompanyCustomer.includes(:company_customer).where( id_company: current_admin.id_company ), :label_method => :company_business_name, :value_method => :id_company_customer, input_html: { class: 'form-control', data: { target: 'serviceschedule.company_customer', reflex_permanent: true } }, label: ServiceSchedule.human_attribute_name("company_customer"), label_html: { class: 'form-label' }, required: false %>
      </div>
    </div>

    <div class="col-md-2">
      <div class="form-group">
        <label class="form-label">&nbsp;</label>
        <%= f.button :button, t(:search), type: :button, class: 'btn btn-primary form-control', data: { action: "click->serviceschedule#search" }%>    
      </div>
    </div>

  </div>

  <div class="row" id="search-results">
    <div class="col-sm-12">
      <div class="card mb-g">
        <div class="card-body">
          <div class="frame-wrap bg-faded mb-5 ">

            <%= link_to t(:new), new_service_schedule_path, class: 'btn btn-primary mt-3 float-right btn-add-record' %>

            <div class="table-responsive">
              <table class="table table-bordered table-hover table-striped">

                <thead>
                  <tr>

                    <th><%= ServiceSchedule.human_attribute_name :id %></th>
                    <th><%= ServiceSchedule.human_attribute_name :id_service_schedule_status %></th>

                    <th><%= Company.human_attribute_name :rfc %></th>
                    <th><%= Company.human_attribute_name :business_name %></th>
                    <th><%= Company.human_attribute_name :email %></th>
                    <th><%= Company.human_attribute_name :phone %></th>
                    <th><%= ServiceSchedule.human_attribute_name :service_comments %></th>
                    <th><%= ServiceSchedule.human_attribute_name :scheduled_datetime %></th>

                    <th><%= ServiceSchedule.human_attribute_name :subtotal %></th>
                    <th><%= ServiceSchedule.human_attribute_name :taxes %></th>
                    <th><%= ServiceSchedule.human_attribute_name :total %></th>

                    <th><%= ServiceSchedule.human_attribute_name :service_schedule_machines %></th>
                    <th></th>
                    <th colspan="2"></th>
                  </tr>
                </thead>

                <tbody>
                  <% if @service_schedules.present? %>
                    <% @service_schedules.each do |service_schedule| %>
                      <tr>

                        <td> <%= service_schedule.id %> </td>
                        <td> <%= service_schedule.service_schedule_status.description %> </td>

                        <td><%= service_schedule.company_customer ? service_schedule.company_customer.rfc : '' %></td>
                        <td><%= service_schedule.company_customer ? service_schedule.company_customer.business_name : '' %></td>
                        <td><%= service_schedule.company_customer ? service_schedule.company_customer.email : '' %></td>
                        <td><%= service_schedule.company_customer ? service_schedule.company_customer.phone : '' %></td>
                        <td><%= service_schedule.service_comments %></td>
                        <td><%= format_time( service_schedule.scheduled_datetime, current_admin.get_time_zone, 'long' ) %></td>

                        <td><%= number_to_currency( service_schedule.subtotal ) %></td>
                        <td><%= number_to_currency( service_schedule.taxes ) %></td>
                        <td><%= number_to_currency( service_schedule.total ) %></td>

                        <td><%= service_schedule.service_schedule_machines.length %></td>

                        <td><%= link_to ServiceScheduleMachine.model_name.human(count: 2), service_schedule_service_schedule_machines_path( service_schedule ), target: '_blank' %> </td>

                        <td><%= link_to t(:edit), edit_service_schedule_path(service_schedule) %></td>
                        <td><%= link_to t(:delete), service_schedule, method: :delete, data: { confirm: t(:delete_confirmation) } %></td>
                      </tr>
                    <% end %>
                  <% end %>
                </tbody>
              </table>
            </div>

          <% if defined?(@pagy.pages) && @pagy.pages > 1 %>
            <nav>
              <ul class="pagination">
                <li class="page-item"><a href="#" class="page-link" data-reflex="click->ServiceScheduleReflex#paginate" data-page="<%= @pagy.prev %>">←</a></li>
                <% @pagy.series.each do |item| %>
                  <% if item == :gap %>
                    <li class="page-item disabled"><a class="page-link">...</a></li>
                  <% else %>
                    <li class="page-item <%= "active" if item.is_a?(String) %>">
                      <a href="#" class="page-link" data-reflex="click->ServiceScheduleReflex#paginate" data-page="<%= item %>"><%= item %></a>
                    </li>
                  <% end %>
                <% end %>
                <li class="page-item"><a href="#" class="page-link" data-reflex="click->ServiceScheduleReflex#paginate" data-page="<%= @pagy.next %>">→</a></li>
              </ul>
            </nav>
          <% end %>

          </div>
        </div>
      </div>
    </div>
  </div>

<% end %>

service_schedule.rb

class ServiceSchedulesController < ApplicationController
  include Pagy::Backend

  before_action :set_service_schedule, only: [:show, :edit, :update, :destroy]

  # GET /service_schedules
  # GET /service_schedules.json
  def index

    @service_schedules = @stimulus_reflex ? ServiceSchedule.preload( :service_schedule_machines, :service_schedule_status, :company, :company_customer, :service_schedule_technicians, :service_schedule_machines ).where( id_company: current_admin.id_company ).order( id: :desc ) : ServiceSchedule.none

    @service_schedules = @service_schedules.filter_id(session[:id])
    @service_schedules = @service_schedules.filter_technician(session[:technician])
    @service_schedules = @service_schedules.filter_company_customer(session[:company_customer])

    @service_schedules = @service_schedules.filter_scheduled_datetime_begin( session[:scheduled_datetime_begin], current_admin.get_time_zone )
    @service_schedules = @service_schedules.filter_scheduled_datetime_end( session[:scheduled_datetime_end], current_admin.get_time_zone )
    @service_schedules = @service_schedules.filter_status( session[:schedule_status] )

    @page = (session[:page] || 1).to_i

    pages = (@service_schedules.count / Pagy::VARS[:items].to_f).ceil

    @page = 1 if @page > pages

    @pagy, @service_schedules = pagy(@service_schedules, page: @page)

  end

end

service_schedule_reflex.rb

class ServiceScheduleReflex < StimulusReflex::Reflex
  delegate :current_admin, to: :connection

  def search(params = {})
    session[:technician] = params["technician"]
    session[:company_customer] = params["company_customer"]
   
    session[:id] = params["id"]
    session[:schedule_status] = params["schedule_status"]

    session[:scheduled_datetime_begin] = params["scheduled_datetime_begin"]
    session[:scheduled_datetime_end] = params["scheduled_datetime_end"]
    
  end

  def order
    session[:order_by] = element.dataset["column-name"]
    session[:direction] = element.dataset["direction"]
  end

  def paginate
    session[:page] = element.dataset[:page].to_i
  end
  
end

serviceschedule_controller.js

import ApplicationController from './application_controller'
import StimulusReflex from 'stimulus_reflex'
//import { debounce } from 'lodash-es'

/* This is the custom StimulusReflex controller for ServiceScheduleReflex.
 * Learn more at: https://docs.stimulusreflex.com
 */
export default class extends ApplicationController {

  static targets = [ 
    'id', 
    'schedule_status',
    'technician', 
    'company_customer', 
    'scheduled_datetime_begin', 
    'scheduled_datetime_end' 
  ]

  connect(){
    super.connect()
    //this.perform = debounce(this._perform, 350).bind(this)
  }

  search(){
    this.stimulate( "ServiceScheduleReflex#search",this.getParams )
  }
  
  get getParams () {
    return  {
      technician: this.technicianTarget.value,
      company_customer: this.company_customerTarget.value,
      schedule_status: this.schedule_statusTarget.value,
      scheduled_datetime_begin: this.scheduled_datetime_beginTarget.value,
      scheduled_datetime_end: this.scheduled_datetime_endTarget.value,
      id: this.idTarget.value
    }
  }

}

@LuisDeHaro Hola a mi me pasa que la funcion afterReflex() no se ejecuta a veces por tanto el spinner en el cursor no se quita. A ti se te presenta eso?