Merge pull request #10 from agrifooddatacanada/fix/name_description_meta

Fixed meta: name and description in language tabs
agrifooddatacanada · Jul 18, 2023 · 3e51dff · 3e51dff
2 parents 710c2a7 + ec43064
commit 3e51dff
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 94 deletions.
diff --git a/src/App.js b/src/App.js
@@ -25,8 +25,8 @@ function App() {
     English: { name: "", description: "" },
   });
   const [divisionGroup, setDivisionGroup] = useState({
-    division: 'Natural sciences',
-    group: 'Mathematics and statistics',
+    division: '',
+    group: '',
   });
   const [languages, setLanguages] = useState(["English"]);
   const [attributeRowData, setAttributeRowData] = useState([]);
@@ -154,8 +154,8 @@ function App() {
     });
 
     setDivisionGroup({
-      division: 'Natural sciences',
-      group: 'Mathematics and statistics',
+      division: '',
+      group: '',
     });
 
     setLanguages(["English"]);

diff --git a/src/AttributeDetails/AttributeDetails.js b/src/AttributeDetails/AttributeDetails.js
@@ -30,9 +30,9 @@ export default function AttributeDetails({ pageBack, pageForward }) {
   const [fieldArray, setFieldArray] = useState(["Type"]);
   const navigationSafe = useRef();
   const gridRef = useRef();
+  const refContainer = useRef();
   const entryCodesRef = useRef();
   const typeBlanksRef = useRef();
-
   const typesObjectRef = useRef({});
 
   useEffect(() => {
@@ -43,6 +43,21 @@ export default function AttributeDetails({ pageBack, pageForward }) {
     typesObjectRef.current = newTypesObjetRef;
   }, [attributeRowData]);
 
+  // Stops grid editing when clicking outside grid
+  useEffect(() => {
+    const handleClickOutsideGrid = (event) => {
+      if (gridRef.current.api && refContainer.current && !refContainer.current.contains(event.target)) {
+        gridRef.current.api.stopEditing();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutsideGrid);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutsideGrid);
+    };
+  }, [gridRef, refContainer]);
+
   const handleSave = () => {
     entryCodesRef.current = false;
     navigationSafe.current = false;
@@ -105,7 +120,7 @@ export default function AttributeDetails({ pageBack, pageForward }) {
             : item.Attribute,
         Type:
           typesObjectRef.current &&
-          item.Type !== typesObjectRef.current[item.Attribute]
+            item.Type !== typesObjectRef.current[item.Attribute]
             ? typesObjectRef.current[item.Attribute]
             : item.Type,
       }));
@@ -229,16 +244,18 @@ export default function AttributeDetails({ pageBack, pageForward }) {
           {errorMessage}
         </Alert>
       )}
-      <Grid
-        gridRef={gridRef}
-        addButton1={addButton1}
-        addButton2={addButton2}
-        setErrorMessage={setErrorMessage}
-        canDelete={canDelete}
-        setCanDelete={setCanDelete}
-        setAddByTab={setAddByTab}
-        typesObjectRef={typesObjectRef}
-      />
+      <div ref={refContainer}>
+        <Grid
+          gridRef={gridRef}
+          addButton1={addButton1}
+          addButton2={addButton2}
+          setErrorMessage={setErrorMessage}
+          canDelete={canDelete}
+          setCanDelete={setCanDelete}
+          setAddByTab={setAddByTab}
+          typesObjectRef={typesObjectRef}
+        />
+      </div>
       <AddAttribute
         addButton1={addButton1}
         addButton2={addButton2}

