Merge pull request #16 from ziggrace/sean/edit

Sean/edit

Author: ziggrace

src/components/dashboard_items/CodeSnippet.vue

@@ -40,7 +40,7 @@ export default {
   },
   computed: {
     // needs access to current component aka activeComponent
-    ...mapState(['componentMap', 'activeComponent'])
+    ...mapState(['componentMap', 'activeComponent', 'activeComponentObj'])
   },
   methods: {
     getWindowHeight (e) {
@@ -58,10 +58,12 @@ export default {
     },
     // Creates beginner boilerplate
     createTemplate (componentName, children) {
-      let output = ``
-      output += ` <div>\n`
+      // not sure why output was set up like this, was imputted into return statement
+      // using string literal
+      // let output = ``
+      // output += ` <div>\n`
       let templateTagStr = this.writeTemplateTag(componentName)
-      return `<template>\n ${output}${templateTagStr}  </div>\n</template>`
+      return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`
     },
     // Creates <template> boilerplate
     writeTemplateTag (componentName) {
@@ -132,16 +134,83 @@ export default {
     },
     // Creates boiler text for <script> and <style>
     createBoiler (componentName, children) {
-      let str = ''
+
+      // add import mapstate and mapactions if they exist
+      let imports = ''
+      if (this.activeComponentObj.actions.length || this.activeComponentObj.state.length){
+        imports += 'import { '
+        if (this.activeComponentObj.actions.length && this.activeComponentObj.state.length) {
+          imports += 'mapState, mapActions'
+        } 
+        else if (this.activeComponentObj.state.length) imports += 'mapState'
+        else imports += 'mapActions'
+        imports += ' } from "vuex"\n'
+      }
+
+      // add imports for children
       children.forEach(name => {
-        str += `import ${name} from '@/components/${name}.vue';\n`
+        imports += `import ${name} from '@/components/${name}.vue';\n`
       })
+
+      // add components section  
       let childrenComponentNames = ''
       children.forEach(name => {
         childrenComponentNames += `    ${name},\n`
       })
+
+      // if true add data section and populate with props
+      let data = ''
+      if (this.activeComponentObj.props.length){
+        data += '  data () {\n    return {'
+        this.activeComponentObj.props.forEach(prop => {
+          data += `\n      ${prop}: "PLACEHOLDER FOR VALUE",`
+        })
+        data += '\n'
+        data += '    }\n'
+        data += '  },\n'
+      }
+
+      // if true add computed section and populate with state
+      let computed = ''
+      if (this.activeComponentObj.state.length){
+        computed += '  computed: {'
+        computed += '\n    ...mapState(['
+        this.activeComponentObj.state.forEach((state) =>{
+          computed += `\n      "${state}",`
+        })
+        computed += '\n    ]),\n'
+        computed += '  },\n'
+      }
+
+      // if true add methods section and populate with actions
+      let methods = ''
+      if (this.activeComponentObj.actions.length){
+        methods += '  methods: {'
+        methods += '\n    ...mapActions(['
+        this.activeComponentObj.actions.forEach((action) => {
+          methods += `\n      "${action}",`
+        })
+        methods += '\n    ]),\n'
+        methods += '  },\n'
+      }
+
+      // concat all code within script tags
+      let output = '\n\n<script>\n'
+      output += imports + '\nexport default {\n  name: ' + componentName
+      output += ',\n  components: {\n'
+      output += childrenComponentNames + '  },\n'
+      output += data
+      output += computed
+      output += methods
+      output += '};\n<\/script>\n\n<style scoped>\n</style>'
+      // add props/data
+
+
       // 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>`
+      // return `\n\n<script>\n${str}\nexport default {\n  name: '${componentName}',\n  
+      // components: {\n${childrenComponentNames}  }\n};\n<\/script>\n\n<style scoped>\n
+      // </style>`
+      return output
     }
   },
   mounted () {

src/components/home_sidebar_items/ComponentList.vue

@@ -108,7 +108,7 @@ Description:
       </q-list>
       </a>
     </div>
-
+    <p v-else> Select Component to Enable Edit </p>
   </div>
 </template>
 

src/components/home_sidebar_items/CreateComponent.vue

@@ -98,6 +98,9 @@ export default {
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
+        actions: [],
+        props: [],
+        state: [],
         parent: {},
         isActive: false
       }

src/components/home_sidebar_items/VuexForm.vue

@@ -40,7 +40,7 @@ Description:
           :option-height="20"
           open-direction="top"
           :options="actionOptions"
-          :searchable="true"
+          :searchable="false"
           @search-change="stopDelete($event)"
         >
           <span slot="noResult">No actions found.</span>
@@ -86,7 +86,7 @@ Description:
           :option-height="20"
           open-direction="top"
           :options="stateOptions"
-          :searchable="true"
+          :searchable="false"
           @search-change="stopDelete($event)"
         >
           <span slot="noResult">No state found.</span>
@@ -132,7 +132,7 @@ Description:
           :option-height="20"
           open-direction="top"
           :options="propsOptions"
-          :searchable="true"
+          :searchable="false"
           @search-change="stopDelete($event)"
         >
           <span slot="noResult">No props found.</span>