Merge pull request #1 from oslabs-beta/parent/child

Parent/Child Relationship Bug + HTML Nesting Bug

Author: chdavis0917

src/components/nav-buttons/ExportMenu.vue

@@ -22,13 +22,11 @@ import { useExportComponent } from "../composables/useExportComponent.js";
 import { mapState } from "vuex";
 const { fs, ipcRenderer } = window;
 
-import writeNested from "../../mixins/writeNested";
-import { result } from "lodash";
+// import writeNested from "../../mixins/writeNested";
 
 
 export default {
   name: "ExportProjectComponent",
-  mixins: [writeNested],
   methods: {
     useExportComponentBound() {
       useExportComponent.bind(this)();
@@ -227,7 +225,42 @@ test('renders ${componentName}', () => {
      `
      </el-badge>`],
       };
-
+      // function to loop through nested elements
+      function writeNested(childrenArray, indent) {
+        if (!childrenArray.length) {
+          return "";
+        }
+        let indented = indent + "  ";
+        let nestedString = "";
+
+        childrenArray.forEach((child) => {
+            nestedString += indented;
+            if (!child.text) {
+              nestedString += `<${child}/>\n`;
+            } else {
+              nestedString += htmlElementMap[child.text][0];
+              if (child.class !== "") {
+                nestedString += " " + "class = " + `"${child.class}"`;
+              }
+              if(child.binding !== "") {
+                nestedString += " " + "v-model = " + `"${child.binding}"`;
+              }
+              if (child.text === "img" || child.text === "input" || child.text === "link") {
+                nestedString += "/>";
+              } else { nestedString += ">"; }
+
+              if (child.children.length) {
+                nestedString += "\n";
+                nestedString += writeNested(child.children, indented);
+                nestedString += indented + htmlElementMap[child.text][1];
+                nestedString += "\n";
+              } else {
+                nestedString += htmlElementMap[child.text][1] + "\n";
+              }
+            }
+          });
+        return nestedString;
+      }
       // iterate through component's htmllist
       let htmlArr = this.componentMap[componentName].htmlList;
       let outputStr = ``;
@@ -328,12 +361,18 @@ test('renders ${componentName}', () => {
           return `<template>\n  <div id = "${compID}">\n${templateTagStr}${routeStr}  </div>\n</template>`;
         }
         else {
-
-          return `<template>\n  <div>\n\t${str}${templateTagStr}${routeStr}  </div>\n</template>`;
+          const arrOfChildComp = this.componentMap[componentName].children;
+          arrOfChildComp.forEach(childName => {
+            let childNameClass = this.componentMap[childName].htmlAttributes.class;
+            let childNameClassFullStr = (childNameClass === "") ? "" : ` class = '${childNameClass}'`;
+            routeStr += `    <${childName}${childNameClassFullStr}></${childName}>\n`
+          });
+          
+          return `<template>\n  <div>\n${str}${templateTagStr}${routeStr}  </div>\n</template>`;
         }
       }
       else {
-        return `<template>\n\t${str}${templateTagStr}${routeStr}\t</div>\n</template>`
+        return `<template>\n<div>\n\t${str}${templateTagStr}${routeStr}\t</div>\n</template>`
       }
     },
     /**
@@ -366,6 +405,20 @@ test('renders ${componentName}', () => {
         }
 
         let childrenComponentNames = "";
+        let childComponentImportNames = "";
+
+        const arrOfChildComp = this.componentMap[componentName].children;
+
+          arrOfChildComp.forEach(childName => {
+            // Build child component text string
+            if (childName !== arrOfChildComp[arrOfChildComp.length - 1]){
+              childrenComponentNames += "    " + childName + ",\n";
+            }
+            else {
+              childrenComponentNames += "    " + childName + "\n";
+            }
+            childComponentImportNames += `import ${childName} from '../components/${childName}.vue';\n`
+        })
 
         let data = "";
         data += "  data () {\n    return {";
@@ -416,6 +469,8 @@ test('renders ${componentName}', () => {
         } else {
           output = "\n\n<script>\n";
 
+          output+= `\n${childComponentImportNames}`;
+
           output += imports + "\nexport default {\n  name: '" + componentName + "'";
 
         }

src/components/right-sidebar/CodeSnippet.vue

@@ -27,7 +27,7 @@ import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
 import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 
-import writeNested from "../../mixins/writeNested";
+// import writeNested from "../../mixins/writeNested";
 
 export default {
   data() {
@@ -45,7 +45,6 @@ export default {
     // needs access to current component aka activeComponent
     ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
   },
-  mixins: [writeNested],
   methods: {
     snippetInvoke() {
       if (this.activeComponent !== '') {
@@ -77,14 +76,26 @@ export default {
     // Creates beginner boilerplate
     createTemplate(componentName) {
       let templateTagStr = this.writeTemplateTag(componentName);
-
+    if (this.activeComponentObj.htmlAttributes) {
       //if/else statement to determine if there are class and id attributes present in the html element
       if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id !== "") {
         return `<template>\n  <div id = "${this.activeComponentObj.htmlAttributes.id}" class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
       } else if (this.activeComponentObj.htmlAttributes.class !== "" && this.activeComponentObj.htmlAttributes.id === "") {
         return `<template>\n  <div class = "${this.activeComponentObj.htmlAttributes.class}">\n${templateTagStr}  </div>\n</template>`;
       } else if (this.activeComponentObj.htmlAttributes.class === "" && this.activeComponentObj.htmlAttributes.id !== "")
         return `<template>\n  <div id = "${this.activeComponentObj.htmlAttributes.id}">\n${templateTagStr}  </div>\n</template>`;
+        else {
+          let routeStr = '';
+          const arrOfChildComp = this.componentMap[componentName].children;
+          arrOfChildComp.forEach(childName => {
+            let childNameClass = this.componentMap[childName].htmlAttributes.class;
+            let childNameClassFullStr = (childNameClass === "") ? "" : ` class = '${childNameClass}'`;
+            routeStr += `    <${childName}${childNameClassFullStr}></${childName}>\n`
+          });
+          
+          return `<template>\n  <div>\n${templateTagStr}${routeStr}  </div>\n</template>`;
+        }
+    }
       else return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`;
     },
     // Creates <template> boilerplate
@@ -172,6 +183,44 @@ export default {
         htmlElementMap[child]=[`<${child}`, ""] //single
       })
 
+      function writeNested(childrenArray, indent) {
+        if (!childrenArray.length) {
+          return "";
+        }
+        let indented = indent + "  ";
+        let nestedString = "";
+
+        childrenArray.forEach((child) => {
+          nestedString += indented;
+          if (!child.text) {
+            nestedString += `<${child}/>\n`;
+          } else {
+            nestedString += htmlElementMap[child.text][0];
+            if (child.class !== "") {
+              nestedString += " " + "class=" + `"${child.class}"`;
+            }
+            if (child.binding !== "") {
+              if (child.text !== 'img' || child.text !== 'link') {
+                nestedString += ` v-model="${child.binding}"`
+
+              }
+            }
+            if (child.text === "img" || child.text === "input" || child.text === "link" || childComponents.includes(child.text)) {
+              nestedString += "/>";
+            } else { nestedString += ">"; }
+
+            if (child.children.length) {
+              nestedString += "\n";
+              nestedString += writeNested(child.children, indented);
+              nestedString += indented + htmlElementMap[child.text][1];
+              nestedString += "\n"
+            } else {
+              nestedString += htmlElementMap[child.text][1] + "\n";
+            }
+          }
+        });
+        return nestedString;
+      }
       // Iterates through active component's HTML elements list and adds to code snippet
       let htmlArr = this.componentMap[componentName].htmlList;
       let outputStr = ``;