Merge branch 'master' into createComponentDropDown

Author: JojuOlaode

src/components/ComponentDisplay.vue

@@ -1,15 +1,19 @@
 <template>
-  <div class="component-display grid-bg" :style="mockBg">
+  <div class="component-display grid-bg" :style="mockBg" v-on:click ="handleClick">
     <!-- <p>{{ userImage }}</p> -->
     <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
+      ref ="boxes"
       :key="componentData.componentName"
+      :id ="componentData.componentName"
       :x="componentData.x"
       :y="componentData.y + 20"
+      :z="componentData.z"
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
+      :preventDeactivation="true"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
@@ -25,19 +29,22 @@
         <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
       </ul>
       <q-menu context-menu>
-        <q-list class="menu">
+        <q-list color='black' class="menu">
           <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section style="color: white">Update Children</q-item-section>
             <q-item-section avatar>
               <q-icon color="primary" name="add" />
             </q-item-section>
           </q-item>
-          <!-- <q-item clickable v-ripple v-close-popup auto-close>
-            <q-item-section style="color: pink">Delete Children</q-item-section>
-            <q-item-section avatar>
-              <q-icon color="primary" name="delete" />
-            </q-item-section>
-          </q-item> -->
+          <q-item clickable v-ripple v-close-popup>
+            <q-item-section class='layer' style="color: pink">Layer</q-item-section>
+              <q-btn class='btn' color='transparent' text-color='primary' label='-' @click='(e)=>handleLayer(e)'/>
+              <p id='counter' style="color: white"> {{componentData.z}} </p>
+              <q-btn class='btn' color='transparent' text-color='primary' label='+' @click='(e)=>handleLayer(e)'/>
+            <!-- <q-item-section avatar>
+              <q-icon color="primary" name="layer" />
+            </q-item-section> -->
+          </q-item>
         </q-list>
       </q-menu>
     </VueDraggableResizable>
@@ -64,7 +71,7 @@ import { mapState, mapActions } from "vuex";
 import VueDraggableResizable from "vue-draggable-resizable";
 // import ChildrenMultiselect from '../components/ChildrenMultiselect'
 import "vue-draggable-resizable/dist/VueDraggableResizable.css";
