chore: uppdated add model validation

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

Hide file tree

Showing 4 changed files with 148 additions and 123 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts b/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)`

diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-lines-per-function */
-import { Button } from '@equinor/eds-core-react'
-import { useState } from 'react'
+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'
@@ -19,6 +19,11 @@ export default interface MetadataProps {
   analogue?: string[]
 }
 
+export type ErrorType = {
+  field?: string
+  formation?: string
+  file?: string
+}
 export const AddModelDialog = ({
   isOpen,
   confirm,
@@ -30,48 +35,50 @@ export const AddModelDialog = ({
     INI: undefined,
   })
   const [metadata, setMetadata] = useState<Partial<MetadataProps>>()
-
-  const [fieldValidationError, setFieldValidationError] =
-    useState<boolean>(false)
-  const [formationValidationError, setFormationValidationError] =
-    useState<boolean>(false)
+  const [errors, setErrors] = useState({})
+  const [submitting, setSubmitting] = useState(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 validateValues = (inputValues: Partial<MetadataProps> | undefined) => {
+    const errors: ErrorType = {}
+    if (inputValues?.field === undefined || inputValues?.field?.length === 0) {
+      errors.field = 'Field not selected'
     }
-  }
-  const validateFormationInput = () => {
-    if (metadata?.formation === undefined) {
-      setFormationValidationError(true)
-    } else if (metadata?.formation.length === 0) {
-      setFormationValidationError(true)
-    } else {
-      setFormationValidationError(false)
+
+    if (
+      inputValues?.formation === undefined ||
+      inputValues?.formation?.length === 0
+    ) {
+      errors.formation = 'Formation not selected'
     }
-  }
 
-  const uploadFile = () => {
-    if (files.NC) confirm(files.NC)
+    if (!files.NC) {
+      errors.file = 'NC file missing'
+    }
+    return errors
   }
 
-  const submit = () => {
-    validateFieldInput()
-    validateFormationInput()
+  const handleSubmit = () => {
+    setErrors(validateValues(metadata))
+    setSubmitting(true)
+  }
 
-    if (!fieldValidationError || !formationValidationError) uploadFile()
+  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>
@@ -88,14 +95,16 @@ export const AddModelDialog = ({
         />
         {isFileDisplay && <INIFileContent />}
         <ModelMetadata
-          fieldValidationError={fieldValidationError}
-          formationValidationError={formationValidationError}
+          errors={errors}
           metadata={metadata}
           setMetadata={setMetadata}
         />
+        {Object.keys(errors).includes('file') && (
+          <Typography className="error">NC file missing</Typography>
+        )}
       </Styled.DialogCustomContent>
       <Styled.DialogActions>
-        <Button onClick={submit}>Confirm and start uploading</Button>
+        <Button onClick={handleSubmit}>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
@@ -1,33 +1,47 @@
+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};
+  display: flex;
+  flex-direction: column;
 
-    > .model-description {
-      grid-column: 1 / span 2;
-    }
+  row-gap: ${spacings.MEDIUM};
+`
 
-    > .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;
-        }
+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;
       }
     }
   }

diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -3,21 +3,18 @@ import {
   Autocomplete,
   AutocompleteChanges,
   Label,
-  TextField,
   Typography,
 } from '@equinor/eds-core-react'
-import MetadataProps from '../AddModelDialog/AddModelDialog'
+import MetadataProps, { ErrorType } from '../AddModelDialog/AddModelDialog'
 
 import * as Styled from './ModelMetadata.styled'
 
 export const ModelMetadata = ({
-  fieldValidationError,
-  formationValidationError,
+  errors,
   metadata,
   setMetadata,
 }: {
-  fieldValidationError: boolean
-  formationValidationError: boolean
+  errors: ErrorType
   metadata: Partial<MetadataProps> | undefined
   setMetadata: (metadata: Partial<MetadataProps>) => void
 }) => {
@@ -32,70 +29,69 @@ export const ModelMetadata = ({
   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
-      />
-      <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')
+      <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 })
           }
-        ></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>{' '}
+          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>
   )
 }