diff --git a/src/features/Compute/CaseGroup/CaseOptionSelects/CaseOptionSelects.styled.tsx b/src/features/Compute/CaseGroup/CaseOptionSelects/CaseOptionSelects.styled.tsx index 2dc62669..7a1606c7 100644 --- 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 index 8748977e..34ac3c30 100644 --- a/src/features/Compute/CaseGroup/CaseOptionSelects/ModelAreaSelect/ModelAreaSelect.tsx +++ b/src/features/Compute/CaseGroup/CaseOptionSelects/ModelAreaSelect/ModelAreaSelect.tsx @@ -1,54 +1,81 @@ -import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react'; -import { ModelAreaDto } from '../../../../../api/generated'; +/* eslint-disable max-lines-per-function */ +import { + Autocomplete, + AutocompleteChanges, + Label, +} from '@equinor/eds-core-react'; +import { ComputeCaseDto, ModelAreaDto } from '../../../../../api/generated'; import * as Styled from '../CaseOptionSelects.styled'; export const ModelAreaSelect = ({ modelAreas, selectedModelArea, disableSelect, + existingCases, setModelArea, + caseError, }: { modelAreas: ModelAreaDto[]; selectedModelArea: ModelAreaDto[] | undefined; disableSelect?: boolean; + existingCases: ComputeCaseDto[]; setModelArea?: React.Dispatch< React.SetStateAction >; + caseError: string; }) => { + const filterDisabled = (option: ModelAreaDto) => { + if (!existingCases || existingCases.length === 0 || !option.modelAreaId) + return true; + + const caseExists = existingCases + .filter((c) => c.modelArea !== null) + .filter((c) => c.modelArea.modelAreaId === option.modelAreaId); + + return caseExists.length > 0; + }; + return ( - 0 - ? modelAreas - : [ - { - modelAreaId: '', - modelAreaType: 'Whole Model', - coordinates: [], - }, - ] - } - selectedOptions={ - selectedModelArea && - selectedModelArea.length > 0 && - selectedModelArea[0].modelAreaId !== '' - ? selectedModelArea - : [ - { - modelAreaId: '', - modelAreaType: 'Whole Model', - coordinates: [], - }, - ] - } - optionLabel={(modelArea) => modelArea.modelAreaType} - onOptionsChange={(changes: AutocompleteChanges) => - setModelArea && setModelArea(changes.selectedItems) - } - > + + + 0 ? modelAreas : []} + selectedOptions={ + selectedModelArea && + selectedModelArea.length > 0 && + 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) => + setModelArea && setModelArea(changes.selectedItems) + } + optionDisabled={filterDisabled} + variant={caseError.length > 0 ? 'error' : undefined} + /> + {caseError.length > 0 && } + + ); }; diff --git a/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx b/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx index 8fa69edd..89060075 100644 --- a/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx +++ b/src/features/Compute/CaseGroup/CaseOptionSelects/VariogramOptionSelect.tsx @@ -1,5 +1,7 @@ /* eslint-disable max-lines-per-function */ +import { useState } from 'react'; import { + ComputeCaseDto, ListComputeSettingsInputDto, ListComputeSettingsInputValueDto, ModelAreaDto, @@ -26,6 +28,7 @@ export const VariogramOptionSelect = ({ NetToGrossSettings, ContiniusParameterSettings, IndicatorSettings, + existingCases, }: { modelAreas: ModelAreaDto[]; caseType: string; @@ -57,7 +60,12 @@ export const VariogramOptionSelect = ({ IndicatorSettings?: ListComputeSettingsInputDto[]; NetToGrossSettings?: ListComputeSettingsInputDto[]; ContiniusParameterSettings?: ListComputeSettingsInputDto[]; + existingCases: ComputeCaseDto[]; }) => { + // TODO: Case Error handling + // eslint-disable-next-line @typescript-eslint/no-unused-vars + const [caseError, setCaseError] = useState(''); + // Lage en funksjon som tar inn Liste og Name const indicatorFamilySettings = IndicatorSettings?.filter( (value) => value.name === 'Variogram Family Filter', @@ -89,6 +97,8 @@ export const VariogramOptionSelect = ({ modelAreas={modelAreas} 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 index 7f016e00..f0f9b23e 100644 --- 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(); const [saved, setSaved] = useState(true); + const [caseError, setCaseError] = useState(''); 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'); } } } @@ -253,6 +251,7 @@ export const CaseRow = ({ setParameters={setParameters} setArchelFilter={setArchelFilter} setVariogramModels={setVariogramModels} + existingCases={caseList} /> )} @@ -271,6 +270,7 @@ export const CaseRow = ({ setGrainSize={setGrainSize} setParameters={setParameters} setVariogramModels={setVariogramModels} + existingCases={caseList} /> )} @@ -290,6 +290,7 @@ export const CaseRow = ({ setParameters={setParameters} setArchelFilter={setArchelFilter} setVariogramModels={setVariogramModels} + existingCases={caseList} /> )} @@ -299,6 +300,8 @@ export const CaseRow = ({ modelAreas={areaList ? areaList : []} selectedModelArea={selectedRowArea(rowCase.computeCaseId)} setModelArea={setModelArea} + existingCases={caseList} + caseError={caseError} /> )}