Only allow 6' locker on A floor (#299)

Co-authored-by: Ryan Laddusaw <rladdusaw@princeton.edu>

app/javascript/components/locker_size_filter.js

@@ -0,0 +1,29 @@
+export default class LockerSizeFilter {
+  constructor() {
+    this.preferredFloor = document.querySelector(
+      "#locker_application_preferred_general_area"
+    );
+    this.preferredSize = document.querySelector(
+      "#locker_application_preferred_size"
+    );
+    this.library = document
+      .querySelector("#locker-form-header a")
+      .innerHTML.split(" ")[0];
+    this.#addListener();
+  }
+
+  #addListener() {
+    this.preferredFloor.addEventListener("change", () => {
+      if (this.library === "Firestone") {
+        if (this.preferredFloor.value === "A floor") {
+          this.preferredSize.options.length = 0;
+          this.preferredSize[0] = new Option("6-foot", 6);
+        } else {
+          this.preferredSize.options.length = 0;
+          this.preferredSize[0] = new Option("4-foot", 4);
+          this.preferredSize[1] = new Option("6-foot", 6);
+        }
+      }
+    });
+  }
+}

app/javascript/entrypoints/application.js

@@ -5,6 +5,7 @@ import "lux-design-system/dist/system/tokens/tokens.scss";
 // eslint-disable-next-line no-unused-vars
 import Rails from "@rails/ujs"; // we need to import Rails so vite adds it to the module
 import CopyToClipboard from "../components/copy_to_clipboard";
+import LockerSizeFilter from "../components/locker_size_filter";
 
 Vue.use(system);
 
@@ -18,4 +19,5 @@ document.addEventListener("DOMContentLoaded", () => {
     });
   }
   new CopyToClipboard();
+  new LockerSizeFilter();
 });

spec/javascript/locker_size_filter.spec.js

@@ -0,0 +1,37 @@
+import LockerSizeFilter from "#components/locker_size_filter.js";
+
+describe("LockerSizeFilter", () => {
+  it("changes the locker options to only 6' for A floor", async () => {
+    document.body.innerHTML =
+      '<div id="locker-form-header"><a>Firestone Library</a></div><select id="locker_application_preferred_size"><option value="4">4-foot</option><option value="6">6-foot</option></select><select id="locker_application_preferred_general_area"><option value="A floor">A floor</option><option value="B floor">B floor</option></select>';
+    new LockerSizeFilter();
+    let select = await document.getElementById(
+      "locker_application_preferred_general_area"
+    );
+    select.value = "A floor";
+    // Fire the change event
+    select.dispatchEvent(new Event("change"));
+
+    expect(
+      document.getElementById("locker_application_preferred_general_area").value
+    ).toBe("A floor");
+    expect(
+      document
+        .getElementById("locker_application_preferred_size")
+        .getElementsByTagName("option").length
+    ).toBe(1);
+
+    // Changes back when another option is selected
+    select.value = "B floor";
+    select.dispatchEvent(new Event("change"));
+
+    expect(
+      document.getElementById("locker_application_preferred_general_area").value
+    ).toBe("B floor");
+    expect(
+      document
+        .getElementById("locker_application_preferred_size")
+        .getElementsByTagName("option").length
+    ).toBe(2);
+  });
+});