Merge pull request #11 from oslabs-beta/fileStructure

File structure

Author: codeByCandlelight

src/components/ComponentDisplay.vue

@@ -145,9 +145,7 @@ export default {
 
     // used to delete active component
     activeComponentData () {
-      return this.activeRouteArray.filter(componentData => {
-        return componentData.componentName === this.activeComponent
-      })[0]
+      return this.activeComponentObj
     },
 
     childList () {
@@ -383,11 +381,8 @@ export default {
     }
   },
   watch: {
-    activeComponentObj: {
-      handler () {
-        // console.log('componentMap has changed')
-        this.value = ''
-      }
+    activeComponent: function () {
+      this.onActivated(this.activeComponentObj)
     }
   }
 }

src/components/dashboard_items/CodeSnippet.vue

@@ -7,8 +7,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"
@@ -173,19 +173,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/home_sidebar_items/ComponentList.vue

@@ -113,9 +113,7 @@ export default {
     },
     editCompName (name) {
       if (name) this.editComponentName(name)
-      console.log(this.routes[this.activeRoute])
-      console.log(this.activeComponentObj)
-      console.log(this.activeComponent)
+      this.setActiveComponent(this.activeComponent)
     }
   },
   watch: {

src/components/home_sidebar_items/VuexForm.vue

@@ -16,6 +16,7 @@ Description:
       label="Create Action in Store"
       dense
       class="input-add"
+      v-on:keyup.delete.stop
     >
       <template v-slot:append>
         <q-btn
@@ -40,6 +41,7 @@ Description:
           open-direction="top"
           :options="actionOptions"
           :searchable="true"
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No actions found.</span>
         </multiselect>
@@ -66,6 +68,7 @@ Description:
       label="Create State in Store"
       dense
       class="input-add"
+      v-on:keyup.delete.stop
     >
       <template v-slot:append>
         <q-btn round dense flat icon="add" @click="createNewState(textState)" />
@@ -84,6 +87,7 @@ Description:
           open-direction="top"
           :options="stateOptions"
           :searchable="true"
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No state found.</span>
         </multiselect>
@@ -110,6 +114,7 @@ Description:
       label="Create Prop"
       dense
       class="input-add"
+      v-on:keyup.delete.stop
     >
       <template v-slot:append>
         <q-btn round dense flat icon="add" @click="createNewProp(textProps)" />
@@ -128,6 +133,7 @@ Description:
           open-direction="top"
           :options="propsOptions"
           :searchable="true"
+          @search-change="stopDelete($event)"
         >
           <span slot="noResult">No props found.</span>
         </multiselect>
@@ -225,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

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