Merge branch 'main' into fix/compute-todos

equinor · Jan 22, 2024 · 3a7c1cb · 3a7c1cb
2 parents 0eef8de + 2c892ce
commit 3a7c1cb
Show file tree

Hide file tree

Showing 5 changed files with 109 additions and 61 deletions.
diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts b/src/features/AddModel/AddModelDialog/AddModelDialog.styled.ts
@@ -4,7 +4,8 @@ import { spacings } from '../../../tokens/spacings';
 
 const StyledDialog = styled(Dialog)`
   min-width: 600px;
-  width: max-content;
+  height: 90vh;
+  overflow-y: scroll;
 `;
 
 const StyledDialogCustomContent = styled(Dialog.CustomContent)`

diff --git a/src/features/AddModel/AddModelDialog/AddModelDialog.tsx b/src/features/AddModel/AddModelDialog/AddModelDialog.tsx
@@ -1,11 +1,7 @@
 /* eslint-disable max-lines-per-function */
 import { Button, Typography } from '@equinor/eds-core-react';
 import { useEffect, useState } from 'react';
-import {
-  AnalogueList,
-  AnalogueModelDetail,
-  MetadataDto,
-} from '../../../api/generated';
+import { AnalogueModelDetail } from '../../../api/generated';
 import { ModelInputFilesTable } from '../ModelInputFilesTable/ModelInputFilesTable';
 import { ModelMetadata } from '../ModelMetadata/ModelMetadata';
 import * as Styled from './AddModelDialog.styled';
@@ -21,13 +17,6 @@ interface AddModelDialogProps {
   existingData?: AnalogueModelDetail;
 }
 
-export default interface MetadataProps {
-  name: string;
-  description: string;
-  metadata: MetadataDto[];
-  analogue?: AnalogueList[];
-}
-
 interface FilesProps {
   NC?: File;
   INI?: File;
@@ -79,6 +68,10 @@ export const AddModelDialog = ({
     setFileSize(rawFile.size);
   }, [rawFile]);
 
+  useEffect(() => {
+    if (files.NC === undefined) setFileSize(0);
+  }, [files]);
+
   useEffect(() => {
     if (existingData) setMetadata(existingData);
   }, [existingData]);
@@ -150,6 +143,8 @@ export const AddModelDialog = ({
 
   const handleCancle = () => {
     setMetadata(defaultMetadata);
+    setFiles(defaultFiles);
+    setErrors({});
     cancel();
   };
 

diff --git a/src/features/AddModel/FileColumn/FileColumn.styled.tsx b/src/features/AddModel/FileColumn/FileColumn.styled.tsx
@@ -0,0 +1,20 @@
+import { Table } from '@equinor/eds-core-react';
+import styled from 'styled-components';
+
+export const uploadCell = styled(Table.Cell)`
+  alignitems: baseline;
+  > form {
+    > label {
+      > input {
+        width: 5%;
+      }
+    }
+  }
+`;
+
+export const filesizeCell = styled(Table.Cell)`
+  width: 15%;
+`;
+export const deleteCell = styled(Table.Cell)`
+  width: 10%;
+`;
diff --git a/src/features/AddModel/FileColumn/FileColumn.tsx b/src/features/AddModel/FileColumn/FileColumn.tsx
@@ -0,0 +1,78 @@
+import { Button, Table } from '@equinor/eds-core-react';
+import { delete_to_trash as deleteIcon } from '@equinor/eds-icons';
+import { ChangeEvent } from 'react';
+import IconButton from '../../../components/IconButton/IconButton';
+import { FileUploader } from '../FileUploader/FileUploader';
+import * as Styled from './FileColumn.styled';
+
+type FileDisplay = { isVisible: boolean; toggle: () => void };
+
+interface FileColumnProps {
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  onDelete: () => void;
+  INI?: true;
+  file?: File;
+  fileDisplay?: FileDisplay;
+  fileSize?: number;
+}
+export const FileColumn = ({
+  onChange,
+  onDelete,
+  INI,
+  file,
+  fileDisplay,
+  fileSize,
+}: FileColumnProps) => {
+  const DeleteButton = ({ onDelete }: { onDelete: () => void }) => (
+    <IconButton icon={deleteIcon} title="delete" onClick={onDelete} />
+  );
+
+  function humanFileSize(bytes: number, si = true, dp = 2) {
+    const thresh = si ? 1000 : 1024;
+
+    if (Math.abs(bytes) < thresh) {
+      return bytes + ' B';
+    }
+
+    const units = si
+      ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+      : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let u = -1;
+    const r = 10 ** dp;
+
+    do {
+      bytes /= thresh;
+      ++u;
+    } while (
+      Math.round(Math.abs(bytes) * r) / r >= thresh &&
+      u < units.length - 1
+    );
+
+    return bytes.toFixed(dp) + ' ' + units[u];
+  }
+
+  return (
+    <Table.Row className={`${INI ? 'ini' : 'nc'}-file`}>
+      <Styled.uploadCell>
+        <FileUploader
+          onChange={onChange}
+          file={file}
+          acceptType={INI ? 'INI' : 'NC'}
+        />
+      </Styled.uploadCell>
+      <Table.Cell>
+        {file && INI && (
+          <Button variant="outlined" onClick={fileDisplay?.toggle}>
+            {fileDisplay?.isVisible ? 'Hide' : 'Show'}
+          </Button>
+        )}
+      </Table.Cell>
+      <Styled.filesizeCell>
+        {fileSize ? humanFileSize(fileSize) : '-'}
+      </Styled.filesizeCell>
+      <Styled.deleteCell>
+        {file && <DeleteButton onDelete={onDelete} />}
+      </Styled.deleteCell>
+    </Table.Row>
+  );
+};
diff --git a/src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx b/src/features/AddModel/ModelInputFilesTable/ModelInputFilesTable.tsx
@@ -1,55 +1,9 @@
 /* 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';
-import IconButton from '../../../components/IconButton/IconButton';
-import { FileUploader } from '../FileUploader/FileUploader';
+import { Table } from '@equinor/eds-core-react';
+import { FileColumn } from '../FileColumn/FileColumn';
 
 type FileDisplay = { isVisible: boolean; toggle: () => void };
 
-interface FileColumnProps {
-  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
-  onDelete: () => void;
-  INI?: true;
-  file?: File;
-  fileDisplay?: FileDisplay;
-  fileSize?: number;
-}
-
-const FileColumn = ({
-  onChange,
-  onDelete,
-  INI,
-  file,
-  fileDisplay,
-  fileSize,
-}: FileColumnProps) => {
-  const DeleteButton = ({ onDelete }: { onDelete: () => void }) => (
-    <IconButton icon={deleteIcon} title="delete" onClick={onDelete} />
-  );
-
-  return (
-    <Table.Row className={`${INI ? 'ini' : 'nc'}-file`}>
-      <Table.Cell>
-        <FileUploader
-          onChange={onChange}
-          file={file}
-          acceptType={INI ? 'INI' : 'NC'}
-        />
-      </Table.Cell>
-      <Table.Cell>
-        {file && INI && (
-          <Button variant="outlined" onClick={fileDisplay?.toggle}>
-            {fileDisplay?.isVisible ? 'Hide' : 'Show'}
-          </Button>
-        )}
-      </Table.Cell>
-      <Table.Cell>{file ? fileSize : '-'}</Table.Cell>
-      <Table.Cell>{file && <DeleteButton onDelete={onDelete} />}</Table.Cell>
-    </Table.Row>
-  );
-};
-
 export const ModelInputFilesTable = ({
   fileDisplay,
   files,