component added to htmlList on component creation and update children

Author: keliphan

src/components/CodeSnippet.vue

@@ -53,9 +53,9 @@ export default {
     createTemplate(componentName, children) {
       let output = ``;
       output += ` <div>\n`;
-      children.forEach(name => {
-        output += `    <${name}>\n    </${name}>\n`;
-      });
+      // children.forEach(name => {
+      //   output += `    <${name}>\n    </${name}>\n`;
+      // });
       let templateTagStr = this.writeTemplateTag(componentName);
       return `<template>\n ${output}${templateTagStr}  </div>\n</template>`;
     },
@@ -83,8 +83,12 @@ export default {
       let outputStr = ``;
       for (let el of htmlArr) {
         outputStr += `    `;
-        outputStr += htmlElementMap[el.text][0];
-        outputStr += htmlElementMap[el.text][1];
+        if (el.text) {
+          outputStr += htmlElementMap[el.text][0];
+          outputStr += htmlElementMap[el.text][1];
+        } else {
+          outputStr += `<${el} />`
+        }
         outputStr += `  \n`;
       }
       // console.log(`outputStr from writeTemplateTag: ${outputStr}`)

src/components/ComponentDisplay.vue

@@ -138,10 +138,10 @@ export default {
         // console.log('component parent',component.parent)
         // console.log('component parent parent', component.parent.parent)
         if (!Object.keys(component.parent).length) return lineage;
-        for(var parents in component.parent) {
-          //for each parent in our component
+        for (var parents in component.parent) {
+          // for each parent in our component
           console.log('parents', parents)
-          lineage.push(parents); //push the parent into lineage
+          lineage.push(parents); // push the parent into lineage
           console.log('lineage pre push', component, lineage)
           checkParents(component.parent[parents], lineage);
           console.log('lineage post recursive call', lineage)
@@ -187,7 +187,7 @@ export default {
     //console.log("updated")
     if(this.activeComponent === '')
     {
-      if(this.$refs.boxes){
+      if(this.$refs.boxes) {
       this.$refs.boxes.forEach((element)=> {
           element.enabled = false;
           element.$emit('deactivated')
@@ -406,7 +406,7 @@ export default {
   z-index: -1;
 }
 .component-children {
-  position: absolute;
+  position: relative;
   top: 0rem;
   left: 2px;
   color: black;

src/components/HomeQueue.vue

@@ -44,7 +44,7 @@ export default {
     renderList: {
       get () {
         if (this.activeComponent === '') return this.selectedElementList
-        return this.componentMap[this.activeComponent].htmlList
+        return this.componentMap[this.activeComponent].htmlList.filter(el => el.text)
       },
       set (value) {
         this.$store.dispatch(setSelectedElementList, value)

src/store/mutations.js

@@ -129,8 +129,8 @@ const mutations = {
   [types.ADD_PARENT]: (state, payload) => {
     state.componentMap[payload.componentName].parent[state.parentSelected] = state.componentMap[state.parentSelected]
     state.componentMap[state.parentSelected].children.push(payload.componentName)
+    state.componentMap[state.parentSelected].htmlList.push(payload.componentName)
   },
-
   // adds a html tag from the Icons.vue to the HomeQueue.vue
   // event: getClickedIcon @Icons.vue
   [types.ADD_TO_SELECTED_ELEMENT_LIST]: (state, payload) => {
@@ -323,6 +323,13 @@ const mutations = {
       ].children.filter(el => !payload.includes(el))
       state.componentMap[child[0]].parent[state.activeComponent] = state.componentMap[state.activeComponent]
     }
+    const copy = [...state.componentMap[state.activeComponent].htmlList]
+    for (var x in payload) {
+      if (!copy.includes(payload[x])) {
+        copy.push(payload[x])
+      }
+    }
+    state.componentMap[state.activeComponent].htmlList = copy
   },
   // allows usr to change the name of component!!
   [types.UPDATE_COMPONENT_NAME_INPUT_VALUE]: (state, payload) => {