Merge pull request #7 from oslabs-beta/katherine/addingstyleclass

Katherine/addingstyleclass

Author: jchan444

src/components/right-sidebar/CodeSnippet.vue

@@ -12,14 +12,8 @@ Description:
       Select a component
     </div>
     <div v-else>{{ `${this.activeComponent}.vue` }}</div>
-    <prism-editor
-      v-model="code"
-      :highlight="highlighter"
-      line-numbers
-      class="my-editor"
-      readonly
-    />
-    </div>
+    <prism-editor v-model="code" :highlight="highlighter" line-numbers class="my-editor" readonly />
+  </div>
 </template>
 
 <script>
@@ -28,6 +22,7 @@ import { mapState } from "vuex";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
 import { highlight, languages } from "prismjs/components/prism-core";
+import styleClassMap from '../../store/state/styleClassMap'
 import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
 import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
@@ -44,18 +39,19 @@ export default {
     PrismEditor,
   },
   computed: {
+    //add 
     // needs access to current component aka activeComponent
     ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
   },
   methods: {
-    snippetInvoke(){
-      if (this.activeComponent !== ''){
+    snippetInvoke() {
+      if (this.activeComponent !== '') {
         this.code = this.createCodeSnippet(
           this.componentMap[this.activeComponent].componentName,
           this.componentMap[this.activeComponent].children
         )
-        } else {
-          this.code = 'Your component boilerplate will be displayed here.'
+      } else {
+        this.code = 'Your component boilerplate will be displayed here.'
       }
     },
     //highlighter does not work: OverVue 6.0;
@@ -95,32 +91,16 @@ export default {
         "list-ul": ["<ul", "</ul>"],
         input: ["<input", ""], //single
         navbar: ["<nav", "</nav>"],
-        header:["<header","</header>"],
-        footer:["<footer", "</footer>"],
+        header: ["<header", "</header>"],
+        footer: ["<footer", "</footer>"],
         meta: ["<meta", "</meta>"],
-        h1:["<h1", "</h1>"],
-        h2:["<h2", "</h2>"],
-        h3:["<h3", "</h3>"],
-        h4:["<h4", "</h4>"],
-        h5:["<h5", "</h5>"],
-        h6:["<h6", "</h6>"],
+        h1: ["<h1", "</h1>"],
+        h2: ["<h2", "</h2>"],
+        h3: ["<h3", "</h3>"],
+        h4: ["<h4", "</h4>"],
+        h5: ["<h5", "</h5>"],
+        h6: ["<h6", "</h6>"],
       };
-   //test//
-    //   function writeClass(componentName) {
-    //   if (this.componentMap[componentName]?.classList?.length > 0) {
-    //     let commentStr = '<!--'
-    //     this.componentMap[componentName].classList.forEach((el) => {
-    //       commentStr += "\n"
-    //       commentStr += el;
-    //     })
-    //     commentStr += '\n-->\n\n'
-    //     return commentStr;
-    //   } else {
-    //     return ''
-    //   }
-    //  };
-      // Helper function that recursively iterates through the given html element's children and their children's children.
-      // also adds proper indentation to code snippet
       function writeNested(childrenArray, indent) {
         if (!childrenArray.length) {
           return "";
@@ -134,13 +114,13 @@ export default {
             nestedString += `<${child}/>\n`;
           } else {
             nestedString += htmlElementMap[child.text][0];
-              if(child.class !== "") {
-                nestedString += " " + "class = " + `"${el.class}"`;
-                }
-              if(child.text === "img" || child.text === "input" || child.text === "link") {
-                nestedString += "/>";
-              } else {nestedString += ">";}
-                
+            if (child.class !== "") {
+              nestedString += " " + "class = " + `"${el.class}"`;
+            }
+            if (child.text === "img" || child.text === "input" || child.text === "link") {
+              nestedString += "/>";
+            } else { nestedString += ">"; }
+
             if (child.children.length) {
               nestedString += "\n";
               nestedString += writeNested(child.children, indented);
@@ -157,21 +137,22 @@ export default {
       // Iterates through active component's HTML elements list and adds to code snippet
       let htmlArr = this.componentMap[componentName].htmlList;
       console.log("ALERT")
-      console.log(htmlArr[0].class)
-      console.log(htmlArr[0].children)
+      console.log('hellloo')
+      console.log("here", htmlArr[0].class)
+      console.log(htmlArr[0].children);
       let outputStr = ``;
       // eslint-disable-next-line no-unused-vars
-      for (let el of htmlArr) {
+      for (const el of htmlArr) {
         if (!el.text) {
           outputStr += `    <${el}/>\n`;
         } else {
           outputStr += `    `;
-            outputStr += htmlElementMap[el.text][0]
-      //if conditional to check class
-            if(el.class !== "") {
-              outputStr += " " + "class = " + `"${el.class}"`;
-            }
-              outputStr += ">";
+          outputStr += htmlElementMap[el.text][0]
+          //if conditional to check class
+          if (el.class !== "") {
+            outputStr += " " + "class = " + `"${el.class}"`;
+          }
+          outputStr += ">";
           if (el.children.length) {
             outputStr += "\n";
             outputStr += writeNested(el.children, `    `);
@@ -204,7 +185,7 @@ export default {
         imports += ' } from "vuex";\n';
       }
 
-       // if Typescript toggle is on, import defineComponent
+      // if Typescript toggle is on, import defineComponent
       if (this.exportAsTypescript === "on") {
         imports += 'import { defineComponent } from "vue";\n';
       }
@@ -256,6 +237,16 @@ export default {
         methods += "  },\n";
       }
 
+      let htmlArray = this.componentMap[componentName].htmlList;
+      console.log("down here", htmlArray);
+      let styleString = "";
+      for (const html of htmlArray) {
+        if (!html.class) styleString = "";
+        if (html.class) {
+          styleString += `.${html.class} {\n}\n`
+        }
+      }
+
       // concat all code within script tags
       // if exportAsTypescript is on, out should be <script lang="ts">
       let output;
@@ -276,28 +267,28 @@ export default {
         output += "});\n<\/script>\n\n<style scoped>\n</style>"
 
       } else {
-        output += "};\n<\/script>\n\n<style scoped>\n</style>"
+        output += `}; \n <\/script>\n\n<style scoped>\n${styleString}</style > `
       }
-      return output;
+      return output
     },
   },
   watch: {
     // watches activeComponentObj for changes to make it reactive upon mutation
     // // // watches componentMap for changes to make it reactive upon mutation
     activeComponent: {
-      handler () {
+      handler() {
         this.snippetInvoke();
       },
       deep: true
     },
     componentMap: {
-      handler () {
+      handler() {
         this.snippetInvoke();
       },
       deep: true
     },
     exportAsTypescript: {
-      handler () {
+      handler() {
         this.snippetInvoke();
       },
     }