fixed merge conflicts

co-authored by: Faraz Moallemi [email protected]

Author: Schillaci767

src/components/dashboard_items/CodeSnippet.vue

@@ -42,7 +42,7 @@ export default {
   },
   computed: {
     // needs access to current component aka activeComponent
-    ...mapState(['componentMap', 'activeComponent', 'activeComponentObj'])
+    ...mapState(['componentMap', 'activeComponent', 'activeComponentObj']),
   },
   methods: {
     getWindowHeight (e) {
@@ -59,7 +59,7 @@ export default {
       return result
     },
     // Creates beginner boilerplate
-    createTemplate (componentName, children) {
+    createTemplate (componentName) {
       // not sure why output was set up like this, was imputted into return statement
       // using string literal
       // let output = ``
@@ -217,6 +217,14 @@ export default {
       return output
     }
   },
+  watch: {
+    // watches activeComponentObj for changes to make it reactive upon mutation
+    activeComponentObj: {
+      handler(){
+        this.code = this.createCodeSnippet(this.activeComponentObj.componentName, this.activeComponentObj.children)
+      }
+    }
+  },
   mounted () {
     // https://vuejs.org/v2/api/#Vue-nextTick
     // kinda like a promise, used for the window resize

src/components/file_system_interface/ExportProject.vue

@@ -223,17 +223,87 @@ export default {
      * @description imports child components into <script>
      */
     writeScript (componentName, children) {
-      let str = ''
+    //   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 => {
-        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 += `\t\t${name},\n`
+        childrenComponentNames += `    ${name},\n`
       })
-      return `\n\n<script>\n${str}\nexport default {\n\tname: '${componentName}',\n\tcomponents: {\n${childrenComponentNames}\t}\n};\n<\/script>`
-    },
 
+      // 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>'
+      return output
+    },
     /**
      * @description writes the <style> in vue component
      * if component is 'App', writes css, else returns <style scoped>
@@ -402,7 +472,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['componentMap', 'imagePath'])
+    ...mapState(['componentMap', 'imagePath', 'activeComponentObj'])
   }
 }
 

src/components/home_sidebar_items/EditDeleteComponents.vue

@@ -15,16 +15,17 @@ Description:
       label="Edit name"
       dense
       class="input-add"
-    />
-    <!-- <template v-slot:append>
+    >
+    <template v-slot:append>
         <q-btn
           round
           dense
           flat
           icon="fas fa-edit"
           @click="editCompName(newName)"
         />
-      </template> -->
+      </template>
+    </q-input>
     <multiselect
       class="multiselect"
       v-model="value"
@@ -56,14 +57,6 @@ Description:
               @click="e => handleLayer(e)"
             />
      {{ this.activeComponentObj.z }}
-       <!-- <q-btn
-              class="btn"
-              color="transparent"
-              text-color="white"
-              label="-"
-              @click="e => handleLayer(e)"
-            /> -->
-            <!-- <p id="counter" style="color: white">{{ this.activeComponentObj.z }}</p> -->
             <q-btn
               class="btn"
               color="transparent"
@@ -281,9 +274,9 @@ export default {
   margin: 1rem;
 }
 /* modifies top label */
-.component {
+/* .component {
   text-transform: uppercase;
-}
+} */
 /* modifies each list element */
 .q-list {
   margin-bottom: 0.5rem;

src/store/mutations.js

@@ -84,6 +84,7 @@ const mutations = {
   [types.CREATE_ACTION]: (state, payload) => {
     // if (!(state.userActions.includes(payload)))
     state.userActions.push(payload)
+    state.userActions.sort()
   },
 
   [types.ADD_ACTION_SELECTED]: (state, payload) => {
@@ -116,6 +117,7 @@ const mutations = {
   [types.CREATE_PROP]: (state, payload) => {
     // if (!(state.userActions.includes(payload)))
     state.userProps.push(payload)
+    state.userProps.sort()
   },
 
   [types.ADD_PROPS_SELECTED]: (state, payload) => {
@@ -146,6 +148,7 @@ const mutations = {
   [types.CREATE_STATE]: (state, payload) => {
     // if (!(state.userActions.includes(payload)))
     state.userState.push(payload)
+    state.userState.sort()
   },
 
   [types.ADD_STATE_SELECTED]: (state, payload) => {