Refactor request item javascript (#4105)

* feat: move js behavior to stimulus controller

feat: replaces dataset with template

* refactor: make methods more explict

make methods more clear
fix merge conflicts

app/helpers/partners/multi_item_form_helper.rb

@@ -1,15 +1,23 @@
 module Partners
   module MultiItemFormHelper
     def remove_item_button(label, soft: false)
-      link_to label, 'javascript:void(0)', class: 'btn btn-warning', data: { remove_item: soft ? "soft" : "hard" }
+      link_to label, 'javascript:void(0)', class: 'btn btn-warning',
+        data: { action: 'click->request-item#removeItem:prevent', remove_soft: soft ? true : false}
     end
 
     def add_item_button(label, container: ".fields", &block)
-      link_to(
-        label, "javascript:void(0)",
-        class: "btn btn-outline-primary",
-        data: { add_target: container, add_template: capture(&block) }
-      )
+      content_tag :div do
+        concat(
+          link_to(label, "javascript:void(0)", class: "btn btn-outline-primary",
+            data: {
+              request_item_target: 'addButton', add_target: container,
+              action: "click->request-item#addItem:prevent"
+            })
+        )
+        concat(
+          content_tag(:template, capture(&block), data: { request_item_target: 'addTemplate' })
+        )
+      end
     end
   end
 end

app/javascript/controllers/request_item_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from "@hotwired/stimulus";
+
+// Connects to data-controller="request-item"
+export default class extends Controller {
+  static targets = ["addButton", "addDest", "addTemplate"];
+
+  addItem() {
+    const template = this.addTemplateTarget.content.firstElementChild.innerHTML;
+
+    const uniqId = new Date().getTime();
+    const rendered = this.setUniqIds(template, uniqId);
+
+    this.addDestTarget.insertAdjacentHTML("beforeend", rendered);
+  }
+
+  removeItem(event) {
+    console.log(event.target);
+    const wrapper = event.target.closest("tr");
+    const removeSoft = event.target.dataset.removeSoft === "false";
+
+    if (removeSoft) {
+      wrapper.remove();
+    } else {
+      const destroyField = wrapper.querySelector("input[name*='_destroy']");
+      if (destroyField) destroyField.value = 1;
+      wrapper.style.display = "none";
+    }
+  }
+
+  // This regex replaces [number] with [templateId]
+  // or _number_ with _templateId_
+  // Ex: name="request[items_attributes][0][name]" => name="request[items_attributes][897123413][name]"
+  // Ex: id="request_items_attributes_0_name" => id="request_items_attributes_9871239487_name"
+  setUniqIds(template, templateId) {
+    return template.replace(
+      /([\[_])([0-9]+)([\]_])/g,
+      "$1" + templateId + "$3",
+    );
+  }
+}

app/views/partners/individuals_requests/new.html.erb

@@ -30,7 +30,8 @@
               <%= render partial: 'partners/requests/error' %>
             <% end %>
 
-            <%= simple_form_for @request, url: partners_individuals_requests_path, html: {role: 'form', class: 'form-horizontal'} do |form| %>
+            <%= simple_form_for @request, url: partners_individuals_requests_path, html: {role: 'form', class: 'form-horizontal'},
+              data: {controller: 'request-item'} do |form| %>
 
               <%= form.input :comments, label: "Comments:", as: :text, class: "form-control", wrapper: :input_group %>
 
@@ -42,7 +43,7 @@
                   </tr>
                 </thead>
 
-                <tbody class='fields'>
+                <tbody class='fields' data-request-item-target="addDest">
                   <%= render 'partners/individuals_requests/item_request', form: form %>
                 </tbody>
               </table>
@@ -66,31 +67,3 @@
     </div>
   </div>
 </section>
-
-<script type="module">
-  $(document).ready(function() {
-    $(document).on('click', '[data-add-target][data-add-template]', (event) => {
-      var button = $(event.target)
-      var target = button.data('add-target');
-      var template = button.data("add-template");
-      var templateId = new Date().getTime();
-      var rendered = template.replace(/([\[_])([0-9]+)([\]_])/g, "$1" + templateId + '$3');
-
-      $(target).append(rendered);
-
-      event.preventDefault();
-    });
-
-    $(document).on('click', '[data-remove-item]', (event) => {
-      var button = $(event.target)
-      var wrapper = button.closest('tr')
-      if (button.data("remove-item") === "soft") {
-        wrapper.hide();
-        button.prev('input[type=hidden]').val('1');
-      } else {
-        wrapper.remove()
-      }
-      event.preventDefault();
-    });
-  })
-</script>

app/views/partners/requests/new.html.erb

@@ -31,7 +31,7 @@
             <% end %>
 
             <%= simple_form_for @partner_request, url: partners_requests_path(@partner_request, :organization_id => current_partner.organization.id),
-                                html: {role: 'form', class: 'form-horizontal'}, method: :post do |form| %>
+              html: {role: 'form', class: 'form-horizontal'}, method: :post, data: { controller: 'request-item' } do |form| %>
               <%= form.input :comments, label: "Comments:", as: :text, class: "form-control", wrapper: :input_group %>
 
               <table class='table'>
@@ -41,7 +41,7 @@
                   <th>Quantity</th>
                 </tr>
                 </thead>
-                <tbody class='fields'>
+                <tbody class='fields' data-request-item-target="addDest">
                   <%= render 'item_request', form: form %>
                 </tbody>
               </table>
@@ -64,31 +64,3 @@
     </div>
   </div>
 </section>
-
-<script type="module">
-  $(document).ready(function() {
-    $(document).on('click', '[data-add-target][data-add-template]', (event) => {
-      var button = $(event.target)
-      var target = button.data('add-target');
-      var template = button.data("add-template");
-      var templateId = new Date().getTime();
-      var rendered = template.replace(/([\[_])([0-9]+)([\]_])/g, "$1" + templateId + '$3');
-
-      $(target).append(rendered);
-
-      event.preventDefault();
-    });
-
-    $(document).on('click', '[data-remove-item]', (event) => {
-      var button = $(event.target)
-      var wrapper = button.closest('tr')
-      if (button.data("remove-item") === "soft") {
-        wrapper.hide();
-        button.prev('input[type=hidden]').val('1');
-      } else {
-        wrapper.remove()
-      }
-      event.preventDefault();
-    });
-  })
-</script>