-
+// :preventDeactivation="true"
 export default {
   name: "ComponentDisplay",
   components: {
@@ -77,7 +84,8 @@ export default {
       abilityToDelete: false,
       testOptions: ["parent", "child", "grandchild"],
       testModel: [],
-      mockImg: false
+      mockImg: false,
+      counter: 0
     };
   },
   mounted() {
@@ -86,7 +94,7 @@ export default {
     window.addEventListener("keyup", event => {
       if (event.key === "Backspace") {
         if (this.activeComponent && this.activeComponentData.isActive) {
-          console.log('this:', this)
+         // console.log('this:', this)
           this.$store.dispatch("deleteActiveComponent");
         }
       }
@@ -116,16 +124,37 @@ export default {
       return this.componentMap[componentData.componentName].children;
     },
     options() {
+      const checkParents = (component, lineage=[component.componentName]) => {
+        // console.log('component', component)
+        // component parent is an object of parents
+        // console.log('component parent',component.parent)
+        // console.log('component parent parent', component.parent.parent)
+        if (!Object.keys(component.parent).length) return lineage;
+        for(var parents in component.parent){
+          //for each parent in our component
+          console.log('parents', parents)
+          lineage.push(parents); //push the parent into lineage
+          console.log('lineage pre push', component, lineage)
+          checkParents(component.parent[parents], lineage);
+          console.log('lineage post recursive call', lineage)
+        }
+        // lineage.push(component.parent[component.componentName]);
+        // return checkParents(component.parent, lineage);
+        return lineage
+      };
+      let lineage = [this.activeComponent];
       // PROBLEM: the objects on childrenmultiselectvalue are applied
       // check to see if there are any existing children
       if (this.componentMap[this.activeComponent]) {
         // console.log('active component', this.activeComponent)
         // console.log('testmodel', this.testModel)
         // console.log(this.componentMap[this.activeComponent].children)
         this.testModel = this.componentMap[this.activeComponent].children;
+        lineage = checkParents(this.componentMap[this.activeComponent]);
+        console.log('Lineage', lineage);
       }
       const routes = Object.keys(this.routes);
-      const exceptions = new Set(["App", this.activeComponent, ...routes, ...this.testModel]);
+      const exceptions = new Set(["App", ...lineage, ...routes, ...this.testModel]);
       return Object.keys(this.componentMap).filter(component => {
         if (!exceptions.has(component)) return component;
       });
@@ -145,6 +174,30 @@ export default {
         : {};
     }
   },
+
+  updated() {
+    console.log("updated")
+    if(this.activeComponent === '')
+    {
+      this.$refs.boxes.forEach((element)=> {
+          element.enabled = false;
+          element.$emit('deactivated')
+          element.$emit('update:active', false)
+        
+      })
+    }
+    else{
+      this.$refs.boxes.forEach((element)=>{
+        if(this.activeComponent === element.$attrs.id)
+        {
+          element.enabled = true
+          element.$emit('activated')
+          element.$emit('update:active', true)
+        }
+      })
+    }
+  },
+
   methods: {
     ...mapActions([
       "setActiveComponent",
@@ -170,12 +223,34 @@ export default {
       this.componentMap[this.activeComponent].y = y;
       this.userImage;
     },
+    onLayer: function(z) {
+      this.activeComponentData.z = z;
+    },
     onActivated(componentData) {
+          this.$refs.boxes.forEach((element)=> {
+        if (element.$attrs.id !== componentData.componentName){
+           element.enabled = false;
+          element.$emit('deactivated')
+          element.$emit('update:active', false)
+        }
+      })
       this.setActiveComponent(componentData.componentName);
       this.activeComponentData.isActive = true;
+  
     },
-    onDeactivated() {
+
+    // deactivated is emitted before activated
+  
+    onDeactivated(componentData) {
+      if(this.activeComponent !== ''){
       this.activeComponentData.isActive = false;
+      }
+     // console.log("Componentdataname", componentData.componentName)
+     // console.log("active component",this.activeComponent)
+      // if(componentData.componentName === this.activeComponent)
+      // {
+      //   console.log("We just clicked without making a new active component")
+      // }
     },
     onDoubleClick(compData) {
       this.setActiveComponent(compData.componentName);
@@ -190,12 +265,35 @@ export default {
       console.log("Multiselect: ", value);
       this.updateActiveComponentChildrenValue(value);
       // this.updateComponentChildrenMultiselectValue(value)
-    }
+    },
+    handleLayer(e){
+      e.preventDefault()
+      console.log('event object', e.target.innerText)
+      console.log('Layer handled')
+      
+      if(e.target.innerText === '+'){
+        this.counter++;
+        // this.activeComponentData.z = z;
+      }
+      if(e.target.innerText === '-' && this.counter > 0){
+        this.counter--;
+      }
+      console.log('counter', this.counter)
+      this.activeComponentData.z = this.counter;
+      this.componentMap[this.activeComponent].z = this.counter;
+
+    },
     //       @dblclick.native="onDoubleClick(componentData)"
     // onDoubleClick (compData) {
     //   this.setActiveComponent(compData.componentName)
     //   this.activeComponentData.isActive = true
     // }
+    handleClick(event){
+      if(event.target.className === "component-display grid-bg")
+      {
+        this.setActiveComponent('')
+      }
+    }
   }
 };
 </script>
@@ -212,6 +310,7 @@ export default {
   /* width: 1rem; */
   line-height: 1.2;
   /* margin: 10px; */
+  z-index: 0;
 }
 .component-children {
   position: absolute;
@@ -272,4 +371,23 @@ export default {
   background-color: rgba(105, 179, 190, 0.514);
   border: 1px dashed rgb(227, 203, 71);
 }
+.btn {
+  font-size: 25px;
+  /* margin-top: 0;
+  margin-bottom: 0; */
+  padding: 0 20px;
+  width: 10px;
+  height: 10px;
+  transition: none;
+}
+.btn:hover, .btn:focus, .btn:active {
+  color: white;
+  background-color: transparent;
+}
+#counter {
+  margin-top: 20px;
+}
+/* .layer {
+  padding: 0 20px;
+} */
 </style>

src/components/CreateComponent.vue

@@ -71,10 +71,12 @@ export default {
         componentName: this.componentNameInputValue,
         x: 0,
         y: 0,
+        z: 0,
         w: 200,
         h: 200,
         htmlList: this.selectedElementList,
         children: [],
+        parent: {},
         isActive: false
       }
 
@@ -83,6 +85,7 @@ export default {
     },
     resetActiveComponent () {
       this.setActiveComponent('')
+      
     },
     handleIconClick () {
       if (this.activeComponent === '') this.setClickedElementList()

src/components/ParentMultiselect.vue

@@ -41,14 +41,15 @@ export default {
   },
   methods: {
     ...mapActions([
-      'setActiveComponent',
+      // 'addParent',
       'parentSelected'
     ]),
     handleSelect (value) {
       // Set Active Component to selected Parent
-      this.setActiveComponent(value)
+      // this.setActiveComponent(value)
+      // this.addParent(value)
       // Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
-      this.parentSelected(true)
+      this.parentSelected(value)
     }
   },
   watch: {

src/store/actions.js

@@ -1,12 +1,18 @@
 import * as types from './types'
 
 const actions = {
+
+  // add selected parent to component
+  // [types.addParent]: ({ commit }, payload) => {
+  //   commit(types.ADD_PARENT, payload)
+  // },
+
   // creates a new component in componentMap
   [types.registerComponent]: ({ state, commit }, payload) => {
     const { componentName } = payload
     if (!state.componentMap[componentName]) {
       commit(types.ADD_COMPONENT_TO_COMPONENT_MAP, payload)
-      if (!state.parentSelected) {
+      if (!state.parentSelected.length) {
         commit(
           types.ADD_COMPONENT_TO_ACTIVE_ROUTE_CHILDREN,
           payload.componentName
@@ -20,19 +26,22 @@ const actions = {
         return state.componentMap[component]
       })
 
-      if (state.parentSelected) {
-        commit(types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE, [
-          ...state.componentMap[state.activeComponent].children,
-          payload.componentName
-        ])
+      if (state.parentSelected.length) {
+        // we want to replace this with an 'add parent' mutation
+        commit(types.ADD_PARENT, payload)
+        // commit(types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE, [
+        //   ...state.componentMap[state.activeComponent].children,
+        //   payload.componentName
+        // ])
       }
 
       commit(types.UPDATE_COMPONENT_CHILDREN_VALUE, { component, value })
       commit(types.UPDATE_COMPONENT_CHILDREN_MULTISELECT_VALUE, [])
       commit(types.UPDATE_COMPONENT_NAME_INPUT_VALUE, '')
       commit(types.SET_SELECTED_ELEMENT_LIST, [])
       commit(types.SET_ACTIVE_COMPONENT, '')
-      commit(types.PARENT_SELECTED, false)
+      // commit(types.PARENT_SELECTED, false)
+      commit(types.PARENT_SELECTED, '')
     }
   },
   // sets component inside componentDisplay