#57 implement open modal dialog

MetaCell · Jun 5, 2023 · 0814b89 · 0814b89
1 parent e5e8608
commit 0814b89
Show file tree

Hide file tree

Showing 6 changed files with 268 additions and 23 deletions.
diff --git a/src/client/assets/styles/variables.js b/src/client/assets/styles/variables.js
@@ -110,7 +110,9 @@ const vars = {
 
   lightBlack: 'rgba(0, 0, 0, 0.8)',
   lightgray: "#F4F4F4",
-  optionTextColor: '#1A1A1A'
+  optionTextColor: '#1A1A1A',
+
+  disabledButtonBG: 'rgba(0, 122, 255, 0.2)'
 };
 
 export default vars;
diff --git a/src/client/components/common/CondaSelectionDialog.js b/src/client/components/common/CondaSelectionDialog.js
@@ -11,6 +11,9 @@ const {
 } = vars;
 
 export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
+  const onSelectChange = (event) => {
+    setState({condaEnv: event.target.value})
+  }
 
   return <Paper
     id='pnl-wall'
@@ -74,7 +77,14 @@ export const CondaSelectionDialog = ({state, setState, getMenuItems}) => {
           >
             {'Select conda environment:'}
           </Typography>
-          <CustomSelect state={state} setState={(val) => setState(val)} getMenuItems={getMenuItems} />
+          <CustomSelect
+            setState={(val) => setState(val)}
+            getMenuItems={getMenuItems}
+            placeholder="Conda environment"
+            value={state.condaEnv}
+            options={state.condaEnvs}
+            onSelectChange={(val) => onSelectChange(val)}
+          />
         </Box>
 
         <Button

diff --git a/src/client/components/common/CustomSelect.js b/src/client/components/common/CustomSelect.js
@@ -5,11 +5,8 @@ const {
   breadcrumbTextColor,
 } = vars;
 
-export const CustomSelect = ({state, setState, getMenuItems}) => {
+export const CustomSelect = ({setState, getMenuItems, placeholder, value, options, onSelectChange, showShrunkLabel = true}) => {
 
-  const onSelectChange = (event) => {
-    setState({condaEnv: event.target.value})
-  }
   return <FormControl
     fullWidth
     sx={{
@@ -29,24 +26,28 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
 
         "&.Mui-focused": {
           color: '#8F8F8F'
-        }
+        },
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        border: '0 !important',
       },
-
       "& .MuiInputLabel-shrink":  {
         transform: 'translateY(-150%)',
         fontSize: '10px',
-        color: '#8F8F8F'
+        color: '#8F8F8F',
+        display: !showShrunkLabel && value ? 'none' : 'block'
       },
     }}>
-    <InputLabel id="conda-environment-select-label">Conda environment</InputLabel>
+    <InputLabel id="conda-environment-select-label">{placeholder}</InputLabel>
     <Select
       labelId="conda-environment-select-label"
       id="conda-environment-select"
-      value={state.condaEnv}
-      label="Conda environment"
+      value={value}
       onChange={onSelectChange}
       renderValue={(selected) => selected}
       sx={{
+        color: breadcrumbTextColor,
+
         "& .MuiOutlinedInput-notchedOutline": {
           border: 0
         },
@@ -55,9 +56,8 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
             border: 0
           }
         },
-        color: breadcrumbTextColor,
         "& .MuiInput-input": {
-          paddingLeft: '17px'
+          paddingLeft: '17px',
         },
         "&:before, &:after": {
           border: "none",
@@ -69,7 +69,7 @@ export const CustomSelect = ({state, setState, getMenuItems}) => {
         },
       }}
     >
-      {getMenuItems()}
+      {getMenuItems(options, value)}
     </Select>
   </FormControl>
 }
