after merge

Author: aleckslu

src/components/home_sidebar_items/ComponentTab/ComponentTab.vue

@@ -2,6 +2,7 @@
 Functionality includes: if active component is selected, will switch view to editing mode. If not, it will be in create mode -->
 <template>
   <q-card id="store-cards">
+    <!-- <UploadImage v-if="activeComponent === ''" /> -->
     <CreateComponent v-if="activeComponent === ''"/>
     <EditDeleteComponents v-if="activeComponent !== ''"/>
   </q-card>
@@ -11,6 +12,7 @@ Functionality includes: if active component is selected, will switch view to edi
 import CreateComponent from './CreateComponent.vue'
 import EditDeleteComponents from './EditDeleteComponents.vue'
 import { mapState } from 'vuex'
+// import UploadImage from '../UploadImage.vue'
 
 export default {
   data () {
@@ -27,6 +29,7 @@ export default {
   components: {
     CreateComponent,
     EditDeleteComponents,
+    // UploadImage,
   }
 }
 </script>

src/components/home_sidebar_items/ComponentTab/CreateComponent.vue

@@ -12,7 +12,6 @@ Description:
     >
     <!-- will render if creating new component -->
       <q-input
-        v-if="activeComponent === ''"
         standout="bg-secondary text-white"
         bottom-slots
         v-on:keyup.delete.stop
@@ -32,11 +31,10 @@ Description:
         @activeLayer="addNestedNoActive"
       />
     </div>
-    <ParentMultiselect v-if="activeComponent === ''"></ParentMultiselect>
+    <ParentMultiselect></ParentMultiselect>
     <br />
 
     <q-btn
-      v-if="activeComponent ===''"
       id="add-component-btn"
       color="secondary"
       label="Create Component"

src/components/home_sidebar_items/ComponentTab/EditDeleteComponents.vue

@@ -347,7 +347,7 @@ export default {
       'deleteActiveComponent',
       'editComponentName',
       // 'deleteActionFromComponent',
-      // 'deletePropsFromComponent',
+      'deletePropsFromComponent',
       // 'deleteStateFromComponent',
       'updateComponentLayer',
       'updateActiveComponentChildrenValue',
@@ -375,10 +375,10 @@ export default {
     // },
 
     // delete selected props from active component
-    // deleteProp (prop) {
-    //   this.deletePropsFromComponent(prop)
-    //   console.log(this.activeComponentObj)
-    // },
+    deleteProp (prop) {
+      this.deletePropsFromComponent(prop)
+      console.log(this.activeComponentObj)
+    },
     // Set component as active component from left side dropdown
     onActivated (componentData) {
       this.setActiveComponent(componentData.componentName)

src/components/home_sidebar_items/StoreTab/StoreTab.vue

@@ -35,12 +35,12 @@ Functionality:
             </template>
           </q-input>
           <p v-if='!this.stateOptions.length'>No state in store</p>
-          <ul id="stateList">
+          <!-- <ul v-else id="stateList">
             <li v-for="state in stateOptions" v-bind:key="state">
               {{ state }}
             </li>
-          </ul>
-          <!-- <a
+          </ul> -->
+          <a
             v-else
             v-for="state in stateOptions" 
             :key="state"
@@ -52,12 +52,12 @@ Functionality:
                     <div class="component-info">
                       {{ state }}
                     </div>
-                    <q-btn round flat icon="highlight_off" v-on:click.stop="deleteUserState(state)" />
+                    <q-btn round flat icon="highlight_off" v-on:click.stop="deleteState(state)" />
                   </div>
                 </q-item-section>
               </q-item>
             </q-list>
-          </a> -->
+          </a>
         </q-tab-panel>
         <!-- store actions tab -->
         <q-tab-panel name="actions">
@@ -83,12 +83,12 @@ Functionality:
             </template>
           </q-input>
           <p v-if='!this.actionOptions.length'>No actions in store</p>
-          <ul id="actionList">
+          <!-- <ul id="actionList">
             <li v-for="action in actionOptions" :key="action">
               {{ action }}
             </li>
-          </ul>
-          <!-- <a
+          </ul> -->
+          <a
             v-else
             v-for="action in actionOptions" 
             :key="action"
@@ -100,12 +100,12 @@ Functionality:
                     <div class="component-info">
                       {{ action }}
                     </div>
-                    <q-btn round flat icon="highlight_off" v-on:click.stop="deleteUserActions(action)" />
+                    <q-btn round flat icon="highlight_off" v-on:click.stop="deleteAction(action)" />
                   </div>
                 </q-item-section>
               </q-item>
             </q-list>
-          </a> -->
+          </a>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
@@ -140,6 +140,8 @@ export default {
     ...mapActions([
       'createAction',
       'createState',
+      'deleteUserActions',
+      'deleteUserState',
     ]),
     // Creates a new action in userActions in the store
     createNewAction (text) {
@@ -156,8 +158,15 @@ export default {
       }
     },
     // Delete a selected action in the store
+    deleteAction (action) {
+      //if delete request comes in, send to actions
+      this.deleteUserActions(action);
+    },
     // Delete a selected state in the store
-    
+    deleteState (state) {
+      console.log('state: ', state);
+      this.deleteUserState(state);
+    }
   }
 }
 </script>

src/store/actions.js

@@ -166,15 +166,16 @@ const actions = {
   [types.deleteUserActions]: ({ state, commit }, payload) => {
     commit(types.DELETE_USER_ACTIONS, payload)
   },
+  
   [types.deleteUserState]: ({ state, commit }, payload) => {
-    
     // loops through component map and deletes all props
     // Object.keys(state.componentMap).forEach(prop => {
     //   commit(types.SET_ACTIVE_COMPONENT, prop.componentName)
     //   commit(types.REMOVE_ACTION_FROM_COMPONENT, payload)
     // })
     commit(types.DELETE_USER_STATE, payload)
   },
+  
   // End of Vuex Actions section //////////////////////////////////////////
 
   // Action primarily for edit functionality////////////////////////////////////////

src/store/mutations.js

@@ -219,6 +219,19 @@ const mutations = {
     state.activeComponentObj = temp
   },
 
+  [types.DELETE_USER_STATE]: (state, payload) => {
+    // delete state.userState[payload];
+    // console.log('userState: ', state.userState);
+    let index = state.userState.indexOf(payload);
+    state.userState.splice(index, 1);
+  },
+
+  [types.DELETE_USER_ACTIONS]: (state, payload) => {
+    // payload should be a string of the name of the action to remove
+    let index = state.userActions.indexOf(payload);
+    state.userActions.splice(index, 1);
+  },
+
   // *** EDIT FUNCTIONALITY *** //////////////////////////////////////////////
 
   [types.EDIT_COMPONENT_NAME]: (state, payload) => {