OpenProjectComponent finished, functional

Author: Shanon Lee

src-electron/electron-main.js

@@ -50,6 +50,13 @@ ipcMain.handle('saveProject', async (event, arg) => {
   return result;
 })
 
+// Handle dialogs for OpenProjectComponent 
+ipcMain.handle('openProject', async (event, arg) => {
+  const result = await dialog.showOpenDialog(arg);
+  return result;
+})
+
+
 // ************** Slack OAuth functions **********************
 // Sends request to Slack for User's information,
 // then sends user information back to renderer process

src/components/file_system_interface/OpenProjectComponent.vue

@@ -0,0 +1,60 @@
+<!--
+Description:
+  Displays Open Project Button
+  Functionality includes: opening saved json file and storing data in state
+  -->
+
+<template>
+  <q-btn class="export-btn" color="secondary" label="Open Project" @click="openProjectJSON"/>
+</template>
+
+<script>
+// import fs from 'fs-extra'
+// const { remote } = require('electron')
+import { mapActions } from 'vuex';
+const Mousetrap = require('mousetrap');
+const { fs, ipcRenderer } = window; 
+
+export default {
+  name: 'OpenProjectComponent',
+  methods: {
+    ...mapActions(['openProject']),
+    // opens project
+    openJSONFile (data) {
+      if (data === undefined) return
+      const jsonFile = JSON.parse(fs.readFileSync(data[0], 'utf8'))
+      // console.log('json file', jsonFile)
+      this.openProject(jsonFile)
+    },
+    showOpenJSONDialog() {
+      ipcRenderer.invoke('openProject', {
+        properties: ['openFile'],
+        filters: [{
+          name: 'JSON Files',
+          extensions: ['json']
+        }]
+      })
+      .then(res => this.openJSONFile(res.filePaths))
+      .catch(err => console.log(err))
+    },
+
+    openProjectJSON () {
+      this.showOpenJSONDialog();
+    }
+  },
+  // on components creation these key presses will trigger open project
+  created () {
+    Mousetrap.bind(['command+o', 'ctrl+o'], () => {
+      this.openProjectJSON()
+    })
+  }
+}
+
+</script>
+
+ <style scoped>
+   .mr-sm {
+     margin-right: 0.2rem;
+   }
+ </style>
+

src/layouts/MyLayout.vue

@@ -39,7 +39,7 @@ Description:
         ></i>
         <i v-else class="fa fa-forward" id="unavailable" aria-hidden="true"></i>
 
-        <!-- <OpenProjectComponent /> -->
+        <OpenProjectComponent />
         <SaveProjectComponent />
         <ExportProjectComponent />
         <!-- </div> -->
@@ -107,7 +107,7 @@ Description:
 import Dashboard from "../components/dashboard_items/Dashboard.vue";
 import ExportProjectComponent from "../components/file_system_interface/ExportProject.vue";
 import SaveProjectComponent from "../components/file_system_interface/SaveProjectComponent.vue";
-// import OpenProjectComponent from "../c omponents/file_system_interface/OpenProjectComponent.vue";
+import OpenProjectComponent from "../components/file_system_interface/OpenProjectComponent.vue";
 // import UploadImage from "../components/home_sidebar_items/UploadImage.vue";
 import SlackLoginWindow from "../components/slack_login/SlackLoginWindow.vue";
 // import RouteDisplay from "../components/home_sidebar_items/RouteDisplay.vue";
@@ -131,7 +131,7 @@ export default {
     Dashboard,
     ExportProjectComponent,
     SaveProjectComponent,
-    // OpenProjectComponent,
+    OpenProjectComponent,
     // UploadImage,
     SlackLoginWindow,
     // ComponentTab,