vuex update

Author: ziggrace

src/components/ComponentDetails.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <q-card id="store-cards" v-if="active">
+    <q-card id="store-cards" v-if="this.activeComponentObj">
       <q-tabs
         v-model="tab"
         dense
@@ -14,30 +14,30 @@
         <q-tab name="props" label="Component Props" id="label-text" />
       </q-tabs>
       <q-tab-panels v-model="tab" animated class="html-bg text-white">
-        <q-tab-panel name="state">
+        <q-tab-panel name="state" v-model="compoent">
           <ul id="stateList">
-            <li v-for="state in stateOptions" :key="state">
-              {{ state }}
+            <li v-for="comp in activeState" :key="comp">
+              {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
         <q-tab-panel name="actions">
           <ul id="actionList">
-            <li v-for="action in actionOptions" :key="action">
-              {{ action }}
+            <li v-for="comp in activeActions" :key="comp">
+              {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
         <q-tab-panel name="props">
-          <ul id="actionList">
-            <li v-for="prop in propsOptions" :key="prop">
-              {{ prop }}
+          <ul id="propsList">
+            <li v-for="comp in activeProps" :key="comp">
+              {{ comp }}
             </li>
           </ul>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>
-    <h v-else>Select a component to show details</h>
+    <q-card v-else>Select a component to show details</q-card>
   </div>
 </template>
 
@@ -47,22 +47,45 @@ import { mapState } from "vuex";
 export default {
   name: "ComponentDetails",
   computed: {
-    ...mapState(["activeRoute", "routes", "activeComponent"]),
-    active() {
-      // this returns active component
-      return this.routes[this.activeRoute].filter((comp) => {
-        return comp.componentName === this.activeComponent;
-      })[0];
-    },
-    actionOptions() {
-      return this.active.actions;
-    },
-    stateOptions() {
-      return this.active.state;
+    ...mapState(["activeComponentObj"]),
+    // component: {
+    //     get(){
+    //         return this.activeComponentObj
+    //     }
+    // },
+    activeState: {
+        get(){
+            if (this.activeComponentObj) return this.activeComponentObj.state;
+            return []
+        }
     },
-    propsOptions() {
-      return this.active.props;
+    activeProps: {
+        get(){
+            if (this.activeComponentObj) return this.activeComponentObj.props;
+            return []
+        }
     },
+    activeActions: {
+        get(){
+            if (this.activeComponentObj) return this.activeComponentObj.actions;
+            return []
+        }
+    }
+    // componentActions: {
+    //   get() {
+    //     return this.$store.state.activeComponentObj.actions;
+    //   },
+    // },
+    // componentState: {
+    //   get() {
+    //     return this.$store.state.activeComponentObj.state;
+    //   },
+    // },
+    // componentProps: {
+    //   get() {
+    //     return this.$store.state.activeComponentObj.props;
+    //   },
+    // },
   },
   data() {
     return {

src/store/mutations.js

@@ -104,6 +104,7 @@ const mutations = {
       }
     }
     state.selectedActions = []
+    state.activeComponentObj = active
   },
 
   [types.CREATE_PROP]: (state, payload) => {
@@ -129,6 +130,7 @@ const mutations = {
       }
     }
     state.selectedProps = []
+    state.activeComponentObj = active
   },
 
   [types.CREATE_STATE]: (state, payload) => {
@@ -154,6 +156,7 @@ const mutations = {
       }
     }
     state.selectedState = []
+    state.activeComponentObj = active
   },
   // *** HTML ELEMENTS *** //////////////////////////////////////////////
 
@@ -370,6 +373,9 @@ const mutations = {
 
   [types.SET_ACTIVE_COMPONENT]: (state, payload) => {
     state.activeComponent = payload
+    state.activeComponentObj = state.routes[state.activeRoute].filter((comp) => {
+      return comp.componentName === state.activeComponent;
+    })[0];
     state.activeHTML = ''
     state.activeLayer = {
       id: '',

src/store/state/index.js

@@ -32,7 +32,9 @@ const newState = {
   projects: [{ filename: 'Untitled-1', lastSavedLocation: '' }],
 
   activeRoute: 'HomeView',
+  // need to change to activeComponentName
   activeComponent: '',
+  activeComponentObj: undefined,
   activeHTML: '',
   activeLayer: {
     id: '',