Can now add classes to children's child

Author: jchan444

src/components/right-sidebar/CodeSnippet.vue

@@ -124,7 +124,7 @@ export default {
           } else {
             nestedString += htmlElementMap[child.text][0];
             if (child.class !== "") {
-              nestedString += " " + "class = " + `"${el.class}"`;
+              nestedString += " " + "class = " + `"${child.class}"`;
             }
             if (child.text === "img" || child.text === "input" || child.text === "link") {
               nestedString += "/>";

src/components/right-sidebar/HTMLQueue.vue

@@ -40,27 +40,6 @@ Description:
         </div>
     </div>
 
-<!--START OF CHANGES-->
-      <!-- &nbsp; &nbsp; Viewing Elements in {{ this.activeComponent }} '{{ depth }}'
-      <hr>
-    </span>
-    <span class='list-title' v-else-if='!this.activeComponent'></span>
-    <div group="people" class="list-group">
-      <p v-if='!this.componentMap[this.activeComponent]?.htmlList.length'>No HTML elements in component</p>
-
-      <div id="tooltipCon" :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'"
-        v-for="(element) in renderList" :key="element[1] + Date.now()">
-
-        <button class="attributeButton" @click="setActiveElement(element)">
-          <div class="tooltip"> Edit {{ element[0] }} attributes </div>
-        </button>
-        <i v-if='activeComponent === "" || exceptions.includes(element[0])'></i>
-        <i v-else class="fas fa fa-angle-double-down fa-md" @click="setLayer({ text: element[0], id: element[2] })"></i>
-        {{ element[0] }}
-        <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1], element[2]])"></i>
-      </div>
-    </div> -->
-
     <!-- attribute pop-up -->
     <q-dialog v-model="attributeModal">
       <!-- @update:model-value="setActiveElement" -->
@@ -71,6 +50,14 @@ Description:
           :key="element.id + Date.now()">
           <p v-if="element.id === this.activeHTML">Your class is - {{ element.class }}</p>
         </div>
+      <!--attribute child's child-->
+        <div class="AttributeContainer" v-for="element in this.componentMap[this.activeComponent].htmlList"
+          :key="element.id + Date.now()">
+          <ul v-for="element1 in element.children"
+          :key="element1.id + Date.now()">
+            <li v-if="element1.id === this.activeHTML">Your class is - {{ element1.class }}</li>
+          </ul>
+        </div>
 
         <div class="formBox">
           <q-form autofocus v-on:submit.prevent="submitClass">
@@ -112,7 +99,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer', 'attributeModalOpen']),
+    ...mapState(['activeComponentObj','selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer', 'attributeModalOpen']),
     renderList: {
       get() {
         if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])

src/store/mutations.js

@@ -430,6 +430,7 @@ const mutations = {
 
   [types.SET_ACTIVE_LAYER]: (state, payload) => {
     const newLayer = cloneDeep(state.activeLayer);
+
     newLayer.lineage.push(payload.text);
     newLayer.id = payload.id;
     state.activeLayer = newLayer;
@@ -805,11 +806,22 @@ const mutations = {
   },
 
   [types.ADD_ACTIVE_COMPONENT_CLASS]: (state, payload) => {
+    if(state.activeComponentObj.htmlList)
+
     state.componentMap[state.activeComponent].htmlList.forEach((el) => {
+//adding class into it's child 1st layer
+      if(el.children.length !== 0) {
+        el.children.forEach((element) => {
+          if(payload.id === element.id) {
+            element.class = payload.class
+          }
+        })
+      }
       if (payload.id === el.id) {
         el.class = payload.class
       }
     })
+
   },
   [types.DELETE_ACTIVE_COMPONENT_CLASS]: (state, payload) => {
     state.componentMap[state.activeComponent].classList.forEach((el, ind) => {