Merge pull request #7215 from tchak/refactor-repetition-champ

Improuve repetition champ

app/controllers/champs/repetition_controller.rb

@@ -1,8 +1,14 @@
 class Champs::RepetitionController < ApplicationController
   before_action :authenticate_logged_user!
 
-  def show
+  def add
     @champ = policy_scope(Champ).includes(:champs).find(params[:champ_id])
     @champs = @champ.add_row
   end
+
+  def remove
+    champ = policy_scope(Champ).includes(:champs).find(params[:champ_id])
+    champ.champs.where(id: params[:champ_ids]).destroy_all
+    @row_id = params[:row_id]
+  end
 end

app/javascript/new_design/champs/repetition.js

@@ -1,33 +0,0 @@
-import { delegate, fire } from '@utils';
-
-const CHAMP_SELECTOR = '.editable-champ';
-const BUTTON_SELECTOR = '.button.remove-row';
-const DESTROY_INPUT_SELECTOR = 'input[type=hidden][name*=_destroy]';
-const DOM_ID_INPUT_SELECTOR = 'input[type=hidden][name*=deleted_row_dom_ids]';
-
-delegate('click', BUTTON_SELECTOR, (evt) => {
-  evt.preventDefault();
-
-  const row = evt.target.closest('.row');
-
-  for (let input of row.querySelectorAll(DESTROY_INPUT_SELECTOR)) {
-    input.disabled = false;
-    input.value = true;
-  }
-  row.querySelector(DOM_ID_INPUT_SELECTOR).disabled = false;
-
-  for (let champ of row.querySelectorAll(CHAMP_SELECTOR)) {
-    champ.remove();
-  }
-
-  evt.target.remove();
-  row.classList.remove('row');
-
-  // We could debounce the autosave request, so that row removal would be batched
-  // with the next changes.
-  // However *adding* a new repetition row isn't debounced (changes are immediately
-  // effective server-side).
-  // So, to avoid ordering issues, enqueue an autosave request as soon as the row
-  // is removed.
-  fire(row, 'autosave:trigger');
-});

app/javascript/packs/application.js

@@ -31,7 +31,6 @@ import '../new_design/dossiers/auto-save';
 import '../new_design/dossiers/auto-upload';
 
 import '../new_design/champs/linked-drop-down-list';
-import '../new_design/champs/repetition';
 import '../new_design/champs/drop-down-list';
 
 import {

app/views/champs/repetition/add.turbo_stream.haml

@@ -0,0 +1,2 @@
+= fields_for @champ.input_name, @champ do |form|
+  = turbo_stream.append dom_id(@champ, :rows), partial: 'shared/dossiers/editable_champs/repetition_row', locals: { form: form, champ: @champ, row: @champs }

app/views/champs/repetition/remove.turbo_stream.haml

@@ -0,0 +1 @@
+= turbo_stream.remove @row_id

app/views/champs/repetition/show.js.erb

@@ -1,3 +0,0 @@
-<%= fields_for @champ.input_name, @champ do |form| %>
-  <%= append_to_element("##{@champ.input_group_id} .repetition", partial: 'shared/dossiers/editable_champs/repetition_row', locals: { form: form, champ: @champ, row: @champs }) %>
-<% end %>

app/views/layouts/application.html.haml

@@ -42,4 +42,8 @@
 
       = yield :charts_js
 
+      // Container for custom turbo-stream actions
       %turbo-events
+      // Container for turbo form that we can submit from inside other forms
+      %div{ 'data-turbo': 'true' }
+        = form_tag('', id: :turbo_form)

app/views/shared/dossiers/editable_champs/_repetition.html.haml

@@ -1,12 +1,8 @@
-.repetition
+.repetition{ id: dom_id(champ, :rows) }
   - champ.rows.each do |champs|
     = render partial: 'shared/dossiers/editable_champs/repetition_row', locals: { form: form, champ: champ, row: champs }
 
-- if champ.persisted?
-  = link_to champs_repetition_path(champ.id), class: 'button add-row', data: { remote: true, disable: true, method: 'POST' } do
-    %span.icon.add
-    Ajouter un élément pour « #{champ.libelle} »
-- else
-  %a.button.add-row
+.actions{ 'data-turbo': 'true' }
+  = button_tag type: :submit, form: :turbo_form, formaction: champs_repetition_path(champ.id), formmethod: :post, class: 'button add-row' do
     %span.icon.add
     Ajouter un élément pour « #{champ.libelle} »

app/views/shared/dossiers/editable_champs/_repetition_row.html.haml

@@ -1,13 +1,9 @@
 - row_dom_id = "row-#{SecureRandom.hex(4)}"
 .row{ id: row_dom_id }
-  -# Tell the controller which DOM element should be removed once the row deletion is successful
-  = hidden_field_tag 'deleted_row_dom_ids[]', row_dom_id, disabled: true
-
   - row.each do |champ|
     = fields_for champ.input_name, champ do |form|
       = render partial: 'shared/dossiers/editable_champs/editable_champ', locals: { form: form, champ: champ }
-      = form.hidden_field :_destroy, disabled: true
 
-  .flex.row-reverse
-    %button.button.danger.remove-row{ type: :button }
+  .flex.row-reverse{ 'data-turbo': 'true' }
+    = button_tag type: :submit, form: :turbo_form, formaction: champs_repetition_path(champ.id, champ_ids: row.map(&:id), row_id: row_dom_id), formmethod: :delete, class: 'button danger remove-row' do
       Supprimer l’élément

app/views/users/dossiers/brouillon.js.erb

@@ -1,3 +0,0 @@
-<% (params['deleted_row_dom_ids'] || []).each do |deleted_row_dom_id| %>
-  <%= remove_element('#' + deleted_row_dom_id) %>
-<% end %>

config/routes.rb

@@ -144,7 +144,8 @@ Rails.application.routes.draw do
     get ':champ_id/siret', to: 'siret#show', as: :siret
     get ':champ_id/dossier_link', to: 'dossier_link#show', as: :dossier_link
     post ':champ_id/carte', to: 'carte#show', as: :carte
-    post ':champ_id/repetition', to: 'repetition#show', as: :repetition
+    post ':champ_id/repetition', to: 'repetition#add', as: :repetition
+    delete ':champ_id/repetition', to: 'repetition#remove'
 
     get ':champ_id/carte/features', to: 'carte#index', as: :carte_features
     post ':champ_id/carte/features', to: 'carte#create'