feat: add description and metadata form

equinor · Aug 8, 2023 · 72ab7f1 · 72ab7f1
1 parent 9da55cf
commit 72ab7f1
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/src/features/AddModelDialog/AddModelDialog.styled.ts b/src/features/AddModelDialog/AddModelDialog.styled.ts
@@ -6,8 +6,32 @@ const StyledDialog = styled(Dialog)`
   width: max-content;
 `
 
+const StyledDialogCustomContent = styled(Dialog.CustomContent)`
+  display: grid;
+  row-gap: ${spacings.X_LARGE};
+`
+
 const StyledDialogActions = styled(Dialog.Actions)`
   display: flex;
   gap: ${spacings.SMALL};
 `
-export { StyledDialog as Dialog, StyledDialogActions as DialogActions }
+
+const StyledMetadata = 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;
+    }
+  }
+`
+
+export {
+  StyledDialog as Dialog,
+  StyledDialogActions as DialogActions,
+  StyledDialogCustomContent as DialogCustomContent,
+  StyledMetadata as Metadata,
+}
diff --git a/src/features/AddModelDialog/AddModelDialog.tsx b/src/features/AddModelDialog/AddModelDialog.tsx
@@ -1,4 +1,9 @@
-import { Button } from '@equinor/eds-core-react'
+import {
+  Autocomplete,
+  Button,
+  TextField,
+  Typography,
+} from '@equinor/eds-core-react'
 import { ModelInputFilesTable } from '../ModelInputFiles/ModelInputFiles'
 import * as Styled from './AddModelDialog.styled'
 
@@ -8,6 +13,25 @@ interface AddModelDialogProps {
   cancel: () => void
 }
 
+const DescriptionAndMetadata = () => {
+  const fields = [{ name: 'Tor' }]
+  return (
+    <Styled.Metadata 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.Metadata>
+  )
+}
+
 export const AddModelDialog = ({
   isOpen,
   confirm,
@@ -22,18 +46,19 @@ export const AddModelDialog = ({
       <Styled.Dialog.Header>
         <Styled.Dialog.Title>Add new model</Styled.Dialog.Title>
       </Styled.Dialog.Header>
-      <Styled.Dialog.CustomContent>
+      <Styled.DialogCustomContent>
         <ModelInputFilesTable
           inputFiles={[{ name: 'CoarseSand_LargerFlow_1.nc', size: 1.43 }]}
           onDeleteFile={deleteInputFile}
         />
+        <DescriptionAndMetadata />
         <Styled.DialogActions>
           <Button onClick={confirm}>Confirm and start uploading</Button>
           <Button variant="outlined" onClick={cancel}>
             Cancel
           </Button>
         </Styled.DialogActions>
-      </Styled.Dialog.CustomContent>
+      </Styled.DialogCustomContent>
     </Styled.Dialog>
   )
 }