working on edit functionality

Author: ziggrace

src/components/ComponentDisplay.vue

@@ -131,7 +131,8 @@ export default {
       'activeComponent',
       'componentMap',
       'componentChildrenMultiselectValue',
-      'imagePath'
+      'imagePath',
+      'activeComponentObj'
     ]),
 
     // used in VueDraggableResizeable component
@@ -377,6 +378,14 @@ export default {
         if (!(this.activeComponent === '')) this.setActiveComponent('')
       }
     }
+  },
+  watch: {
+    activeComponentObj: {
+      handler () {
+        // console.log('componentMap has changed')
+        this.value = ''
+      }
+    }
   }
 }
 </script>
@@ -462,4 +471,4 @@ export default {
 #counter {
   margin-top: 20px;
 }
-</style>
+</style>

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -64,8 +64,11 @@ export default {
       // console.log('component', component)
       return component
     },
-    activeComponentData () {
+    activeComponentData() {
       return this.activeComponentObj
+      // set(name){
+      //   this.editComponentName(name) 
+      // }
     },
     options () {
       const val = this.activeRouteDisplay.map(component => component.componentName)
@@ -77,7 +80,8 @@ export default {
     ...mapActions([
       'setActiveComponent',
       'deleteComponent',
-      'deleteActiveComponent'
+      'deleteActiveComponent',
+      'editComponentName'
     ]),
     // Set component as active component from left side dropdown
     // onActivated (componentData) {
@@ -106,11 +110,17 @@ export default {
       if (this.activeComponent !== '') {
         this.setActiveComponent('')
       }
+    },
+    editCompName(name){
+      if (name) this.editComponentName(name)
+      console.log(this.routes[this.activeRoute])
+      console.log(this.activeComponentObj)
+      console.log(this.activeComponent)
     }
   },
   watch: {
     activeComponentObj: function () {
-      this.newName = this.activeComponentObj.componentName
+      if (this.activeComponentObj) this.newName = this.activeComponentObj.componentName
     }
   }
 }

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -51,7 +51,7 @@ Description:
           id="add-actions-btn"
           class="add-btn"
           color="secondary"
-          label="Add Action(s)"
+          label="Map Action(s)"
           @click="addActionToComp"
         />
       </div>
@@ -95,7 +95,7 @@ Description:
           id="add-state-btn"
           class="add-btn"
           color="secondary"
-          label="Add State"
+          label="Map State"
           @click="addStateToComp"
         />
       </div>
@@ -107,7 +107,7 @@ Description:
       standout="bg-secondary text-white"
       bottom-slots
       v-model="textProps"
-      label="Create Prop in Store"
+      label="Create Prop"
       dense
       class="input-add"
     >

src/store/mutations.js

@@ -170,7 +170,14 @@ const mutations = {
   // *** EDIT FUNCTIONALITY *** //////////////////////////////////////////////
 
   [types.EDIT_COMPONENT_NAME]: (state, payload) => {
-
+    // let temp = state.activeComponentObj
+    // temp.componentName = payload
+    let active = (state.routes[state.activeRoute].filter(comp => {
+      return comp.componentName === state.activeComponent
+    })[0])
+    active.componentName = payload
+    state.activeComponentObj = Object.assign({},
+      state.activeComponentObj, {componentName: payload})
   },
 
   // *** HTML ELEMENTS *** //////////////////////////////////////////////