committing full edit functionality

Author: Schillaci767

src/components/CodeSnippet.vue

@@ -6,8 +6,8 @@ Description:
 
 <template>
   <div class="codesnippet-container">
-    <div class="top-p" v-if="activeComponent === ''">Select a component</div>
-    <div v-else>{{ `${activeComponent}.vue` }}</div>
+    <div class="top-p" v-if="this.activeComponent === ''">Select a component</div>
+    <div v-else>{{ `${this.activeComponent}.vue` }}</div>
     <prism-editor
       v-model="code"
       language="js"
@@ -172,19 +172,32 @@ export default {
     window.removeEventListener('resize', this.getWindowHeight)
   },
   watch: {
-    // If HTML elements or components are added, rerenders Code Snippet
-    componentMap: {
-      deep: true,
+
+    activeComponent: {
       handler () {
-        // console.log('component Map has changed');
+        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
           )}`
         }
       }
     }
+  },
+  // If HTML elements or components are added, rerenders Code Snippet
+  componentMap: {
+    deep: true,
+    handler () {
+      // console.log('component Map has changed');
+      if (this.componentMap[this.activeComponent]) {
+        this.code = `${this.createCodeSnippet(
+          this.activeComponent,
+          this.componentMap[this.activeComponent].children
+        )}`
+      }
+    }
   }
 }
 </script>

src/components/ComponentDisplay.vue

@@ -378,7 +378,7 @@ export default {
     }
   },
   watch: {
-    activeComponent: function(){
+    activeComponent: function () {
       this.onActivated(this.activeComponentObj)
     }
   }
@@ -466,4 +466,4 @@ export default {
 #counter {
   margin-top: 20px;
 }
-</style>
+</style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -64,10 +64,10 @@ export default {
       // console.log('component', component)
       return component
     },
-    activeComponentData() {
+    activeComponentData () {
       return this.activeComponentObj
       // set(name){
-      //   this.editComponentName(name) 
+      //   this.editComponentName(name)
       // }
     },
     options () {
@@ -111,13 +111,9 @@ export default {
         this.setActiveComponent('')
       }
     },
-    editCompName(name){
+    editCompName (name) {
       if (name) this.editComponentName(name)
       this.setActiveComponent(this.activeComponent)
-      // console.log(this.routes[this.activeRoute])
-      // console.log(this.activeComponentObj)
-      // console.log(this.activeComponent)
-      console.log(this.$refs.boxes)
     }
   },
   watch: {

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -31,7 +31,6 @@ Description:
     <template>
       <div id="action-select">
         <multiselect
-          v-on:keyup.delete.stop
           v-model="selectAction"
           class="multiselect"
           placeholder="Select Action"
@@ -42,6 +41,7 @@ Description:
           open-direction="top"
           :options="actionOptions"
           :searchable="true"
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No actions found.</span>
         </multiselect>
@@ -87,7 +87,7 @@ Description:
           open-direction="top"
           :options="stateOptions"
           :searchable="true"
-          v-on:keyup.delete.stop
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No state found.</span>
         </multiselect>
@@ -133,7 +133,7 @@ Description:
           open-direction="top"
           :options="propsOptions"
           :searchable="true"
-          v-on:keyup.delete.stop
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No props found.</span>
         </multiselect>
@@ -231,6 +231,12 @@ export default {
       'addPropsToComponent'
     ]),
 
+    // Prevent Delete on changes to seafrchable multiselect
+    stopDelete (e) {
+      if (e.code === 'Backspace') e.stopPropogation()
+      console.log(e)
+    },
+
     // Create's a new action that will be stored in the userActions array within store, and it will be added to the action drop-down menu
     createNewAction (text) {
       if (!this.userActions.includes(text) && text) {

src/store/mutations.js

@@ -177,8 +177,9 @@ const mutations = {
     })[0])
     active.componentName = payload
     state.activeComponentObj = Object.assign({},
-      state.activeComponentObj, {componentName: payload})
-    state.activeComponent = payload;
+      state.activeComponentObj, { componentName: payload })
+    state.activeComponent = payload
+    state.componentMap[state.activeComponent] = state.activeComponentObj
   },
 
   // *** HTML ELEMENTS *** //////////////////////////////////////////////