activeLayer updated, title WIP

Author: keliphan

src/components/HomeQueue.vue

@@ -1,6 +1,8 @@
 <template>
   <section class="home-queue" v-on:click="handleClick">
-    <span class='list-title' v-if='this.activeComponent !==""'> Viewing Elements in '{{ this.activeComponent }}' </span>
+    <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ this.activeComponent }} - {{ this.activeLayer.lineage }}' </span>
+    <!-- <span class='list-title' v-if='this.activeLayer.id !== ""'> Viewing Elements in '{{ this.activeLayer.lineage }}' </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>
     <hr>
     <draggable
@@ -11,8 +13,8 @@
       @start="drag = true"
       @end="drag = false"
     >
-      <!-- <div class="list-group-item" @dblclick="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()"> -->
       <div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
+        <i 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="deleteElement(element[1])"></i>
       </div>
@@ -23,7 +25,7 @@
 <script>
 import draggable from 'vuedraggable'
 import { mapState, mapActions } from 'vuex'
-import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList, setActiveHTML } from '../store/types'
+import { setSelectedElementList, deleteSelectedElement, deleteFromComponentHtmlList, setActiveHTML, setActiveLayer } from '../store/types'
 
 const breadthFirstSearch = (array, id) => {
   let queue = [...array.filter(el => typeof el === 'object')];
@@ -81,14 +83,17 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['setActiveHTML']),
+    ...mapActions(['setActiveHTML', 'setActiveLayer']),
     deleteElement (index) {
       if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, index)
       else this.$store.dispatch(deleteFromComponentHtmlList, index)
     },
     setActiveElement (element) {
       this.$store.dispatch(setActiveHTML, element)
     },
+    setLayer (element) {
+      this.$store.dispatch(setActiveLayer, element)
+    },
     handleClick (event) {
       console.log(event.target)
       if (event.target.className === 'home-queue') {
@@ -151,9 +156,20 @@ li {
   cursor: pointer;
   color: red;
 }
+
 .fa-trash {
   position: relative;
   left: 20px;
+
+}
+.fa-angle-double-down {
+  position: relative;
+  right: 20px;
+}
+
+.fa-angle-double-down:hover {
+  cursor: pointer;
+  color: #41B883;
 }
 hr {
   border: 1px solid grey

src/store/mutations.js

@@ -44,30 +44,14 @@ const breadthFirstSearchParent = (array, id) => {
 
 const mutations = {
 
-  [types.SET_ACTIVE_LAYER]: (state, payload) =>{
+  [types.SET_ACTIVE_LAYER]: (state, payload) => {
     let newLayer = cloneDeep(state.activeLayer)
-
-    //should only be reached if we change active component
-    if (payload === '') {
-      state.activeLayer = {
-        id:'',
-        lineage:[]
-      }
-    }
-    else{
-      //htmlArray = state.componentMap[state.activeComponent].htmlList
-      if(newLayer.id === ''){
-        newLayer.lineage.push(state.activeComponent)
-      }
-      else{
-        newLayer.lineage.push(newLayer.id)
-      }
-      newLayer.id = payload
-    }
+    newLayer.lineage.push(payload.text)
+    newLayer.id = payload.id
     state.activeLayer = newLayer
+    state.activeHTML = ''
   },
 
-
   // pushs new component to componentMap
   [types.ADD_COMPONENT_TO_COMPONENT_MAP]: (state, payload) => {
     const { componentName, htmlList, children, parent, isActive } = payload