right click popup for choosing child, not functional yet

Author: jeisele2

package-lock.json

@@ -17,16 +17,19 @@
     "mousetrap": "^1.6.3",
     "quasar": "^1.0.0",
     "vue-custom-context-menu": "^3.0.1",
+    "vue-drag-resize": "^1.3.2",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-multiselect": "^2.1.6",
-    "vued3tree": "^3.7.1"
+    "vued3tree": "^3.7.1",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@quasar/app": "^1.0.0",
     "@vue/eslint-config-standard": "^4.0.0",
     "babel-eslint": "^10.0.1",
     "devtron": "^1.4.0",
     "electron": "^5.0.6",
+    "electron-builder": "^20.44.4",
     "electron-debug": "^3.0.1",
     "electron-devtools-installer": "^2.2.4",
     "eslint": "^5.10.0",

package.json

@@ -52,7 +52,9 @@ module.exports = function (ctx) {
         'QTabs',
         'QTab',
         'QRouteTab',
-        'QTabPanels'
+        'QTabPanels',
+        'QDialog',
+        'QSelect'
       ],
 
       directives: [
@@ -147,7 +149,7 @@ module.exports = function (ctx) {
     },
 
     electron: {
-      // bundler: 'builder', // or 'packager'
+      bundler: 'builder', // or 'packager'
 
       extendWebpack (cfg) {
         // do something with Electron main process Webpack cfg

quasar.conf.js

@@ -0,0 +1,70 @@
+<template>
+  <div id="child-select" style="min-width: 500px; min-height: 500px;">
+    <br />
+    <multiselect
+      placeholder="Select child components"
+      :multiple="true"
+      :close-on-select="false"
+      :options="options"
+      :value="componentChildrenMultiselectValue"
+      @input="handleSelect"
+      :max-height="150"
+      :option-height="20"
+      :searchable="false"
+    ></multiselect>
+    <!-- <q-select
+      :options="options"
+      label="Select children"
+      multiple
+    /> -->
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import Multiselect from 'vue-multiselect'
+
+export default {
+  components: {
+    Multiselect
+  },
+  computed: {
+    ...mapState([
+      'routes',
+      // comes from store/state/index.js
+      'componentMap',
+      'activeComponent',
+      'componentChildrenMultiselectValue',
+      'modalOpen'
+    ]),
+    options () {
+      const routes = Object.keys(this.routes)
+      const exceptions = new Set(['App', this.activeComponent, ...routes])
+      console.log('exceptions', exceptions)
+      return Object.keys(this.componentMap).filter(component => {
+        if (!exceptions.has(component)) return component
+      })
+    }
+  },
+  methods: {
+    ...mapActions([
+      'updateComponentChildrenMultiselectValue',
+      'updateActiveComponentChildrenValue'
+    ]),
+    //
+    handleSelect (value) {
+      // if (this.modalOpen) this.updateActiveComponentChildrenValue(value)
+      console.log('Multiselect: ', value)
+      this.updateActiveComponentChildrenValue(value)
+      this.updateComponentChildrenMultiselectValue(value)
+    }
+  }
+}
+</script>
+
+<!-- New step!
+     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped>
+/* your styles */
+</style>

src/components/ChildrenMultiselect.vue

@@ -1,7 +1,8 @@
 <template>
   <div class="component-display">
     <context-menu ref="component-options">
-      <context-menu-item>Add a Child</context-menu-item>
+      <context-menu-item :action="handleAddChild">Add a Child</context-menu-item>
+      <context-menu-item><button>Delete a Child</button></context-menu-item>
     </context-menu>
     <VueDraggableResizable
       class-name="component-box"
@@ -17,25 +18,29 @@
       @dragging="onDrag"
       @resizing="onResize"
       @dblclick.native="onDoubleClick(componentData)"
-      @contextmenu.native.prevent="'component-options'"
+      v-context-menu="'component-options'"
     >
       <h3>{{ componentData.componentName }}</h3>
     </VueDraggableResizable>
+    <q-dialog v-model="modalOpen" style="width: 700px">
+      <ChildrenMultiselect />
+    </q-dialog>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
 import VueDraggableResizable from 'vue-draggable-resizable'
-import VCCM from 'vue-custom-context-menu'
+import ChildrenMultiselect from '../components/ChildrenMultiselect'
 
 export default {
   name: 'ComponentDisplay',
   components: {
     VueDraggableResizable,
-    VCCM,
+    ChildrenMultiselect
   },
   data () {
     return {
+      modalOpen: false,
       abilityToDelete: false
     }
   },
@@ -86,8 +91,9 @@ export default {
       this.setActiveComponent(compData.componentName)
       this.activeComponentData.isActive = true
     },
-    onRightClick () {
-      alert('Holy fucc, u right clicc')
+    handleAddChild () {
+      // render modal with childrenmultiselect in it
+      this.modalOpen = true
     }
   }
 }

src/components/ComponentDisplay.vue

@@ -35,6 +35,7 @@
 
 <script>
 export default {
+  name: 'FooterTabView.vue',
   data () {
     return {
       tab: 'tree'

src/components/FooterTabView.vue

@@ -87,3 +87,17 @@
     </q-bar>
   </div>
 </template>
+
+<script>
+export default {
+  name: 'TopMenuBar',
+  components: {
+    QMenu,
+    QItem,
+    QSeparator,
+    QItemSection,
+    QList,
+    QBtn
+  }
+}
+</script>

src/components/TopMenuBar.vue

@@ -1,9 +1,11 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import VCCM from 'vue-custom-context-menu'
 
 import routes from './routes'
 
 Vue.use(VueRouter)
+Vue.use(VCCM)
 
 /*
  * If not building with SSR mode, you can