Add dialogs for open/save project (#80)

Author: volodymyrkochyn

main.js

@@ -1,5 +1,5 @@
 const {
-  app, BrowserWindow, Menu, ipcMain,
+  app, BrowserWindow, Menu, ipcMain, dialog,
 } = require('electron');
 const { spawn } = require('child_process');
 const path = require('node:path');
@@ -8,13 +8,18 @@ const Store = require('electron-store');
 const log = require('electron-log');
 const config = require('./rpe.config.json');
 const { kill } = require('./cleanup');
+const {
+  openProjectRequest, saveProjectRequest, sendProjectData, fetchProjectData,
+} = require('./projectFile');
 
 const logFormat = '[{h}:{i}:{s}.{ms}] [{level}] {text}';
 log.transports.console.format = logFormat;
 log.transports.file.format = logFormat;
 log.transports.file.fileName = 'rpe.log';
 log.transports.file.maxSize = 1024 * 1024 * 10; // 10MB
 
+const untitled = 'Untitled';
+
 const schema = {
   port: {
     type: 'number',
@@ -34,8 +39,86 @@ const schema = {
 
 const store = new Store({ schema });
 
+let projectMeta = {
+  file: '',
+  notes: '',
+  lang: 0,
+  name: '',
+  changed: false,
+};
+
 let mainWindow = null;
 
+function sendProjectDataToRenderer() {
+  mainWindow.webContents.send('projectData', projectMeta);
+}
+
+function saveProjectClicked() {
+  if (projectMeta.file === '') {
+    const file = saveProjectRequest(mainWindow);
+    if (file.length > 0) {
+      projectMeta.file = file;
+      projectMeta.changed = false;
+      mainWindow.setTitle(`${path.basename(file)} - Rapid Power Estimator`);
+      sendProjectData(projectMeta);
+    }
+  } else {
+    projectMeta.changed = false;
+    sendProjectData(projectMeta);
+  }
+}
+
+function projectSaved() {
+  if (projectMeta.changed) {
+    const result = dialog.showMessageBoxSync(mainWindow, {
+      type: 'question',
+      buttons: ['Cancel', 'Yes', 'No'],
+      defaultId: 0,
+      title: 'Save changes',
+      message: 'Do you want save your changes?',
+    });
+    if (result === 1) { // Yes
+      saveProjectClicked();
+    } else if (result === 2) { // No
+      return true;
+    }
+  }
+  return !projectMeta.changed;
+}
+
+function saveAsClicked() {
+  const file = saveProjectRequest(mainWindow);
+  if (file.length > 0) {
+    projectMeta.file = file;
+    projectMeta.changed = false;
+    mainWindow.setTitle(`${path.basename(file)} - Rapid Power Estimator`);
+  }
+}
+
+function newProjectClicked() {
+  if (projectSaved()) {
+    projectMeta = {
+      file: '', notes: '', lang: '0', name: '', changed: false,
+    };
+    mainWindow.setTitle(`${untitled} - Rapid Power Estimator`);
+    sendProjectDataToRenderer();
+  }
+}
+
+function openProjectClicked() {
+  if (projectSaved()) {
+    const projectFile = openProjectRequest(mainWindow);
+    if (projectFile.length > 0) {
+      projectMeta.file = projectFile;
+      fetchProjectData(projectMeta, (data) => {
+        projectMeta = data;
+        mainWindow.setTitle(`${path.basename(projectMeta.file)} - Rapid Power Estimator`);
+        sendProjectDataToRenderer();
+      });
+    }
+  }
+}
+
 const isDev = process.argv.find((val) => val === '--development');
 if (!isDev) {
   ['log', 'warn', 'error', 'info', 'debug'].forEach((method) => {
@@ -47,12 +130,23 @@ const template = [
   {
     label: 'File',
     submenu: [
-      { label: 'New Project' },
-      { label: 'Open Project' },
-      { label: 'Close Project' },
+      {
+        label: 'New Project',
+        click: () => { newProjectClicked(); },
+      },
+      {
+        label: 'Open Project',
+        click: () => { openProjectClicked(); },
+      },
       { label: 'Sample Project' },
-      { label: 'Save' },
-      { label: 'Save as...' },
+      {
+        label: 'Save',
+        click: () => { saveProjectClicked(); },
+      },
+      {
+        label: 'Save as...',
+        click: () => { saveAsClicked(); },
+      },
       { type: 'separator' },
       {
         label: 'Preferences',
@@ -144,6 +238,7 @@ const createWindow = () => {
       nodeIntegration: true,
       contextIsolation: true,
     },
+    title: `${untitled} - Rapid Power Estimator`,
   });
   const indexPath = path.join(app.getAppPath(), 'build/index.html');
   mainWindow.loadURL(`file://${indexPath}`);
@@ -168,6 +263,12 @@ const createWindow = () => {
   ipcMain.on('getConfig', (event, arg) => {
     mainWindow.webContents.send('loadConfig', store.store);
   });
+  ipcMain.on('projectData', (event, arg) => {
+    projectMeta.notes = arg.notes;
+    projectMeta.lang = arg.lang;
+    projectMeta.name = arg.name;
+    projectMeta.changed = true;
+  });
 };
 
 app.whenReady().then(() => {

package.json

@@ -23,7 +23,8 @@
       "rpe.config.json",
       "node_modules/**/*",
       "package.json",
-      "cleanup.js"
+      "cleanup.js",
+      "projectFile.js"
     ],
     "directories": {
       "buildResources": "resources"

preload.js

@@ -1,6 +1,6 @@
 const { contextBridge, ipcRenderer } = require('electron');
 
 contextBridge.exposeInMainWorld('ipcAPI', {
-  loadPreferences: (channel, listener) => ipcRenderer.on(channel, listener),
+  ipcRendererOn: (channel, listener) => ipcRenderer.on(channel, listener),
   send: (channel, data) => ipcRenderer.send(channel, data),
 });

projectFile.js

@@ -0,0 +1,40 @@
+const { dialog } = require('electron');
+
+function openProjectRequest(parent) {
+  const result = dialog.showOpenDialogSync(parent, {
+    properties: ['openFile'],
+    title: 'Open project file...',
+    filters: [{ name: 'Project file (*.rpe)', extensions: ['rpe'] }],
+  });
+  if (result !== undefined) {
+    return result[0];
+  }
+  return '';
+}
+
+function saveProjectRequest(parent) {
+  const result = dialog.showSaveDialogSync(parent, {
+    properties: ['showOverwriteConfirmation'],
+    title: 'Save project file...',
+    filters: [{ name: 'Project file (*.rpe)', extensions: ['rpe'] }],
+  });
+  return result === undefined ? '' : result;
+}
+
+function sendProjectData(projectData) {
+  // TODO pending API
+}
+
+function fetchProjectData(projectData, callback) {
+  // TODO pending API
+  callback({ // TODO, replace with real data
+    file: projectData.file, lang: '1', name: 'Name', notes: 'some notes', changed: false,
+  });
+}
+
+module.exports = {
+  openProjectRequest,
+  saveProjectRequest,
+  sendProjectData,
+  fetchProjectData,
+};

src/App.js

@@ -41,8 +41,11 @@ function App() {
   const [mode, setMode] = React.useState(false);
   const [autoSave, setAutoSave] = React.useState(false);
   const [modalOpen, setModalOpen] = React.useState(false);
-  const [notes, setNotes] = React.useState('');
-  const [topLevel, setTopLevel] = React.useState('');
+  const [projectData, setProjectData] = React.useState({
+    name: '',
+    lang: 0,
+    notes: '',
+  });
   const [config, setConfig] = React.useState({
     useDefaultFile: true,
     device_xml: '',
@@ -77,6 +80,10 @@ function App() {
     return Object.keys(object).find((key) => object[key] === value);
   }
 
+  function sendProjectData(projectDataValue) {
+    window.ipcAPI.send('projectData', projectDataValue);
+  }
+
   React.useEffect(() => {
     const key = getKeyByValue(Table, openedTable);
     toggleItemSelection(key);
@@ -86,14 +93,17 @@ function App() {
   React.useEffect(() => {
     window.ipcAPI.send('getConfig');
     if ((typeof window !== 'undefined')) {
-      window.ipcAPI.loadPreferences('preferences', (event, data) => {
+      window.ipcAPI.ipcRendererOn('preferences', (event, data) => {
         setConfig(data);
         showModal();
       });
-      window.ipcAPI.loadPreferences('loadConfig', (event, data) => {
+      window.ipcAPI.ipcRendererOn('loadConfig', (event, data) => {
         setConfig(data);
         server.setPort(data.port, setDevices);
       });
+      window.ipcAPI.ipcRendererOn('projectData', (event, data) => {
+        setProjectData({ notes: data.notes, lang: parseInt(data.lang, 10), name: data.name });
+      });
     }
   }, []);
 
@@ -113,11 +123,22 @@ function App() {
   };
 
   const handleNotesChange = (data) => {
-    setNotes(data);
+    const newData = { ...projectData, notes: data };
+    setProjectData(newData);
+    sendProjectData(newData);
   };
 
   // eslint-disable-next-line no-unused-vars
   const handleLangChange = (val) => {
+    const newData = { ...projectData, lang: parseInt(val.target.value, 10) };
+    setProjectData(newData);
+    sendProjectData(newData);
+  };
+
+  const handleTopNameChange = (val) => {
+    const newData = { ...projectData, name: val.target.value };
+    setProjectData(newData);
+    sendProjectData(newData);
   };
 
   const handleConfigChange = (name, val) => {
@@ -161,9 +182,9 @@ function App() {
             <div className="last-time">{time}</div>
             <div className="save-icon" onClick={() => setTime(moment().format(timeFormat))}><FiSave /></div>
           </div>
-          <input type="text" placeholder="Top level name" value={topLevel} onChange={(e) => setTopLevel(e.target.value)} />
-          <select value={0} onChange={handleLangChange}>
-            <option value={0} disabled>HDL lang</option>
+          <input type="text" placeholder="Top level name" value={projectData.name} onChange={handleTopNameChange} />
+          <select value={projectData.lang} onChange={handleLangChange}>
+            <option value={0}>HDL lang</option>
             <option value={1}>Verilog</option>
             <option value={2}>HDL</option>
           </select>
@@ -256,7 +277,7 @@ function App() {
         }
         {modalOpen && (
         <Notes
-          defaultValue={notes}
+          defaultValue={projectData.notes}
           closeModal={() => {
             setModalOpen(false);
           }}

src/index.html

@@ -7,7 +7,6 @@
       http-equiv="Content-Security-Policy"
       content="default-src 'self'; script-src 'self'"
     /-->
-    <title>Rapid Power Estimator</title>
     <link rel="stylesheet" href="../src/style.css" type="text/css" />
   </head>
   <body>