Chore/api frontend integration (#123)

* chore: Add nameInput to add model * chore: Add selected options AddModel and AddCase Autocompletes * chore: Add navigate button to each row in model. Removed hardcoded button in browse file. * chore: Add compute object page * feat: Add set/update area coordinates option * style: Add styling to set area coordinates
equinor · Oct 23, 2023 · 2228c3b · 2228c3b
1 parent 4e3e5d3
commit 2228c3b
Show file tree

Hide file tree

Showing 3 changed files with 331 additions and 1 deletion.
diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
@@ -0,0 +1,41 @@
+import { Typography } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+import { spacings } from '../../tokens/spacings';
+
+export const SideSheet = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.MEDIUM};
+`;
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.LARGE};
+`;
+
+export const CoordinateGroup = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  > .autocomplete-error {
+    > div {
+      > div {
+        border: solid 2px red;
+      }
+    }
+  }
+
+  > .input-error {
+    > div {
+      > input {
+        border: solid 2px red;
+      }
+    }
+  }
+`;
+
+export const ErrorMessage = styled(Typography)`
+  color: red;
+`;
diff --git a/src/components/AreaCoordinates/AreaCoordinates.tsx b/src/components/AreaCoordinates/AreaCoordinates.tsx
@@ -0,0 +1,263 @@
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Button,
+  Input,
+  Label,
+  Typography,
+} from '@equinor/eds-core-react';
+import { useQuery } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
+import { AnalogueModelsService } from '../../api/generated/services/AnalogueModelsService';
+import optionTypes from '../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
+import * as Styled from './AreaCoordinates.styled';
+
+interface CoordinateType {
+  top: {
+    X?: string;
+    Y?: string;
+  };
+  bottom: {
+    X?: string;
+    Y?: string;
+  };
+}
+
+type AreaErrorType = {
+  area?: string;
+  coordinateTop?: string;
+  coordinateBottom?: string;
+};
+export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
+  const [selectedArea, setSelectedArea] = useState<optionTypes>();
+  const [areaCoordinats, setAreaCoordinats] = useState<CoordinateType>({
+    top: {
+      X: undefined,
+      Y: undefined,
+    },
+    bottom: {
+      X: undefined,
+      Y: undefined,
+    },
+  });
+  const [errors, setErrors] = useState<AreaErrorType>({});
+  const [submitting, setSubmitting] = useState(false);
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['analogue-models', modelId],
+    queryFn: () => AnalogueModelsService.getApiAnalogueModels1(modelId),
+  });
+
+  const modelAreas: optionTypes[] = [
+    { id: 10, name: 'Proximal' },
+    { id: 11, name: 'Left' },
+    { id: 12, name: 'Distal' },
+  ];
+
+  const validateValues = (
+    selectedArea?: optionTypes,
+    areaCoordinats?: CoordinateType,
+  ) => {
+    const errors: AreaErrorType = {};
+    if (selectedArea === undefined) {
+      errors.area = 'Area to define coordinates for not selected';
+    }
+
+    if (
+      areaCoordinats?.top.X === undefined ||
+      areaCoordinats?.top.Y === undefined ||
+      areaCoordinats?.top.X.length < 1 ||
+      areaCoordinats?.top.Y.length < 1
+    ) {
+      errors.coordinateTop = 'Top coordinates not selected';
+    }
+
+    if (
+      areaCoordinats?.bottom.X === undefined ||
+      areaCoordinats?.bottom.Y === undefined ||
+      areaCoordinats?.bottom.X.length < 1 ||
+      areaCoordinats?.bottom.Y.length < 1
+    ) {
+      errors.coordinateBottom = 'Bottom coordinates not selected';
+    }
+    console.log(errors);
+
+    return errors;
+  };
+
+  const finishSubmit = () => {
+    console.log(selectedArea);
+    console.log(areaCoordinats);
+  };
+
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && submitting) {
+      finishSubmit();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, submitting]);
+
+  const saveChange = () => {
+    setErrors(validateValues(selectedArea, areaCoordinats));
+    setSubmitting(true);
+  };
+
+  if (isLoading) <p>Loading.....</p>;
+
+  return (
+    <Styled.SideSheet>
+      {data?.success && <Typography variant="h2">{data.data.name}</Typography>}
+      <Typography variant="h3">Set coordinates: </Typography>
+      <Styled.Form>
+        <Styled.CoordinateGroup>
+          <Typography variant="h6">Area to define</Typography>
+
+          <Autocomplete
+            className={errors.area && 'autocomplete-error'}
+            label={'Select area'}
+            options={modelAreas}
+            optionLabel={(option) => option.name}
+            onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
+              setSelectedArea(changes.selectedItems[0])
+            }
+          ></Autocomplete>
+        </Styled.CoordinateGroup>
+
+        <Styled.CoordinateGroup>
+          <Typography variant="h6">Top Left Corner</Typography>
+          <div className={errors.coordinateTop && 'input-error'}>
+            <Label label="X-coordinate" />
+            <Input
+              type="string"
+              value={areaCoordinats.top.X}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setAreaCoordinats({
+                  ...areaCoordinats,
+                  top: { ...areaCoordinats.top, X: e.currentTarget.value },
+                })
+              }
+            />
+          </div>
+          <div className={errors.coordinateTop && 'input-error'}>
+            <Label label="Y-coordinate" />
+            <Input
+              type="string"
+              value={areaCoordinats.top.Y}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setAreaCoordinats({
+                  ...areaCoordinats,
+                  top: { ...areaCoordinats.top, Y: e.currentTarget.value },
+                })
+              }
+            />
+          </div>
+        </Styled.CoordinateGroup>
+        <Styled.CoordinateGroup>
+          <Typography variant="h6">Bottom Right Corner </Typography>
+          <div className={errors.coordinateBottom && 'input-error'}>
+            <Label label="X-coordinate" />
+            <Input
+              type="string"
+              value={areaCoordinats.bottom.X}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setAreaCoordinats({
+                  ...areaCoordinats,
+                  bottom: {
+                    ...areaCoordinats.bottom,
+                    X: e.currentTarget.value,
+                  },
+                })
+              }
+            />
+          </div>
+          <div className={errors.coordinateBottom && 'input-error'}>
+            <Label label="Y-coordinate" />
+            <Input
+              type="string"
+              value={areaCoordinats.bottom.Y}
+              onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+                setAreaCoordinats({
+                  ...areaCoordinats,
+                  bottom: {
+                    ...areaCoordinats.bottom,
+                    Y: e.currentTarget.value,
+                  },
+                })
+              }
+            />
+          </div>
+        </Styled.CoordinateGroup>
+        {(errors.area || errors.coordinateBottom || errors.coordinateTop) && (
+          <Styled.ErrorMessage variant="h4">
+            Highlighted fields required
+          </Styled.ErrorMessage>
+        )}
+        <Button onClick={saveChange}>Save</Button>
+      </Styled.Form>
+    </Styled.SideSheet>
+  );
+};
+
+/**
+ * 
+ * <CoordinateSet
+        label="Top Left Corner"
+        position={areaCoordinats.top}
+        areaCoordinats={areaCoordinats}
+        setAreaCoordinats={setAreaCoordinats}
+      ></CoordinateSet>
+ * 
+const CoordinateSet = ({
+  label,
+  position,
+  areaCoordinats,
+  setAreaCoordinats,
+}: {
+  label: string;
+  position: {
+    X: string;
+    Y: string;
+  };
+  areaCoordinats: CoordinateType;
+  setAreaCoordinats: (areaCoordinats: CoordinateType) => void;
+}) => {
+  return (
+    <div>
+      <Typography variant="h6">{label}</Typography>
+      <div>
+        <Label label="X-coordinate" />
+        <Input
+          type="string"
+          value={areaCoordinats.top.X}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setAreaCoordinats({
+              ...areaCoordinats,
+              [position.X]: {
+                ...[position],
+                X: e.currentTarget.value,
+              },
+            })
+          }
+        />
+      </div>
+      <div>
+        <Label label="Y-coordinate" />
+        <Input
+          type="string"
+          value={areaCoordinats.top.Y}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            setAreaCoordinats({
+              ...areaCoordinats,
+              [position.Y]: {
+                ...[position],
+                Y: e.currentTarget.value,
+              },
+            });
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+ */
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -1,12 +1,16 @@
 /* eslint-disable max-lines-per-function */
-import { Button, Chip } from '@equinor/eds-core-react';
+import { Button, Chip, Scrim, SideSheet } from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
 import { useQuery } from '@tanstack/react-query';
+import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { AnalogueModelsService } from '../api/generated';
+import { AreaCoordinates } from './AreaCoordinates/AreaCoordinates';
 import * as Styled from './Table.styled';
 
 export const Table = () => {
+  const [toggle, setToggle] = useState<boolean>(false);
+  const [activeModel, setActiveModel] = useState<string>();
   const { isLoading, data } = useQuery({
     queryKey: ['analogue-models'],
     queryFn: () => AnalogueModelsService.getApiAnalogueModels(),
@@ -81,8 +85,30 @@ export const Table = () => {
             header: '',
             id: 'navigate',
           },
+          {
+            accessorKey: 'areas',
+            cell: ({ row }) => (
+              <Button
+                onClick={() => {
+                  setActiveModel(row.original.analogueModelId);
+                  setToggle(!toggle);
+                }}
+              >
+                Set Areas
+              </Button>
+            ),
+            header: '',
+            id: 'areas',
+          },
         ]}
       />
+      {activeModel && (
+        <Scrim open={toggle}>
+          <SideSheet open={toggle} onClose={() => setToggle(!toggle)}>
+            <AreaCoordinates modelId={activeModel} />
+          </SideSheet>
+        </Scrim>
+      )}
     </Styled.StyledDiv>
   );
 };