merged with dev

Author: aleckslu

.env.example

@@ -5,9 +5,9 @@
 
 SLACK_CLIENT_SECRET = "ENTER_CLIENT_SECRET_HERE"
 SLACK_CLIENT_ID = "ENTER_CLIENT_ID_HERE"
-SLACK_REDIRECT_URI = "REDIRECT URL HERE Currently 'overvuedev://test' for .env and 'overvue://slack' for .env.development"
+SLACK_REDIRECT_URI = "REDIRECT URL HERE"
 
 # https://www.npmjs.com/package/dotenv
-# https://www.npmjs.com/package/quasar-dotenv
-# https://v1.quasar.dev/quasar-cli/handling-process-env
-# https://v1.quasar.dev/quasar-cli/quasar-conf-js#using-dotenv
+# https://www.npmjs.com/package/quasar-dotenv 
+# https://v1.quasar.dev/quasar-cli/handling-process-env 
+# https://v1.quasar.dev/quasar-cli/quasar-conf-js#using-dotenv 

.gitignore

@@ -1,5 +1,4 @@
-#secret Api keys, Webhook URLs etc
-slackApiStuff.js
+#
 .env
 .env.development
 #
@@ -17,7 +16,10 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 /coverage
-package-lock.json
+<<<<<<< HEAD
+# package-lock.json
+=======
+>>>>>>> dev
 vetur.config.js
 
 # Editor directories and files
@@ -37,7 +39,4 @@ build/
 dist/
 node_modules/
 aws-exports.js
-awsconfiguration.json
-
-#secret Api keys, Webhook URLs etc
-slackApiStuff.js
+awsconfiguration.json

README.md

