Fix visa disabling process: now visa validates only current title lev…

…el 1
govpf · Oct 25, 2023 · eb93a09 · eb93a09
1 parent 033cc67
commit eb93a09
Showing 1 changed file with 34 additions and 19 deletions.
diff --git a/app/javascript/controllers/visa_controller.ts b/app/javascript/controllers/visa_controller.ts
@@ -1,8 +1,8 @@
-import { ApplicationController } from '~/controllers/application_controller';
+import { ApplicationController } from "~/controllers/application_controller";
 
 export class VisaController extends ApplicationController {
   connect(): void {
-    this.on('change', () => this.debounce(this.load, 200));
+    this.on("change", () => this.debounce(this.load, 200));
     const target = this.element as HTMLInputElement;
     if (target.checked) {
       this.updateVisibilityOfAboveFields(target);
@@ -11,44 +11,59 @@ export class VisaController extends ApplicationController {
     }
   }
 
-  static CHAMP_SELECTOR = '.editable-champ';
-  static REPETITION = 'editable-champ-repetition';
+  static CHAMP_SELECTOR = ".editable-champ";
+  static REPETITION = "editable-champ-repetition";
   static CHECKED_VISA_SELECTOR = "input[data-controller='visa']:checked";
   static CHILD_VISA_SELECTOR =
-    ':scope > div > ' + VisaController.CHECKED_VISA_SELECTOR;
+    ":scope > div > " + VisaController.CHECKED_VISA_SELECTOR;
 
   private updateVisibilityOfAboveFields(visa: HTMLInputElement) {
     if (visa == null) return;
 
-    let champ: Element | null | undefined;
-    champ = visa.closest(VisaController.CHAMP_SELECTOR);
-    while ((champ = champ?.previousElementSibling) != null) {
-      this.updateVisibility(champ, visa.checked);
+    let element: Element | null | undefined;
+    element = visa.closest(VisaController.CHAMP_SELECTOR);
+    while ((element = element?.previousElementSibling) != null) {
+      if (this.isTitle(element)) {
+        if (this.isSubTitle(element)) {
+          element = element.parentElement;
+        }
+      } else { // champ
+        this.updateVisibility(element, visa.checked);
 
-      if (
-        !visa.checked &&
-        champ.classList.contains(VisaController.REPETITION)
-      ) {
-        this.updateVisibilityOfRepetition(champ);
-      } else if (this.checked_visa(champ)) {
-        break;
+        if (!visa.checked && this.isRepetition(element)) {
+          this.updateVisibilityOfRepetition(element);
+        } else if (this.checked_visa(element)) {
+          break;
+        }
       }
     }
   }
 
+  private isTitle(element: Element) {
+    return element.tagName === "LEGEND";
+  }
+
+  private isSubTitle(champ: Element) {
+    return champ.children.length > 0 && champ.children[0].tagName !== "H2";
+  }
+
+  private isRepetition(champ: Element) {
+    return champ.classList.contains(VisaController.REPETITION);
+  }
+
   private updateVisibilityOfRepetition(champ: Element) {
     champ
       .querySelectorAll<HTMLInputElement>(VisaController.CHECKED_VISA_SELECTOR)
       .forEach((node) => this.updateVisibilityOfAboveFields(node));
   }
 
   private updateVisibility(champ: Element, checked: boolean) {
-    const visibility = checked ? 'hidden' : 'visible';
+    const visibility = checked ? "hidden" : "visible";
     champ
-      .querySelectorAll<HTMLInputElement>('input, select, button, textarea')
+      .querySelectorAll<HTMLInputElement>("input, select, button, textarea")
       .forEach((node) => (node.disabled = checked));
     champ
-      .querySelectorAll<HTMLInputElement>('a.fr-btn')
+      .querySelectorAll<HTMLInputElement>("a.fr-btn")
       .forEach((node) => (node.style.visibility = visibility));
   }