stable, before a refactor

app/javascript/controllers/add_exception_controller.js

@@ -4,19 +4,23 @@ export default class extends Controller {
     static values = {
         formColor: { type: Array, default: [] } // Declares 'items' as an Array value
     }
-    static targets = ["template", "container", "networkLogo", "button"]
+    static targets = ["exceptionTemplate", "exceptionContainer", "exception", "exceptionButton"]
 
-    add(event) {
+    connect(){
+        console.log(this.formColorValue)
+    }
+
+    addExemption(event) {
         event.preventDefault()
         event.stopPropagation()
 
-        const content = this.#updateTemplateNetwork()
+        const content = this.#newExemption()
 
-        this.buttonTarget.insertAdjacentHTML('beforebegin', content);
+        this.exceptionButtonTarget.insertAdjacentHTML('beforebegin', content);
         // this.containerTarget.insertAdjacentHTML("beforeend", content)
     }
 
-    remove(event) {
+    removeExemption(event) {
         event.preventDefault();
         const wrapper = event.target.closest(".network-item");
         if (wrapper.dataset.newRecord === "true") {
@@ -30,22 +34,19 @@ export default class extends Controller {
         }
     }
 
-    #updateTemplateNetwork() {
-        const nextIndex = this.networkLogoTargets.length
+    #newExemption() {
+        const nextIndex = this.exceptionTargets.length
         const num_of_colors = this.formColorValue.length
         let colorIndex = 0
-        let newSecondaryColor = "copper"
         if (nextIndex != 0) {
             colorIndex = nextIndex % num_of_colors
-            if (nextIndex % 2 == 1) {
-                newSecondaryColor = "bronze"
-            }
         }
         const newColor = this.formColorValue[colorIndex]
-        return this.templateTarget.innerHTML
+
+        return this.exceptionTemplateTarget.innerHTML
                             .replace(/NEW_RECORD/g, nextIndex)
                             .replace(/NEXT_COLOR/g, newColor)
-                            .replace(/NEXT_SECONDARY_COLOR/g, newSecondaryColor)
 
     }
+
 }

app/javascript/controllers/add_exception_item_controller.js

@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["exceptionItemTemplate", "exceptionItemContainer", "exceptionItem", "exceptionItemButton"]
+
+    connect() {
+        const content = this.#newExemptionItem()
+
+        this.exceptionItemButtonTarget.insertAdjacentHTML('beforebegin', content);
+    }
+
+    addExemptionItem(event) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const content = this.#newExemptionItem()
+
+        this.exceptionItemButtonTarget.insertAdjacentHTML('beforebegin', content);
+        // this.containerTarget.insertAdjacentHTML("beforeend", content)
+    }
+
+    removeExemptionItem(event) {
+        console.log("in remove")
+        event.preventDefault();
+        const wrapper = event.target.closest(".exception-item");
+        if (wrapper.dataset.newRecord === "true") {
+            wrapper.remove();
+        } else {
+            wrapper.style.display = "none";
+            const destroyInput = wrapper.querySelector("input[name*='[_destroy]']");
+            if (destroyInput) {
+                destroyInput.value = "1";
+            }
+        }
+    }
+
+    #newExemptionItem() {
+        const nextIndex = this.exceptionItemTargets.length
+        const buttonElement = this.exceptionItemButtonTarget;
+    
+        // Get the computed style (returns rgb/rgba value)
+        const bgColor = window.getComputedStyle(buttonElement).backgroundColor;
+        const newColor = `[${bgColor}]`
+
+        return this.exceptionItemTemplateTarget.innerHTML
+                            .replace(/NEW_ITEM_RECORD/g, nextIndex)
+                            .replace(/NEXT_COLOR/g, newColor)
+
+
+    }
+}

app/javascript/controllers/general_form_controller.js

@@ -0,0 +1,43 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["dependentField"]
+
+  connect() {
+  }
+
+  toggleFields() {
+    console.log("--- in toggle --- ")
+    const selector = this.element.querySelector('[data-action*="change->general-form#toggleFields"]');
+    if (selector) {
+      const selectedValue = selector.value
+      this.field_match = false;
+      this.dependentFieldTargets.forEach((field) => {
+        // Check a data attribute on the field to see if it matches the selected value
+        if (field.dataset.parentValue === selectedValue) {
+          if (selectedValue == "network_logo") {
+            field.parentElement.parentElement.classList.remove("hidden");
+          } else {
+            field.parentElement.classList.remove("hidden");
+          }
+          this.field_match = true;
+          console.log("- ", selectedValue)
+          console.log("-- ", this.field_match)
+        } else {
+          if (field.dataset.parentValue == "network_logo") {
+            field.parentElement.parentElement.classList.add("hidden");
+          } else {
+            field.parentElement.classList.add("hidden");
+          }
+        }
+      });
+      if (!this.field_match) {
+          console.log("--- ", this.field_match)
+          const defaultOption = this.dependentFieldTargets.find(target => {
+            return target.dataset.parentValue === 'default';
+          });
+          defaultOption.parentElement.classList.remove("hidden");
+        }
+    }
+  }
+}

app/javascript/controllers/logo_upload_controller.js

@@ -4,6 +4,7 @@ export default class extends Controller {
   static targets = ["preview", "previewContainer", "logoSelect", "logofield", "initialLogoFile"];
 
   async connect() {
+    console.log('in connect');
     console.log(this.logofieldTarget.value)
     if (this.logofieldTarget.value.includes("Logo.")) {
       const response = await fetch(`/card_logo_files/${this.logofieldTarget.value}/image`); // Fetch the binary data
@@ -82,13 +83,13 @@ export default class extends Controller {
     const blankOptionIndex = 0;
     const newOption = new Option(name, name, true, true)
 
-    if (this.logoSelectTarget.options.length > blankOptionIndex + 1) {
-      this.logoSelectTarget.insertBefore(newOption, this.logoSelectTarget.options[blankOptionIndex + 1]);
+    if (this.logofieldTarget.options.length > blankOptionIndex + 1) {
+      this.logofieldTarget.insertBefore(newOption, this.logofieldTarget.options[blankOptionIndex + 1]);
     } else {
-      this.logoSelectTarget.appendChild(newOption);
+      this.logofieldTarget.appendChild(newOption);
     }
 
-    this.logoSelectTarget.value = name;
+    this.logofieldTarget.value = name;
   }
 
   determineNetworkFilename(file) {