@@ -20,7 +20,10 @@
 * [Tutorial](#how-to-use)
   + [New Features Tutorial 2.0](#overvue-v20-how-to)
   + [New Features Tutorial 3.0](#overvue-v30-how-to)
-* [How to Run](#running-a-local-version)
+* [Installation](#installation)
+  + [General Installation](#installation)
+  + [For WSL](#wsl-installation)
+  + [For Slack OAuth](#slack-oauth)
 * [Contributing](#contributing)
 * [Authors](#authors)
 
@@ -157,7 +160,8 @@ package.json
 
 [↥Back to top](#table-of-contents)
 
-### Running a local version
+### Installation
+
 This app was developed using the Quasar framework, so first you will need to install the Quasar cli
 ```
 npm i -g @quasar/cli
@@ -166,18 +170,66 @@ Install dependencies
 ```
 npm i
 ```
+To open Vuejs devtools (devtools should be open before devmode, otherwise, you can justforce reload electron app in dev mode after opening dev tools)
+```
+./node_modules/.bin/vue-devtools
+```
 To run electron app in dev mode
 ```
 quasar dev -m electron
 ```
-**For WSL users, the ability to load the application requires a tool/application to run a linux display as WSL does not have any display drivers 
-since it is based off of just a CLI.
-I recommend X410 (https://www.microsoft.com/en-us/p/x410/9nlp712zmn9q), althought it does cost $10, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but require more set up.**
-
 To build a new .dmg / windows .exe
 ```
 quasar build -m electron
 ```
+### WSL Installation
+
+**The ability to load the application and/or devtools requires a tool/application to run a linux display as WSL does not have any display drivers since it is based off of just a CLI.
+I recommend X410 (https://x410.dev/), althought it does cost $15, for ease of use. There are free options such as VcXsrv(https://sourceforge.net/projects/vcxsrv/) that you can get, but requires more set up.**
+
+If you choose to use x410, you will need to set the environment DISPLAY variable on each console:
+
+So, to open either the Vue devtools or OverVue in dev mode, first start your X Server then enter into the terminal:
+For WSL 1 :
+```
+export DISPLAY=:0
+```
+For WSL 2 :
+```
+export DISPLAY=$(awk '/nameserver / {print $2; exit}' /etc/resolv.conf 2>/dev/null):0
+export LIBGL_ALWAYS_INDIRECT=1
+```
+followed by the command for the devtools or devmode.  If you want both open, enter commands above followed by starting the devtools:
+```
+./node_modules/.bin/vue-devtools
+```
+Then open a new terminal instance, set the DISPLAY value again (re-enter above command for DISPLAY), and start OverVue in dev mode:
+```
+quasar dev -m electron
+```
+
+### Slack OAuth
+
+For the Slack OAuth, you will need to create a Slack app through their website (https://api.slack.com/apps?new_app=1), so that you have your own Client Secret and Client ID. Then create two .env files (one for development and one for production).
+
+  1. Create a Slack App from the link above.  Copy your Client ID and Client Secret somewhere safe.
+  2. Create two .env files in the main root of this repository.  Name them:
+  ```
+  .env
+  .env.development
+  ```
+  3. Open .env and add these three environment variables.  Replace <client secret> and <client id> with the client id and client secret given to you when you created your Slack App.
+  ```
+  SLACK_CLIENT_SECRET = "<client secret>"
+  SLACK_CLIENT_ID = "<client id>"
+  SLACK_REDIRECT_URI = "overvue://slack"
+  ```
+  4. Next, open .env.development and do the same, just note that the SLACK_REDIRECT_URI will be different here:
+  ```
+SLACK_CLIENT_SECRET = "<client secret>"
+SLACK_CLIENT_ID = "<client id>"
+SLACK_REDIRECT_URI = "overvuedev://test"
+  ```
 
 [↥Back to top](#table-of-contents)
 

src-electron/main-process/electron-main.dev.js

@@ -1,6 +1,6 @@
 /**
  * This file is used specifically and only for development. It installs
- * `electron-debug` & `vue-devtools`. There shouldn't be any need to
+ * `electron-debug`. There shouldn't be any need to
  *  modify this file, but it can be used to extend your development
  *  environment.
  */

src/components/ComponentDisplay.vue

@@ -137,6 +137,19 @@ export default {
         }
       }
     });
+    // listener for the copy
+    window.addEventListener('copy', () => {
+      // if there is an activeComponent, copy info to state using dispatch
+      if (this.activeComponent) {
+        console.log('copied!', this.activeComponent);
+        this.$store.dispatch("copyActiveComponent");
+      }
+    });
+
+    window.addEventListener('paste', () => {
+      this.$store.dispatch("pasteActiveComponent");
+      console.log('pasted');
+    })
   },
 
   computed: {
@@ -394,7 +407,13 @@ export default {
       if (event.target.className === "component-display grid-bg") {
         if (!(this.activeComponent === "")) this.setActiveComponent("");
       }
+    },
+    
+    // event handler for copying (ctrl+C)
+    copyActiveComponent() {
+      console.log('copied');
     }
+
   },
   watch: {
     activeComponent: function() {

src/components/dashboard_items/Dashboard.vue

@@ -20,7 +20,7 @@ Description:
       >
         <q-tab name="detail" id="label-text"><i class="fas fa-code"></i></q-tab>
         <q-tab name="tree" id="label-text"><i class="fas fa-code-branch fa-flip-vertical" /></q-tab>
-        <q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab>
+        <!-- <q-tab name="store" id="label-text" ><i class="fas fa-store-alt"></i></q-tab> -->
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white ">
         <q-tab-panel name="detail">
@@ -29,9 +29,9 @@ Description:
         <q-tab-panel name="tree" >
           <Tree />
         </q-tab-panel>
-        <q-tab-panel name="store">
+        <!-- <q-tab-panel name="store">
           <VuexStore />
-        </q-tab-panel>
+        </q-tab-panel> -->
       </q-tab-panels>
     </q-card>
     </div>
@@ -41,13 +41,13 @@ Description:
 <script>
 import { mapState, mapActions } from "vuex";
 import Tree from "./Tree";
-import VuexStore from "./DashboardVuexStore.vue";
+// import VuexStore from "./DashboardVuexStore.vue";
 import ComponentDetails from "./ComponentDetails";
 
 export default {
   components: {
     Tree,
-    VuexStore,
+    // VuexStore,
     ComponentDetails
   },
   computed: {

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -2,7 +2,7 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
-    <!-- <UploadImage v-if="activeComponent === ''" /> -->
+    <UploadImage v-if="activeComponent === ''" />
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -12,7 +12,7 @@ Functionality includes: if active component is selected, will switch view to edi
 import CreateComponent from './CreateComponent.vue'
 import EditDeleteComponents from './EditDeleteComponents.vue'
 import { mapState } from 'vuex'
-// import UploadImage from '../UploadImage.vue'
+import UploadImage from '../UploadImage.vue'
 
 export default {
   data () {
@@ -29,7 +29,7 @@ export default {
   components: {
     CreateComponent,
     EditDeleteComponents,
-    // UploadImage,
+    UploadImage,
   }
 }
 </script>

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -64,6 +64,7 @@ Description:
       active-color="secondary"
       indicator-color="secondary"
     >
+    <!-- Accordion for component settings -->
     <!-- HTML item that has Icon component -->
       <q-expansion-item
         group="accordion"

src/store/actions.js

@@ -76,6 +76,23 @@ const actions = {
     commit(types.UPDATE_COMPONENT_SIZE, payload)
   },
 
+  // copy the active component
+  [types.copyActiveComponent]: ({ commit }, payload) => {
+    commit(types.COPY_ACTIVE_COMPONENT, payload)
+  },
+  // paste the active component copy
+  [types.pasteActiveComponent]: ({ commit, state }) => {
+    commit(types.PASTE_ACTIVE_COMPONENT);
+    // if no other parents, update as parent of active route in componentMap
+    if (!Object.keys(state.pastedComponent.parent).length) {
+      commit(types.ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN, state.pastedComponent.componentName)
+      // if parents, update parent of pastedComponent to include as a child
+    } else {
+      commit(types.ADD_COPIED_PARENT, state.pastedComponent)
+    };
+    // add pastedComponent as a child of route in activeRoutes
+    commit(types.ADD_COMPONENT_TO_ACTIVE_ROUTE_IN_ROUTE_MAP, state.pastedComponent);
+  },
   // End of componentDisplay Section//////////////////////////////////
 
   // Actions that affect Routing //////////////////////////////////////

src/store/mutations.js

@@ -12,6 +12,7 @@ import {
   breadthFirstSearch,
   breadthFirstSearchParent
 } from '../utils/search.util'
+import _ from 'lodash'
 
 const cloneDeep = require('lodash.clonedeep')
 
@@ -220,17 +221,70 @@ const mutations = {
   },
 
   [types.DELETE_USER_STATE]: (state, payload) => {
-    // delete state.userState[payload];
-    // console.log('userState: ', state.userState);
+    // need to loop through components and take out matching state
+    for (const component in state.componentMap) {
+      // first don't go through if component is App or Homeview
+      if (component === 'App' || component === 'HomeView') continue;
+      // splice out if there is a match
+      const newState = state.componentMap[component].state;
+      const index = newState.indexOf(payload);
+      if (index > -1) {
+        newState.splice(index, 1);
+        state.componentMap[component].state = newState;
+      } else {
+        continue;
+      }
+    }
+    // remove from userState
     let index = state.userState.indexOf(payload);
     state.userState.splice(index, 1);
   },
 
   [types.DELETE_USER_ACTIONS]: (state, payload) => {
-    // payload should be a string of the name of the action to remove
+    for (const component in state.componentMap) {
+      // first don't go through if component is App or Homeview
+      if (component === 'App' || component === 'HomeView') continue;
+      // splice out if there is a match
+      const newActions = state.componentMap[component].actions;
+      const index = newActions.indexOf(payload);
+      if (index > -1) {
+        newActions.splice(index, 1);
+        state.componentMap[component].actions = newActions;
+      } else {
+        continue;
+      }
+    }
     let index = state.userActions.indexOf(payload);
     state.userActions.splice(index, 1);
   },
+  // copy and paste functionality
+  [types.COPY_ACTIVE_COMPONENT]: (state, payload) => {
+    // copy activeComponentObj and place in the state but without children
+    const copy = { ...state.activeComponentObj };
+    copy.componentName;
+    copy.children = [];
+    copy.isActive = false;
+    state.copiedComponent = copy;
+    // reset the number of copies created
+    state.copyNumber = 0;
+  },
+
+  [types.PASTE_ACTIVE_COMPONENT]: (state) => {
+    // check if copied exists 
+    if (state.copiedComponent) {
+      const { copiedComponent } = state;
+      // offset duplicate's coordinates
+      copiedComponent.x += 20;
+      copiedComponent.y += 20;
+      const pastedComponent = { ...copiedComponent }
+      state.componentMap[pastedComponent.componentName += ` (${state.copyNumber})`] = pastedComponent;
+      
+      // increment copyNumber
+      state.copyNumber += 1;
+      // track for pastedComponent
+      state.pastedComponent = pastedComponent;
+    }
+  },
 
   // *** EDIT FUNCTIONALITY *** //////////////////////////////////////////////
 
@@ -447,7 +501,7 @@ const mutations = {
   },
 
   [types.ADD_PARENT]: (state, payload) => {
-    state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected]
+    state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected];
     state.componentMap[state.parentSelected].children.push(
       payload.componentName
     )
@@ -456,6 +510,14 @@ const mutations = {
     )
   },
 
+  [types.ADD_COPIED_PARENT]: (state, payload) => {
+    const parentSelected = Object.values(payload.parent)[0].componentName;
+    // push into parent's children array
+    state.componentMap[parentSelected].children.push(payload.componentName)
+    // push into parent's htmlList array
+    state.componentMap[parentSelected].htmlList.push(payload.componentName)
+  },
+
   [types.DELETE_ACTIVE_COMPONENT]: state => {
     const { componentMap, activeComponent, activeRoute } = state