diff --git a/src/api/generated/models/GetOutcropsDto.ts b/src/api/generated/models/GetOutcropsDto.ts index 2f17edd..a1d007b 100644 --- a/src/api/generated/models/GetOutcropsDto.ts +++ b/src/api/generated/models/GetOutcropsDto.ts @@ -4,10 +4,10 @@ /* eslint-disable */ export type GetOutcropsDto = { - outcropId?: string; - name?: string | null; - outcropCategory?: string | null; - region?: string | null; - basins?: Array | null; + outcropId: string; + name: string; + outcropCategory: string; + region: string; + basins: Array; }; diff --git a/src/api/generated/models/OutcropDto.ts b/src/api/generated/models/OutcropDto.ts index 7dce1eb..cf67581 100644 --- a/src/api/generated/models/OutcropDto.ts +++ b/src/api/generated/models/OutcropDto.ts @@ -4,10 +4,10 @@ /* eslint-disable */ export type OutcropDto = { - outcropId?: string; - name?: string | null; - outcropCategory?: string | null; - region?: string | null; - basins?: Array | null; + outcropId: string; + name: string; + outcropCategory: string; + region: string; + basins: Array; }; diff --git a/src/api/generated/services/AnalogueModelsService.ts b/src/api/generated/services/AnalogueModelsService.ts index 28becd6..c4b7d4d 100644 --- a/src/api/generated/services/AnalogueModelsService.ts +++ b/src/api/generated/services/AnalogueModelsService.ts @@ -267,6 +267,26 @@ export class AnalogueModelsService { }); } + /** + * @param id + * @param outcropId + * @returns AddStratigraphicGroupCommandResponse Success + * @throws ApiError + */ + public static deleteApiAnalogueModelsOutcrops( + id: string, + outcropId: string, + ): CancelablePromise { + return __request(OpenAPI, { + method: 'DELETE', + url: '/api/analogue-models/{id}/outcrops/{outcropId}', + path: { + 'id': id, + 'outcropId': outcropId, + }, + }); + } + /** * @param id * @param requestBody diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.styled.ts b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.styled.ts new file mode 100644 index 0000000..bf95f70 --- /dev/null +++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.styled.ts @@ -0,0 +1,19 @@ +import styled from 'styled-components'; +import { spacings } from '../../../tokens/spacings'; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + + row-gap: ${spacings.MEDIUM}; +`; + +export const StratColCell = styled.div` + display: flex; + flex-direction: row; + white-space: nowrap; + + > p { + padding-right: ${spacings.X_SMALL}; + } +`; diff --git a/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx new file mode 100644 index 0000000..af82621 --- /dev/null +++ b/src/components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup.tsx @@ -0,0 +1,152 @@ +/* eslint-disable max-lines-per-function */ +import { + Button, + Dialog, + Icon, + Table, + Typography, +} from '@equinor/eds-core-react'; +import { delete_to_trash as deleteIcon } from '@equinor/eds-icons'; +import { useState } from 'react'; +import { + AddAnalogueModelOutcropForm, + AnalogueModelDetail, + OutcropDto, +} from '../../../api/generated'; +import { useOutcropAnalouge } from '../../../hooks/useOutcropAnalogue'; +import { OutcropSelect } from '../OutcropSelect/OutcropSelect'; +import * as Styled from './OutcropAnalogueGroup.styled'; + +export interface OutcropType { + outcropId?: string; + name?: string; + outcropCategory?: string; + region?: string; + basins?: Array; +} + +const defaultOutcropData: OutcropType = { + outcropId: undefined, + name: undefined, + outcropCategory: undefined, + region: undefined, + basins: [], +}; + +export const OutcropAnalogueGroup = ({ + modelIdParent, + defaultMetadata, + outcropGroup, +}: { + modelIdParent?: string; + defaultMetadata: AnalogueModelDetail; + outcropGroup: OutcropDto[]; +}) => { + const [showOutcropDialog, setShowOutcropDialog] = useState(false); + const [outcropObject, setOutcropObject] = + useState(defaultOutcropData); + const useOutcrop = useOutcropAnalouge(); + + const handleOutcropDialog = () => { + setShowOutcropDialog(!showOutcropDialog); + setOutcropObject(defaultOutcropData); + }; + + const handleAddOutcropAnalogue = async () => { + const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + + if (id && outcropObject.outcropId) { + const postRequestBody: AddAnalogueModelOutcropForm = { + outcropId: outcropObject.outcropId, + }; + const rowUpload = await useOutcrop.postOutcropRow.mutateAsync({ + id: id, + requestBody: postRequestBody, + }); + if (rowUpload.success) handleOutcropDialog(); + } else { + console.log('Can not add'); + } + }; + + const handleDeleteOutcropAnalogue = async (stratigraphicGroupId: string) => { + const id = modelIdParent ? modelIdParent : defaultMetadata.analogueModelId; + const res = await useOutcrop.deleteOutcropAnalogue.mutateAsync({ + id: id, + outcropId: stratigraphicGroupId, + }); + return res; + }; + + return ( + <> + + Outcrop Analogue + + + + + Analogue + Region + Basin + Category + + + + {outcropGroup.map((row) => ( + + + + + + {row.name} + + {row.region} + + + {row.basins?.map((item) => item)} + + + + + {row.outcropCategory} + + + + ))} + +
+
+ +
+
+ + Add Outcrop Analogue + + + + + + + + + + ); +}; diff --git a/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx new file mode 100644 index 0000000..663f942 --- /dev/null +++ b/src/components/OutcropAnalogue/OutcropSelect/OutcropSelect.tsx @@ -0,0 +1,100 @@ +/* eslint-disable max-lines-per-function */ +import { Autocomplete, AutocompleteChanges } from '@equinor/eds-core-react'; +import { OutcropDto } from '../../../api/generated'; +import { useFetchOutcropData } from '../../../hooks/useFetchOutcropData'; +import { OutcropType } from '../OutcropAnalogueGroup/OutcropAnalogueGroup'; + +export const OutcropSelect = ({ + outcropObject, + outcropGroup, + setOutcropObject, +}: { + outcropObject: OutcropType; + outcropGroup: OutcropDto[]; + setOutcropObject: React.Dispatch>; +}) => { + const OutcropData = useFetchOutcropData(); + if (OutcropData.isLoading || !OutcropData.data?.success) + return

Loading .....

; + + const filterDisabled = (option: OutcropDto) => { + const caseExists = outcropGroup.filter( + (outcrop) => outcrop.outcropId === option.outcropId, + ); + return caseExists.length > 0; + }; + + return ( +
+ option.name} + onOptionsChange={(e: AutocompleteChanges) => { + const copyObject: OutcropType = { + name: e.selectedItems[0] ? e.selectedItems[0].name : undefined, + outcropCategory: e.selectedItems[0] + ? e.selectedItems[0].outcropCategory + : undefined, + outcropId: e.selectedItems[0] + ? e.selectedItems[0].outcropId + : undefined, + region: e.selectedItems[0] ? e.selectedItems[0].region : undefined, + basins: [], + }; + copyObject.basins = []; + e.selectedItems[0] && + e.selectedItems[0].basins.map( + (item) => + copyObject.basins !== undefined && copyObject.basins.push(item), + ); + + setOutcropObject(copyObject); + }} + optionDisabled={filterDisabled} + noOptionsText="No options" + /> + + + + + + +
+ ); +}; diff --git a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx index a61fa4f..98f87d6 100644 --- a/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx +++ b/src/features/ModelView/ModelMetadataView/ModelMetadataView.tsx @@ -6,7 +6,6 @@ import { useState } from 'react'; import { useParams } from 'react-router-dom'; import { AddAnalogueModelMetadataCommandForm, - // AddAnalogueModelOutcropForm, AddMetadataDto, AddStatigraphicGroupForm, AnalogueModelDetail, @@ -18,6 +17,7 @@ import { import { AnalogueModelsService } from '../../../api/generated/services/AnalogueModelsService'; import { queryClient } from '../../../auth/queryClient'; import { GrossDepositionEnviromentGroup } from '../../../components/GrossDepositionEnviroment/GrossDepositionEnviromentGroup/GrossDepositionEnviromentGroup'; +import { OutcropAnalogueGroup } from '../../../components/OutcropAnalogue/OutcropAnalogueGroup/OutcropAnalogueGroup'; import { StratigraphicColumnSelect } from '../../../components/StrategraphicColumn/StratigraphicColumnSelect/StratigraphicColumnSelect'; import { StratigrapicGroups } from '../../../components/StrategraphicColumn/StratigrapicGroups/StratigrapicGroups'; import { useFetchModel } from '../../../hooks/useFetchModel'; @@ -101,27 +101,7 @@ export const ModelMetadataView = ({ }, }); - // const uploadModelAnalouges = useMutation({ - // mutationFn: ({ - // id, - // requestBody, - // }: { - // id: string; - // requestBody: AddAnalogueModelOutcropForm; - // }) => { - // return AnalogueModelsService.postApiAnalogueModelsOutcrops( - // id, - // requestBody, - // ); - // }, - // onSuccess: () => { - // queryClient.refetchQueries(); - // }, - // }); - const metadataList: AddMetadataDto[] = []; - // const outcropList: AddAnalogueModelOutcropForm[] = []; - function addMetadataFields(metadata?: MetadataDto[]) { const filteredMetadata = metadata?.filter( (m) => m.metadataType !== 'NoRelevant', @@ -131,12 +111,6 @@ export const ModelMetadataView = ({ metadataList.push(...obj); } - // function addAnalogueFields(metadata?: OutcropDto[]) { - // if (!metadata) return; - // const obj = metadata.map((x) => ({ outcropId: x.outcropId! })); - // analougueList.push(...obj); - // } - const updateModelMetadata = async (metadata: AnalogueModelDetail) => { const id = data?.data.analogueModelId ? data?.data.analogueModelId : ''; const modelMetadata = { @@ -151,8 +125,6 @@ export const ModelMetadataView = ({ }); addMetadataFields(metadata.metadata); - // addAnalogueFields(metadata.outcrops); - const readyMetadata: AddAnalogueModelMetadataCommandForm = { metadata: metadataList, }; @@ -161,12 +133,6 @@ export const ModelMetadataView = ({ id: id, requestBody: readyMetadata, }); - - // await uploadModelAnalouges.mutateAsync({ - // id: id, - // requestBody: readyAnalogue, - // }); - toggleEditMetadata(); }; @@ -340,6 +306,13 @@ export const ModelMetadataView = ({ )} +
+ +
div { display: flex; diff --git a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts index 119fa75..30a7c8b 100644 --- a/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts +++ b/src/features/Results/CaseResult/CaseResultView/VariogramCaseResult/VariogramResultTable/VariogramResultTable.styled.ts @@ -37,7 +37,6 @@ export const Quality = styled.span` display: flex; flex-direction: column; align-items: end; - font-family: cell_numeric_monospaced; `; export { StyledDialog as Dialog }; diff --git a/src/hooks/useFetchOutcropData.ts b/src/hooks/useFetchOutcropData.ts new file mode 100644 index 0000000..a4fc7a3 --- /dev/null +++ b/src/hooks/useFetchOutcropData.ts @@ -0,0 +1,17 @@ +import { useMsal } from '@azure/msal-react'; +import { useQuery } from '@tanstack/react-query'; +import { OutcropsService } from '../api/generated'; +import { useAccessToken } from './useAccessToken'; + +export const useFetchOutcropData = () => { + const { instance, accounts } = useMsal(); + const token = useAccessToken(instance, accounts[0]); + + const query = useQuery({ + queryKey: ['smda-GDE'], + queryFn: () => OutcropsService.getApiOutcrops(), + enabled: !!token, + }); + + return query; +}; diff --git a/src/hooks/useOutcropAnalogue.ts b/src/hooks/useOutcropAnalogue.ts new file mode 100644 index 0000000..51084ec --- /dev/null +++ b/src/hooks/useOutcropAnalogue.ts @@ -0,0 +1,39 @@ +import { useMutation } from '@tanstack/react-query'; +import { + AddAnalogueModelOutcropForm, + AnalogueModelsService, +} from '../api/generated'; +import { queryClient } from '../auth/queryClient'; + +export const useOutcropAnalouge = () => { + const postOutcropRow = useMutation({ + mutationFn: ({ + id, + requestBody, + }: { + id: string; + requestBody: AddAnalogueModelOutcropForm; + }) => { + return AnalogueModelsService.postApiAnalogueModelsOutcrops( + id, + requestBody, + ); + }, + onSuccess: () => { + queryClient.invalidateQueries({ queryKey: ['analogue-model'] }); + }, + }); + + const deleteOutcropAnalogue = useMutation({ + mutationFn: ({ id, outcropId }: { id: string; outcropId: string }) => { + return AnalogueModelsService.deleteApiAnalogueModelsOutcrops( + id, + outcropId, + ); + }, + onSuccess: () => { + queryClient.invalidateQueries(['analogue-model']); + }, + }); + return { postOutcropRow, deleteOutcropAnalogue }; +};