committing layers in edit component drop down

Author: Schillaci767

package-lock.json

@@ -5,11 +5,10 @@ Description:
 -->
 
 <template>
-  <section class="home-queue">
+  <section class="html-queue">
     <i v-if='this.activeLayer.id !== ""' class="fas fa fa-chevron-up fa-md" @click="setParentLayer"></i>
-    <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ this.activeComponent }} {{ depth }}' </span>
-    <span class='list-title' v-else-if='this.activeComponent !==""'> Viewing Elements in '{{ this.activeComponent }}' </span>
-    <span class='list-title' v-else> Elements in Queue </span>
+    <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ depth }}' </span>
+    <span class='list-title' v-else-if='this.activeComponent !==""'> </span>
     <hr>
     <div
       group="people"
@@ -117,7 +116,7 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.home-queue {
+.html-queue {
   padding-bottom: 40px;
 }
 

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -3,17 +3,16 @@ Description:
   Handles create component menu on left-side
   Functionality includes: creating a component, preventing users from entering invalid component file names
   -->
-
 <template>
   <div class="home-sidebar drawer-menu">
     <br />
     <form
       v-on:submit.prevent="createComponent"
-      v-on:click="resetActiveComponent"
     >
       <q-input
         standout="bg-secondary text-white"
         bottom-slots
+        v-on:keyup.delete.stop
         v-model="componentNameInputValue"
         label="Component Name"
         dense
@@ -103,16 +102,11 @@ export default {
       }
 
       this.registerComponent(component)
-    },
-
-    // clears active component during component creation
-    resetActiveComponent () {
-      if (this.activeComponent !== '') {
-        this.setActiveComponent('')
-      }
+      this.setActiveComponent(component.componentName)
     }
   }
 }
+
 </script>
 
 <style type="stylus" scoped>

src/components/dashboard_items/HTMLQueue.vue

@@ -46,14 +46,39 @@ Description:
     <p class="editName" v-else>Select a component</p>
     <q-btn id="deleteButton" @click="deleteSelectedComp(activeComponentData)" label = 'Delete currently selected'/>
     <div v-if="this.activeComponentData">
-<p>Toggle to edit state</p>
-    <toggle-button v-model="showState"/>
+    <br/>
+   <section>Layer: 
+       <q-btn
+              class="btn"
+              color="transparent"
+              text-color="primary"
+              label="-"
+              @click="e => handleLayer(e)"
+            />
+            <p id="counter" style="color: white">{{ activeComponentObj.z }}</p>
+            <q-btn
+              class="btn"
+              color="transparent"
+              text-color="primary"
+              label="+"
+              @click="e => handleLayer(e)"
+            />
+          </section>
+
+    <p> Toggle to edit: </p>
+    <section class="toggleText"> HTML elements
+    <toggle-button v-model="showHTML"/> </section>
+    <HTMLQueue v-if="showHTML"/>
+    <br/>
+    <section class="toggleText"> State
+    <toggle-button v-model="showState"/> </section>
+    <hr v-if="showState">
     <a
       v-for="s in this.activeComponentData.state"
       :key="s"
     >
       <q-list v-if="showState" class="list-item" dense bordered separator>
-        <q-item clickable v-ripple class="list-item">
+       <q-item clickable v-ripple class="list-item">
           <q-item-section>
             <div class="component-container">
               <div class="component-info">
@@ -66,8 +91,9 @@ Description:
       </q-list>
       </a>
     <br/>
-    <p>Toggle to edit actions</p>
-    <toggle-button v-model="showActions" />
+    <section class="toggleText"> Actions
+    <toggle-button v-model="showActions" /> </section>
+    <hr v-if="showActions">
         <a
       v-for="action in this.activeComponentData.actions"
       :key="action"
@@ -86,8 +112,10 @@ Description:
       </q-list>
       </a>
     <br/>
-    <p>Toggle to edit props</p>
-    <toggle-button v-model="showProps"/>
+    <section class="toggleText">
+    Props
+    <toggle-button v-model="showProps"/> </section>
+    <hr v-if="showProps">
     <a
       v-for="prop in this.activeComponentData.props"
       :key="prop"
@@ -116,6 +144,7 @@ Description:
 import { mapState, mapActions } from 'vuex'
 import Multiselect from 'vue-multiselect'
 import { ToggleButton } from 'vue-js-toggle-button'
+import HTMLQueue from '../dashboard_items/HTMLQueue.vue'
 
 export default {
   data () {
@@ -124,10 +153,11 @@ export default {
       newName: '',
       showState: false,
       showActions: false,
-      showProps: false
+      showProps: false,
+      showHTML: false
     }
   },
-  components: { Multiselect, ToggleButton },
+  components: { Multiselect, ToggleButton, HTMLQueue },
   computed: {
     ...mapState([
       'routes',
@@ -159,7 +189,8 @@ export default {
       'editComponentName',
       'deleteActionFromComponent',
       'deletePropsFromComponent',
-      'deleteStateFromComponent'
+      'deleteStateFromComponent',
+      'updateComponentLayer'
     ]),
 
     deleteState (state) {
@@ -192,6 +223,16 @@ export default {
         this.deleteActiveComponent(componentData.componentName)
       }
     },
+
+    handleLayer (e) {
+      e.preventDefault()
+      const payload = {
+        z: this.activeComponentObj.z
+      }
+      if (e.target.innerText === '+') payload.z++
+      if (e.target.innerText === '-' && payload.z > 0) payload.z--
+      this.updateComponentLayer(payload)
+    },
     // Select active component from multi-select input
     handleSelect (componentName) {
       this.setActiveComponent(componentName)
@@ -245,9 +286,15 @@ export default {
   display: flex;
   justify-content: space-between;
 }
+
 p {
   color: white;
 }
+
+.toggleText {
+  color: white;
+}
+
 .editName {
   color: white;
 }
@@ -256,4 +303,8 @@ p {
   background-color: #289ead;
   color: white;
 }
+
+hr {
+  border: 1px solid grey
+}
 </style>