Chore/merge validation

src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts

@@ -12,6 +12,12 @@ const StyledDialogCustomContent = styled(Dialog.CustomContent)`
   flex-direction: column;
   row-gap: ${spacings.X_LARGE};
   height: 740px;
+
+  > p {
+    &.error {
+      color: red;
+    }
+  }
 `
 
 const StyledDialogActions = styled(Dialog.Actions)`

src/features/AddModel/AddModelDialog/AddModelDialog.tsx

@@ -1,5 +1,6 @@
-import { Button } from '@equinor/eds-core-react'
-import { useState } from 'react'
+/* eslint-disable max-lines-per-function */
+import { Button, Typography } from '@equinor/eds-core-react'
+import { useEffect, useState } from 'react'
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable'
 import { ModelMetadata } from '../ModelMetadata/ModelMetadata'
 import * as Styled from './AddModelDialog.styled'
@@ -10,6 +11,19 @@ interface AddModelDialogProps {
   cancel: () => void
 }
 
+export default interface MetadataProps {
+  description?: string
+  field: string[]
+  zone?: string[]
+  formation: string[]
+  analogue?: string[]
+}
+
+export type ErrorType = {
+  field?: string
+  formation?: string
+  file?: string
+}
 export const AddModelDialog = ({
   isOpen,
   confirm,
@@ -20,13 +34,51 @@ export const AddModelDialog = ({
     NC: undefined,
     INI: undefined,
   })
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>()
+  const [errors, setErrors] = useState({})
+  const [submitting, setSubmitting] = useState(false)
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay)
   }
 
   const INIFileContent = () => <p>Not implemented yet...</p>
 
+  const validateValues = (inputValues: Partial<MetadataProps> | undefined) => {
+    const errors: ErrorType = {}
+    if (inputValues?.field === undefined || inputValues?.field?.length === 0) {
+      errors.field = 'Field not selected'
+    }
+
+    if (
+      inputValues?.formation === undefined ||
+      inputValues?.formation?.length === 0
+    ) {
+      errors.formation = 'Formation not selected'
+    }
+
+    if (!files.NC) {
+      errors.file = 'NC file missing'
+    }
+    return errors
+  }
+
+  const handleSubmit = () => {
+    setErrors(validateValues(metadata))
+    setSubmitting(true)
+  }
+
+  const finishSubmit = () => {
+    if (files.NC) confirm(files.NC)
+  }
+
+  useEffect(() => {
+    if (Object.keys(errors).length === 0 && submitting) {
+      finishSubmit()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [errors, submitting])
+
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>
@@ -42,12 +94,17 @@ export const AddModelDialog = ({
           }}
         />
         {isFileDisplay && <INIFileContent />}
-        <ModelMetadata />
+        <ModelMetadata
+          errors={errors}
+          metadata={metadata}
+          setMetadata={setMetadata}
+        />
+        {Object.keys(errors).includes('file') && (
+          <Typography className="error">NC file missing</Typography>
+        )}
       </Styled.DialogCustomContent>
       <Styled.DialogActions>
-        <Button onClick={() => (files.NC ? confirm(files.NC) : {})}>
-          Confirm and start uploading
-        </Button>
+        <Button onClick={handleSubmit}>Confirm and start uploading</Button>
         <Button variant="outlined" onClick={cancel}>
           Cancel
         </Button>

src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts

@@ -1,15 +1,48 @@
+import { TextField } from '@equinor/eds-core-react'
 import styled from 'styled-components'
 import { spacings } from '../../../tokens/spacings'
-
 export const ModelMetadata = styled.div`
