committing changes

Author: Schillaci767

src/components/CodeSnippet.vue

@@ -142,6 +142,7 @@ export default {
       children.forEach(name => {
         childrenComponentNames += `    ${name},\n`
       })
+      // eslint-disable-next-line no-useless-escape
       return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n  components: {\n${childrenComponentNames}  }\n};\n<\/script>\n\n<style scoped>\n</style>`
     }
   },

src/components/ComponentDetails.vue

@@ -14,7 +14,7 @@
         <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" v-model="compoent">
+        <q-tab-panel name="state">
           <ul id="stateList">
             <li v-for="comp in activeState" :key="comp">
               {{ comp }}
@@ -42,34 +42,34 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 
 export default {
-  name: "ComponentDetails",
+  name: 'ComponentDetails',
   computed: {
-    ...mapState(["activeComponentObj"]),
+    ...mapState(['activeComponentObj']),
     // component: {
     //     get(){
     //         return this.activeComponentObj
     //     }
     // },
     activeState: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.state;
-            return []
-        }
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.state
+        return []
+      }
     },
     activeProps: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.props;
-            return []
-        }
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.props
+        return []
+      }
     },
     activeActions: {
-        get(){
-            if (this.activeComponentObj) return this.activeComponentObj.actions;
-            return []
-        }
+      get () {
+        if (this.activeComponentObj) return this.activeComponentObj.actions
+        return []
+      }
     }
     // componentActions: {
     //   get() {
@@ -87,12 +87,12 @@ export default {
     //   },
     // },
   },
-  data() {
+  data () {
     return {
-      tab: "state",
-    };
-  },
-};
+      tab: 'state'
+    }
+  }
+}
 </script>
 
 <style lang="stylus" scoped>
@@ -156,12 +156,3 @@ i
   // give html background color of grey
   background-color #202122
 </style>
-
-
-let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
-
-    active.props
-    active.state
-    active.actions

src/components/DashboardVuexStore.vue

@@ -33,25 +33,25 @@
 </template>
 
 <script>
-import { mapState } from "vuex";
+import { mapState } from 'vuex'
 
 export default {
-  name: "VuexStore",
+  name: 'VuexStore',
   computed: {
-    ...mapState(["userActions", "userState"]),
-    actionOptions() {
-      return this.userActions;
-    },
-    stateOptions() {
-      return this.userState;
+    ...mapState(['userActions', 'userState']),
+    actionOptions () {
+      return this.userActions
     },
+    stateOptions () {
+      return this.userState
+    }
   },
-  data() {
+  data () {
     return {
-      tab: "state",
-    };
-  },
-};
+      tab: 'state'
+    }
+  }
+}
 </script>
 
 <style lang="stylus" scoped>

src/components/HomeSideDropDownItems/VuexForm.vue

@@ -136,133 +136,133 @@ Description:
 </template>
     <!-- :disabled="!componentNameInputValue.trim()" -->
 <script>
-import { mapState, mapActions } from "vuex";
-import Multiselect from "vue-multiselect";
+import { mapState, mapActions } from 'vuex'
+import Multiselect from 'vue-multiselect'
 
 export default {
-  name: "VuexForm",
+  name: 'VuexForm',
   components: {
-    Multiselect,
+    Multiselect
   },
-  data() {
+  data () {
     return {
-      textAction: "",
-      textState: "",
-      textProps: ""
-    };
+      textAction: '',
+      textState: '',
+      textProps: ''
+    }
   },
   computed: {
     ...mapState([
-      "routes",
-      "componentMap",
-      "activeComponent",
-      "activeRoute",
-      "selectedActions",
-      "selectedState",
-      "selectedProps",
-      "userActions",
-      "userState",
-      "userProps"
+      'routes',
+      'componentMap',
+      'activeComponent',
+      'activeRoute',
+      'selectedActions',
+      'selectedState',
+      'selectedProps',
+      'userActions',
+      'userState',
+      'userProps'
     ]),
-    actionOptions() {
-      return this.userActions;
+    actionOptions () {
+      return this.userActions
     },
-    propsOptions() {
-      return this.userProps;
+    propsOptions () {
+      return this.userProps
     },
-    stateOptions() {
-      return this.userState;
+    stateOptions () {
+      return this.userState
     },
     selectAction: {
-      get() {
-        return this.$store.state.selectedActions;
-      },
-      set(value) {
-        this.addActionSelected(value);
+      get () {
+        return this.$store.state.selectedActions
       },
+      set (value) {
+        this.addActionSelected(value)
+      }
     },
     selectState: {
-      get() {
-        return this.$store.state.selectedState;
-      },
-      set(value) {
-        this.addStateSelected(value);
+      get () {
+        return this.$store.state.selectedState
       },
+      set (value) {
+        this.addStateSelected(value)
+      }
     },
     selectProps: {
-      get() {
-        return this.$store.state.selectedProps;
+      get () {
+        return this.$store.state.selectedProps
       },
-      set(value) {
-        this.addPropsSelected(value);
-      },
-    },
-    
+      set (value) {
+        this.addPropsSelected(value)
+      }
+    }
+
   },
   methods: {
     ...mapActions([
-      "setActiveComponent",
-      "createAction",
-      "createState",
-      "createProp",
-      "addActionSelected",
-      "addStateSelected",
-      "addPropsSelected",
-      "addActionToComponent",
-      "addStateToComponent",
-      "addPropsToComponent"
+      'setActiveComponent',
+      'createAction',
+      'createState',
+      'createProp',
+      'addActionSelected',
+      'addStateSelected',
+      'addPropsSelected',
+      'addActionToComponent',
+      'addStateToComponent',
+      'addPropsToComponent'
     ]),
-    createNewAction(text) {
+    createNewAction (text) {
       if (!this.$store.state.userActions.includes(text)) {
-        this.createAction(text);
-        this.textAction = "";
+        this.createAction(text)
+        this.textAction = ''
       }
     },
-    addActionToComp() {
-      this.addActionToComponent(this.selectedActions);
+    addActionToComp () {
+      this.addActionToComponent(this.selectedActions)
       console.log(
-        "activeComponent",
+        'activeComponent',
         this.routes[this.activeRoute].filter((comp) => {
-          return comp.componentName === this.activeComponent;
+          return comp.componentName === this.activeComponent
         })[0]
-      );
+      )
     },
     createNewProp (text) {
       if (!this.$store.state.userProps.includes(text)) {
-        this.createProp(text);
-        this.textProps = "";
+        this.createProp(text)
+        this.textProps = ''
       }
     },
-    addPropsToComp() {
-      this.addPropsToComponent(this.selectedProps);
+    addPropsToComp () {
+      this.addPropsToComponent(this.selectedProps)
     },
-    createNewState(text) {
+    createNewState (text) {
       if (!this.$store.state.userState.includes(text)) {
-        this.createState(text);
-        this.textState = "";
+        this.createState(text)
+        this.textState = ''
       }
     },
-    addStateToComp() {
-      this.addStateToComponent(this.selectedState);
+    addStateToComp () {
+      this.addStateToComponent(this.selectedState)
     },
 
     // when multiselect is opened activeComponent is deselected to allow for parentSelected action
-    resetActiveComponent() {
-      if (this.activeComponent !== "") {
-        this.setActiveComponent("");
+    resetActiveComponent () {
+      if (this.activeComponent !== '') {
+        this.setActiveComponent('')
       }
-    },
+    }
   },
   // clears out value in mutiselect on creation of component
   watch: {
     componentMap: {
-      handler() {
+      handler () {
         // console.log('componentMap has changed')
-        this.value = "";
-      },
-    },
-  },
-};
+        this.value = ''
+      }
+    }
+  }
+}
 </script>
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

src/store/mutations.js

@@ -144,19 +144,19 @@ const mutations = {
   },
 
   [types.ADD_STATE_TO_COMPONENT]: (state, payload) => {
-    let active = (state.routes[state.activeRoute].filter(comp => {
-      return comp.componentName === state.activeComponent
-    })[0])
+    // let active = (state.routes[state.activeRoute].filter(comp => {
+    //   return comp.componentName === state.activeComponent
+    // })[0])
 
-    if (!active.state) {
-      active.state = payload
+    if (!state.activeComponentObj.state) {
+      state.activeComponentObj.state = payload
     } else {
       for (let s of payload) {
-        if (!active.state.includes(s)) { active.state.push(s) }
+        if (!state.activeComponentObj.state.includes(s)) { state.activeComponentObj.state.push(s) }
       }
     }
     state.selectedState = []
-    state.activeComponentObj = active
+    // state.activeComponentObj
   },
   // *** HTML ELEMENTS *** //////////////////////////////////////////////
 
@@ -374,8 +374,8 @@ 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];
+      return comp.componentName === state.activeComponent
+    })[0]
     state.activeHTML = ''
     state.activeLayer = {
       id: '',

src/store/state/index.js

@@ -34,7 +34,7 @@ const newState = {
   activeRoute: 'HomeView',
   // need to change to activeComponentName
   activeComponent: '',
-  activeComponentObj: undefined,
+  activeComponentObj: null,
   activeHTML: '',
   activeLayer: {
     id: '',