LCFS-1207: Autopopulate fuelCategory and fuelCode when selecting fuelType

backend/lcfs/web/api/other_uses/schema.py

@@ -40,12 +40,19 @@ class ExpectedUseTypeSchema(BaseSchema):
     description: Optional[str] = None
 
 
+class FuelCategorySchema(BaseSchema):
+    fuel_category_id: int
+    category: str
+    description: Optional[str] = None
+
+
 class FuelTypeSchema(BaseSchema):
     fuel_type_id: int
     fuel_type: str
     fossil_derived: Optional[bool] = None
     provision_1_id: Optional[int] = None
     provision_2_id: Optional[int] = None
+    fuel_categories: List[FuelCategorySchema]
     default_carbon_intensity: Optional[float] = None
     fuel_codes: Optional[List[FuelCodeSchema]] = []
     provision_of_the_act: Optional[List[ProvisionOfTheActSchema]] = []

frontend/src/components/BCDataGrid/columns.js

@@ -24,6 +24,7 @@ export const actions = (props) => ({
   cellRendererParams: props,
   pinned: 'left',
   maxWidth: 110,
+  minWidth: 90,
   editable: false,
   suppressKeyboardEvent,
   filter: false,

frontend/src/views/OtherUses/AddEditOtherUses.jsx

@@ -151,20 +151,39 @@ export const AddEditOtherUses = () => {
         const ciOfFuel = findCiOfFuel(params.data, optionsData)
         params.node.setDataValue('ciOfFuel', ciOfFuel)
 
-        // Auto-populate the "Unit" field based on the selected fuel type
-      if (params.colDef.field === 'fuelType') {
-        const fuelType = optionsData?.fuelTypes?.find(
-          (obj) => params.data.fuelType === obj.fuelType
-        );
-        if (fuelType && fuelType.units) {
-          params.node.setDataValue('units', fuelType.units);
-        } else {
-          params.node.setDataValue('units', '');
+        // Auto-populate fields based on the selected fuel type
+        if (params.colDef.field === 'fuelType') {
+          const fuelType = optionsData?.fuelTypes?.find(
+            (obj) => params.data.fuelType === obj.fuelType
+          );
+          if (fuelType) {
+            // Auto-populate the "units" field
+            if (fuelType.units) {
+              params.node.setDataValue('units', fuelType.units);
+            } else {
+              params.node.setDataValue('units', '');
+            }
+
+            // Auto-populate the "fuelCategory" field
+            const fuelCategoryOptions = fuelType.fuelCategories.map(
+              (item) => item.category
+            );
+            params.node.setDataValue('fuelCategory', fuelCategoryOptions[0] ?? null);
+
+            // Auto-populate the "fuelCode" field
+            const fuelCodeOptions = fuelType.fuelCodes.map(
+              (code) => code.fuelCode
+            );
+            params.node.setDataValue('fuelCode', fuelCodeOptions[0] ?? null);
+            params.node.setDataValue(
+              'fuelCodeId',
+              fuelType.fuelCodes[0]?.fuelCodeId ?? null
+            );
+          }
         }
       }
-      }
     },
-    [optionsData]
+    [optionsData, findCiOfFuel]
   )
 
   const onCellEditingStopped = useCallback(

frontend/src/views/OtherUses/_schema.jsx

@@ -49,12 +49,17 @@ export const otherUsesColDefs = (optionsData, errors) => [
     headerName: i18n.t('otherUses:otherUsesColLabels.fuelCategory'),
     headerComponent: RequiredHeader,
     cellEditor: AutocompleteCellEditor,
-    cellEditorParams: {
-      options: optionsData.fuelCategories.map((obj) => obj.category),
-      multiple: false,
-      disableCloseOnSelect: false,
-      freeSolo: false,
-      openOnFocus: true
+    cellEditorParams: (params) => {
+      const fuelType = optionsData?.fuelTypes?.find(
+        (obj) => params.data.fuelType === obj.fuelType
+      );
+      return {
+        options: fuelType ? fuelType.fuelCategories.map((item) => item.category) : [],
+        multiple: false,
+        disableCloseOnSelect: false,
+        freeSolo: false,
+        openOnFocus: true
+      };
     },
     suppressKeyboardEvent,
     cellRenderer: (params) =>