fix: display issues with icons, columns, and edit form

gwynndp · Jun 20, 2022 · 6602e0d · 6602e0d
1 parent 2458377
commit 6602e0d
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 41 deletions.
diff --git a/src/components/Stakeholders/StakeholderDetail/GrowerListItem.js b/src/components/Stakeholders/StakeholderDetail/GrowerListItem.js
@@ -14,13 +14,17 @@ const useStyles = makeStyles({
   },
 });
 
+function makeFullName(first, last) {
+  return `${first} ${last}`;
+}
+
 export default function GrowerListItem({ data }) {
   const classes = useStyles();
 
   return (
     <>
       <Grid item xs={5}>
-        <Typography>{data.fullName}</Typography>
+        <Typography>{makeFullName(data.first_name, data.last_name)}</Typography>
       </Grid>
       <Grid item xs={3} className={classes.flex}>
         <IdIcon className={classes.pr} />

diff --git a/src/components/Stakeholders/StakeholderDetail/Header.js b/src/components/Stakeholders/StakeholderDetail/Header.js
@@ -44,7 +44,7 @@ const useStyles = makeStyles({
 
 export default function DialogHeader({ data }) {
   const [isEditing, setIsEditing] = useState(false);
-  const [details, setDetails] = useState({});
+  const [details, setDetails] = useState({ ...data });
 
   const classes = useStyles();
 
@@ -66,29 +66,77 @@ export default function DialogHeader({ data }) {
   return (
     <Grid container direction="row">
       <Grid item xs={1}>
-        {data.logo && <img src={data.logo} alt="" className={classes.logoLg} />}
-        {!data.logo && <PersonIcon className={classes.logoLg} />}
+        {data.logo_url ? (
+          <img src={data.logo_url} alt="" className={classes.logoLg} />
+        ) : (
+          <PersonIcon className={classes.logoLg} />
+        )}
       </Grid>
 
       <Grid item container xs={11} className={classes.pl}>
-        <Grid container justify="space-between" alignItems="flex-start">
-          {isEditing ? (
-            <TextField
-              name="name"
-              value={details?.name || data.name}
-              onChange={handleEdit}
-              variant="standard"
-              InputProps={{
-                classes: { root: classes.inputName },
-              }}
-              autoFocus
-            />
-          ) : (
-            <Typography variant="h4" className={classes.fields}>
-              {details?.name || data.name}
-            </Typography>
-          )}
-        </Grid>
+        {data.type === 'Organization' ? (
+          <Grid container justify="space-between" alignItems="flex-start">
+            {isEditing ? (
+              <TextField
+                name="org_name"
+                value={details?.org_name}
+                onChange={handleEdit}
+                variant="standard"
+                InputProps={{
+                  classes: { root: classes.inputName },
+                }}
+                autoFocus
+              />
+            ) : (
+              <Typography variant="h4" className={classes.fields}>
+                {details?.org_name}
+              </Typography>
+            )}
+          </Grid>
+        ) : (
+          <Grid container justify="start" alignItems="flex-start" xs={11}>
+            <Grid className={classes.pr}>
+              {isEditing ? (
+                <TextField
+                  name="first_name"
+                  value={details?.first_name}
+                  onChange={handleEdit}
+                  variant="standard"
+                  InputProps={{
+                    classes: { root: classes.inputName },
+                  }}
+                  autoFocus
+                />
+              ) : (
+                <Typography variant="h4" className={classes.fields}>
+                  {details?.first_name}
+                </Typography>
+              )}
+            </Grid>
+            <Grid>
+              {isEditing ? (
+                <TextField
+                  name="last_name"
+                  value={details?.last_name}
+                  onChange={handleEdit}
+                  variant="standard"
+                  InputProps={{
+                    classes: { root: classes.inputName },
+                  }}
+                  autoFocus
+                />
+              ) : (
+                <Typography
+                  variant="h4"
+                  className={classes.fields}
+                  // style={{ marginLeft: '0.3em' }}
+                >
+                  {details?.last_name}
+                </Typography>
+              )}
+            </Grid>
+          </Grid>
+        )}
         <Grid container direction="row">
           <Grid item xs={3}>
             <Grid
@@ -110,7 +158,7 @@ export default function DialogHeader({ data }) {
               {isEditing ? (
                 <TextField
                   name="type"
-                  value={details?.type || data.type}
+                  value={details?.type}
                   onChange={handleEdit}
                   variant="standard"
                   InputProps={{
@@ -119,7 +167,7 @@ export default function DialogHeader({ data }) {
                 />
               ) : (
                 <Typography className={classes.fields}>
-                  {details?.type || data.type}
+                  {details?.type}
                 </Typography>
               )}
             </Grid>
@@ -136,7 +184,7 @@ export default function DialogHeader({ data }) {
               {isEditing ? (
                 <TextField
                   name="email"
-                  value={details?.email || data.email}
+                  value={details?.email}
                   onChange={handleEdit}
                   variant="standard"
                   InputProps={{
@@ -145,7 +193,7 @@ export default function DialogHeader({ data }) {
                 />
               ) : (
                 <Typography className={classes.fields}>
-                  {details?.email || data.email}
+                  {details?.email}
                 </Typography>
               )}
             </Grid>
@@ -159,7 +207,7 @@ export default function DialogHeader({ data }) {
               {isEditing ? (
                 <TextField
                   name="phone"
-                  value={details?.phone || data.phone}
+                  value={details?.phone}
                   onChange={handleEdit}
                   variant="standard"
                   InputProps={{
@@ -168,7 +216,7 @@ export default function DialogHeader({ data }) {
                 />
               ) : (
                 <Typography className={classes.fields}>
-                  {details?.phone || data.phone}
+                  {details?.phone}
                 </Typography>
               )}
             </Grid>
@@ -184,7 +232,7 @@ export default function DialogHeader({ data }) {
               {isEditing ? (
                 <TextField
                   name="website"
-                  value={details?.website || data.website}
+                  value={details?.website}
                   onChange={handleEdit}
                   variant="standard"
                   InputProps={{
@@ -193,9 +241,7 @@ export default function DialogHeader({ data }) {
                 />
               ) : (
                 <Typography className={classes.fields}>
-                  <Link href={details?.website || data.website}>
-                    {details?.website || data.website}
-                  </Link>
+                  <Link href={details?.website}>{details?.website}</Link>
                 </Typography>
               )}
             </Grid>
@@ -209,7 +255,7 @@ export default function DialogHeader({ data }) {
               {isEditing ? (
                 <TextField
                   name="map"
-                  value={details?.map || data.map}
+                  value={details?.map}
                   onChange={handleEdit}
                   variant="standard"
                   InputProps={{
@@ -218,9 +264,7 @@ export default function DialogHeader({ data }) {
                 />
               ) : (
                 <Typography className={classes.fields}>
-                  <Link href={details?.map || data.map}>
-                    {details?.map || data.map}
-                  </Link>
+                  <Link href={details?.map}>{details?.map}</Link>
                 </Typography>
               )}
             </Grid>

diff --git a/src/components/Stakeholders/StakeholderDetail/ParentChildListItem.js b/src/components/Stakeholders/StakeholderDetail/ParentChildListItem.js
@@ -26,7 +26,7 @@ export default function ParentChildListItem({ data }) {
         <img src="./logo_192x192.png" alt="" className={classes.logoSm} />
       </Grid>
       <Grid item xs={6}>
-        <Typography>{data.name}</Typography>
+        <Typography>{data.org_name}</Typography>
       </Grid>
       <Grid item xs={5} className={classes.flex}>
         <IdIcon className={classes.pr} />

diff --git a/src/components/Stakeholders/StakeholderDetail/index.js b/src/components/Stakeholders/StakeholderDetail/index.js
@@ -63,11 +63,24 @@ export default function StakeholderDetail({ row, columns, child }) {
             className={idx === 0 && child ? classes.pl : ''}
           >
             <div className={classes.flex}>
-              {col.value === 'name' && row.logo && (
-                <img src={row.logo} className={classes.logo} alt="" />
+              {col.value === 'name' && row.type === 'Organization' && (
+                <>
+                  <img
+                    src={row.logo_url}
+                    className={classes.logo}
+                    alt={row.org_name}
+                  />
+                  {row.org_name}
+                </>
               )}
-              {col.value === 'name' && !row.logo && (
-                <PersonIcon className={classes.logo} />
+              {col.value === 'name' && row.type === 'Person' && (
+                <>
+                  <PersonIcon
+                    className={classes.logo}
+                    alt={`${row.first_name} ${row.last_name}`}
+                  />
+                  {`${row.first_name} ${row.last_name}`}
+                </>
               )}
               {row[col.value]}
             </div>