chore: merge inn upload-form-valitation functionallity

equinor · Oct 10, 2023 · 79c0db1 · 79c0db1
1 parent b2b71cc
commit 79c0db1
Show file tree

Hide file tree

Showing 3 changed files with 158 additions and 11 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/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,6 +11,14 @@ interface AddModelDialogProps {
   cancel: () => void
 }
 
+export default interface MetadataProps {
+  description?: string
+  field: string[]
+  zone?: string[]
+  formation: string[]
+  analogue?: string[]
+}
+
 export const AddModelDialog = ({
   isOpen,
   confirm,
@@ -20,13 +29,49 @@ export const AddModelDialog = ({
     NC: undefined,
     INI: undefined,
   })
+  const [metadata, setMetadata] = useState<Partial<MetadataProps>>()
+
+  const [fieldValidationError, setFieldValidationError] =
+    useState<boolean>(false)
+  const [formationValidationError, setFormationValidationError] =
+    useState<boolean>(false)
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay)
   }
 
   const INIFileContent = () => <p>Not implemented yet...</p>
 
+  const validateFieldInput = () => {
+    if (metadata?.field === undefined) {
+      setFieldValidationError(true)
+    } else if (metadata?.field.length === 0) {
+      setFieldValidationError(true)
+    } else {
+      setFieldValidationError(false)
+    }
+  }
+  const validateFormationInput = () => {
+    if (metadata?.formation === undefined) {
+      setFormationValidationError(true)
+    } else if (metadata?.formation.length === 0) {
+      setFormationValidationError(true)
+    } else {
+      setFormationValidationError(false)
+    }
+  }
+
+  const uploadFile = () => {
+    if (files.NC) confirm(files.NC)
+  }
+
+  const submit = () => {
+    validateFieldInput()
+    validateFormationInput()
+
+    if (!fieldValidationError || !formationValidationError) uploadFile()
+  }
+
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>
@@ -42,12 +87,15 @@ export const AddModelDialog = ({
           }}
         />
         {isFileDisplay && <INIFileContent />}
-        <ModelMetadata />
+        <ModelMetadata
+          fieldValidationError={fieldValidationError}
+          formationValidationError={formationValidationError}
+          metadata={metadata}
+          setMetadata={setMetadata}
+        />
       </Styled.DialogCustomContent>
       <Styled.DialogActions>
-        <Button onClick={() => (files.NC ? confirm(files.NC) : {})}>
-          Confirm and start uploading
-        </Button>
+        <Button onClick={submit}>Confirm and start uploading</Button>
         <Button variant="outlined" onClick={cancel}>
           Cancel
         </Button>

diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts b/src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts
@@ -11,5 +11,24 @@ 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;
+        }
+      }
+    }
   }
 `
diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -1,21 +1,101 @@
-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 = ({
+  fieldValidationError,
+  formationValidationError,
+  metadata,
+  setMetadata,
+}: {
+  fieldValidationError: boolean
+  formationValidationError: 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) => {
+    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={`${
+            fieldValidationError && 'model-required model-required2'
+          }`}
+          label="Field"
+          options={fields.field}
+          onOptionsChange={(e: AutocompleteChanges<string>) =>
+            handleInput(e, 'field')
+          }
+        ></Autocomplete>
+        {fieldValidationError && (
+          <Label
+            label="This field is required"
+            className="required-lable"
+          ></Label>
+        )}
+      </div>
+      <div className="required-div">
+        <Autocomplete
+          className={`${formationValidationError && 'model-required2'}`}
+          label="Formation"
+          options={fields.formation}
+          multiple
+          onOptionsChange={(e: AutocompleteChanges<string>) =>
+            handleInput(e, 'formation')
+          }
+        ></Autocomplete>
+        {formationValidationError && (
+          <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>
   )
 }