feat: outcrop analogue (#311)

* feat: Add outcrop analogue metadata.

* feat: Add option to delete OutcropAnalogue row.

* chore: remove monospaced to fix font in tesult table.

* chore: remove comments. Uppdate generated files.

* chore: Disable already selected outcrops.

* chore: Seperate api logic into own hook file.

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<string> | null;
+    outcropId: string;
+    name: string;
+    outcropCategory: string;
+    region: string;
+    basins: Array<string>;
 };
 

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<string> | null;
+    outcropId: string;
+    name: string;
+    outcropCategory: string;
+    region: string;
+    basins: Array<string>;
 };
 

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<AddStratigraphicGroupCommandResponse> {
+        return __request(OpenAPI, {
+            method: 'DELETE',
+            url: '/api/analogue-models/{id}/outcrops/{outcropId}',
+            path: {
+                'id': id,
+                'outcropId': outcropId,
+            },
+        });
+    }
+
     /**
      * @param id
      * @param requestBody

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};
+  }
+`;

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<string>;
+}
+
+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<boolean>(false);
+  const [outcropObject, setOutcropObject] =
+    useState<OutcropType>(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 (
+    <>
+      <Styled.Wrapper>
+        <Typography variant="h3">Outcrop Analogue</Typography>
+        <Table>
+          <Table.Head>
+            <Table.Row>
+              <Table.Cell></Table.Cell>
+              <Table.Cell>Analogue</Table.Cell>
+              <Table.Cell>Region</Table.Cell>
+              <Table.Cell>Basin</Table.Cell>
+              <Table.Cell>Category</Table.Cell>
+            </Table.Row>
+          </Table.Head>
+          <Table.Body>
+            {outcropGroup.map((row) => (
+              <Table.Row key={row.outcropId}>
+                <Table.Cell>
+                  <Button
+                    variant="ghost_icon"
+                    onClick={() =>
+                      handleDeleteOutcropAnalogue(
+                        row.outcropId ? row.outcropId : 'none',
+                      )
+                    }
+                  >
+                    <Icon data={deleteIcon} title={'Delete strat column row'} />
+                  </Button>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>{row.name}</Styled.StratColCell>
+                </Table.Cell>
+                <Table.Cell>{row.region}</Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {row.basins?.map((item) => item)}
+                  </Styled.StratColCell>
+                </Table.Cell>
+                <Table.Cell>
+                  <Styled.StratColCell>
+                    {row.outcropCategory}
+                  </Styled.StratColCell>
+                </Table.Cell>
+              </Table.Row>
+            ))}
+          </Table.Body>
+        </Table>
+        <div>
+          <Button variant="outlined" onClick={handleOutcropDialog}>
+            Add Row
+          </Button>
+        </div>
+      </Styled.Wrapper>
+      <Dialog open={showOutcropDialog}>
+        <Dialog.Header>Add Outcrop Analogue</Dialog.Header>
+        <Dialog.CustomContent>
+          <OutcropSelect
+            outcropObject={outcropObject}
+            outcropGroup={outcropGroup}
+            setOutcropObject={setOutcropObject}
+          />
+        </Dialog.CustomContent>
+        <Dialog.Actions>
+          <Button onClick={handleAddOutcropAnalogue}>Add</Button>
+          <Button variant="outlined" onClick={handleOutcropDialog}>
+            Close
+          </Button>
+        </Dialog.Actions>
+      </Dialog>
+    </>
+  );
+};

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<React.SetStateAction<OutcropType>>;
+}) => {
+  const OutcropData = useFetchOutcropData();
+  if (OutcropData.isLoading || !OutcropData.data?.success)
+    return <p>Loading .....</p>;
+
+  const filterDisabled = (option: OutcropDto) => {
+    const caseExists = outcropGroup.filter(
+      (outcrop) => outcrop.outcropId === option.outcropId,
+    );
+    return caseExists.length > 0;
+  };
+
+  return (
+    <div>
+      <Autocomplete
+        label="Analogue"
+        options={OutcropData.data.data}
+        optionLabel={(option) => option.name}
+        onOptionsChange={(e: AutocompleteChanges<OutcropDto>) => {
+          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"
+      />
+
+      <Autocomplete
+        label="Region"
+        selectedOptions={[outcropObject.region]}
+        initialSelectedOptions={
+          outcropObject.region ? [outcropObject.region] : ['']
+        }
+        options={
+          outcropObject.region !== undefined ? [outcropObject.region] : ['']
+        }
+        noOptionsText="No options"
+        readOnly
+      />
+
+      <Autocomplete
+        label="Basin"
+        selectedOptions={outcropObject.basins}
+        initialSelectedOptions={
+          outcropObject.basins ? outcropObject.basins : ['']
+        }
+        options={
+          outcropObject.basins !== undefined ? outcropObject.basins : ['']
+        }
+        noOptionsText="No options"
+        readOnly
+      />
+
+      <Autocomplete
+        label="Area"
+        selectedOptions={[outcropObject.outcropCategory]}
+        initialSelectedOptions={
+          outcropObject.outcropCategory ? [outcropObject.outcropCategory] : ['']
+        }
+        options={
+          outcropObject.outcropCategory !== undefined
+            ? [outcropObject.outcropCategory]
+            : ['']
+        }
+        noOptionsText="No options"
+        readOnly
+      />
+    </div>
+  );
+};