-  &.model-metadata {
-    display: grid;
-    grid-template-columns: auto auto;
-    column-gap: ${spacings.MEDIUM}};
-    row-gap: ${spacings.MEDIUM};
-
-    > .model-description {
-      grid-column: 1 / span 2;
+  display: flex;
+  flex-direction: column;
+
+  row-gap: ${spacings.MEDIUM};
+`
+
+export const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+`
+
+export const AutocompleteWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  row-gap: ${spacings.MEDIUM};
+`
+export const AutocompleteRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex: end;
+  column-gap: ${spacings.MEDIUM};
+
+  > div {
+    flex-grow: 1;
+  }
+`
+
+export const TextInput = styled(TextField)`
+  display: flex;
+  flex-direction: column;
+`
+export const Required = styled.div`
+  > label {
+    color: red;
+  }
+  > .model-required {
+    > div {
+      > div {
+        border: solid 2px red;
+      }
     }
   }
 `

src/features/AddModel/ModelMetadata/ModelMetadata.tsx

@@ -1,21 +1,97 @@
-import { Autocomplete, TextField, Typography } from '@equinor/eds-core-react'
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Label,
+  Typography,
+} from '@equinor/eds-core-react'
+import MetadataProps, { ErrorType } from '../AddModelDialog/AddModelDialog'
+
 import * as Styled from './ModelMetadata.styled'
 
-export const ModelMetadata = () => {
-  const fields = [{ name: 'Tor' }]
+export const ModelMetadata = ({
+  errors,
+  metadata,
+  setMetadata,
+}: {
+  errors: ErrorType
+  metadata: Partial<MetadataProps> | undefined
+  setMetadata: (metadata: Partial<MetadataProps>) => void
+}) => {
+  const fields = {
+    description: 'Description string',
+    field: ['Tor', 'Pål'],
+    zone: ['Zone 1', 'Zone 2', 'Zone 3'],
+    formation: ['Rocky', 'Hilly', 'Flat'],
+    analogue: ['Analouge1', 'Analouge2'],
+  }
+
+  const handleInput = (e: AutocompleteChanges<string>, target: string) => {
+    setMetadata({ ...metadata, [target]: e.selectedItems })
+  }
+
   return (
     <Styled.ModelMetadata className="model-metadata">
       <Typography variant="h4">Description and metadata</Typography>
-      <TextField
-        id="model-description"
-        className="model-description"
-        label="Model description (optional)"
-        multiline
-      />
-      <Autocomplete label="Field" options={fields}></Autocomplete>
-      <Autocomplete label="Formation" options={fields}></Autocomplete>
-      <Autocomplete label="Analogue (optional)" options={fields}></Autocomplete>
-      <Autocomplete label="Zone (optional)" options={fields}></Autocomplete>
+      <Styled.Form>
+        <Styled.TextInput
+          id="model-description"
+          label="Model description (optional)"
+          value={metadata?.description}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+            setMetadata({ ...metadata, description: e.currentTarget.value })
+          }
+          multiline
+          rows={4}
+          rowsMax={8}
+        />
+        <Styled.AutocompleteWrapper>
+          <Styled.AutocompleteRow>
+            <Styled.Required>
+              <Autocomplete
+                className={`${errors.field && 'model-required'}`}
+                label="Field"
+                options={fields.field}
+                onOptionsChange={(e: AutocompleteChanges<string>) =>
+                  handleInput(e, 'field')
+                }
+              ></Autocomplete>
+              {errors.field && <Label label="This field is required"></Label>}
+            </Styled.Required>
+            <Styled.Required>
+              <Autocomplete
+                className={`${errors.formation && 'model-required'}`}
+                label="Formation"
+                options={fields.formation}
+                multiple
+                onOptionsChange={(e: AutocompleteChanges<string>) =>
+                  handleInput(e, 'formation')
+                }
+              ></Autocomplete>
+              {errors.formation && (
+                <Label label="This field is required"></Label>
+              )}
+            </Styled.Required>
+          </Styled.AutocompleteRow>
+          <Styled.AutocompleteRow>
+            <Autocomplete
+              label="Analogue (optional)"
+              options={fields.analogue}
+              multiple
+              onOptionsChange={(e: AutocompleteChanges<string>) =>
+                setMetadata({ ...metadata, analogue: e.selectedItems })
+              }
+            ></Autocomplete>
+            <Autocomplete
+              label="Zone (optional)"
+              options={fields.zone}
+              onOptionsChange={(e: AutocompleteChanges<string>) =>
+                setMetadata({ ...metadata, zone: e.selectedItems })
+              }
+            ></Autocomplete>
+          </Styled.AutocompleteRow>
+        </Styled.AutocompleteWrapper>
+      </Styled.Form>
     </Styled.ModelMetadata>
   )
 }