Merge pull request #24 from oslabs-beta/keyla/childInsideHtmlElements

Keyla/child inside html elements

Author: katherinek123

src/components/left-sidebar/ComponentTab/Icons.vue

@@ -14,6 +14,20 @@ Description:
       <br />
       <span>{{ elementName }}</span>
     </button>
+
+    <button
+      @click.prevent="changeState(elementName)"
+      v-for="(elementName, idx) in childrenComp"
+      :key="idx + Date.now()"
+    >
+      <span class="badge"> {{ elementStorage[elementName] }}</span>
+      <br />
+      <i :class="childIcon"></i>
+      <br />
+      <span>{{ elementName }}</span>
+    </button>
+    
+
   </section>
 </template>
 
@@ -22,7 +36,10 @@ import { mapState } from "vuex";
 
 export default {
   data() {
-    return {};
+    return {
+      //to give the child componenets of the active components icons
+      childIcon: ["fa-solid fa-code"]
+    };
   },
   name: "Icons",
   computed: {
@@ -78,6 +95,14 @@ export default {
       }
       return computedElementalStorage;
     },
+    childrenComp: function () {
+      let childrenAvailable = [];
+
+      if(this.activeComponent) {
+        childrenAvailable = this.componentMap[this.activeComponent].children
+      }
+      return childrenAvailable;
+    },
   },
   methods: {
     // Logic to decide where to place selected html element

src/components/right-sidebar/CodeSnippet.vue

@@ -85,9 +85,8 @@ export default {
       else return `<template>\n  <div>\n${templateTagStr}  </div>\n</template>`;
     },
     // Creates <template> boilerplate
-    writeTemplateTag(componentName) {
+    writeTemplateTag(componentName, activeComponent) {
       // console.log(this.activeComponentObj)
-      // create reference object
       const htmlElementMap = {
         div: ["<div", "</div>"],
         button: ["<button", "</button>"],
@@ -110,6 +109,11 @@ export default {
         h5: ["<h5", "</h5>"],
         h6: ["<h6", "</h6>"],
       };
+      //add childComponents of the activeCompnent to the htmlElementMap
+      const childComponents = this.componentMap[this.activeComponent].children;
+      childComponents.forEach(child => {
+        htmlElementMap[child]=[`<${child}`, ""] //single
+      })
       function writeNested(childrenArray, indent) {
         if (!childrenArray.length) {
           return "";
@@ -132,7 +136,7 @@ export default {
 
               }
             }
-            if (child.text === "img" || child.text === "input" || child.text === "link") {
+            if (child.text === "img" || child.text === "input" || child.text === "link" || childComponents.includes(child.text)) {
               nestedString += "/>";
             } else { nestedString += ">"; }
 
@@ -163,6 +167,11 @@ export default {
           if (el.class !== "") {
             outputStr += " " + "class = " + `"${el.class}"`;
           }
+          // add an extra slash at the end for child Components and single tags
+          if(childComponents.includes(el.text) || el.text === "img" || el.text === "input" || el.text === "link"){
+            outputStr += "/"
+          }
+
           if (el.binding !== "") {
             outputStr += ` v-model = "${el.binding}"`
           }

src/components/right-sidebar/HTMLQueue.vue

@@ -137,8 +137,14 @@ export default {
         newTitle += ` > ${el}`
       })
       return newTitle;
+    },
+    moreExceptions: function () {
+      let childComponent = [];
+      if(this.activeComponent) {
+        childComponent = this.componentMap[this.activeComponent].children;
+      }
+      return childComponent;
     }
-
   },
   methods: {
     ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer', 'setSelectedIdDrag', 'setIdDrag', 'setSelectedIdDrop', 'setIdDrop', 'dragDropSortHtmlElements', 'dragDropSortSelectedHtmlElements', 'openAttributeModal', 'addActiveComponentClass', 'addBindingText']),

src/store/actions.js

@@ -269,7 +269,6 @@ const actions = {
   },
 
   // Actions dispatched from left hand panel////////////////////////////////////////
-
   [types.addToComponentElementList]: ({ commit }, payload) => {
     // adds element to the HTMLQueue
     commit(types.ADD_TO_COMPONENT_HTML_LIST, payload);
@@ -286,7 +285,6 @@ const actions = {
   // end of left hand panel/////////////////////////
 
   // HTML Element related actions ////////////////////
-
   [types.addNestedHTML]: ({ commit }, payload) => {
     commit(types.ADD_NESTED_HTML, payload);
   },
@@ -324,7 +322,10 @@ const actions = {
   [types.upOneLayer]: ({ commit }, payload) => {
     commit(types.UP_ONE_LAYER, payload);
   },
-  //FOR MUTATING HTML WITH DRAG AND DROP
+
+  // end of HTML segment ////////////////////////////////////////////////
+
+  // Drag-and-drop ///////////////////////////////////////
   [types.setIdDrag]: ({ commit }, payload) => {
     commit(types.SET_ID_DRAG, payload)
   },
@@ -349,10 +350,9 @@ const actions = {
     commit(types.DRAG_DROP_SORT_SELECTED_HTML_ELEMENTS)
   },
 
-  // end of HTML segment ////////////////////////////////////////////////
+  // end of Drag-and-drop /////////////////////////////////
 
   // Loading ///////////////////////////////////////////////////////
-
   [types.openProject]: ({ commit }, payload) => {
     commit(types.REMOVE_ALL_STATE_PROPS_ACTIONS)
     commit(types.SET_ACTIVE_ROUTE, "HomeView");

src/store/mutations.js

@@ -330,6 +330,34 @@ const mutations = {
         }
       }
     }
+    //update the component name in the htmlList of all components if it is a child component
+    for (const item of Object.values(state.componentMap)) {
+      if (item.htmlList) {
+        const newArray = [...item.htmlList];
+
+        const changeAllChildComponents = (array, name) => {
+          const queue = [...array.filter(el => typeof el === 'object')];
+          while(queue.length) {
+            const evaluate = queue.shift();
+            if(evaluate.text === name) {
+              evaluate.text = payload; 
+            }
+            for(let i = 0; i < evaluate.children.length; i++) {
+              if (evaluate.children[i].text === name) {
+                evaluate.children[i].text = payload;
+              } 
+              if (evaluate.children.length) {
+                queue.push(...evaluate.children)
+              }
+            }
+          }
+        }
+
+        changeAllChildComponents(newArray, temp)
+        item.htmlList = newArray
+      }
+    }
+
   },
 
   // *** HTML ELEMENTS *** //////////////////////////////////////////////
@@ -759,7 +787,32 @@ const mutations = {
       // state.componentMap[state.activeComponent].htmlList = newHTMLList;
       // const newMap = { ...state.componentMap };
       // state.componentMap = { ...newMap };
+
+      //delete the instances of the Child Component in the activeComponent's htmlList
+      const componentName = state.activeComponent;
+      const htmlList = state.componentMap[componentName].htmlList.slice(0);
+
+      // splice out child componenets even if nested
+      function deleteChildFromHtmlList(array, payload) {
+        for(let i = array.length; i--;) {
+
+					if(array[i].children.length) {
+            deleteChildFromHtmlList(array[i].children, payload)
+          }
+          if(array[i].text === payload) {
+            array.splice(i, 1)
+          } 
+          
+        }
+      }
+      deleteChildFromHtmlList(htmlList, payload);
+
+      //updates the htmlList with the child components deleted
+      state.componentMap[componentName].htmlList = htmlList;
+      
+      //delete the parent because the payload is no longer a child to the acitive component
       delete state.componentMap[payload].parent[state.activeComponent];
+
       // add block
     } else {
       const child = temp;

src/store/types.js

@@ -77,7 +77,7 @@ export const DELETE_ACTIVE_COMPONENT_CLASS = 'DELETE_ACTIVE_COMPONENT_CLASS'
 //
 export const REMOVE_ALL_STATE_PROPS_ACTIONS = 'REMOVE_ALL_STATE_PROPS_ACTIONS'
 export const UPDATE_PASTE_TIMER = 'UPDATE_PASTE_TIMER'
-
+//Drag and Drop
 export const SET_ID_DRAG = 'SET_ID_DRAG'
 export const SET_ID_DROP = 'SET_ID_DROP'
 export const SET_SELECTED_ID_DRAG = 'SET_SELECTED_ID_DRAG'
@@ -163,14 +163,15 @@ export const updateStartingSize = 'updateStartingSize'
 export const deleteUserActions = 'deleteUserActions'
 export const deleteUserState = 'deleteUserState'
 export const toggleTutorial = 'toggleTutorial'
-
+//Drag and Drop 
 export const setIdDrag = 'setIdDrag'
 export const setIdDrop = 'setIdDrop'
 export const setSelectedIdDrag = 'setSelectedIdDrag'
 export const setSelectedIdDrop = 'setSelectedIdDrop'
 export const dragDropSortHtmlElements = 'dragDropSortHtmlElements'
 export const dragDropSortSelectedHtmlElements = 'dragDropSortSelectedHtmlElements'
 
+
 // inactive mutations
 // export const SET_STATE = 'SET_STATE'
 // export const DELETE_COMPONENT = 'DELETE_COMPONENT'