From 785fa663e817dd2f58455ee3b968a8c5cc71f483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Paulius=20Preik=C5=A1a?= <preiksap@gmail.com>
Date: Mon, 24 Jun 2024 14:57:58 +0300
Subject: [PATCH] feat: styling

---
 .../displays/extension/FileInstance.tsx       |  19 ++-
 .../displays/extension/WorkspaceInstance.tsx  | 141 +++++++++++-------
 2 files changed, 104 insertions(+), 56 deletions(-)

diff --git a/GUI/front-end/src/components/displays/extension/FileInstance.tsx b/GUI/front-end/src/components/displays/extension/FileInstance.tsx
index 19986e7..c9891e3 100644
--- a/GUI/front-end/src/components/displays/extension/FileInstance.tsx
+++ b/GUI/front-end/src/components/displays/extension/FileInstance.tsx
@@ -45,6 +45,9 @@ const FileInstance: React.FC = () => {
         data.append('file_name', fileName);
 
         await createFile.mutateAsync(data);
+
+        setFile(null);
+        setFileName('');
     }
 
     const dataURLtoBlob = (file : string | ArrayBuffer | null) => {
@@ -82,7 +85,16 @@ const FileInstance: React.FC = () => {
                         px: '10px',
                     }}
                 >
+                    <Box 
+                        sx={{
+                            display: 'flex',
+                            flexDirection: 'row',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                        }}>
                     <FileInput onFileSelect={onFileSelect} />
+                    {file && fileName && (fileName)}
+                    </Box>
                     <Button
                         variant="contained"
                         sx={{
@@ -91,12 +103,15 @@ const FileInstance: React.FC = () => {
                             borderRadius: '10px',
                             height: '40px',
                             px: '10px',
+                            marginBottom: '10px',
+                            marginTop: '10px',
                         }}
+                        fullWidth
+                        disabled={!file || !fileName}
                         onClick={() => createNewFile()}
                     >
                         {languageContext.language === 'en' ? 'Upload file' : 'Įkelti failą'}
                     </Button>
-                    {file && fileName && (fileName)}
                     {
                         files?.length > 0 ? (
                             files.map((file) => (
@@ -115,7 +130,7 @@ const FileInstance: React.FC = () => {
                                             await deleteFile.mutateAsync(data);
                                         }}
                                     >
-                                        <DeleteForeverIcon sx={{ height: '40px' }} />
+                                        <DeleteForeverIcon sx={{ height: '30px' }} />
                                     </IconButton>
                                 </Typography>
                             ))
diff --git a/GUI/front-end/src/components/displays/extension/WorkspaceInstance.tsx b/GUI/front-end/src/components/displays/extension/WorkspaceInstance.tsx
index 7e821b2..99c8501 100644
--- a/GUI/front-end/src/components/displays/extension/WorkspaceInstance.tsx
+++ b/GUI/front-end/src/components/displays/extension/WorkspaceInstance.tsx
@@ -1,4 +1,4 @@
-import { Select, useTheme, styled, MenuItem, TextField, Button, IconButton } from "@mui/material";
+import { Select, useTheme, styled, MenuItem, Button, IconButton, Input, FormControl, InputLabel } from "@mui/material";
 import { ArrowDropDown as ArrowDropDownIcon } from '@mui/icons-material/';
 import { useLanguageContext } from "../../../contexts";
 import { useWorkspaceContext } from "../../../contexts/tool/UseWorkspaceContext";
@@ -15,6 +15,7 @@ const WorkspaceInstance: React.FC = () => {
 
     const [awailableWorkspaces, setAwailableWorkspaces] = useState<string[]>([]);
     const [newWorkspace, setNewWorkspace] = useState<string>('');
+    const [isOpen, setIsOpen] = useState<boolean>(false);
 
     const { data, isLoading, isFetching } = useGetWorkspaces();
     const createWorkspace = useCreateWorkspace();
@@ -36,19 +37,33 @@ const WorkspaceInstance: React.FC = () => {
 
     return (
         <>
-            <TextField
-                variant="standard"
-                sx={{
-                    color: Theme.palette.text.secondary,
-                    backgroundColor: Theme.palette.background.default,
-                    borderRadius: '10px',
-                    height: '40px',
-                    px: '10px',
-                }}
-                label={languageContext.language === 'en' ? 'Create new workspace' : 'Pridėti darbo aplinką'}
-                value={newWorkspace}
-                onChange={(e) => setNewWorkspace(e.target.value)}
-            />
+            <FormControl variant="standard" sx={{ marginBottom: '10px' }}>
+                    {!newWorkspace && 
+                    <InputLabel
+                        htmlFor="new-workspace-input"
+                        sx={{
+                            color: Theme.palette.text.primary,
+                            transform: 'translate(10px, 25px)',
+                            zIndex: 1,
+                        }}
+                    >
+                        {languageContext.language === 'en' ? 'Create new workspace' : 'Pridėti darbo aplinką'}
+                    </InputLabel>}
+                    <Input
+                        id="new-workspace-input"
+                        sx={{
+                            color: Theme.palette.text.secondary,
+                            backgroundColor: Theme.palette.background.default,
+                            borderRadius: '10px',
+                            height: '40px',
+                            px: '10px',
+                            zIndex: 0,
+                        }}
+                        disableUnderline={true}
+                        value={newWorkspace}
+                        onChange={(e) => setNewWorkspace(e.target.value)}
+                    />
+            </FormControl>
             <Button
                 variant="contained"
                 sx={{
@@ -59,52 +74,70 @@ const WorkspaceInstance: React.FC = () => {
                     px: '10px',
                 }}
                 onClick={() => createNewWorkspace()}
+                disabled={!newWorkspace}
             >
                 {languageContext.language === 'en' ? 'Create' : 'Sukurti'}
             </Button>
             {awailableWorkspaces.length > 0 && !isFetching && !isLoading && (
                 <>
-                <Select
-                    variant="standard"
-                    IconComponent={styled(ArrowDropDownIcon)({
-                        width: '24px',
-                        height: '24px',
-                    })}
-                    disableInjectingGlobalStyles={true}
-                    disableUnderline={true}
-                    sx={{
-                        color: Theme.palette.text.secondary,
-                        backgroundColor: Theme.palette.background.default,
-                        borderRadius: '10px',
-                        height: '40px',
-                        px: '10px',
-                    }}
-                    value={workspaceContext.workspace || ''}
-                    onChange={(e) => workspaceContext.update(e.target.value as string)}
-                >
-                     {
-                        awailableWorkspaces.map((value) => (
-                            <MenuItem
-                                key={value}
-                                value={value}
-                                sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
-                            >
-                                {value}
-                                <IconButton
-                                    edge="end"
-                                    aria-label="delete"
-                                    size="small"
-                                    onClick={ async (e) => {
-                                        e.stopPropagation();
-                                        await deleteWorkspace.mutate(value);
-                                        workspaceContext.update('');
-                                    }}
+                <FormControl variant="standard" sx={{ marginBottom: '10px' }}>
+                    {!workspaceContext.workspace && 
+                        <InputLabel
+                            htmlFor="new-workspace-input"
+                            sx={{
+                                color: Theme.palette.text.primary,
+                                transform: 'translate(10px, 25px)',
+                                zIndex: 1,
+                            }}
+                        >
+                            {languageContext.language === 'en' ? 'Select workspace' : 'Pasirinkti darbo aplinką'}
+                        </InputLabel>}
+                    <Select
+                        variant="standard"
+                        IconComponent={styled(ArrowDropDownIcon)({
+                            width: '24px',
+                            height: '24px',
+                        })}
+                        disableInjectingGlobalStyles={true}
+                        disableUnderline={true}
+                        sx={{
+                            color: Theme.palette.text.secondary,
+                            backgroundColor: Theme.palette.background.default,
+                            borderRadius: '10px',
+                            height: '40px',
+                            px: '10px',
+                        }}
+                        value={workspaceContext.workspace || ''}
+                        onChange={(e) => workspaceContext.update(e.target.value as string)}
+                        onOpen={() => setIsOpen(true)}
+                        onClose={() => setIsOpen(false)}
+                    >
+                        {
+                            awailableWorkspaces.map((value) => (
+                                <MenuItem
+                                    key={value}
+                                    value={value}
+                                    sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
                                 >
-                                    <DeleteForeverIcon sx={{ height: '40px' }} />
-                                </IconButton>
-                            </MenuItem>
-                    ))}
-                </Select>
+                                    {value}
+                                    {isOpen &&
+                                        <IconButton
+                                            edge="end"
+                                            aria-label="delete"
+                                            size="small"
+                                            onClick={ async (e) => {
+                                                e.stopPropagation();
+                                                await deleteWorkspace.mutate(value);
+                                                workspaceContext.update('');
+                                            }}
+                                        >
+                                            <DeleteForeverIcon sx={{ height: '30px' }} />
+                                        </IconButton>
+                                    }
+                                </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
                 <FileInstance />
                 </>
             )}