backspace working. need to finish the vuex cycle for routes delete mechanism

Author: deanfchung

quasar.conf.js

@@ -55,7 +55,9 @@ module.exports = function (ctx) {
         'QTabPanels',
         'QTabPanel',
         'QFab',
-        'QFabAction'
+        'QFabAction',
+        'QUploader',
+        'QEditor'
       ],
 
       directives: [

src/components/CodeSnippet.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="snip">
+    <q-editor
+      v-model="editor"
+      :definitions="{
+        bold: {label: 'Bold', icon: null, tip: 'My bold tooltip'}
+      }"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      editor: 'Here we are overriding the <b>bold</b> command to include a label instead of an icon and also changing its tooltip.'
+    }
+  }
+}
+</script>
+
+<style>
+.snip{
+  height: 150px;
+}
+</style>

src/components/CreateComponent.vue

@@ -26,7 +26,6 @@
 import Icons from './Icons'
 import ParentMultiselect from '../components/ParentMultiselect'
 import { mapState, mapActions } from 'vuex'
-// import * as types from '../store/types.js'
 
 export default {
   name: 'HomeSidebar',

src/components/Footer.vue

@@ -22,12 +22,10 @@
 
       <q-tab-panels v-model="tab" animated class="bg-primary text-white">
         <q-tab-panel name="code">
-          <div class="text-h6">Code Snippet</div>Code Snippet Component Here
-          <br />asdfadsfasdf
         </q-tab-panel>
 
         <q-tab-panel name="tree">
-          <div class="text-h6">Tree</div>Tree Component Here
+          <Tree />
         </q-tab-panel>
 
         <q-tab-panel name="html">
@@ -39,7 +37,14 @@
 </template>
 
 <script>
+import Tree from './Tree'
+// import CodeSnippet from './CodeSnippet'
+
 export default {
+  components: {
+    Tree
+    // CodeSnippet
+  },
   data () {
     return {
       tab: 'code',
@@ -66,12 +71,12 @@ export default {
 }
 
 .q-tab-panel {
-  background: #454d66;
+  background: rgb(69,77,102);
+  background: linear-gradient(180deg, rgba(69,77,102,1) 0%, rgba(54,60,78,1) 100%);
 }
 
 .q-tab-panels {
-  background: yellow;
-  height: 100%;
+  height: 24vh;
 }
 
 .q-tabs {

src/components/FooterTabView.vue

@@ -2,7 +2,7 @@
   <div id="parent-select">
     <br />
     <multiselect
-      placeholder="Choose Parent (if applicable)"
+      placeholder="Parent Component"
       :multiple="false"
       :close-on-select="true"
       :options="options"
@@ -52,5 +52,9 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 <style scoped>
-
+  #parent-select{
+    height: 30px;
+    margin: 0.75rem;
+    width: 90%;
+  }
 </style>

src/components/ParentMultiselect.vue

@@ -6,7 +6,7 @@
       v-for="route in Object.keys(routes)"
       :key="route"
       @click="handleClick(route)"
-      v-on:keyup.delete="deleteRoute(route)"
+      v-on:keyup.delete="deleteSelectedRoute(route)"
     >
 <!--
       <span class="panel-icon">
@@ -35,13 +35,18 @@ export default {
     ...mapState(['routes', 'activeRoute'])
   },
   methods: {
-    ...mapActions(['setActiveRoute']),
+    ...mapActions(['setActiveRoute', 'deleteRoute']),
     handleClick (route) {
       this.setActiveRoute(route)
+      console.log(this.routes)
     },
-    deleteRoute (route) {
-      console.log('routes', route)
-      console.log('this', this)
+    deleteSelectedRoute (route) {
+      for (let key in this.routes) {
+        if (key === route) {
+          delete this.routes.route
+        }
+      }
+      this.deleteRoute(route)
     }
   }
 }
@@ -50,5 +55,7 @@ export default {
 <style scoped>
 .route-view {
   margin: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 </style>

src/components/Routes.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="home-sidebar">
+    <q-btn-group>
+      <q-btn color="secondary" icon="timeline" />
+      <q-btn color="secondary" icon="visibility" />
+      <q-btn color="secondary" icon="update" />
+    </q-btn-group>
+  </div>
+</template>
+
+<style>
+.home-sidebar {
+  margin: 1rem;
+  border-radius: 5px;
+}
+</style>

src/components/Toolbar.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="container">
+    <tree
+      :data="tree"
+      node-text="name"
+      layoutType="euclidean"
+      type="tree"
+      :zoomable="true"
+      :radius="4"
+    ></tree>
+  </div>
+</template>
+
+<script>
+import { tree } from 'vued3tree'
+import { mapState } from 'vuex'
+export default {
+  name: 'Tree',
+  components: {
+    tree
+  },
+  computed: {
+    ...mapState(['componentMap']),
+    componentMap: {
+      get () {
+        return this.$store.state.componentMap
+      }
+    }
+  },
+  data () {
+    return {
+      tree: null
+    }
+  },
+  methods: {
+    formatComponentMap (compMap) {
+      console.log('\n Map : ', compMap, '\n')
+      let result = []
+      Object.values(compMap).forEach(compData => {
+        result.push({
+          name: compData.componentName,
+          children: compData.children
+        })
+      })
+      return result
+    },
+    transformToTree (data) {
+      let result = {}
+      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
+    },
+
+    buildTree () {
+      let build = this.transformToTree(this.componentMap)
+      this.tree = build['App']
+    }
+  },
+  created () {
+    this.buildTree()
+  }
+}
+</script>
+<style>
+.container {
+  height: 100%;
+  width: 100%;
+}
+
+.treeclass .nodetree text {
+  font-size: 19px !important;
+  cursor: pointer;
+  text-shadow: none !important;
+  font-weight: bold;
+
+  /* none of these classes work
+  color: white !important;
+  background: white;
+  margin: 1rem; */
+}
+  /* changes the circle node color */
+.treeclass .nodetree circle {
+  fill: rgb(232, 225, 16);
+}
+/* changes the stroke color */
+.treeclass .linktree {
+  stroke: rgb(232, 225, 16) !important;
+  stroke-opacity: .4;
+  stroke-width: 2px;
+}
+</style>

src/components/Tree.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="home-sidebar">
+    <q-uploader
+      url="http://localhost:4444/upload"
+      label="Upload Image Mockups"
+      color="teal"
+      flat
+      bordered
+      style="max-width: 100%"
+    />
+  </div>
+</template>
+
+<style>
+.home-sidebar {
+  margin: 1rem;
+  border-radius: 5px;
+}
+</style>