feat: Input validation on metadata input

src/features/AddModelDialog/AddModelDialog.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import { Button } from '@equinor/eds-core-react'
 import { useState } from 'react'
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable'
@@ -10,19 +11,74 @@ interface AddModelDialogProps {
   cancel: () => void
 }
 
+export default interface MetadataProps {
+  description?: string
+  field: string[]
+  zone?: string[]
+  formation: string[]
+  analogue?: string[]
+}
+
 export const AddModelDialog = ({
   isOpen,
   confirm,
   cancel,
 }: AddModelDialogProps) => {
   const [isFileDisplay, setFileDisplay] = useState<boolean>(false)
+  const [validationError, setValidationError] = useState<{
+    field: boolean
+    formation: boolean
+  }>({ field: false, formation: false })
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>()
+
+  // const [description, setDescription] = useState<string>()
+  // const [field, setField] = useState<string[]>()
+  // const [zone, setZone] = useState<string[]>()
+  // const [formation, setFormation] = useState<string[]>()
+  // const [analogue, setAnalogue] = useState<string[]>()
+  // const [fieldError, setFieldError] = useState<boolean>(false)
+  // const [formationError, setFormationError] = useState<boolean>(false)
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay)
   }
 
   const INIFileContent = () => <p>Not implemented yet...</p>
 
+  const validateInput = (values: string[] | undefined, target: string) => {
+    // const value = e.selectedItems
+    // console.log('Kjører: Value => ' + values + ' target => ' + target)
+
+    values === undefined || !typeof Object
+      ? setValidationError({ ...validationError, [target]: true })
+      : setValidationError({ ...validationError, [target]: false })
+    // onChange(metadata)
+  }
+
+  const submit = () => {
+    /**
+     * 
+    console.log('Metadata' + metadata)
+
+    console.log('Field: ' + metadata?.field)
+    console.log('Formation: ' + metadata?.formation)
+
+    console.log('Type Formation: ' + typeof metadata?.formation)
+    console.log('Type Field: ' + typeof metadata?.field)
+     */
+
+    validateInput(metadata?.field, 'field')
+
+    validateInput(metadata?.formation, 'formation')
+    /**
+ * 
+console.log('Field error: ' + validationError.field)
+console.log('Formation error: ' + validationError.formation)
+*/
+
+    // confirm()
+  }
+
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>
@@ -36,10 +92,15 @@ export const AddModelDialog = ({
           }}
         />
         {isFileDisplay && <INIFileContent />}
-        <ModelMetadata />
+        <ModelMetadata
+          onValidate={validateInput}
+          validationError={validationError}
+          metadata={metadata}
+          setMetadata={setMetadata}
+        />
       </Styled.DialogCustomContent>
       <Styled.DialogActions>
-        <Button onClick={confirm}>Confirm and start uploading</Button>
+        <Button onClick={submit}>Confirm and start uploading</Button>
         <Button variant="outlined" onClick={cancel}>
           Cancel
         </Button>

src/features/ModelInputFilesTable/ModelInputFilesTable.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable no-magic-numbers */
 import { Button, Table } from '@equinor/eds-core-react'
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons'
 import { ChangeEvent, useState } from 'react'

src/features/ModelMetadata/ModelMetadata.styled.ts

@@ -10,6 +10,33 @@ export const ModelMetadata = styled.div`
 
     > .model-description {
       grid-column: 1 / span 2;
+    }
+
+    > .model-required {
+      border-style: solid;
+      border-width: 2px;
+      border-color: red;
+    }
+    
+
+    > .required-div {
+      > label {
+        color: red !important;
+      }
+
+      > .model-required2 {
+        > div {
+          border-style: solid !important;
+          border-width: 2px !important;
+          border-color: red !important;
+        }
+      }
+
+    }
+
+    
+
+
     }
   }
 `

src/features/ModelMetadata/ModelMetadata.tsx

@@ -1,21 +1,104 @@
-import { Autocomplete, TextField, Typography } from '@equinor/eds-core-react'
+/* eslint-disable max-lines-per-function */
+import {
+  Autocomplete,
+  AutocompleteChanges,
+  Label,
+  TextField,
+  Typography,
+} from '@equinor/eds-core-react'
+import MetadataProps from '../AddModelDialog/AddModelDialog'
 import * as Styled from './ModelMetadata.styled'
 
-export const ModelMetadata = () => {
-  const fields = [{ name: 'Tor' }]
+export const ModelMetadata = ({
+  onValidate,
+  validationError,
+  metadata,
+  setMetadata,
+}: {
+  onValidate: (values: string[], target: string) => void
+  validationError: { field: boolean; formation: boolean }
+  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) => {
+    onValidate(e.selectedItems, target)
+    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)"
+        value={metadata?.description}
+        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+          setMetadata({ ...metadata, description: e.currentTarget.value })
+        }
         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>
+      <div className="required-div">
+        <Autocomplete
+          id="field-select"
+          className={`${
+            validationError.field && 'model-required model-required2'
+          }`}
+          label="Field"
+          options={fields.field}
+          onOptionsChange={(e: AutocompleteChanges<string>) =>
+            handleInput(e, 'field')
+          }
+        ></Autocomplete>
+        {validationError.field && (
+          <Label
+            label="This field is required"
+            className="required-lable"
+          ></Label>
+        )}
+      </div>
+
+      <div className="required-div">
+        <Autocomplete
+          className={`${validationError.formation && 'model-required2'}`}
+          label="Formation"
+          options={fields.formation}
+          multiple
+          onOptionsChange={(e: AutocompleteChanges<string>) =>
+            handleInput(e, 'formation')
+          }
+        ></Autocomplete>
+        {validationError.formation && (
+          <Label
+            label="This field is required"
+            className="required-lable"
+          ></Label>
+        )}
+      </div>
+
+      <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.ModelMetadata>
   )
 }