refactor: Handle errors on save case.

equinor · Jan 3, 2024 · 3038e5b · 3038e5b
1 parent 2008037
commit 3038e5b
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 38 deletions.
diff --git a/src/features/Compute/CaseGroup/CaseOptionSelects/CaseOptionSelects.styled.tsx b/src/features/Compute/CaseGroup/CaseOptionSelects/CaseOptionSelects.styled.tsx
@@ -8,3 +8,20 @@ export const AutocompleteWrapper = styled.div`
 
   column-gap: ${spacings.MEDIUM};
 `;
+
+export const Required = styled.div`
+  > label {
+    color: red;
+  }
+`;
+
+export const AutocompleteRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: end;
+  column-gap: ${spacings.MEDIUM};
+
+  > div {
+    flex-grow: 1;
+  }
+`;
diff --git a/src/features/Compute/CaseGroup/CaseOptionSelects/ModelAreaSelect/ModelAreaSelect.tsx b/src/features/Compute/CaseGroup/CaseOptionSelects/ModelAreaSelect/ModelAreaSelect.tsx
@@ -1,5 +1,9 @@
 /* eslint-disable max-lines-per-function */
-import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react';
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Label,
+} from '@equinor/eds-core-react';
 import { ComputeCaseDto, ModelAreaDto } from '../../../../../api/generated';
 import * as Styled from '../CaseOptionSelects.styled';
 
@@ -9,6 +13,7 @@ export const ModelAreaSelect = ({
   disableSelect,
   existingCases,
   setModelArea,
+  caseError,
 }: {
   modelAreas: ModelAreaDto[];
   selectedModelArea: ModelAreaDto[] | undefined;
@@ -17,6 +22,7 @@ export const ModelAreaSelect = ({
   setModelArea?: React.Dispatch<
     React.SetStateAction<ModelAreaDto[] | undefined>
   >;
+  caseError: string;
 }) => {
   const filterDisabled = (option: ModelAreaDto) => {
     if (!existingCases || existingCases.length === 0 || !option.modelAreaId)
@@ -31,39 +37,45 @@ export const ModelAreaSelect = ({
 
   return (
     <Styled.AutocompleteWrapper>
-      <Autocomplete
-        label="Model area"
-        readOnly={disableSelect}
-        options={modelAreas && modelAreas.length > 0 ? modelAreas : []}
-        selectedOptions={
-          selectedModelArea &&
-          selectedModelArea.length > 0 &&
-          selectedModelArea[0].modelAreaId !== ''
-            ? selectedModelArea
-            : selectedModelArea &&
+      <Styled.AutocompleteRow>
+        <Styled.Required>
+          <Autocomplete
+            label="Model area"
+            readOnly={disableSelect}
+            options={modelAreas && modelAreas.length > 0 ? modelAreas : []}
+            selectedOptions={
+              selectedModelArea &&
               selectedModelArea.length > 0 &&
-              selectedModelArea[0].modelAreaType === ''
-            ? [
-                {
-                  modelAreaId: '',
-                  modelAreaType: 'Whole Model',
-                  coordinates: [],
-                },
-              ]
-            : [
-                {
-                  modelAreaId: '',
-                  modelAreaType: '',
-                  coordinates: [],
-                },
-              ]
-        }
-        optionLabel={(modelArea) => modelArea.modelAreaType}
-        onOptionsChange={(changes: AutocompleteChanges<ModelAreaDto>) =>
-          setModelArea && setModelArea(changes.selectedItems)
-        }
-        optionDisabled={filterDisabled}
-      ></Autocomplete>
+              selectedModelArea[0].modelAreaId !== ''
+                ? selectedModelArea
+                : selectedModelArea &&
+                  selectedModelArea.length > 0 &&
+                  selectedModelArea[0].modelAreaType === ''
+                ? [
+                    {
+                      modelAreaId: '',
+                      modelAreaType: 'Whole Model',
+                      coordinates: [],
+                    },
+                  ]
+                : [
+                    {
+                      modelAreaId: '',
+                      modelAreaType: '',
+                      coordinates: [],
+                    },
+                  ]
+            }
+            optionLabel={(modelArea) => modelArea.modelAreaType}
+            onOptionsChange={(changes: AutocompleteChanges<ModelAreaDto>) =>
+              setModelArea && setModelArea(changes.selectedItems)
+            }
+            optionDisabled={filterDisabled}
+            variant={caseError.length > 0 ? 'error' : undefined}
+          />
+          {caseError.length > 0 && <Label label={caseError}></Label>}
+        </Styled.Required>
+      </Styled.AutocompleteRow>
     </Styled.AutocompleteWrapper>
   );
 };
diff --git a/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx b/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable max-lines-per-function */
+import { useState } from 'react';
 import {
   ComputeCaseDto,
   ListComputeSettingsInputDto,
@@ -61,6 +62,10 @@ export const VariogramOptionSelect = ({
   ContiniusParameterSettings?: ListComputeSettingsInputDto[];
   existingCases: ComputeCaseDto[];
 }) => {
+  // TODO: Case Error handling
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [caseError, setCaseError] = useState<string>('');
+
   // Lage en funksjon som tar inn Liste og Name
   const indicatorFamilySettings = IndicatorSettings?.filter(
     (value) => value.name === 'Variogram Family Filter',
@@ -93,6 +98,7 @@ export const VariogramOptionSelect = ({
         selectedModelArea={selectedModelArea}
         setModelArea={setModelArea}
         existingCases={existingCases}
+        caseError={caseError}
       />
 
       {setIndicatorParameters && caseType === 'Indicator' && (

diff --git a/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx b/src/features/Compute/CaseGroup/CaseRow/CaseRow.tsx
@@ -59,6 +59,7 @@ export const CaseRow = ({
   const [selectedVariogramModels, setVariogramModels] =
     useState<ListComputeSettingsInputValueDto[]>();
   const [saved, setSaved] = useState<boolean>(true);
+  const [caseError, setCaseError] = useState<string>('');
 
   const { data } = useQuery({
     queryKey: ['analogue-model', modelId],
@@ -154,8 +155,7 @@ export const CaseRow = ({
             }
           } else {
             // TODO: Error handeling, inform user
-            // eslint-disable-next-line no-console
-            console.log('Duplicate case');
+            // Possibly not necessary anyway. Might never be reached with new limitations on user.
           }
         } else {
           // Case should have no set model area, is a 'whole model' case
@@ -174,9 +174,7 @@ export const CaseRow = ({
               saveCaseAlert();
             }
           } else {
-            // TODO: Error handeling, inform user
-            // eslint-disable-next-line no-console
-            console.log('Duplicate case');
+            setCaseError('You must select a model area');
           }
         }
       }
@@ -303,6 +301,7 @@ export const CaseRow = ({
             selectedModelArea={selectedRowArea(rowCase.computeCaseId)}
             setModelArea={setModelArea}
             existingCases={caseList}
+            caseError={caseError}
           />
         )}
         <CaseButtons