Merge pull request #3613 from bcgov/NDT-534-Add-ID-and-Type-to-geogra…

…phic-names-in-CBC-list-accordion-and-quick-edit chore: add type and id to economicregion dropdown
bcgov · Oct 21, 2024 · 74b05c1 · 74b05c1
2 parents 7406d4f + 8a34051
commit 74b05c1
Show file tree

Hide file tree

Showing 9 changed files with 266 additions and 129 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,5 @@
+## [1.201.1](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.201.0...v1.201.1) (2024-10-18)
+
 # [1.201.0](https://github.com/bcgov/CONN-CCBC-portal/compare/v1.200.0...v1.201.0) (2024-10-18)
 
 ### Features

diff --git a/app/lib/theme/widgets/custom/CommunitySourceWidget.tsx b/app/lib/theme/widgets/custom/CommunitySourceWidget.tsx
@@ -24,6 +24,42 @@ const StyledButton = styled(Button)`
   margin: 2px;
 `;
 
+const StyledOptionMenu = styled.li`
+  display: flex;
+  border: 1px dashed lightgrey;
+  margin: 0;
+  padding: 0;
+`;
+
+const StyledLabelDiv = styled.div`
+  width: 40%;
+  padding: 8px;
+  border-right: 1px dashed lightgrey;
+`;
+
+const StyledIdDiv = styled.div`
+  width: 20%;
+  padding: 8px;
+`;
+
+const StyledDisplayContainer = styled.div`
+  display: flex;
+  padding: 5px 0;
+`;
+
+const StyledDisplayField = styled.div<{ width?: string }>`
+  width: ${(props) => props?.width || '200px'};
+  padding: 1px;
+`;
+
+const DisplayRow = ({ label, type = null, value = null }) => (
+  <>
+    <StyledDisplayField>{label}</StyledDisplayField>
+    {type && <StyledDisplayField width="150px">{type}</StyledDisplayField>}
+    {value && <StyledDisplayField width="50px">{value}</StyledDisplayField>}
+  </>
+);
+
 const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
   const { value, formContext, onChange } = props;
 
@@ -33,6 +69,7 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
     economicRegion,
     regionalDistrict,
     geographicNameId,
