refactor: make methods more explict

make methods more clear fix merge conflicts
rubyforgood · Feb 13, 2024 · 67e85db · 67e85db
1 parent 673853e
commit 67e85db
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/app/helpers/partners/multi_item_form_helper.rb b/app/helpers/partners/multi_item_form_helper.rb
@@ -1,20 +1,19 @@
 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)
       content_tag :div do
-        concat(link_to(
-          label,
-          "javascript:void(0)",
-          class: "btn btn-outline-primary",
-          data: {
-            request_item_target: 'addButton', action: "click->request-item#addItem:prevent",
-            add_target: container
-          }
-        ))
+        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' })
         )

diff --git a/app/javascript/controllers/request_item_controller.js b/app/javascript/controllers/request_item_controller.js
@@ -5,28 +5,36 @@ export default class extends Controller {
   static targets = ["addButton", "addDest", "addTemplate"];
 
   addItem() {
-    const template =
-      this.addTemplateTarget.content.cloneNode(true).firstElementChild;
+    const template = this.addTemplateTarget.content.firstElementChild.innerHTML;
 
-    const templateId = new Date().getTime();
-    const rendered = template.innerHTML.replace(
-      /([\[_])([0-9]+)([\]_])/g,
-      "$1" + templateId + "$3",
-    );
+    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 input = wrapper.querySelector("input[name*='_destroy']");
-      input && (input.value = 1);
+      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",
+    );
+  }
 }