Merge pull request #12 from ziggrace/sean/edit

Sean/edit

Author: ziggrace

package-lock.json

@@ -50,6 +50,7 @@
     "@quasar/app": "^1.0.0",
     "@quasar/quasar-app-extension-testing": "^1.0.0",
     "@quasar/quasar-app-extension-testing-unit-jest": "^1.0.0",
+    "@vue/devtools": "^5.3.4",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",

package.json

@@ -342,7 +342,7 @@ export default {
     },
 
     // deactivated is emitted before activated
-    onDeactivated (componentData) {
+    onDeactivated () {
       if (this.activeComponent !== '') {
         this.activeComponentData.isActive = false
       }
@@ -382,7 +382,12 @@ export default {
   },
   watch: {
     activeComponent: function () {
-      this.onActivated(this.activeComponentObj)
+      if (this.activeComponent){
+        this.onActivated(this.activeComponentObj)
+      }
+      else{
+        this.onDeactivated()
+      }
     }
   }
 }

src/components/ComponentDisplay.vue

@@ -172,21 +172,18 @@ export default {
   beforeDestroy () {
     window.removeEventListener('resize', this.getWindowHeight)
   },
-  watch: {
-
-    activeComponent: {
-      handler () {
-        console.log('component Map has changed')
-        if (this.componentMap[this.activeComponent]) {
-          console.log('we made it here')
-          this.code = `${this.createCodeSnippet(
-            this.activeComponent,
-            this.componentMap[this.activeComponent].children
-          )}`
-        }
-      }
-    }
-  },
+  // watch: {
+  //   activeComponent: {
+  //     handler () {
+  //       if (this.componentMap[this.activeComponent]) {
+  //         this.code = `${this.createCodeSnippet(
+  //           this.activeComponent,
+  //           this.componentMap[this.activeComponent].children
+  //         )}`
+  //       }
+  //     }
+  //   }
+  // },
   // If HTML elements or components are added, rerenders Code Snippet
   componentMap: {
     deep: true,

src/components/dashboard_items/CodeSnippet.vue

@@ -19,7 +19,7 @@
         <q-tab-panel name="code">
           <CodeSnippet/>
         </q-tab-panel>
-       <q-tab-panel name="html" :style="{height: `${height}vh`}">
+       <q-tab-panel name="html">
           <HTMLQueue />
         </q-tab-panel>
         <q-tab-panel name="state">

src/components/dashboard_items/ComponentDetails.vue

@@ -39,8 +39,8 @@ Description:
       <span slot='noResult'>No components found.</span>
       </multiselect>
       <br/>
-    <h v-if="this.activeComponentObj"> Currently selected component: {{ activeComponentObj.componentName }} </h>
-    <h v-else> Select a component </h>
+    <p class="editName" v-if="this.activeComponentObj"> Currently selected component: {{ activeComponentObj.componentName }} </p>
+    <p class="editName" v-else > Select a component </p>
     <q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
   </div>
 </template>
@@ -58,7 +58,7 @@ export default {
   },
   components: { Multiselect },
   computed: {
-    ...mapState(['routes', 'activeRoute', 'activeComponent', 'activeComponentObj']),
+    ...mapState(['routes', 'activeRoute', 'activeComponent', 'activeComponentObj', 'componentMap']),
     activeRouteDisplay () {
       let component = this.routes[this.activeRoute]
       // console.log('component', component)
@@ -112,8 +112,12 @@ export default {
       }
     },
     editCompName (name) {
-      if (name) this.editComponentName(name)
+      if (name && name !== this.activeComponent && this.activeComponent) this.editComponentName(name)
       this.setActiveComponent(this.activeComponent)
+      console.log(this.activeComponentObj)
+      console.log(this.activeComponent)
+      console.log(this.componentMap)
+      console.log(typeof this.componentMap)
     }
   },
   watch: {
@@ -149,7 +153,7 @@ export default {
   justify-content: space-between;
 }
 
-h {
+.editName {
   color: white;
 }
 

src/components/home_sidebar_items/ComponentList.vue

@@ -4,7 +4,7 @@ Description:
   Functionality includes: N/A
   -->
 
-<template>
+<template @keyup.enter.native="createNewAction(textAction)">
   <div class="input-container">
     <hr />
     <!-- ACTION SECTION -->

src/components/home_sidebar_items/VuexForm.vue

@@ -175,11 +175,19 @@ const mutations = {
     let active = (state.routes[state.activeRoute].filter(comp => {
       return comp.componentName === state.activeComponent
     })[0])
+    // delete state.componentMap[state.activeComponent]
+    let temp = active.componentName
     active.componentName = payload
     state.activeComponentObj = Object.assign({},
       state.activeComponentObj, { componentName: payload })
     state.activeComponent = payload
-    state.componentMap[state.activeComponent] = state.activeComponentObj
+    if (temp !== payload) {
+      // Object.defineProperty(state.componentMap, state.activeComponent, state.activeComponentObj);
+      state.componentMap[state.activeComponent] = state.activeComponentObj
+      delete state.componentMap[temp];
+  }
+    // state.componentMap[state.activeComponent] = state.activeComponentObj
+    // access key of edited child to get componentName of parent
   },
 
   // *** HTML ELEMENTS *** //////////////////////////////////////////////
@@ -343,6 +351,7 @@ const mutations = {
         isActive
       }
     })
+    
   },
 
   [types.ADD_PARENT]: (state, payload) => {