Showing Sub-organizations as dropdown from the organization of a Grower

src/components/GrowerDetail.js

@@ -506,6 +506,8 @@ const GrowerDetail = ({ open, growerId, onClose }) => {
                   <GrowerOrganization
                     organizationName={grower.organization}
                     assignedOrganizationId={grower.organization_id}
+                    isSidePanel={true}
+                    isCard={false}
                   />
                 ) : (
                   <Typography variant="body1">---</Typography>

src/components/GrowerOrganization.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-
+import { Typography } from '@material-ui/core';
 import { AppContext } from '../context/AppContext.js';
 import PropTypes from 'prop-types';
-import { Typography } from '@material-ui/core';
 import { getOrganizationById } from 'utilities/index.js';
+import SubOrgs from './SubOrgs.js';
 
 /**
  * @function
@@ -19,25 +19,36 @@ import { getOrganizationById } from 'utilities/index.js';
  */
 const GrowerOrganization = (props) => {
   const appContext = useContext(AppContext);
-  const { organizationName, assignedOrganizationId, compact } = props;
+  const {
+    organizationName,
+    assignedOrganizationId,
+    compact,
+    isCard,
+    isSidePanel,
+  } = props;
 
   const assignedOrganization = getOrganizationById(
     appContext.orgList,
     assignedOrganizationId
   );
 
   const renderGrowerOrganization = () => (
-    <Typography style={{ color: '#C0C0C0', fontStyle: 'italic' }}>
-      {organizationName}
-    </Typography>
+    <Typography variant="h6">{organizationName}</Typography>
   );
-  const renderGrowerAssignedOrganization = (assignedOrganization) => {
+  const renderGrowerAssignedOrganizationSide = (assignedOrganization) => {
+    return (
+      <SubOrgs name={assignedOrganization.name} id={assignedOrganization.id} />
+    );
+  };
+
+  const renderGrowerAssignedOrganizationCard = (assignedOrganization) => {
     return (
-      <Typography>
+      <Typography variant="h6">
         {assignedOrganization.name} ({assignedOrganization.id})
       </Typography>
     );
   };
+
   const orgNamesMatch =
     assignedOrganizationId &&
     organizationName &&
@@ -49,7 +60,16 @@ const GrowerOrganization = (props) => {
   return (
     <>
       {assignedOrganization &&
-        renderGrowerAssignedOrganization(assignedOrganization)}
+        isCard &&
+        renderGrowerAssignedOrganizationCard(assignedOrganization)}
+      {organizationName &&
+        (!compact || !assignedOrganization) &&
+        !orgNamesMatch &&
+        renderGrowerOrganization()}
+
+      {assignedOrganization &&
+        isSidePanel &&
+        renderGrowerAssignedOrganizationSide(assignedOrganization)}
       {organizationName &&
         (!compact || !assignedOrganization) &&
         !orgNamesMatch &&

src/components/Growers/Grower.js

@@ -62,6 +62,8 @@ export const Grower = ({ grower, growerClick }) => {
               organizationName={grower?.organization}
               assignedOrganizationId={grower?.organization_id}
               compact={true}
+              isCard={true}
+              isSidePanel={false}
             />
           </Box>
         </CardActions>

src/components/SubOrgs.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import {
+  Paper,
+  Typography,
+  List,
+  ListItem,
+  Collapse,
+  FormControlLabel,
+  Radio,
+  ListItemText,
+} from '@material-ui/core';
+
+const SubOrgs = ({ name, id }) => {
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+  const subOrganizations = [
+    'Sub-organization1',
+    'Sub-organization2',
+    'Sub-organization3',
+  ];
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+        }}
+      >
+        <Paper
+          elevation={0}
+          style={{
+            width: '200px',
+          }}
+        >
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              padding: '20px',
+              cursor: 'pointer',
+            }}
+          >
+            <Typography variant="h6">
+              {name} ({id})
+            </Typography>
+          </div>
+          <Collapse in={expanded} style={{ padding: '10px', marginTop: '0' }}>
+            <div>
+              <List>
+                {subOrganizations.map((subOrg, index) => (
+                  <ListItem key={index}>
+                    <ListItemText primary={subOrg} />
+                  </ListItem>
+                ))}
+              </List>
+            </div>
+          </Collapse>
+        </Paper>
+        <div style={{ position: 'relative' }}>
+          <FormControlLabel
+            control={<Radio checked={expanded} onClick={handleExpandClick} />}
+            label="Sub-organization/s"
+            style={{
+              right: '0',
+              position: 'absolute',
+              top: '15px',
+              left: '-160px',
+              display: 'block',
+            }}
+          />
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default SubOrgs;