From 75d18e0f40b70d0aef53770fb9d160fddca21437 Mon Sep 17 00:00:00 2001
From: Hamed Valiollahi Bayeki <hamedv90@gmail.com>
Date: Thu, 19 Dec 2024 08:39:22 -0800
Subject: [PATCH] fix: update fuel select to turn white on activation

---
 frontend/src/views/FuelExports/_schema.jsx | 19 +++++-----
 frontend/src/views/OtherUses/_schema.jsx   | 40 ++++++++++++----------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/frontend/src/views/FuelExports/_schema.jsx b/frontend/src/views/FuelExports/_schema.jsx
index 60656d905..41021fe27 100644
--- a/frontend/src/views/FuelExports/_schema.jsx
+++ b/frontend/src/views/FuelExports/_schema.jsx
@@ -348,17 +348,20 @@ export const fuelExportColDefs = (optionsData, errors, gridReady) => [
         isFuelCodeScenario && !params.data.fuelCode
 
       if (fuelCodeRequiredAndMissing) {
-        // If required and missing, force a red border
+        // Required scenario but missing a fuel code
         style.borderColor = 'red'
+        style.backgroundColor = '#fff'
+      } else if (isFuelCodeScenario && fuelCodes.length > 1) {
+        style.backgroundColor = '#fff'
+        style.borderColor = 'unset'
+      } else if (isFuelCodeScenario && fuelCodes.length > 0) {
+        style.backgroundColor = '#fff'
+        style.borderColor = 'unset'
+      } else {
+        style.backgroundColor = '#f2f2f2'
       }
 
-      const conditionalStyle =
-        fuelCodes.length > 0 &&
-        isFuelCodeScenario &&
-        !fuelCodeRequiredAndMissing
-          ? { backgroundColor: '#fff', borderColor: 'unset' }
-          : { backgroundColor: '#f2f2f2' }
-      return { ...style, ...conditionalStyle }
+      return style
     },
     editable: (params) => {
       const fuelTypeObj = optionsData?.fuelTypes?.find(
diff --git a/frontend/src/views/OtherUses/_schema.jsx b/frontend/src/views/OtherUses/_schema.jsx
index 401b6db61..af28e5126 100644
--- a/frontend/src/views/OtherUses/_schema.jsx
+++ b/frontend/src/views/OtherUses/_schema.jsx
@@ -60,14 +60,16 @@ export const otherUsesColDefs = (optionsData, errors) => [
     cellEditorParams: (params) => {
       const fuelType = optionsData?.fuelTypes?.find(
         (obj) => params.data.fuelType === obj.fuelType
-      );
+      )
       return {
-        options: fuelType ? fuelType.fuelCategories.map((item) => item.category) : [],
+        options: fuelType
+          ? fuelType.fuelCategories.map((item) => item.category)
+          : [],
         multiple: false,
         disableCloseOnSelect: false,
         freeSolo: false,
         openOnFocus: true
-      };
+      }
     },
     suppressKeyboardEvent,
     cellRenderer: (params) =>
@@ -153,22 +155,18 @@ export const otherUsesColDefs = (optionsData, errors) => [
       const fuelCodeRequiredAndMissing =
         isFuelCodeScenario && !params.data.fuelCode
 
-      // If required and missing, show red border
       if (fuelCodeRequiredAndMissing) {
+        // Required scenario but missing a fuel code
         style.borderColor = 'red'
+        style.backgroundColor = '#fff'
+      } else if (isFuelCodeScenario && fuelCodes.length > 0) {
+        style.backgroundColor = '#fff'
+        style.borderColor = style.borderColor || 'unset'
+      } else {
+        style.backgroundColor = '#f2f2f2'
       }
 
-      const conditionalStyle =
-        isFuelCodeScenario &&
-        fuelCodes.length > 0 &&
-        !fuelCodeRequiredAndMissing
-          ? {
-              backgroundColor: '#fff',
-              borderColor: style.borderColor || 'unset'
-            }
-          : { backgroundColor: '#f2f2f2' }
-
-      return { ...style, ...conditionalStyle }
+      return style
     },
     suppressKeyboardEvent,
     minWidth: 150,
@@ -225,14 +223,18 @@ export const otherUsesColDefs = (optionsData, errors) => [
     cellEditorParams: (params) => {
       const fuelType = optionsData?.fuelTypes?.find(
         (obj) => params.data.fuelType === obj.fuelType
-      );
-      const values = fuelType ? [fuelType.units] : [];
+      )
+      const values = fuelType ? [fuelType.units] : []
       return {
         values: values
-      };
+      }
     },
     cellRenderer: (params) => {
-      return params.value ? params.value : <BCTypography variant="body4">Select</BCTypography>;
+      return params.value ? (
+        params.value
+      ) : (
+        <BCTypography variant="body4">Select</BCTypography>
+      )
     },
     cellStyle: (params) => StandardCellErrors(params, errors),
     editable: true,