final touches, added default values for Vuex

Author: ziggrace

src/components/dashboard_items/ComponentDetails.vue

@@ -32,20 +32,23 @@ Description:
           <HTMLQueue />
         </q-tab-panel>
         <q-tab-panel name="state">
+          <p v-if='!this.activeComponentObj.state.length'>No state in component</p>
           <ul id="stateList">
             <li v-for="comp in compObj.state" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
         <q-tab-panel name="actions">
+          <p v-if='!this.activeComponentObj.actions.length'>No actions in component</p>
           <ul id="actionList">
             <li v-for="comp in compObj.actions" :key="comp">
               {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
         <q-tab-panel name="props">
+          <p v-if='!this.activeComponentObj.props.length'>No props in component</p>
           <ul id="propsList">
             <li v-for="comp in compObj.props" :key="comp">
               {{ comp }}

src/components/dashboard_items/HTMLQueue.vue

@@ -14,7 +14,7 @@ Description:
       group="people"
       class="list-group"
     >
-
+      <p v-if='!this.componentMap[this.activeComponent].htmlList.length'>No HTML elements in component</p>
       <div
       :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
       @dblclick.self="setActiveElement(element)"

src/components/home_sidebar_items/EditDeleteComponents.vue

@@ -95,6 +95,7 @@ Description:
       <toggle-button v-model="showState" class="toggle"/>
     </div>
     <hr v-if="showState">
+    <p v-if='showState && !this.activeComponentObj.state.length'>No state in component</p>
     <a
       v-for="s in this.activeComponentData.state"
       :key="s"
@@ -118,6 +119,7 @@ Description:
       <toggle-button v-model="showActions" class="toggle"/>
     </div>
     <hr v-if="showActions">
+    <p v-if='showActions && !this.activeComponentObj.actions.length'>No actions in component</p>
         <a
       v-for="action in this.activeComponentData.actions"
       :key="action"
@@ -141,6 +143,7 @@ Description:
       <toggle-button v-model="showProps" class="toggle" justify='end'/>
     </div>
     <hr v-if="showProps">
+    <p v-if='showProps && !this.activeComponentObj.props.length'>No props in component</p>
     <a
       v-for="prop in this.activeComponentData.props"
       :key="prop"

src/store/mutations.js

@@ -334,7 +334,10 @@ const mutations = {
     if (id === state.activeHTML) {
       state.activeHTML = ''
     }
-    state.componentMap[componentName].htmlList = htmlList
+    let newCompMap = state.componentMap
+    newCompMap[componentName].htmlList = htmlList
+    state.componentMap = Object.assign({}, newCompMap)
+    //state.componentMap[componentName].htmlList = htmlList
   },
 
   // deletes a element html tag from HTMLQueue