diff --git a/src/client/components/common/Layout.js b/src/client/components/common/Layout.js
@@ -13,6 +13,7 @@ import {Box, LinearProgress, MenuItem, Paper} from "@mui/material";
 import {CondaSelectionDialog} from "./CondaSelectionDialog";
 import {DependenciesDialog} from "./DependenciesDialog";
 import vars from "../../assets/styles/variables";
+import {RunModalDialog} from "./RunModalDialog";
 const {
   listItemActiveBg,
   optionTextColor
@@ -24,16 +25,28 @@ const stateTransitions = require('../../../messageTypes').stateTransitions;
 
 const isFrontendDev = process.env.REACT_APP_FRONTEND_DEV === 'true';
 
+const selectModalOptions = {
+  PNL_input: 'Insert the PNL model input' ,
+  file_path: 'Use a file',
+  python_object_name: 'Type the name of a Python object contained in the PNL model'
+}
+
 class Layout extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       electronState: appStates.FRONTEND_STARTED,
       condaEnv: '',
+      modalDialogValue: '',
       condaEnvs: undefined,
       dependenciesFound: true,
       condaEnvSelection: false,
+      showRunModalDialog: false,
       spinnerEnabled: !isFrontendDev,
+      modalDialogOptions: Object.values(selectModalOptions),
+      PNL_input: "",
+      file_path: "",
+      python_object_name: ""
     };
 
     this.pnlFound = this.pnlFound.bind(this);
@@ -44,6 +57,7 @@ class Layout extends React.Component {
     this.setServerStarted = this.setServerStarted.bind(this);
     this.displayDependenciesDialog = this.displayDependenciesDialog.bind(this);
     this.displayCondaSelectionDialog = this.displayCondaSelectionDialog.bind(this);
+    this.displayRunModalDialog = this.displayRunModalDialog.bind(this);
   }
 
   async componentDidMount() {
@@ -94,22 +108,28 @@ class Layout extends React.Component {
     });
   }
 
+  openRunModalDialog(data) {
+    this.setState({
+      showRunModalDialog: true,
+    });
+  }
+
   onCloseCondaSelectionDialog() {
     console.log('you are closing CondaSelectionDialog')
   }
 
-  getMenuItems() {
-    return this.state.condaEnvs?.map((env) => {
+  getMenuItems(options, selectedOption) {
+    return options?.map((option) => {
       return (
-        <MenuItem id={`${env}-id`} value={env}>
+        <MenuItem id={`${option}-id`} value={option}>
         <Box width={1} sx={{
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
           color: optionTextColor
         }}>
-          {env}
-          {env === this.state.condaEnv && <CheckIcon style={{ fontSize: '1rem', color: listItemActiveBg }} />}
+          {option}
+          {option === selectedOption && <CheckIcon style={{ fontSize: '1rem', color: listItemActiveBg }} />}
         </Box>
       </MenuItem>
       )
@@ -154,6 +174,29 @@ class Layout extends React.Component {
   }
 
 
+  displayRunModalDialog() {
+    return (
+      this.state.showRunModalDialog && this.state.spinnerEnabled === false
+        ? <Rnd
+          size={{ width: '100%', height: '100%' }}
+          position={{ x: 0, y: 0 }}
+          disableDragging={true}
+          enableResizing={false}
+          style={{ zIndex: 1305 }}
+        >
+          <RunModalDialog
+            state={this.state}
+            setState={(val) => this.setState(val)}
+            getMenuItems={this.getMenuItems}
+            onCloseCondaSelectionDialog={this.onCloseCondaSelectionDialog}
+            selectModalOptions={selectModalOptions}
+          />
+        </Rnd>
+        : <></>
+    );
+  }
+
+
   displaySpinner() {
     return (
       this.state.spinnerEnabled
@@ -196,6 +239,7 @@ class Layout extends React.Component {
         {this.displaySpinner()}
         {this.displayDependenciesDialog()}
         {this.displayCondaSelectionDialog()}
+        {this.displayRunModalDialog()}
 
         {viewState === GUIViews.EDIT ? (
           <Box>