updated hack hour

Author: jchan444

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

@@ -58,16 +58,16 @@ export default {
     ...mapState(['selectedElementList', 'componentMap', 'activeComponent', 'activeHTML', 'activeLayer']),
     renderList: {
       get () {
-        if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id])
+        if (this.activeComponent === '') return this.selectedElementList.map((el, index) => [el.text, index, el.id, el.z])
         // change activeComponent's htmlList into an array of arrays ([element/component name, index in state])
         if (this.activeComponent !== '' && this.activeLayer.id === '') {
-          let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id]).filter(el => {
+          let sortedHTML = this.componentMap[this.activeComponent].htmlList.map((el, index) => [el.text, index, el.id, el.z]).filter(el => {
             return el[0] !== undefined
           })
           return sortedHTML
         }
         let activeElement = breadthFirstSearch(this.componentMap[this.activeComponent].htmlList, this.activeLayer.id)
-        let sortedHTML = activeElement.children.map((el, index) => [el.text, index, el.id]).filter(el => {
+        let sortedHTML = activeElement.children.map((el, index) => [el.text, index, el.id, el.z]).filter(el => {
           return el[0] !== undefined
         })
         return sortedHTML

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

@@ -88,14 +88,13 @@
               @click="submitLeft(leftText, this.activeHTML)">
             </i>
           </q-input>
-
           <q-item id="layer-item" filled dark autofocus true hide-bottom-space color="secondary">
-            <q-item-section v-model="z" class="layer">Component Layer = {{z}}</q-item-section>
+            <q-item-section class="layer">Component Layer = </q-item-section>
             <q-btn
               class="minorAction"
               color="transparent"
               text-color="primary"
-              label="&ndash;"
+              label="-"
               @click="(e) => handleLayer(e)"
             />
             <p id="counter">{{ z }}</p>
@@ -107,9 +106,6 @@
               @click="(e) => handleLayer(e)"
             />
           </q-item>
-          
-
-
           <q-btn label="Close" @click="this.openAttributeModal" />
         </q-form>
       </div>
@@ -143,13 +139,14 @@ export default {
       'routes',
       'activeComponentData',
       'activeComponentObj',
+      'componentData'
     ])
   },
   components: {
   },
   methods: {
     ...mapActions([
-      'setActiveHTML', 
+      'setActiveHTML',
       'setActiveLayer',
       'openAttributeModal', 
       'addActiveComponentClass',
@@ -215,34 +212,56 @@ export default {
       this.leftText = '';
     },
 
-    handleLayer(e) {
-      e.preventDefault();
+//     addLayer(z, idNum) {
+//       const payload = {
+//         activeHTML: idNum,
+//         z: z,
+//       };
+//       payload.z++;
+//       this.z++;
+// console.log(this.activeComponentObj.htmlList[0].z)
+//       this.updateHTMLLayer(payload);
+//       console.log('+ clicked!')
+//       console.log(this.activeComponentObj.htmlList[0].z)
+//     },
 
-    let htmlZ;
+//     subtractLayer(z, idNum) {
+//       const payload = {
+//         activeHTML: idNum,
+//         z: z,
+//       };
 
-    this.activeComponentObj.htmlList.forEach( element => {
-      if (element.id === this.activeHTML) {
-        htmlZ = element.z;
-      }
-    })
+      
+//       payload.z--;
+//       this.z--;
+//       this.updateHTMLLayer(payload);
+      
+//       console.log('- clicked!')
+//     },
 
+  handleLayer(e) {
+      e.preventDefault();
       const payload = {
-        activeHTML: this.activeHTML,
-        z: htmlZ,
+        activeComponent: this.activeComponent,
+        routeArray: this.routes[this.activeRoute],
+        activeComponentData: this.activeComponentData,
+        z: this.activeComponentData.z,
       };
-      
-      if (e.target.innerText === "+")  {
+    
+      if (e.target.innerText === "+") {
         payload.z++;
-        this.z++;
+        console.log('+ clicked!')
       }
       if (e.target.innerText === "–" && payload.z > 0)  {
         payload.z--;
-        this.z--;
+        console.log('- clicked!')
       }
-      this.updateHTMLLayer(payload);
-      console.log('here')
-      console.log(this.activeHTML)
-  },
+      this.updateComponentLayer(payload);
+    },
+
+activeRouteArray() {
+      return this.routes[this.activeRoute];
+    },
 
   watch: {
     attributeModalOpen() {

src/store/mutations.js

@@ -473,7 +473,6 @@ const mutations = {
     if (payload[0] === "") {
       state.activeHTML = "";
     } else {
-      console.log(payload)
       state.activeHTML = payload[2];
     }
   },
@@ -782,13 +781,11 @@ const mutations = {
   },
 
   [types.UPDATE_HTML_LAYER]: (state, payload) => {
-
     state.componentMap[state.activeComponent].htmlList.forEach((el) => {
       if (payload.id === el.id) {
         el.z = payload.z
       }
     })
-
   },
 
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {