automate employer setup import from word and manual entry working

app/javascript/application.js

@@ -1,5 +1,9 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
-import "controllers"
 import "trix"
 import "@rails/actiontext"
+import { Application } from "@hotwired/stimulus"
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+
+const application = Application.start()
+eagerLoadControllersFrom("controllers", application)

app/javascript/controllers/add_alt_network_logo_controller.js

@@ -0,0 +1,32 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static values = {
+        formColor: { type: Array, default: [] } // Declares 'items' as an Array value
+    }
+    static targets = ["template", "container", "networkLogo", "button"]
+
+    add(event) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const content = this.#updateTemplateNetwork()
+
+        this.buttonTarget.insertAdjacentHTML('beforebegin', content);
+        // this.containerTarget.insertAdjacentHTML("beforeend", content)
+    }
+
+    #updateTemplateNetwork() {
+        const nextIndex = this.networkLogoTargets.length
+        const num_of_colors = this.formColorValue.length
+        let colorIndex = 0
+        if (nextIndex != 0) {
+            colorIndex = nextIndex % num_of_colors
+        }
+        const newColor = this.formColorValue[colorIndex]
+        return this.templateTarget.innerHTML
+                            .replace(/NEW_RECORD/g, nextIndex)
+                            .replace(/NEXT_COLOR/g, newColor)
+
+    }
+}

app/javascript/controllers/add_network_exception_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static targets = ["template", "container"]
+
+    connect() {
+        console.log("connect")
+    }
+
+    add(event) {
+        console.log("start")
+        event.preventDefault()
+        event.stopPropagation()
+
+        const content = this.templateTarget.innerHTML.replace(/NEW_EXC_RECORD/g, new Date().getTime())
+
+        this.containerTarget.insertAdjacentHTML("beforeend", content)
+        console.log("end")
+    }
+}

app/javascript/controllers/add_plan_controller.js

@@ -0,0 +1,34 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+    static values = {
+        formColor: { type: Array, default: [] } // Declares 'items' as an Array value
+    }
+    static targets = ["template", "container", "plan", "button"]
+
+    add(event) {
+        event.preventDefault()
+        event.stopPropagation()
+
+        const content = this.#updateTemplatePlan()
+
+        this.buttonTarget.insertAdjacentHTML("beforebegin", content)
+
+    }
+
+    #updateTemplatePlan() {
+        const nextIndex = this.planTargets.length
+        const num_of_colors = this.formColorValue.length
+        let colorIndex = 0
+        if (nextIndex != 0) {
+            colorIndex = nextIndex % num_of_colors
+        }
+        const newColor = this.formColorValue[colorIndex]
+        return this.templateTarget.innerHTML
+                            .replace(/NEW_RECORD/g, nextIndex)
+                            .replace(/NEW_PLAN/g, nextIndex + 1)
+                            .replace(/NEXT_COLOR/g, newColor)
+
+
+    }
+}

app/javascript/controllers/benefits_template_picker_controller.js

@@ -2,7 +2,10 @@ import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
   static values = { url: String };
-  static targets = ["benefit_1", "benefit_2", "benefit_3", "benefit_4", "benefit_5", "benefit_6", "benefit_7", "benefit_8", "benefit_9", "benefit_10", "benefit_11", "benefit_12", "benefit_13", "benefit_14"];
+  static targets = ["benefit"];
+
+  connect() {
+  }
 
   async fetchData(event) {
     const templateId = event.target.value;
@@ -11,25 +14,27 @@ export default class extends Controller {
       return;
     }
     
-    const url = "/id_card_benefits_templates/get_templates_benefits/:id".replace(':id', templateId);
+    const url = `/id_card_benefits_templates/get_template_benefits/${templateId}`
     const response = await fetch(url);
     const templateBenefitsData = await response.json();
 
-
-
-    this.nameTarget.value = templateData.name;
-    this.descriptionTarget.value = templateData.description;
+    this.#updateFields(templateBenefitsData)
   }
 
   clearFields() {
-    this.nameTarget.value = '';
-    this.descriptionTarget.value = '';
   }
 
-  updateFields(templateBenefitsData) {
-    templateBenefitsData.forEach(function(benefit) {
-      const propertyName = `benefit_${benefit.sequence}`
-      this[propertyName].value = benefit.benefit
+  async #updateFields(templateBenefitsData) {
+    const benefitTargetsList = this.benefitTargets
+    templateBenefitsData.forEach(function(bene) {
+      const targetElement = benefitTargetsList.find(
+        (element) => element.dataset.sequence == bene.sequence
+      );
+      if (targetElement) {
+        targetElement.value = bene.benefit;
+      } else {
+        console.error(`Target not found for sequence: ${bene.sequence}`);
+      }
     });
   }
 }