adjust size / spacing of pagges using left and right list layout

HakaiInstitute · Jul 25, 2024 · f7ea481 · f7ea481
1 parent 202cac1
commit f7ea481
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 158 deletions.
diff --git a/src/components/FormComponents/BilingualTextInput.jsx b/src/components/FormComponents/BilingualTextInput.jsx
@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
 import {
   Button,
   InputAdornment,
@@ -26,6 +26,7 @@ const BilingualTextInput = ({
   error,
   translationButonDisabled = false,
 }) => {
+  const mounted = useRef(false);
   const { translate } = useContext(UserContext);
   const [awaitingTranslation, setAwaitingTranslation] = useState(false);
 
@@ -79,6 +80,7 @@ const BilingualTextInput = ({
 
   // Ensure translations field exists on component mount/load
   useEffect(() => {
+    mounted.current = true
     if (value && !value.translations) {
       const hasTranslations = value.en && value.fr;
       if (hasTranslations) {
@@ -95,6 +97,9 @@ const BilingualTextInput = ({
         onChange({ target: { name, value: updatedValue } });
       }
     }
+    return () => {
+      mounted.current = false;
+    };
   }, [name, onChange, value, alternateLanguage]);
 
   return (

diff --git a/src/components/FormComponents/ContactEditor.jsx b/src/components/FormComponents/ContactEditor.jsx
@@ -65,18 +65,17 @@ const ContactEditor = ({
       newInputValue.startsWith("http") &&
       !newInputValue.includes("ror.org")
     ) {
-       if (mounted.current) setRorSearchActive(false);
+       setRorSearchActive(false);
     } else {
       fetch(`https://api.ror.org/organizations?query="${newInputValue}"`)
         .then((response) => response.json())
         .then((response) => {
-          if (mounted.current){
-            setRorOptions(response.items)}
-          if (response.number_of_results === 1){
-            updateContactRor(response.items[0]);
-          }
+            setRorOptions(response.items)
+            if (response.number_of_results === 1){
+              updateContactRor(response.items[0]);
+            }
         })
-        .then(() => {if (mounted.current) setRorSearchActive(false)});
+        .then(() => {setRorSearchActive(false)});
     }
   }
 
@@ -94,13 +93,13 @@ const ContactEditor = ({
   }, [debouncedRorInputValue]);
 
   return (
-    <Grid container direction="column" spacing={2}>
-      <Grid item xs>
+    <Grid container direction="column">
+      <Grid item xs style={{ margin: "10px" }}>
         <Typography variant="h6">
           {ContactTitle(value)}
         </Typography>
       </Grid>
-      <Grid item xs>
+      <Grid item xs style={{ margin: "10px" }}>
         {showRolePicker && (
           <RolePicker
             value={value}
@@ -122,149 +121,153 @@ const ContactEditor = ({
                 <Fr>Identification de l'organisation</Fr>
               </I18n>
             </QuestionText>
-          </Grid>
-          <Grid item xs style={{ marginleft: "10px", height: "33px" }}>
-            {rorSearchActive ? (
-              <CircularProgress size={20} />
-            ) : (
-              <div style={{ height: "33px" }} />
-            )}
-          </Grid>
-          <Grid item xs style={{ marginleft: "10px" }}>
-            <Autocomplete
-              inputValue={rorInputValue}
-              onInputChange={(e, newInputValue) => {
-                setRorInputValue(newInputValue);
-                if (newInputValue === "") {
-                  setRorSearchActive(false);
-                } else {
-                  setRorSearchActive(true);
-                }
-              }}
-              disabled={disabled}
-              onChange={(e, organization) => {
-                if (organization !== null) {
-                  fetch(`https://api.ror.org/organizations/${organization.id}`)
-                    .then((response) => response.json())
-                    .then((response) => {
-                      if (!response.errors) {
-                        updateContactRor(response);
-                      } // todo: do some error handling here if search fails?
-                    })
-                    .then(() => setRorSearchActive(false))
-                    .then(() => setRorInputValue(""));
-                }
-              }}
-              freeSolo
-              filterOptions={(x) => x}
-              getOptionLabel={(e) => e.name}
-              options={rorOptions}
-              fullWidth
-              renderInput={(params) => (
-                <TextField
-                  // eslint-disable-next-line react/jsx-props-no-spreading
-                  {...params}
-                  label={
-                    <I18n
-                      en="Type to search Research Organization Registry (ROR)"
-                      fr="Tapez pour rechercher le registre des organismes de recherche (ROR)
-"
+            <Grid container direction="column" spacing={1}>
+              <Grid item xs>
+                <Autocomplete
+                  inputValue={rorInputValue}
+                  onInputChange={(e, newInputValue) => {
+                    setRorInputValue(newInputValue);
+                    if (newInputValue === "") {
+                      setRorSearchActive(false);
+                    } else {
+                      setRorSearchActive(true);
+                    }
+                  }}
+                  disabled={disabled}
+                  onChange={(e, organization) => {
+                    if (organization !== null) {
+                      fetch(`https://api.ror.org/organizations/${organization.id}`)
+                        .then((response) => response.json())
+                        .then((response) => {
+                          if (!response.errors) {
+                            updateContactRor(response);
+                          } // todo: do some error handling here if search fails?
+                        })
+                        .then(() => setRorSearchActive(false))
+                        .then(() => setRorInputValue(""));
+                    }
+                  }}
+                  freeSolo
+                  filterOptions={(x) => x}
+                  getOptionLabel={(e) => e.name}
+                  options={rorOptions}
+                  fullWidth
+                  renderInput={(params) => (
+                    <TextField
+                      // eslint-disable-next-line react/jsx-props-no-spreading
+                      {...params}
+                      label={
+                        <I18n
+                          en="Type to search Research Organization Registry (ROR)"
+                          fr="Tapez pour rechercher le registre des organismes de recherche (ROR)
+    "
+                        />
+                      }
                     />
+                  )}
+                />
+                {rorSearchActive ? (
+                  <CircularProgress size={20} style={{
+                     position: 'relative',
+                    top: -35,
+                    left: 30,
+                    zIndex: 1,
+                  }} />
+                ) : ("")}
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  label={<I18n active en="ROR URL" fr="URL ROR" />}
+                  InputLabelProps={{ shrink: value.orgRor !== "" }}
+                  value={value.orgRor}
+                  disabled
+                  fullWidth
+                  InputProps={{
+                    endAdornment: value.orgRor && (
+                      <InputAdornment position="end">
+                        <IconButton
+                          onClick={() => {
+                            handleClear("orgRor");
+                          }}
+                        >
+                          <Clear />
+                        </IconButton>
+                      </InputAdornment>
+                    ),
+                  }}
+                  // sx={{m: 2, "&.Mui-focused .MuiIconButton-root": {color: 'primary.main'}}}
+                />
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  label={<I18n en="Organization name" fr="Nom de l'organisation" />}
+                  value={value.orgName}
+                  onChange={updateContactEvent("orgName")}
+                  disabled={value.orgRor !== "" || disabled}
+                  inputProps={{'data-lpignore' : true}}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  helperText={
+                    !orgURLValid && <I18n en="Invalid URL" fr="URL non valide" />
                   }
+                  error={!orgURLValid}
+                  label={<I18n en="URL" fr="URL" />}
+                  value={value.orgURL}
+                  onChange={updateContactEvent("orgURL")}
+                  disabled={value.orgRor !== "" || disabled}
+                  fullWidth
                 />
-              )}
-            />
-          </Grid>
-          <Grid item xs style={{ marginleft: "10px" }}>
-            <TextField
-              label={<I18n active en="ROR URL" fr="URL ROR" />}
-              InputLabelProps={{ shrink: value.orgRor !== "" }}
-              value={value.orgRor}
-              disabled
-              fullWidth
-              InputProps={{
-                endAdornment: value.orgRor && (
-                  <InputAdornment position="end">
-                    <IconButton
-                      onClick={() => {
-                        handleClear("orgRor");
-                      }}
-                    >
-                      <Clear />
-                    </IconButton>
-                  </InputAdornment>
-                ),
-              }}
-              // sx={{m: 2, "&.Mui-focused .MuiIconButton-root": {color: 'primary.main'}}}
-            />
-          </Grid>
-          <Grid item xs style={{ marginleft: "10px" }}>
-            <TextField
-              label={<I18n en="Organization name" fr="Nom de l'organisation" />}
-              value={value.orgName}
-              onChange={updateContactEvent("orgName")}
-              disabled={value.orgRor !== "" || disabled}
-              fullWidth
-            />
-          </Grid>
-          <Grid item xs>
-            <TextField
-              helperText={
-                !orgURLValid && <I18n en="Invalid URL" fr="URL non valide" />
-              }
-              error={!orgURLValid}
-              label={<I18n en="URL" fr="URL" />}
-              value={value.orgURL}
-              onChange={updateContactEvent("orgURL")}
-              disabled={value.orgRor !== "" || disabled}
-              fullWidth
-            />
-          </Grid>
-          <Grid item xs>
-            <TextField
-              label={<I18n en="Address" fr="Adresse" />}
-              value={value.orgAdress}
-              onChange={updateContactEvent("orgAdress")}
-              disabled={disabled}
-              fullWidth
-            />
-          </Grid>
-          <Grid item xs>
-            <TextField
-              label={<I18n en="City" fr="Ville" />}
-              value={value.orgCity}
-              onChange={updateContactEvent("orgCity")}
-              disabled={value.orgRor !== "" || disabled}
-              fullWidth
-            />
-          </Grid>
-          <Grid item xs>
-            <TextField
-              label={<I18n en="Country" fr="Pays" />}
-              value={value.orgCountry}
-              onChange={updateContactEvent("orgCountry")}
-              disabled={value.orgRor !== "" || disabled}
-              fullWidth
-            />
-          </Grid>
-          <Grid item xs>
-            <TextField
-              helperText={
-                !orgEmailValid && (
-                  <I18n en="Invalid email" fr="E-mail non valide" />
-                )
-              }
-              error={!orgEmailValid}
-              label={<I18n en="Email" fr="Courriel" />}
-              value={value.orgEmail}
-              onChange={updateContactEvent("orgEmail")}
-              fullWidth
-              disabled={disabled}
-            />{" "}
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  label={<I18n en="Address" fr="Adresse" />}
+                  value={value.orgAdress}
+                  onChange={updateContactEvent("orgAdress")}
+                  disabled={disabled}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  label={<I18n en="City" fr="Ville" />}
+                  value={value.orgCity}
+                  onChange={updateContactEvent("orgCity")}
+                  disabled={value.orgRor !== "" || disabled}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  label={<I18n en="Country" fr="Pays" />}
+                  value={value.orgCountry}
+                  onChange={updateContactEvent("orgCountry")}
+                  disabled={value.orgRor !== "" || disabled}
+                  fullWidth
+                />
+              </Grid>
+              <Grid item xs>
+                <TextField
+                  helperText={
+                    !orgEmailValid && (
+                      <I18n en="Invalid email" fr="E-mail non valide" />
+                    )
+                  }
+                  error={!orgEmailValid}
+                  label={<I18n en="Email" fr="Courriel" />}
+                  value={value.orgEmail}
+                  onChange={updateContactEvent("orgEmail")}
+                  fullWidth
+                  disabled={disabled}
+                />{" "}
+              </Grid>
+            </Grid>
           </Grid>
         </Grid>
       </Grid>
-      <Grid item xs>
+      <Grid item xs style={{ margin: "10px" }}>
         {/* Individual */}
         <Typography>
           <I18n>

diff --git a/src/components/FormComponents/Instruments.jsx b/src/components/FormComponents/Instruments.jsx
@@ -22,7 +22,6 @@ const Instruments = ({
   updateInstruments,
   instruments = [],
   disabled,
-  paperClass,
   saveUpdateInstrument,
   userInstruments,
   platformList,
@@ -77,7 +76,7 @@ const Instruments = ({
       <Grid item xs>
         <Grid container direction="column">
           {instrument && (
-            <Paper style={paperClass}>
+            <Paper style={{ marginLeft: "10px", padding: "10px" }}>
               <Grid container direction="column" spacing={2}>
                 <Grid item xs>
                   <I18n>

diff --git a/src/components/FormComponents/LeftList.jsx b/src/components/FormComponents/LeftList.jsx
@@ -14,7 +14,6 @@ import {Container, Draggable} from "react-smooth-dnd";
 import {Delete, DragHandle, FileCopy, Save} from "@material-ui/icons";
 import arrayMove from "array-move";
 import {deepCopy, deepEquals} from "../../utils/misc";
-import {paperClass} from "./QuestionStyles";
 import {En, Fr, I18n} from "../I18n";
 import SelectInput from "./SelectInput";
 
@@ -93,7 +92,7 @@ const LeftList = ({
   }
 
   return (
-      <Paper style={paperClass}>
+      <Paper style={{padding: "10px", marginRight:"10px"}}>
       <Grid container direction="column" justifyContent="flex-start">
         <Grid item xs style={{ margin: "10px" }}>
           <Typography>