Merge pull request #459 from etalab/features/instruction/auto-submit

etalab · Oct 2, 2024 · e7f33d9 · e7f33d9
2 parents 514beeb + 004ae1a
commit e7f33d9
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 39 deletions.
diff --git a/app/javascript/controllers/application.js b/app/javascript/controllers/application.js
@@ -1,6 +1,8 @@
 import { Application } from '@hotwired/stimulus'
+import { AutoSubmitFormController } from 'stimulus-library'
 
 const application = Application.start()
+application.register('auto-submit-form', AutoSubmitFormController)
 
 // Configure Stimulus development experience
 application.debug = false

diff --git a/app/javascript/controllers/auto_submit_controller.js b/app/javascript/controllers/auto_submit_controller.js
diff --git a/app/views/instruction/authorization_requests/index.html.erb b/app/views/instruction/authorization_requests/index.html.erb
@@ -1,6 +1,6 @@
 <p class="fr-h2 fr-mt-5w"><%= t('.table.caption') %></p>
 
-<%= search_form_for(@search_engine, url: instruction_authorization_requests_path, html: { method: :get, data: { turbo: false }, class: %w[search-box] }) do |f| %>
+<%= search_form_for(@search_engine, url: instruction_authorization_requests_path, html: { method: :get, data: { controller: 'auto-submit-form', 'auto-submit-form-debounce-interval-value' => 300, 'auto-submit-form-event-mode-value' => 'input' }, class: %w[search-box] }) do |f| %>
   <div class="search-inputs">
     <div class="fr-input-group main-input input">
       <%= f.label :within_data_or_organization_siret_or_applicant_email_or_applicant_family_name_cont, t('.search.main_input.label'), class: %w[fr-label] %>
@@ -28,34 +28,35 @@
   </div>
 <% end %>
 
-<div class="fr-table fr-table--bordered">
-  <table>
-    <thead>
-      <tr>
-        <%
-          %w[
-            id
-            state
-            last_submitted_at
-            organization
-            project_name
-            authorization_request_kind
-            applicant_email
-            actions
-          ].each do |attr|
-        %>
-          <th scope="col">
-            <% if %w[id state last_submitted_at].include?(attr) %>
-              <%= sort_link(@search_engine, attr) do %>
+<turbo-frame id="authorization_requests_table">
+  <div class="fr-table fr-table--bordered">
+    <table>
+      <thead>
+        <tr>
+          <%
+            %w[
+              id
+              state
+              last_submitted_at
+              organization
+              project_name
+              authorization_request_kind
+              applicant_email
+              actions
+            ].each do |attr|
+          %>
+            <th scope="col">
+              <% if %w[id state last_submitted_at].include?(attr) %>
+                <%= sort_link(@search_engine, attr) do %>
+                  <%= t(".table.header.#{attr}") %>
+                <% end %>
+              <% else %>
                 <%= t(".table.header.#{attr}") %>
               <% end %>
-            <% else %>
-              <%= t(".table.header.#{attr}") %>
-            <% end %>
-          </th>
-        <% end %>
-      </tr>
-    </thead>
+            </th>
+          <% end %>
+        </tr>
+      </thead>
 
     <tbody>
       <% @authorization_requests.each do |authorization_request| %>
@@ -95,3 +96,4 @@
 </div>
 
 <%= paginate @authorization_requests %>
+</turbo-frame>
diff --git a/app/views/profile/_authorization_notifications.html.erb b/app/views/profile/_authorization_notifications.html.erb
@@ -4,15 +4,12 @@
   </h3>
 
   <div class="settings-block__container">
-    <%= form_with(model: current_user, url: notifications_settings_path, data: { controller: 'auto-submit' }) do |f| %>
+    <%= form_with(model: current_user, url: notifications_settings_path, data: { controller: 'auto-submit-form', 'auto-submit-form-debounce-interval-value' => 0 }) do |f| %>
       <% %w[submit_notifications messages_notifications].each do |notification_kind| %>
         <div class="fr-toggle">
           <%=
             f.check_box "instruction_#{notification_kind}_for_#{authorization_definition.id.underscore}",
-              class: 'fr-toggle__input',
-              data: {
-                action: 'change->auto-submit#perform'
-              }
+              class: 'fr-toggle__input'
           %>
           <%=
             f.label "instruction_#{notification_kind}_for_#{authorization_definition.id.underscore}",