diff --git a/src/AttributeDetails/Grid.js b/src/AttributeDetails/Grid.js
@@ -26,7 +26,7 @@ export default function Grid({
   canDelete,
   setCanDelete,
   setAddByTab,
-  typesObjectRef,
+  typesObjectRef
 }) {
   const { attributesList, setAttributesList } = useContext(Context);
   const [selectedCells, setSelectedCells] = useState([]);
@@ -692,26 +692,6 @@ export default function Grid({
     [attributeRowData, attributesList]
   );
 
-  //Stops grid editing when clicking outside grid
-  useEffect(() => {
-    const handleClickOutsideGrid = (event) => {
-      if (gridRef.current.api) {
-        if (
-          typeof event.target.className === "string" &&
-          !event.target.className.includes("ag-cell")
-        ) {
-          gridRef.current.api.stopEditing();
-        }
-      }
-    };
-
-    document.addEventListener("click", handleClickOutsideGrid);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutsideGrid);
-    };
-  }, [gridRef]);
-
   //Saves elements in proper order after dragging
   const onRowDragEnd = (event) => {
     const oldIndex = attributeRowData.findIndex(

diff --git a/src/CreateManually/CreateManually.js b/src/CreateManually/CreateManually.js
@@ -25,6 +25,7 @@ import "ag-grid-community/styles/ag-theme-alpine.css";
 export default function CreateManually() {
   const addRef = useRef();
   const gridRef = useRef();
+  const refContainer = useRef();
 
   const { setCurrentPage, setAttributesList, attributesList, setFileData } =
     useContext(Context);
@@ -268,15 +269,11 @@ export default function CreateManually() {
     setCanDelete(false);
   };
 
+  // Stops grid editing when clicking outside grid
   useEffect(() => {
     const handleClickOutsideGrid = (event) => {
-      if (gridRef.current.api) {
-        if (
-          typeof event.target.className === "string" &&
-          !event.target.className.includes("ag-cell")
-        ) {
-          gridRef.current.api.stopEditing();
-        }
+      if (gridRef.current.api && refContainer.current && !refContainer.current.contains(event.target)) {
+        gridRef.current.api.stopEditing();
       }
     };
 
@@ -285,7 +282,7 @@ export default function CreateManually() {
     return () => {
       document.removeEventListener("click", handleClickOutsideGrid);
     };
-  }, [gridRef]);
+  }, [gridRef, refContainer]);
 
   //Drops element when item is taken off grid
   //Prevents error where when element comes back onto grid, the index isn't saved correctly onRowDragEnd
@@ -424,7 +421,7 @@ export default function CreateManually() {
       </Box>
       <Box>
         <Box style={{ display: "flex" }}>
-          <Box className="ag-theme-alpine" style={{ width: 503 }}>
+          <Box className="ag-theme-alpine" style={{ width: 503 }} ref={refContainer}>
             <style>{gridStyle}</style>
             <AgGridReact
               ref={gridRef}

diff --git a/src/EntryCodes/CodeGrid.js b/src/EntryCodes/CodeGrid.js
@@ -22,14 +22,16 @@ import { CustomPalette } from "../constants/customPalette";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
 
-export default function CodeGrid({ index, codeRefs }) {
+export default function CodeGrid({ index, codeRefs, chosenTable, setChosenTable }) {
   const { languages, setEntryCodeRowData } = useContext(Context);
   const { entryCodeRowData } = useContext(Context);
 
   const [buttonArray, setButtonArray] = useState([]);
   const [gridWidth, setGridWidth] = useState(500);
   const [hoveredRowIndex, setHoveredRowIndex] = useState(-1);
 
+  const refContainer = useRef(null);
+
   //Overrides the default grid styles in a way that allows input fields to not look awkward when word wrapping happens
 
   const gridStyle = `
@@ -300,22 +302,19 @@ export default function CodeGrid({ index, codeRefs }) {
   useEffect(() => {
     const handleClickOutsideGrid = (event) => {
       const clickedGrid = event.target.closest(".ag-root-wrapper");
-      if (clickedGrid) {
-        const clickedGridPath = clickedGrid.getAttribute("data-ag-path");
 
+      if (!clickedGrid && refContainer.current && !refContainer.current.contains(event.target)) {
         codeRefs.current.forEach((grid) => {
-          const gridElement =
-            grid.current?.gridOptions?.api?.gridPanel?.eGridDiv;
-          const gridPath = gridElement?.getAttribute("data-ag-path");
+          grid.current?.api?.stopEditing();
+        });
+      }
 
-          if (gridPath !== clickedGridPath && grid.current?.api) {
-            grid.current.api.stopEditing();
+      if (chosenTable) {
+        codeRefs.current.forEach((grid, idx) => {
+          if (idx !== chosenTable && grid.current?.api) {
+            grid.current?.api?.stopEditing();
           }
         });
-      } else {
-        codeRefs.current.forEach((grid) => {
-          grid.current?.api?.stopEditing();
-        });
       }
     };
 
@@ -324,21 +323,24 @@ export default function CodeGrid({ index, codeRefs }) {
     return () => {
       document.removeEventListener("click", handleClickOutsideGrid);
     };
-  }, [codeRefs]);
+  }, [codeRefs, chosenTable]);
 
   return (
     <Box style={{ margin: "3rem", display: "flex", flexDirection: "column" }}>
       <Box style={{ display: "flex" }}>
         <Box className="ag-theme-alpine" style={{ width: gridWidth }}>
           <style>{gridStyle}</style>
-          <AgGridReact
-            ref={codeRefs.current[index]}
-            rowData={entryCodeRowData[index]}
-            columnDefs={columnDefs}
-            defaultColDef={defaultColDef}
-            domLayout="autoHeight"
-            onCellKeyDown={onCellKeyDown}
-          />
+          <div ref={refContainer}>
+            <AgGridReact
+              ref={codeRefs.current[index]}
+              rowData={entryCodeRowData[index]}
+              columnDefs={columnDefs}
+              defaultColDef={defaultColDef}
+              domLayout="autoHeight"
+              onCellKeyDown={onCellKeyDown}
+              onCellClicked={() => setChosenTable(index)}
+            />
+          </div>
         </Box>
         <Box
           style={{

diff --git a/src/EntryCodes/EntryCodes.js b/src/EntryCodes/EntryCodes.js
@@ -19,6 +19,7 @@ export default function EntryCodes() {
     setCurrentPage,
     languages,
   } = useContext(Context);
+  const [chosenTable, setChosenTable] = useState(0);
 
   const codeRefs = useRef();
   const entryCodeData = useRef();
@@ -132,6 +133,8 @@ export default function EntryCodes() {
         key={selectedAttributes[index].Attribute}
         index={index}
         codeRefs={codeRefs}
+        chosenTable={chosenTable}
+        setChosenTable={setChosenTable}
       />
     );
   });

diff --git a/src/EntryCodes/SingleTable.js b/src/EntryCodes/SingleTable.js
@@ -3,7 +3,7 @@ import { Box, Typography } from "@mui/material";
 import { CustomPalette } from "../constants/customPalette";
 import CodeGrid from "./CodeGrid";
 
-export default function SingleTable({ attribute, index, codeRefs }) {
+export default function SingleTable({ attribute, index, codeRefs, chosenTable, setChosenTable }) {
   return (
     <Box
       sx={{
@@ -23,7 +23,7 @@ export default function SingleTable({ attribute, index, codeRefs }) {
       >
         {attribute.Attribute}
       </Typography>
-      <CodeGrid index={index} codeRefs={codeRefs} />
+      <CodeGrid index={index} codeRefs={codeRefs} chosenTable={chosenTable} setChosenTable={setChosenTable} />
     </Box>
   );
 }
diff --git a/src/LanguageDetails/LanGrid.js b/src/LanguageDetails/LanGrid.js
@@ -255,25 +255,6 @@ export default function LanGrid({ gridRef, currentLanguage }) {
     ]);
   }, [attributesList]);
 
-  //Makes grid stop editing when clicking outside grid
-  useEffect(() => {
-    const handleClickOutsideGrid = (event) => {
-      if (gridRef.current.api) {
-        if (
-          typeof event.target.className === "string" &&
-          !event.target.className.includes("ag-cell")
-        ) {
-          gridRef.current.api.stopEditing();
-        }
-      }
-    };
-
-    document.addEventListener("click", handleClickOutsideGrid);
-
-    return () => {
-      document.removeEventListener("click", handleClickOutsideGrid);
-    };
-  }, [gridRef]);
 
   return (
     <div className="ag-theme-balham" style={{ width: 800 }}>

diff --git a/src/LanguageDetails/LanguageDetails.js b/src/LanguageDetails/LanguageDetails.js
@@ -1,4 +1,4 @@
-import React, { useRef, useContext, useState } from "react";
+import React, { useRef, useContext, useState, useEffect } from "react";
 import { Context } from "../App";
 import { Box } from "@mui/system";
 import { Button, Tooltip, Typography } from "@mui/material";
@@ -21,8 +21,24 @@ export default function LanguageDetails({ pageBack, pageForward }) {
   const [currentLanguage, setCurrentLanguage] = useState(languages[0]);
 
   const gridRef = useRef();
+  const refContainer = useRef();
   const entryCodesRef = useRef();
 
+  // Stops grid editing when clicking outside grid
+  useEffect(() => {
+    const handleClickOutsideGrid = (event) => {
+      if (gridRef.current.api && refContainer.current && !refContainer.current.contains(event.target)) {
+        gridRef.current.api.stopEditing();
+      }
+    };
+
+    document.addEventListener("click", handleClickOutsideGrid);
+
+    return () => {
+      document.removeEventListener("click", handleClickOutsideGrid);
+    };
+  }, [gridRef, refContainer]);
+
   const handleSave = () => {
     entryCodesRef.current = false;
     gridRef.current.api.stopEditing();
@@ -197,7 +213,9 @@ export default function LanguageDetails({ pageBack, pageForward }) {
               <HelpOutlineIcon sx={{ fontSize: 15 }} />
             </Tooltip>
           </Box>
-          <LanGrid gridRef={gridRef} currentLanguage={currentLanguage} />
+          <div ref={refContainer}>
+            <LanGrid gridRef={gridRef} currentLanguage={currentLanguage} />
+          </div>
         </Box>
       </Box>
     </Box>

diff --git a/src/SchemaMetadata/Classification.js b/src/SchemaMetadata/Classification.js
@@ -16,15 +16,15 @@ const Classification = () => {
   const divisionsDropdown = useMemo(() => {
     return Object.keys(classification).map((division) => {
       return (
-        <MenuItem key={division} value={division}>{division}</MenuItem>
+        <MenuItem sx={{ height: '38px' }} key={division} value={division}>{division}</MenuItem>
       );
     });
   }, []);
 
   const groupsDropdown = useMemo(() => {
     return classification[divisionGroup.division].map((group) => {
       return (
-        <MenuItem key={group} value={group}>{group}</MenuItem>
+        <MenuItem sx={{ height: '38px' }} key={group} value={group}>{group}</MenuItem>
       );
     });
   }, [divisionGroup.division]);