From 2571da3705e72c337bb4cf684f735003ddae6ed4 Mon Sep 17 00:00:00 2001
From: mheggelund <maohe@equinor.com>
Date: Mon, 23 Oct 2023 10:50:04 +0200
Subject: [PATCH] style: Add styling to set area coordinates

---
 .../AreaCoordinates.styled.tsx                |  41 +++++++
 .../AreaCoordinates/AreaCoordinates.tsx       | 103 ++++++++++--------
 2 files changed, 100 insertions(+), 44 deletions(-)
 create mode 100644 src/components/AreaCoordinates/AreaCoordinates.styled.tsx

diff --git a/src/components/AreaCoordinates/AreaCoordinates.styled.tsx b/src/components/AreaCoordinates/AreaCoordinates.styled.tsx
new file mode 100644
index 00000000..8f5b4567
--- /dev/null
+++ 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
index 3f9f02c0..39f15761 100644
--- a/src/components/AreaCoordinates/AreaCoordinates.tsx
+++ b/src/components/AreaCoordinates/AreaCoordinates.tsx
@@ -10,8 +10,8 @@ import {
 import { useQuery } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { AnalogueModelsService } from '../../api/generated/services/AnalogueModelsService';
-import { ErrorType } from '../../features/AddModel/AddModelDialog/AddModelDialog';
 import optionTypes from '../../features/Compute/ComputeVariogram/CaseCard/CaseCard';
+import * as Styled from './AreaCoordinates.styled';
 
 interface CoordinateType {
   top: {
@@ -23,6 +23,12 @@ interface CoordinateType {
     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>({
@@ -35,7 +41,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
       Y: undefined,
     },
   });
-  const [errors, setErrors] = useState({});
+  const [errors, setErrors] = useState<AreaErrorType>({});
   const [submitting, setSubmitting] = useState(false);
 
   const { data, isLoading } = useQuery({
@@ -53,9 +59,9 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
     selectedArea?: optionTypes,
     areaCoordinats?: CoordinateType,
   ) => {
-    const errors: ErrorType = {};
+    const errors: AreaErrorType = {};
     if (selectedArea === undefined) {
-      errors.field = 'Area to define coordinates for not selected';
+      errors.area = 'Area to define coordinates for not selected';
     }
 
     if (
@@ -64,7 +70,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
       areaCoordinats?.top.X.length < 1 ||
       areaCoordinats?.top.Y.length < 1
     ) {
-      errors.formation = 'Top coordinates not selected';
+      errors.coordinateTop = 'Top coordinates not selected';
     }
 
     if (
@@ -73,7 +79,7 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
       areaCoordinats?.bottom.X.length < 1 ||
       areaCoordinats?.bottom.Y.length < 1
     ) {
-      errors.file = 'Bottom coordinates not selected';
+      errors.coordinateBottom = 'Bottom coordinates not selected';
     }
     console.log(errors);
 
@@ -100,87 +106,96 @@ export const AreaCoordinates = ({ modelId }: { modelId: string }) => {
   if (isLoading) <p>Loading.....</p>;
 
   return (
-    <>
+    <Styled.SideSheet>
       {data?.success && <Typography variant="h2">{data.data.name}</Typography>}
-      <Typography variant="h3">Set coordinates for model areas</Typography>
-      <form>
-        <Autocomplete
-          label={'Select area'}
-          options={modelAreas}
-          optionLabel={(option) => option.name}
-          onOptionsChange={(changes: AutocompleteChanges<optionTypes>) =>
-            setSelectedArea(changes.selectedItems[0])
-          }
-        ></Autocomplete>
+      <Typography variant="h3">Set coordinates: </Typography>
+      <Styled.Form>
+        <Styled.CoordinateGroup>
+          <Typography variant="h6">Area to define</Typography>
 
-        <div>
-          <Typography variant="h6">Bottom Right Corner </Typography>
-          <div>
+          <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.bottom.X}
+              value={areaCoordinats.top.X}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setAreaCoordinats({
                   ...areaCoordinats,
-                  bottom: {
-                    ...areaCoordinats.bottom,
-                    X: e.currentTarget.value,
-                  },
+                  top: { ...areaCoordinats.top, X: e.currentTarget.value },
                 })
               }
             />
           </div>
-          <div>
+          <div className={errors.coordinateTop && 'input-error'}>
             <Label label="Y-coordinate" />
             <Input
               type="string"
-              value={areaCoordinats.bottom.Y}
+              value={areaCoordinats.top.Y}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setAreaCoordinats({
                   ...areaCoordinats,
-                  bottom: {
-                    ...areaCoordinats.bottom,
-                    Y: e.currentTarget.value,
-                  },
+                  top: { ...areaCoordinats.top, Y: e.currentTarget.value },
                 })
               }
             />
           </div>
-        </div>
-
-        <div>
-          <Typography variant="h6">Top Left Corner</Typography>
-          <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.top.X}
+              value={areaCoordinats.bottom.X}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setAreaCoordinats({
                   ...areaCoordinats,
-                  top: { ...areaCoordinats.top, X: e.currentTarget.value },
+                  bottom: {
+                    ...areaCoordinats.bottom,
+                    X: e.currentTarget.value,
+                  },
                 })
               }
             />
           </div>
-          <div>
+          <div className={errors.coordinateBottom && 'input-error'}>
             <Label label="Y-coordinate" />
             <Input
               type="string"
-              value={areaCoordinats.top.Y}
+              value={areaCoordinats.bottom.Y}
               onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
                 setAreaCoordinats({
                   ...areaCoordinats,
-                  top: { ...areaCoordinats.top, Y: e.currentTarget.value },
+                  bottom: {
+                    ...areaCoordinats.bottom,
+                    Y: e.currentTarget.value,
+                  },
                 })
               }
             />
           </div>
-        </div>
+        </Styled.CoordinateGroup>
+        {(errors.area || errors.coordinateBottom || errors.coordinateTop) && (
+          <Styled.ErrorMessage variant="h4">
+            Highlighted fields required
+          </Styled.ErrorMessage>
+        )}
         <Button onClick={saveChange}>Save</Button>
-      </form>
-    </>
+      </Styled.Form>
+    </Styled.SideSheet>
   );
 };