chore: Add name and description to reuired metadata. Corrected select…

…ed file size display.
equinor · Nov 7, 2023 · c19d201 · c19d201
1 parent 54e7bc6
commit c19d201
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 44 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -22,10 +22,13 @@ export default interface MetadataProps {
 }
 
 export type ErrorType = {
+  name?: string;
+  description?: string;
   field?: string;
   formation?: string;
   file?: string;
 };
+
 export const AddModelDialog = ({
   isOpen,
   confirm,
@@ -39,9 +42,15 @@ export const AddModelDialog = ({
   const [metadata, setMetadata] = useState<Partial<MetadataProps>>({
     name: '',
     description: '',
+    field: [],
+    zone: [],
+    formation: [],
+    analogue: [],
   });
   const [errors, setErrors] = useState({});
   const [submitting, setSubmitting] = useState(false);
+  const [fileSize, setFileSize] = useState(0);
+  const [rawFile, setrawFile] = useState<File>();
 
   function toggleINIFileContent() {
     setFileDisplay(!isFileDisplay);
@@ -51,6 +60,18 @@ export const AddModelDialog = ({
 
   const validateValues = (inputValues: Partial<MetadataProps> | undefined) => {
     const errors: ErrorType = {};
+
+    if (inputValues?.name === undefined || inputValues?.name === '') {
+      errors.name = 'Name not provided';
+    }
+
+    if (
+      inputValues?.description === undefined ||
+      inputValues?.description === ''
+    ) {
+      errors.description = 'Description not provided';
+    }
+
     if (inputValues?.field === undefined || inputValues?.field?.length === 0) {
       errors.field = 'Field not selected';
     }
@@ -65,6 +86,7 @@ export const AddModelDialog = ({
     if (!files.NC) {
       errors.file = 'NC file missing';
     }
+
     return errors;
   };
 
@@ -84,6 +106,19 @@ export const AddModelDialog = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [errors, submitting]);
 
+  useEffect(() => {
+    if (rawFile === undefined) return;
+    setFileSize(rawFile.size);
+  }, [rawFile]);
+
+  const fileAdded = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) return;
+    const file = e.target.files[0];
+    const type = e.target.name;
+    setFiles({ ...files, [type]: file });
+    setrawFile(e.target.files[0]);
+  };
+
   return (
     <Styled.Dialog open={isOpen}>
       <Styled.Dialog.Header>
@@ -97,6 +132,8 @@ export const AddModelDialog = ({
             isVisible: isFileDisplay,
             toggle: toggleINIFileContent,
           }}
+          fileSize={fileSize}
+          fileChange={fileAdded}
         />
         {isFileDisplay && <INIFileContent />}
         <ModelMetadata

diff --git a/src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx b/src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-lines-per-function */
 import { Button, Table } from '@equinor/eds-core-react';
 import { delete_to_trash as deleteIcon } from '@equinor/eds-icons';
 import { ChangeEvent } from 'react';
@@ -12,6 +13,7 @@ interface FileColumnProps {
   INI?: true;
   file?: File;
   fileDisplay?: FileDisplay;
+  fileSize?: number;
 }
 
 const FileColumn = ({
@@ -20,21 +22,12 @@ const FileColumn = ({
   INI,
   file,
   fileDisplay,
+  fileSize,
 }: FileColumnProps) => {
   const DeleteButton = ({ onDelete }: { onDelete: () => void }) => (
     <IconButton icon={deleteIcon} title="delete" onClick={onDelete} />
   );
 
-  function fileSize(size: number) {
-    if (size < 1024) {
-      return `${size} bytes`;
-    } else if (size >= 1024 && size < 1048576) {
-      return `${(size / 1024).toFixed(1)} KB`;
-    } else if (size >= 1048576) {
-      return `${(size / 1048576).toFixed(1)} MB`;
-    }
-  }
-
   return (
     <Table.Row className={`${INI ? 'ini' : 'nc'}-file`}>
       <Table.Cell>
@@ -51,7 +44,7 @@ const FileColumn = ({
           </Button>
         )}
       </Table.Cell>
-      <Table.Cell>{file ? fileSize(file.size) : '-'}</Table.Cell>
+      <Table.Cell>{file ? fileSize : '-'}</Table.Cell>
       <Table.Cell>{file && <DeleteButton onDelete={onDelete} />}</Table.Cell>
     </Table.Row>
   );
@@ -61,6 +54,8 @@ export const ModelInputFilesTable = ({
   fileDisplay,
   files,
   setFiles,
+  fileSize,
+  fileChange,
 }: {
   fileDisplay: FileDisplay;
   files: { NC?: File; INI?: File };
@@ -70,15 +65,9 @@ export const ModelInputFilesTable = ({
       INI?: File | undefined;
     }>
   >;
+  fileSize: number;
+  fileChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }) => {
-  function updateFileDisplay(e: ChangeEvent<HTMLInputElement>) {
-    e.preventDefault();
-    if (!e.target.files) return;
-    const file = e.target.files[0];
-    const type = e.target.name;
-    setFiles({ ...files, [type]: file });
-  }
-
   return (
     <Table>
       <Table.Head>
@@ -92,13 +81,14 @@ export const ModelInputFilesTable = ({
       <Table.Body>
         <FileColumn
           file={files?.NC}
-          onChange={updateFileDisplay}
+          onChange={fileChange}
           onDelete={() => setFiles({ ...files, NC: undefined })}
+          fileSize={fileSize}
         />
         <FileColumn
           INI
           file={files?.INI}
-          onChange={updateFileDisplay}
+          onChange={fileChange}
           onDelete={() => setFiles({ ...files, INI: undefined })}
           fileDisplay={fileDisplay}
         />

diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts b/src/features/AddModel/ModelMetadata/ModelMetadata.styled.ts
@@ -34,6 +34,18 @@ export const TextInput = styled(TextField)`
   display: flex;
   flex-direction: column;
 `;
+export const InputfieldRequired = styled.div`
+  > label {
+    color: red;
+  }
+
+  > .model-required {
+    > div {
+      border: solid 2px red;
+    }
+  }
+`;
+
 export const Required = styled.div`
   > label {
     color: red;

diff --git a/src/features/AddModel/ModelMetadata/ModelMetadata.tsx b/src/features/AddModel/ModelMetadata/ModelMetadata.tsx
@@ -21,10 +21,17 @@ export const ModelMetadata = ({
   setMetadata: (metadata: Partial<MetadataProps>) => void;
 }) => {
   const fields = {
-    field: ['Tor', 'Pål'],
-    zone: ['Zone 1', 'Zone 2', 'Zone 3'],
-    formation: ['Rocky', 'Hilly', 'Flat'],
-    analogue: ['Analouge1', 'Analouge2'],
+    field: [
+      'Breidablikk',
+      'Gullfaks',
+      'Heidrun',
+      'Johan Sverdrup',
+      'Oseberg',
+      'Tordis',
+    ],
+    zone: ['Norwegian sea', 'North sea', 'Barents sea'],
+    formation: ['Formation1', 'Formation2', 'Formation3', 'Formation4'],
+    analogue: ['Analouge1', 'Analouge2', 'Analouge3', 'Analouge4'],
   };
 
   const { isLoading, data } = useQuery({
@@ -42,25 +49,34 @@ export const ModelMetadata = ({
     <Styled.ModelMetadata className="model-metadata">
       <Typography variant="h4">Description and metadata</Typography>
       <Styled.Form>
-        <Styled.TextInput
-          id="model-name"
-          label="Model Name (optional)"
-          value={metadata?.name}
-          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
-            setMetadata({ ...metadata, name: e.currentTarget.value })
-          }
-        />
-        <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.InputfieldRequired>
+          <Styled.TextInput
+            className={`${errors.name && 'model-required'}`}
+            id="model-name"
+            label="Model Name (optional)"
+            value={metadata?.name}
+            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) =>
+              setMetadata({ ...metadata, name: e.currentTarget.value })
+            }
+          />
+          {errors.name && <Label label="This field is required"></Label>}
+        </Styled.InputfieldRequired>
+        <Styled.InputfieldRequired>
+          <Styled.TextInput
+            className={`${errors.description && 'model-required'}`}
+            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}
+          />
+          {errors.description && <Label label="This field is required"></Label>}
+        </Styled.InputfieldRequired>
+
         <Styled.AutocompleteWrapper>
           <Styled.AutocompleteRow>
             <Styled.Required>