Style dash

dashboard-react/app/page.js

@@ -34,7 +34,6 @@ const Home = () => {
         <FilterControls />
       </div>
       <div style={{ minWidth: "1000px" }}>
-        <h1>CFTP Field Test Results Dashboard</h1>
         <Dashboard />
       </div>
     </main>

dashboard-react/components/DropdownCheckbox.js

@@ -1,24 +1,30 @@
 "use client";
-import React from "react";
+import React, { useRef } from "react";
 import { useSnapshot } from "valtio";
 import state from "@/lib/state";
+import { closeOpenedDetails } from "@/lib/utils";
 
-export default function DropdownCheckbox({
+const DropdownCheckbox = React.memo(function DropdownCheckbox({
   options,
   selectedOptions,
   filterKey,
   title,
 }) {
   const snap = useSnapshot(state);
+  const divRef = useRef(null);
+
+  const onSummaryClick = () => {
+    closeOpenedDetails(`summary-${filterKey}`);
+  };
 
   const handleCheckboxChange = (key, value) => (event) => {
     const checked = event.target.checked;
-    console.log(`checked for ${key} ${value}`);
-    console.log(checked);
+    // console.log(`checked for ${key} ${value}`);
+    // console.log(checked);
     if (checked) {
-      state.setFilterValue(key, [...snap.filters[key], value]);
+      state.setFilterValue(key, [...filtersSnap[key], value]);
     } else {
-      console.log("removing");
+      // console.log("removing");
       state.setFilterValue(
         key,
         snap.filters[key].filter((item) => item !== value)
@@ -55,7 +61,12 @@ export default function DropdownCheckbox({
       </div>
       <div className="divider m-0"></div>
       <details className="dropdown">
-        <summary className="btn m-1">
+        <summary
+          className="btn m-1"
+          onClick={onSummaryClick}
+          ref={divRef}
+          id={`summary-${filterKey}`}
+        >
           {isAllSelected
             ? "All Selected"
             : selectedOptions.length > 0
@@ -81,4 +92,6 @@ export default function DropdownCheckbox({
       </details>
     </>
   );
-}
+});
+
+export default DropdownCheckbox;

dashboard-react/components/DropdownSingleSelect.js

@@ -1,11 +1,17 @@
 "use client";
-import React from "react";
+import React, { useRef } from "react";
 import { useSnapshot } from "valtio";
 import state from "@/lib/state";
 import { invertDictionary } from "@/lib/constants";
+import { closeOpenedDetails } from "@/lib/utils";
 
 export default function DropdownSingleSelect({ options, title, filterKey }) {
   const snap = useSnapshot(state);
+  const divRef = useRef(null);
+
+  const onSummaryClick = () => {
+    closeOpenedDetails(`summary-${filterKey}`);
+  };
 
   const handleSelectionChange = (key, value) => {
     console.log(key, value);
@@ -18,7 +24,12 @@ export default function DropdownSingleSelect({ options, title, filterKey }) {
     <>
       <h2>{title}</h2>
       <details className="dropdown">
-        <summary className="btn m-1">
+        <summary
+          className="btn m-1"
+          onClick={onSummaryClick}
+          ref={divRef}
+          id={`summary-${filterKey}`}
+        >
           {col2options[snap.filters[filterKey]]}
         </summary>
         <ul className="menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow">

dashboard-react/components/FilterControls.js

@@ -33,16 +33,27 @@ export default function FilterControls() {
     }
   }, [snap.options]);
 
+  useEffect(() => {
+    const summaries = document.querySelectorAll("summary");
+
+    summaries.forEach((summary) => {
+      summary.addEventListener("click", closeOpenedDetails);
+    });
+
+    function closeOpenedDetails() {
+      summaries.forEach((summary) => {
+        let detail = summary.parentNode;
+        if (detail != this.parentNode) {
+          detail.removeAttribute("open");
+        }
+      });
+    }
+  }, [snap.options]);
+
   if (!snap.filters.initialized) {
     return <div>Loading...</div>;
   }
 
-  console.log("snap.options");
-  console.log(snap.options);
-
-  console.log("snap.filters");
-  console.log(snap.filters);
-
   return (
     <>
       <div className="h-[100vh] overflow-y-auto">

dashboard-react/lib/state.js

@@ -40,6 +40,12 @@ const state = proxy({
   setFilterValue: (key, value) => {
     state.filters[key] = value;
   },
+
+  expandedMenu: null,
+
+  setExpandedMenu: (menu) => {
+    state.expandedMenu = menu;
+  },
 });
 
 const fetchData = async () => {

dashboard-react/lib/utils.js

@@ -0,0 +1,9 @@
+export const closeOpenedDetails = (id) => {
+  const summaries = document.querySelectorAll("summary");
+  summaries.forEach((summary) => {
+    if (summary.id !== id) {
+      const detail = summary.parentElement;
+      detail.removeAttribute("open");
+    }
+  });
+};