+    geographicType,
   } = value ?? {};
   const [selectedEconomicRegion, setSelectedEconomicRegion] = useState<string>(
     economicRegion ?? ''
@@ -42,6 +79,7 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
   const [selectedGeographicName, setSelectedGeographicName] = useState({
     value: geographicNameId,
     label: bcGeographicName,
+    type: geographicType,
   });
   const [economicRegionInputValue, setEconomicRegionInputValue] = useState('');
   const [regionalDistrictInputValue, setRegionalDistrictValue] = useState('');
@@ -53,8 +91,15 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
     setSelectedGeographicName({
       value: geographicNameId ?? null,
       label: bcGeographicName ?? '',
+      type: geographicType ?? '',
     });
-  }, [geographicNameId, bcGeographicName, economicRegion, regionalDistrict]);
+  }, [
+    geographicNameId,
+    bcGeographicName,
+    economicRegion,
+    regionalDistrict,
+    geographicType,
+  ]);
 
   const selectedGeographicNameIdList = useMemo(() => {
     return [
@@ -70,7 +115,7 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
   const clearWidget = useCallback(() => {
     setSelectedEconomicRegion(null);
     setSelectedRegionalDistrict(null);
-    setSelectedGeographicName({ value: null, label: '' });
+    setSelectedGeographicName({ value: null, label: '', type: '' });
     // check if the form value has been touched, and if so clear it
     if (Object.keys(value).length > 0) {
       onChange({});
@@ -106,123 +151,149 @@ const CommunitySourceWidget: React.FC<CommunitySourceWidgetProps> = (props) => {
     return [];
   };
 
+  const getOptionLabel = (option) => {
+    if (!option?.label) {
+      return '';
+    }
+    return `${option.label} | ${option.type} | ${option.value}`;
+  };
+
   return (
     <StyledDiv>
-      <Autocomplete
-        readOnly={!!rowId}
-        key={`economic-region-${rowId}`}
-        data-testid="economic-region-autocomplete"
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            clearWidget();
-          }
-          if (e) {
-            setSelectedRegionalDistrict(null);
-            setSelectedGeographicName({ value: null, label: '' });
-            setSelectedEconomicRegion(val);
-          }
-        }}
-        onInputChange={(e, val) => {
-          setEconomicRegionInputValue(val);
-        }}
-        style={{ width: '200px' }}
-        value={selectedEconomicRegion}
-        inputValue={economicRegionInputValue}
-        options={economicRegionOptions}
-        getOptionLabel={(option) => option}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            data-testid="economic-region-textfield"
-            label="Economic Region"
-          />
-        )}
-      />
-
-      <Autocomplete
-        readOnly={!!rowId}
-        key={`regional-district-${rowId}`}
-        data-testid="regional-district-autocomplete"
-        style={{ width: '200px' }}
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            setSelectedRegionalDistrict('');
-            setSelectedGeographicName({ value: null, label: '' });
-          }
-          if (e) {
-            setSelectedRegionalDistrict(val);
+      {rowId ? (
+        <DisplayRow label={selectedEconomicRegion} />
+      ) : (
+        <Autocomplete
+          key={`economic-region-${rowId}`}
+          data-testid="economic-region-autocomplete"
+          onChange={(e, val, reason) => {
+            if (reason === 'clear') {
+              clearWidget();
+            }
+            if (e) {
+              setSelectedRegionalDistrict(null);
+              setSelectedGeographicName({ value: null, label: '', type: '' });
+              setSelectedEconomicRegion(val);
+            }
+          }}
+          onInputChange={(e, val) => {
+            setEconomicRegionInputValue(val);
+          }}
+          style={{ width: '200px' }}
+          value={selectedEconomicRegion}
+          inputValue={economicRegionInputValue}
+          options={economicRegionOptions}
+          getOptionLabel={(option) => option}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              data-testid="economic-region-textfield"
+              label="Economic Region"
+            />
+          )}
+        />
+      )}
+
+      {rowId ? (
+        <DisplayRow label={selectedRegionalDistrict} />
+      ) : (
+        <Autocomplete
+          key={`regional-district-${rowId}`}
+          data-testid="regional-district-autocomplete"
+          style={{ width: '200px' }}
+          onChange={(e, val, reason) => {
+            if (reason === 'clear') {
+              setSelectedRegionalDistrict('');
+              setSelectedGeographicName({ value: null, label: '', type: '' });
+            }
+            if (e) {
+              setSelectedRegionalDistrict(val);
+            }
+          }}
+          onInputChange={(e, val) => {
+            setRegionalDistrictValue(val);
+          }}
+          value={selectedRegionalDistrict}
+          inputValue={regionalDistrictInputValue}
+          options={
+            regionalDistrictOptions[selectedEconomicRegion]
+              ? [...regionalDistrictOptions[selectedEconomicRegion]]
+              : []
           }
-        }}
-        onInputChange={(e, val) => {
-          setRegionalDistrictValue(val);
-        }}
-        value={selectedRegionalDistrict}
-        inputValue={regionalDistrictInputValue}
-        options={
-          regionalDistrictOptions[selectedEconomicRegion]
-            ? [...regionalDistrictOptions[selectedEconomicRegion]]
-            : []
-        }
-        getOptionLabel={(option) => option}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            data-testid="regional-district-textfield"
-            label="Regional District"
-          />
-        )}
-      />
-
-      <Autocomplete
-        readOnly={!!rowId}
-        key={`geographic-name-${rowId}`}
-        data-testid="geographic-name-autocomplete"
-        style={{ width: '200px' }}
-        renderInput={(params) => (
-          <TextField
-            {...params}
-            id="geographic-name-textfield"
-            data-testid="geographic-name-textfield"
-            label="Geographic Name"
+          getOptionLabel={(option) => option}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              data-testid="regional-district-textfield"
+              label="Regional District"
+            />
+          )}
+        />
+      )}
+
+      {rowId ? (
+        <StyledDisplayContainer>
+          <DisplayRow
+            label={selectedGeographicName.label}
+            type={selectedGeographicName.type}
+            value={selectedGeographicName.value}
           />
-        )}
-        renderOption={(renderProps, option) => (
-          <li {...renderProps} key={option.value}>
-            {option.label}
-          </li>
-        )}
-        options={getGeographicNameOptions(
-          selectedRegionalDistrict,
-          selectedEconomicRegion
-        )}
-        isOptionEqualToValue={(option, val) => {
-          return option.value === val.value;
-        }}
-        getOptionDisabled={isGeographicNameOptionDisabled}
-        getOptionLabel={(option) => {
-          return option.label ?? '';
-        }}
-        value={selectedGeographicName}
-        inputValue={geographicNameInputValue}
-        onChange={(e, val, reason) => {
-          if (reason === 'clear') {
-            setSelectedGeographicName({ value: null, label: '' });
-            return;
-          }
-          if (e) {
-            setSelectedGeographicName(val);
-            onChange({
-              bcGeographicName: val.label,
-              economicRegion: selectedEconomicRegion,
-              regionalDistrict: selectedRegionalDistrict,
-              geographicNameId: val.value,
-            });
+        </StyledDisplayContainer>
+      ) : (
+        <Autocomplete
+          key={`geographic-name-${rowId}`}
+          data-testid="geographic-name-autocomplete"
+          style={{ width: '400px' }}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              id="geographic-name-textfield"
+              data-testid="geographic-name-textfield"
+              label="Geographic Name, Type & ID"
+            />
+          )}
+          renderOption={(renderProps, { label, type, value: id }) => (
+            <StyledOptionMenu {...renderProps} key={id}>
+              <StyledLabelDiv>{label}</StyledLabelDiv>
+              <StyledLabelDiv>{type}</StyledLabelDiv>
+              <StyledIdDiv>{id}</StyledIdDiv>
+            </StyledOptionMenu>
+          )}
+          options={getGeographicNameOptions(
+            selectedRegionalDistrict,
+            selectedEconomicRegion
+          )}
+          filterOptions={(options, { inputValue }) =>
+            options.filter(
+              ({ label, value: optionValue }) =>
+                label.toLowerCase().includes(inputValue.toLowerCase()) ||
+                optionValue.toString().includes(inputValue)
+            )
           }
-        }}
-        onInputChange={(e, val) => {
-          setGeographicNameInputValue(val);
-        }}
-      />
+          isOptionEqualToValue={(option, val) => option.value === val.value}
+          getOptionDisabled={isGeographicNameOptionDisabled}
+          getOptionLabel={getOptionLabel}
+          value={selectedGeographicName}
+          inputValue={geographicNameInputValue}
+          onChange={(e, val, reason) => {
+            if (reason === 'clear') {
+              setSelectedGeographicName({ value: null, label: '', type: '' });
+              return;
+            }
+            if (e) {
+              setSelectedGeographicName(val);
+              onChange({
+                bcGeographicName: val.label,
+                economicRegion: selectedEconomicRegion,
+                regionalDistrict: selectedRegionalDistrict,
+                geographicNameId: val.value,
+                geographicType: val.type,
+              });
+            }
+          }}
+          onInputChange={(e, val) => setGeographicNameInputValue(val)}
+        />
+      )}
       {!rowId && (
         <StyledButton
           variant="secondary"

diff --git a/app/pages/analyst/cbc/[cbcId].tsx b/app/pages/analyst/cbc/[cbcId].tsx
@@ -65,6 +65,7 @@ const getCbcQuery = graphql`
         bcGeographicName
         economicRegion
         regionalDistrict
+        geographicType
       }
     }
     session {

diff --git a/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx b/app/pages/analyst/cbc/[cbcId]/edit/[section].tsx
@@ -63,6 +63,7 @@ const getCbcSectionQuery = graphql`
         bcGeographicName
         economicRegion
         regionalDistrict
+        geographicType
       }
     }
     session {

diff --git a/app/schema/mutations/cbc/updateCbcCommunityData.ts b/app/schema/mutations/cbc/updateCbcCommunityData.ts
@@ -15,6 +15,7 @@ const mutation = graphql`
           economicRegion
           regionalDistrict
           bcGeographicName
+          geographicType
           rowId
         }
       }