Merge pull request #4 from deanfchung/dean

deanfchung · web-flow · commit 2d03288293b6 · 2019-07-06T14:29:23.000-07:00
DELETE ROUTES WHOOO FUCK YA
diff --git a/quasar.conf.js b/quasar.conf.js
@@ -55,7 +55,9 @@ module.exports = function (ctx) {
         'QTabPanels',
         'QTabPanel',
         'QFab',
-        'QFabAction'
+        'QFabAction',
+        'QUploader',
+        'QEditor'
       ],
 
       directives: [
diff --git a/src/components/CodeSnippet.vue b/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>
diff --git a/src/components/CreateComponent.vue b/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',
diff --git a/src/components/Footer.vue b/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 {
diff --git a/src/components/FooterTabView.vue b/src/components/FooterTabView.vue
diff --git a/src/components/HomeSideDropDown.vue b/src/components/HomeSideDropDown.vue
@@ -137,5 +137,4 @@ export default {
 .input-container {
     margin-top: 1rem;
   }
-
 </style>
diff --git a/src/components/ParentMultiselect.vue b/src/components/ParentMultiselect.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>
diff --git a/src/components/RouteDisplay.vue b/src/components/RouteDisplay.vue
@@ -36,12 +36,13 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['addRouteToRouteMap']),
+    ...mapActions(['addRouteToRouteMap', 'setRoutes']),
     handleEnterKeyPress () {
       this.addRouteToRouteMap(this.newRoute)
         .then(() => {
           this.newRoute = ''
         })
+
         .catch(err => console.log(err))
     }
   }
diff --git a/src/components/Routes.vue b/src/components/Routes.vue
@@ -6,6 +6,7 @@
       v-for="route in Object.keys(routes)"
       :key="route"
       @click="handleClick(route)"
+      v-on:keyup.delete="deleteSelectedRoute(route)"
     >
 <!--
       <span class="panel-icon">
@@ -34,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('')
     }
   }
 }
@@ -45,5 +50,7 @@ export default {
 <style scoped>
 .route-view {
   margin: 1rem;
+  display: flex;
+  flex-direction: column;
 }
 </style>
diff --git a/src/components/Toolbar.vue b/src/components/Toolbar.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>
diff --git a/src/components/Tree.vue b/src/components/Tree.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>
diff --git a/src/components/UploadImage.vue b/src/components/UploadImage.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>
diff --git a/src/layouts/MyLayout.vue b/src/layouts/MyLayout.vue
@@ -13,6 +13,7 @@
     <q-drawer v-model="left" side="left" behavior="desktop" bordered>
       <!-- drawer content -->
       <q-list>
+        <UploadImage />
         <HomeSideDropDown />
         <CreateComponent />
       </q-list>
@@ -29,6 +30,7 @@
 import HomeSideDropDown from '../components/HomeSideDropDown'
 import Footer from '../components/Footer'
 import CreateComponent from '../components/CreateComponent'
+import UploadImage from '../components/UploadImage'
 
 export default {
   data () {
@@ -40,7 +42,8 @@ export default {
   components: {
     HomeSideDropDown,
     Footer,
-    CreateComponent
+    CreateComponent,
+    UploadImage
   }
 }
 </script>
diff --git a/src/store/actions.js b/src/store/actions.js
diff --git a/src/store/mutations.js b/src/store/mutations.js
diff --git a/src/store/types.js b/src/store/types.js

Original file line number	Diff line number	Diff line change
`@@ -137,5 +137,4 @@ export default {`
`137`	`137`	`.input-container {`
`138`	`138`	`margin-top: 1rem;`
`139`	`139`	`}`
`140`		`-`
`141`	`140`	`</style>`
Original file line number	Diff line number	Diff line change
`@@ -36,12 +36,13 @@ export default {`
`36`	`36`	`}`
`37`	`37`	`},`
`38`	`38`	`methods: {`
`39`		`- ...mapActions(['addRouteToRouteMap']),`
	`39`	`+ ...mapActions(['addRouteToRouteMap', 'setRoutes']),`
`40`	`40`	`handleEnterKeyPress () {`
`41`	`41`	`this.addRouteToRouteMap(this.newRoute)`
`42`	`42`	`.then(() => {`
`43`	`43`	`this.newRoute = ''`
`44`	`44`	`})`
	`45`	`+`
`45`	`46`	`.catch(err => console.log(err))`
`46`	`47`	`}`
`47`	`48`	`}`
Original file line number	Diff line number	Diff line change
`@@ -6,6 +6,7 @@`
`6`	`6`	`v-for="route in Object.keys(routes)"`
`7`	`7`	`:key="route"`
`8`	`8`	`@click="handleClick(route)"`
	`9`	`+ v-on:keyup.delete="deleteSelectedRoute(route)"`
`9`	`10`	`>`
`10`	`11`	`<!--`
`11`	`12`	`<span class="panel-icon">`
`@@ -34,9 +35,13 @@ export default {`
`34`	`35`	`...mapState(['routes', 'activeRoute'])`
`35`	`36`	`},`
`36`	`37`	`methods: {`
`37`		`- ...mapActions(['setActiveRoute']),`
	`38`	`+ ...mapActions(['setActiveRoute', 'deleteRoute']),`
`38`	`39`	`handleClick (route) {`
`39`	`40`	`this.setActiveRoute(route)`
	`41`	`+ },`
	`42`	`+ deleteSelectedRoute (route) {`
	`43`	`+ this.deleteRoute(route)`
	`44`	`+ this.setActiveRoute('')`
`40`	`45`	`}`
`41`	`46`	`}`
`42`	`47`	`}`
`@@ -45,5 +50,7 @@ export default {`
`45`	`50`	`<style scoped>`
`46`	`51`	`.route-view {`
`47`	`52`	`margin: 1rem;`
	`53`	`+ display: flex;`
	`54`	`+ flex-direction: column;`
`48`	`55`	`}`
`49`	`56`	`</style>`