Merge branch 'dev' into master

Author: drewngyen

src/components/ComponentDisplay.vue

@@ -125,7 +125,11 @@ export default {
 
 .component-box {
   color: white;
-  border: 3px dashed rgb(227, 203, 71);
+  border: 1px dashed rgb(227, 203, 71);
   background-color: rgba(186, 99, 99, 0.529);
 }
+
+.active {
+  background-color: rgba(57, 63, 84, 0.5);
+}
 </style>

src/components/HomeSideDropDown.vue

@@ -51,7 +51,6 @@ export default {
 .input-add {
   margin: 0em 1em 0em 1em;
 }
-
 .input-container {
   margin-top: 1rem;
 }

src/components/RouteDisplay.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="route-display">
-     <q-input
+<div>
+       <q-input
         @keyup.enter.native="handleEnterKeyPress"
         standout="bg-teal text-white"
         bottom-slots
@@ -10,6 +10,10 @@
         class="input-add"
       >
       </q-input>
+  <!--<div class="route-display">-->
+    <!--
+
+    -->
     <Routes></Routes>
   </div>
 </template>
@@ -32,12 +36,13 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['addRouteToRouteMap']),
+    ...mapActions(['addRouteToRouteMap', 'setRoutes']),
     handleEnterKeyPress () {
       this.addRouteToRouteMap(this.newRoute)
         .then(() => {
           this.newRoute = ''
         })
+
         .catch(err => console.log(err))
     }
   }

src/components/Routes.vue

@@ -1,17 +1,29 @@
 <template>
-  <div class="route-view">
+<div>
+  <!--<div class="route-view">-->
     <a
       :class="route === activeRoute ? 'panel-block is-active' : 'panel-block'"
       v-for="route in Object.keys(routes)"
       :key="route"
       @click="handleClick(route)"
+      v-on:keyup.delete="deleteSelectedRoute(route)"
     >
+<!--
       <span class="panel-icon">
         <i class="fas fa-location-arrow" aria-hidden="true"></i>
       </span>
-      {{ route }}
+      -->
+         <q-list bordered separator>
+      <q-item clickable v-ripple>
+        <q-item-section>{{route}}</q-item-section>
+
+      </q-item>
+
+    </q-list>
+
     </a>
   </div>
+
 </template>
 
 <script>
@@ -23,9 +35,13 @@ export default {
     ...mapState(['routes', 'activeRoute'])
   },
   methods: {
-    ...mapActions(['setActiveRoute']),
+    ...mapActions(['setActiveRoute', 'deleteRoute']),
     handleClick (route) {
       this.setActiveRoute(route)
+    },
+    deleteSelectedRoute (route) {
+      this.deleteRoute(route)
+      this.setActiveRoute('')
     }
   }
 }

src/components/Tree.vue

@@ -34,7 +34,6 @@ export default {
   },
   methods: {
     formatComponentMap (compMap) {
-      console.log('\n Map : ', compMap, '\n')
       let result = []
       Object.values(compMap).forEach(compData => {
         result.push({
@@ -49,29 +48,16 @@ export default {
       const nodes = {}
       const formattedData = this.formatComponentMap(data)
 
-      // console.log('\n >>>> Formatted data <<<<');
-      // console.log('FormattedData: ', formattedData, '\n');
-
-      // console.log('\n >>>> TRANSFORM TO TREE <<<< \n');
-
       formattedData.forEach(component => {
         if (!nodes[component.name]) {
           nodes[component.name] = { name: component.name, children: [] }
           result = nodes
         }
-        // console.log('CURRENT COMPONENT: ', component.name);
         component.children.forEach(child => {
-          // if(typeof child === 'object') child = child.componentName;
           nodes[child] = { name: child, children: [] }
           nodes[component.name].children.push(nodes[child])
-          // console.log('Adding child: ', typeof child, child);
-          // console.log('\n');
         })
       })
-
-      console.log('\n >>>> RESULTS <<<< ')
-      console.log(result)
-      console.log('\n >>>> ______ <<<<')
       return result
     },
 
@@ -96,7 +82,7 @@ export default {
   cursor: pointer;
   text-shadow: none !important;
   font-weight: bold;
-
+  fill: #FFF;
   /* none of these classes work
   color: white !important;
   background: white;

src/store/actions.js

@@ -112,6 +112,10 @@ const actions = {
   },
   [types.parentSelected]: ({ commit }, payload) => {
     commit(types.PARENT_SELECTED, payload)
+  },
+  [types.deleteRoute]: ({ state, commit }, payload) => {
+    console.log('stat in actions:', state)
+    commit(types.DELETE_ROUTE, payload)
   }
 }
 

src/store/mutations.js

@@ -103,6 +103,7 @@ const mutations = {
       ...state.routes,
       [payload]: []
     }
+    console.log('payload in add_route', payload)
   },
   // Changes the component map
   [types.ADD_ROUTE_TO_COMPONENT_MAP]: (state, payload) => {
@@ -128,6 +129,7 @@ const mutations = {
     state.activeComponent = payload
   },
   [types.SET_ROUTES]: (state, payload) => {
+    console.log('setroutespayload:', payload)
     state.routes = Object.assign({}, payload)
   },
   // invoked when a component is deleted
@@ -179,6 +181,13 @@ const mutations = {
   },
   [types.PARENT_SELECTED]: (state, payload) => {
     state.parentSelected = payload
+  },
+  [types.DELETE_ROUTE]: (state, payload) => {
+    const stateCopy = state
+    delete stateCopy.routes[payload]
+    delete stateCopy.componentMap[payload]
+    state = stateCopy
+    console.log('aftermutations state', state)
   }
 }
 

src/store/types.js

@@ -39,6 +39,7 @@ export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
   'ADD_COMPONENT_TO_COMPONENT_CHILDREN'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
 export const PARENT_SELECTED = 'PARENT_SELECTED'
+export const DELETE_ROUTE = 'DELETE_ROUTE'
 
 // Actions
 export const registerComponent = 'registerComponent'
@@ -71,3 +72,4 @@ export const updateComponentChildrenValue = 'updateComponentChildrenValue'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateOpenModal = 'updateOpenModal'
 export const parentSelected = 'parentSelected'
+export const deleteRoute = 'deleteRoute'