committing edit component name action

Author: Schillaci767

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -7,22 +7,24 @@ Description:
 <template>
   <div class="home-sidebar">
      <q-input
-      @keyup.enter.native="editComponentName(newName)"
+      @keyup.enter.native="editCompName(newName)"
       standout="bg-secondary text-white"
       bottom-slots
+      v-on:keyup.delete.stop
       v-model="newName"
       label="Edit name"
       dense
       class="input-add"
-    >
-      <template v-slot:append>
+    />
+      <!-- <template v-slot:append>
         <q-btn
           round
           dense
           flat
-          icon="add"
-          @click="createNewAction(textAction)"
+          icon="fas fa-edit"
+          @click="editCompName(newName)"
         />
+      </template> -->
     <multiselect
       class='multiselect'
       v-model="value"
@@ -82,6 +84,10 @@ export default {
     //   this.setActiveComponent(componentData.componentName)
     //   this.activeComponentData.isActive = true
     // },
+    //
+    // deleteCircumvent (e) {
+    //   e.preventDefault()
+    // },
     // Deletes the selected component
     deleteSelectedComp (componentData) {
       if (componentData) {
@@ -101,15 +107,12 @@ export default {
         this.setActiveComponent('')
       }
     }
+  },
+  watch: {
+    activeComponentObj: function () {
+      this.newName = this.activeComponentObj.componentName
+    }
   }
-  // watch: {
-  //   activeComponent: function () {
-  //     // console.log('watching activeComponent in Footer');
-  //     if (this.activeComponent === '' && this.selectedElementList.length !== 0) {
-  //       this.tab = 'html'
-  //     }
-  //   }
-  // }
 }
 </script>
 

src/store/actions.js

@@ -155,6 +155,11 @@ const actions = {
   },
   // End of Vuex Actions section //////////////////////////////////////////
 
+  // Action primarily for edit functionality////////////////////////////////////////
+  [types.editComponentName]: ({ commit }, payload) => {
+    commit(types.EDIT_COMPONENT_NAME, payload)
+  },
+
   // Actions dispatched from left hand panel////////////////////////////////////////
 
   [types.addToComponentElementList]: ({ commit }, payload) => {

src/store/mutations.js

@@ -166,6 +166,13 @@ const mutations = {
     state.activeComponentObj = null
     state.activeComponentObj = active
   },
+
+  // *** EDIT FUNCTIONALITY *** //////////////////////////////////////////////
+
+  [types.EDIT_COMPONENT_NAME]: (state, payload) => {
+
+  },
+
   // *** HTML ELEMENTS *** //////////////////////////////////////////////
 
   [types.ADD_NESTED_HTML]: (state, payload) => {

src/store/types.js

@@ -28,6 +28,7 @@ export const DELETE_FROM_QUEUE = 'DELETE_FROM_QUEUE'
 export const DELETE_PROJECT_TAB = 'DELETE_PROJECT_TAB'
 export const DELETE_ROUTE = 'DELETE_ROUTE'
 export const DELETE_SELECTED_ELEMENT = 'DELETE_SELECTED_ELEMENT'
+export const EDIT_COMPONENT_NAME = 'EDIT_COMPONENT_NAME'
 export const EMPTY_STATE = 'EMPTY_STATE'
 export const IMPORT_IMAGE = 'IMPORT_IMAGE'
 export const INCREMENT_PROJECT_ID = 'INCREMENT_PROJECT_ID'
@@ -79,6 +80,7 @@ export const deleteFromComponentHtmlList = 'deleteFromComponentHtmlList'
 export const deleteFromQueue = 'deleteFromQueue'
 export const deleteProjectTab = 'deleteProjectTab'
 export const deleteSelectedElement = 'deleteSelectedElement'
+export const editComponentName = 'editComponentName'
 export const importImage = 'importImage'
 export const incrementProjectId = 'incrementProjectId'
 export const openProject = 'openProject'