actually finished export this time [email protected]

co-authored: Terry Tilley [email protected]

Author: ziggrace

src/components/file_system_interface/ExportProject.vue

@@ -223,86 +223,95 @@ export default {
      * @description imports child components into <script>
      */
     writeScript (componentName, children) {
-    //   let str = ''
-    //   children.forEach(name => {
-    //     str += `import ${name} from '@/components/${name}.vue';\n`
-    //   })
-    //   let childrenComponentNames = ''
-    //   children.forEach(name => {
-    //     childrenComponentNames += `\t\t${name},\n`
-    //   })
-    //   return `\n\n<script>\n${str}\nexport default {\n\tname: '${componentName}'
-    //   ,\n\tcomponents: {\n${childrenComponentNames}\t}\n};\n<\/script>`
-    // },
       // 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 => {
-        imports += `import ${name} from '@/components/${name}.vue';\n`
-      })
-
-      // add components section  
-      let childrenComponentNames = ''
-      children.forEach(name => {
-        childrenComponentNames += `    ${name},\n`
-      })
+      const currentComponent = this.componentMap[componentName]
+      const routes = Object.keys(this.routes)
+      console.log(componentName)
+      console.log(currentComponent)
+      if (!routes.includes(componentName)){
+        let imports = ''
+        if (currentComponent.actions.length || currentComponent.state.length){
+          imports += 'import { '
+          if (currentComponent.actions.length && currentComponent.state.length) {
+            imports += 'mapState, mapActions'
+          } 
+          else if (currentComponent.state.length) imports += 'mapState'
+          else imports += 'mapActions'
+          imports += ' } from "vuex"\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",`
+        // add imports for children
+        children.forEach(name => {
+          imports += `import ${name} from '@/components/${name}.vue';\n`
         })
-        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}",`
+        // add components section  
+        let childrenComponentNames = ''
+        children.forEach(name => {
+          childrenComponentNames += `    ${name},\n`
         })
-        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}",`
+        // if true add data section and populate with props
+        let data = ''
+        if (currentComponent.props.length){
+          data += '  data () {\n    return {'
+          currentComponent.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 (currentComponent.state.length){
+          computed += '  computed: {'
+          computed += '\n    ...mapState(['
+          currentComponent.state.forEach((state) =>{
+            computed += `\n      "${state}",`
+          })
+          computed += '\n    ]),\n'
+          computed += '  },\n'
+        }
+
+        // if true add methods section and populate with actions
+        let methods = ''
+        if (currentComponent.actions.length){
+          methods += '  methods: {'
+          methods += '\n    ...mapActions(['
+          currentComponent.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>'
+        return output
+      }
+      
+      else{
+        let str = ''
+        children.forEach(name => {
+          str += `import ${name} from '@/components/${name}.vue';\n`
+        })
+        let childrenComponentNames = ''
+        children.forEach(name => {
+          childrenComponentNames += `\t\t${name},\n`
         })
-        methods += '\n    ]),\n'
-        methods += '  },\n'
+        return `\n\n<script>\n${str}\nexport default {\n\tname: '${componentName}',
+        \n\tcomponents: {\n${childrenComponentNames}\t}\n};\n<\/script>`
       }
 
-      // 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>'
-      return output
     },
     /**
      * @description writes the <style> in vue component
@@ -472,7 +481,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['componentMap', 'imagePath', 'activeComponentObj'])
+    ...mapState(['componentMap', 'imagePath', 'routes'])
   }
 }
 

src/store/mutations.js

@@ -109,8 +109,11 @@ const mutations = {
     state.selectedActions = [];
     // super weird code, minor changes to objects are not reactive
     // setting to null and then resetting to object makes it reactive
-    state.activeComponentObj = null;
-    state.activeComponentObj = active;
+    // state.activeComponentObj = null;
+    // state.activeComponentObj = active;
+    state.activeComponentObj = Object.assign({}, active)
+
+    state.componentMap = Object.assign({}, state.componentMap, {[state.activeComponent]: state.activeComponentObj})
   },
 
   [types.CREATE_PROP]: (state, payload) => {
@@ -139,8 +142,9 @@ const mutations = {
       }
     }
     state.selectedProps = [];
-    state.activeComponentObj = null;
-    state.activeComponentObj = active;
+    state.activeComponentObj = Object.assign({}, active)
+
+    state.componentMap = Object.assign({}, state.componentMap, {[state.activeComponent]: state.activeComponentObj})
   },
 
   [types.CREATE_STATE]: (state, payload) => {
@@ -154,9 +158,6 @@ 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.activeComponentObj;
 
     if (!state.activeComponentObj.state) {
@@ -169,8 +170,11 @@ const mutations = {
       }
     }
     state.selectedState = [];
-    state.activeComponentObj = null;
-    state.activeComponentObj = active;
+    // state.activeComponentObj = null;
+    // state.activeComponentObj = active;
+    state.activeComponentObj = Object.assign({}, active)
+
+    state.componentMap = Object.assign({}, state.componentMap, {[state.activeComponent]: state.activeComponentObj})
   },
 
   [types.DELETE_ACTION_FROM_COMPONENT]: (state, payload) => {
@@ -399,7 +403,8 @@ const mutations = {
   },
   // pushs new component to componentMap
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
-    const { componentName, htmlList, children, parent, isActive } = payload;
+    const { componentName, htmlList, children, parent, isActive, actions, props } = payload;
+    const s = payload.state
     state.componentMap = Object.assign({}, state.componentMap, {
       [componentName]: {
         componentName,
@@ -411,7 +416,10 @@ const mutations = {
         children,
         parent,
         htmlList,
-        isActive
+        isActive,
+        actions,
+        props,
+        state: s
       }
     });
   },