Merge pull request #31 from deanfchung/master

delete button now sets active component to empty string. it also works

Author: drewngyen

src/components/CodeSnippet.vue

@@ -44,7 +44,7 @@ export default {
     // calls createTemplate and createBoiler to generate snippet
     createCodeSnippet (componentName, children) {
       let result = `${this.createTemplate(componentName, children)}${this.createBoiler(componentName, children)}`
-      console.log(`createCodeSnippet result: ${result}`)
+      //console.log(`createCodeSnippet result: ${result}`)
       return result
     },
     createTemplate (componentName, children) {
@@ -58,7 +58,7 @@ export default {
       return `<template>\n ${output}${templateTagStr}  </div>\n</template>`
     },
     writeTemplateTag (componentName) {
-      console.log('writeTemplateTag invoked!')
+      //console.log('writeTemplateTag invoked!')
       // create reference object
       const htmlElementMap = {
         div: ['<div>', '</div>'],
@@ -82,7 +82,7 @@ export default {
         outputStr += htmlElementMap[el.text][1]
         outputStr += `  \n`
       }
-      console.log(`outputStr from writeTemplateTag: ${outputStr}`)
+      //console.log(`outputStr from writeTemplateTag: ${outputStr}`)
       return outputStr
     },
     createBoiler (componentName, children) {
@@ -110,7 +110,7 @@ export default {
   },
   // updates code snippet, but broken cause children undefined, shows `function () { [native code] }`
   updated () {
-    console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
+    //console.log(`code: ${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`)
     this.code = `${this.createCodeSnippet(this.activeComponent, this.componentMap[this.activeComponent].children)}`
   },
   beforeDestroy () {

src/components/CreateComponent.vue

@@ -18,7 +18,7 @@
     </div>
     <ParentMultiselect />
     <br />
-    <q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
+    <q-btn id="add-component-btn" class="glossy" color="teal" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
   </div>
 </template>
 

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -15,7 +15,7 @@
                 {{componentData.componentName}}
                 <!-- <br> -->
               </div>
-              <q-btn round flat icon="highlight_off" />
+              <q-btn round flat icon="highlight_off" v-on:click.stop='handleClick(componentData)'/>
             </div>
           </q-item-section>
         </q-item>
@@ -44,11 +44,14 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent']),
+    ...mapActions(['setActiveComponent','deleteComponent']),
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)
       this.activeComponentData.isActive = true
-      console.log('this.activeComponent', this.activeComponent)
+    },
+    handleClick (componentData) {
+      this.deleteComponent(componentData)
+      this.setActiveComponent('')
     }
   }
 }

src/components/Tree.vue

@@ -65,7 +65,7 @@ export default {
       this.tree = build['App']
     }
   },
-  mounted () {
+  created () {
     this.buildTree()
   }
 }

src/store/actions.js

@@ -117,8 +117,11 @@ const actions = {
     commit(types.PARENT_SELECTED, payload)
   },
   [types.deleteRoute]: ({ state, commit }, payload) => {
-    console.log('stat in actions:', state)
     commit(types.DELETE_ROUTE, payload)
+  },
+  [types.deleteComponent]: ({state, commit }, payload) => {
+    console.log('payload in actions:', payload)
+    commit(types.DELETE_COMPONENT, payload)
   }
 }
 

src/store/mutations.js

@@ -133,7 +133,6 @@ const mutations = {
     state.routes = Object.assign({}, payload)
   },
   // invoked when a component is deleted
-  //
   [types.SET_ACTIVE_ROUTE_ARRAY]: (state, payload) => {
     state.routes[state.activeRoute] = payload
   },
@@ -187,7 +186,19 @@ const mutations = {
     delete stateCopy.routes[payload]
     delete stateCopy.componentMap[payload]
     state = stateCopy
-    console.log('aftermutations state', state)
+  },
+  [types.DELETE_COMPONENT]: (state,payload) => {
+    const stateCopy = state
+    let compArr = stateCopy.routes[stateCopy.activeRoute]
+    for (let i = 0; i < compArr.length;i++){
+      if (compArr[i].componentName==payload.componentName){
+        compArr.splice(i,1)
+      }
+    }
+    delete state.componentMap[payload.componentName]
+    state.routes[state.activeRoute] = compArr
+    console.log('new state', state)
+    
   }
 }
 

src/store/types.js

@@ -40,6 +40,7 @@ export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const PARENT_SELECTED = 'PARENT_SELECTED'
 export const DELETE_ROUTE = 'DELETE_ROUTE'
+export const DELETE_COMPONENT = 'DELETE_COMPONENT'
 
 // Actions
 export const registerComponent = 'registerComponent'
@@ -73,3 +74,4 @@ export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateOpenModal = 'updateOpenModal'
 export const parentSelected = 'parentSelected'
 export const deleteRoute = 'deleteRoute'
+export const deleteComponent = 'deleteComponent'