basic add child func w right click

Author: jeisele2

quasar.conf.js

@@ -58,11 +58,16 @@ module.exports = function (ctx) {
         'QTabPanel',
         'QFab',
         'QFabAction',
-        'QMenu'
+        'QMenu',
+        'QUploader',
+        'QEditor',
+        'QCard',
+        'QChip'
       ],
 
       directives: [
-        'Ripple'
+        'Ripple',
+        'ClosePopup'
       ],
 
       // Quasar plugins

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/ComponentDisplay.vue

@@ -1,9 +1,5 @@
 <template>
   <div class="component-display">
-    <!-- <context-menu ref="component-options">
-      <context-menu-item :action="handleAddChild"><button>Add a Child</button></context-menu-item>
-      <context-menu-item><button>Delete a Child</button></context-menu-item>
-    </context-menu> -->
     <VueDraggableResizable
       class-name="component-box"
       v-for="componentData in activeRouteArray"
@@ -18,43 +14,56 @@
       @dragging="onDrag"
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
-      v-context-menu="'component-options'"
     >
       <h3>{{ componentData.componentName }}</h3>
       <q-menu context-menu>
         <q-list>
-          <q-item clickable v-ripple @click="handleAddChild">
+          <q-item clickable v-ripple v-close-popup @click="handleAddChild">
             <q-item-section>Add Children</q-item-section>
             <q-item-section avatar><q-icon color="primary" name="add"/></q-item-section>
           </q-item>
-          <q-item clickable v-ripple>
+          <q-item clickable v-ripple v-close-popup auto-close>
             <q-item-section>Delete Children</q-item-section>
             <q-item-section avatar><q-icon color="primary" name="delete"/></q-item-section>
           </q-item>
         </q-list>
       </q-menu>
     </VueDraggableResizable>
-    <q-dialog id="select-child-modal" v-model="modalOpen">
-      <ChildrenMultiselect />
-    </q-dialog>
+    <div>
+      <q-dialog v-model="modalOpen">
+        <q-select
+          @input="handleSelect"
+          id="dropdown"
+          filled
+          v-model="testModel"
+          multiple
+          :options="options"
+          use-chips
+          stack-label
+          label="Select children"
+          style="width: 250px"
+        />
+      </q-dialog>
+    </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
 import VueDraggableResizable from 'vue-draggable-resizable'
-import ChildrenMultiselect from '../components/ChildrenMultiselect'
+// import ChildrenMultiselect from '../components/ChildrenMultiselect'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 export default {
   name: 'ComponentDisplay',
   components: {
-    VueDraggableResizable,
-    ChildrenMultiselect
+    VueDraggableResizable
   },
   data () {
     return {
       modalOpen: false,
-      abilityToDelete: false
+      abilityToDelete: false,
+      testOptions: ['parent', 'child', 'grandchild'],
+      testModel: []
     }
   },
   mounted () {
@@ -68,7 +77,7 @@ export default {
     })
   },
   computed: {
-    ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap']),
+    ...mapState(['routes', 'activeRoute', 'activeComponent', 'componentMap', 'componentChildrenMultiselectValue']),
     // used in VueDraggableResizeable component
     activeRouteArray () {
       // console.log('active route array method', this.routes[this.activeRoute])
@@ -80,10 +89,21 @@ export default {
       return this.activeRouteArray.filter(componentData => {
         return componentData.componentName === this.activeComponent
       })[0]
+    },
+    options () {
+      // PROBLEM: the objects on childrenmultiselectvalue are applied
+      const routes = Object.keys(this.routes)
+      const exceptions = new Set(['App', this.activeComponent, ...routes])
+      return Object.keys(this.componentMap).filter(component => {
+        if (!exceptions.has(component)) return component
+      })
     }
   },
   methods: {
-    ...mapActions(['setActiveComponent']),
+    ...mapActions([
+      'setActiveComponent',
+      'updateComponentChildrenMultiselectValue',
+      'updateActiveComponentChildrenValue']),
     onResize: function (x, y, width, height) {
       this.activeComponentData.x = x
       this.activeComponentData.y = y
@@ -108,6 +128,12 @@ export default {
     handleAddChild () {
       // render modal with childrenmultiselect in it
       this.modalOpen = true
+    },
+    handleSelect (value) {
+      // if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
+      console.log('Multiselect: ', value)
+      this.updateActiveComponentChildrenValue(value)
+      // this.updateComponentChildrenMultiselectValue(value)
     }
     //       @dblclick.native="onDoubleClick(componentData)"
     // onDoubleClick (compData) {
@@ -155,11 +181,10 @@ 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);
 }
-
-.select-child-modal {
-  background-color: red;
+.active {
+  background-color: rgba(57, 63, 84, 0.5);
 }
 </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,8 +22,6 @@
 
       <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">
@@ -40,10 +38,12 @@
 
 <script>
 import Tree from './Tree'
+// import CodeSnippet from './CodeSnippet'
 
 export default {
   components: {
     Tree
+    // CodeSnippet
   },
   data () {
     return {

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>

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>

src/components/Routes.vue

@@ -1,17 +1,28 @@
 <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)"
     >
+<!--
       <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>

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>

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;