Added file import dialog, slightly changed the global button style

Strexas · Sep 3, 2024 · bfac0dd · bfac0dd
1 parent f55201a
commit bfac0dd
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 3 deletions.
diff --git a/...-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx b/...-end/src/features/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenu.tsx
@@ -1,5 +1,6 @@
 import {
   FileTreeItemContextMenuConfirmationDialog,
+  FileTreeItemContextMenuFileImportDialog,
   FileTreeItemContextMenuTextfieldDialog,
 } from '@/features/editor/components/fileTreeView/fileTreeItem';
 import { useWorkspaceContext } from '@/features/editor/hooks';
@@ -56,6 +57,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
   const Workspace = useWorkspaceContext();
   const [newFileDialogOpen, setNewFileDialogOpen] = useState(false);
   const [newFolderDialogOpen, setNewFolderDialogOpen] = useState(false);
+  const [fileImportDialogOpen, setFileImportDialogOpen] = useState(false);
   const [renameDialogOpen, setRenameDialogOpen] = useState(false);
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const menuItems = [];
@@ -69,7 +71,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
         New folder...
       </MenuItem>,
       <Divider key='divider-new' />,
-      <MenuItem key='import' onClick={() => handleActionContextMenu('import')} disabled>
+      <MenuItem key='import' onClick={() => handleActionContextMenu('import')}>
         Import...
       </MenuItem>
     );
@@ -107,8 +109,7 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
         setNewFolderDialogOpen(true);
         break;
       case 'import':
-        // TODO: Implement file import
-        console.log('import');
+        setFileImportDialogOpen(true);
         break;
       case 'export':
         // TODO: Implement file export
@@ -164,6 +165,11 @@ export const FileTreeItemContextMenu: React.FC<FileTreeItemContextMenuProps> = (
       >
         {menuItems}
       </Menu>
+      <FileTreeItemContextMenuFileImportDialog
+        open={Boolean(fileImportDialogOpen)}
+        onClose={() => setFileImportDialogOpen(false)}
+        onConfirm={() => {}}
+      />
       <FileTreeItemContextMenuTextfieldDialog
         open={Boolean(newFileDialogOpen)}
         action={FileTreeItemContextMenuActions.NEW_FILE}

diff --git a/...s/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuFileImportDialog.tsx b/...s/editor/components/fileTreeView/fileTreeItem/fileTreeItemContextMenuFileImportDialog.tsx
@@ -0,0 +1,95 @@
+import { FileTreeItemContextMenuStyledDialog } from '@/features/editor/components/fileTreeView/fileTreeItem';
+import { Close as CloseIcon, UploadFile as UploadFileIcon } from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Grid,
+  IconButton,
+  Typography,
+  useTheme,
+} from '@mui/material';
+import { ChangeEvent, useState } from 'react';
+
+export interface FileTreeItemContextMenuFileImportDialogProps {
+  open: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export const FileTreeItemContextMenuFileImportDialog: React.FC<FileTreeItemContextMenuFileImportDialogProps> = ({
+  open,
+  onClose,
+  onConfirm,
+}) => {
+  const Theme = useTheme();
+  const [filename, setFilename] = useState('');
+
+  const handleFileUpload = (e: ChangeEvent<HTMLInputElement>) => {
+    if (!e.target.files) {
+      return;
+    }
+    const file = e.target.files[0];
+    const { name } = file;
+    setFilename(name);
+  };
+
+  return (
+    <FileTreeItemContextMenuStyledDialog open={open} onClose={onClose}>
+      <DialogTitle>
+        <Grid container spacing={2} justifyContent='center' alignItems='center'>
+          <Grid item xs={9}>
+            <Typography sx={{ color: Theme.palette.primary.main, fontWeight: '700' }}>Import</Typography>
+          </Grid>
+          <Grid item xs={3} textAlign={'right'}>
+            <IconButton
+              onClick={onClose}
+              sx={{
+                color: Theme.palette.primary.main,
+              }}
+            >
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+        </Grid>
+      </DialogTitle>
+      <DialogContent sx={{ py: 0 }}>
+        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+          <Button component='label' variant='outlined' startIcon={<UploadFileIcon />} sx={{ marginRight: '1rem' }}>
+            Select a file...
+            <input type='file' accept='.csv, .txt' hidden onChange={handleFileUpload} />
+          </Button>
+          <Typography sx={{ fontSize: '1rem' }}>
+            {filename === '' ? (
+              'No file selected'
+            ) : (
+              <>
+                Selected file: <span style={{ fontWeight: 'bold' }}>{filename}</span>
+              </>
+            )}
+          </Typography>
+        </Box>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.text.secondary }}>Cancel</Typography>
+        </Button>
+        <Button
+          onClick={onConfirm}
+          variant='outlined'
+          sx={{
+            borderColor: Theme.palette.primary.main,
+            ':hover': { borderColor: Theme.palette.primary.main, bgcolor: Theme.palette.secondary.main },
+            '& .MuiTouchRipple-root': {
+              color: Theme.palette.primary.main,
+            },
+          }}
+        >
+          <Typography sx={{ fontSize: '1rem', color: Theme.palette.primary.main }}>Import</Typography>
+        </Button>
+      </DialogActions>
+    </FileTreeItemContextMenuStyledDialog>
+  );
+};
diff --git a/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/index.ts b/app/front-end/src/features/editor/components/fileTreeView/fileTreeItem/index.ts
@@ -3,6 +3,7 @@ export { FileTreeItemContextMenu } from './fileTreeItemContextMenu';
 export type { FileTreeItemContextMenuProps } from './fileTreeItemContextMenu';
 export { FileTreeItemContextMenuConfirmationDialog } from './fileTreeItemContextMenuConfirmationDialog';
 export type { FileTreeItemContextMenuConfirmationDialogProps } from './fileTreeItemContextMenuConfirmationDialog';
+export { FileTreeItemContextMenuFileImportDialog } from './fileTreeItemContextMenuFileImportDialog';
 export { FileTreeItemContextMenuStyledDialog } from './fileTreeItemContextMenuStyledDialog';
 export { FileTreeItemContextMenuTextfieldDialog } from './fileTreeItemContextMenuTextfieldDialog';
 export type { FileTreeItemContextMenuTextfieldDialogProps } from './fileTreeItemContextMenuTextfieldDialog';

diff --git a/app/front-end/src/stores/themeContextProvider.tsx b/app/front-end/src/stores/themeContextProvider.tsx
@@ -138,6 +138,14 @@ export const ThemeContextProvider: React.FC<Props> = ({ children }) => {
               },
             },
           },
+          MuiButton: {
+            styleOverrides: {
+              root: {
+                fontFamily: 'Nunito',
+                textTransform: 'none',
+              },
+            },
+          },
         },
       }),
     [mode]