styled component box and added num of children blah blah blah, looks like trash

Author: drewngyen

package-lock.json

@@ -17,12 +17,15 @@
     "mousetrap": "^1.6.3",
     "prismjs": "^1.16.0",
     "quasar": "^1.0.0",
+    "vue-custom-context-menu": "^3.0.1",
     "vue-drag-resize": "^1.3.2",
+    "vue-draggable-nested-tree": "^2.2.17",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-loader": "^15.7.0",
     "vue-multiselect": "^2.1.6",
     "vue-prism-editor": "^0.2.1",
     "vued3tree": "^3.7.1",
+    "vuedraggable": "^2.23.0",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

package.json

@@ -53,13 +53,21 @@ module.exports = function (ctx) {
         'QTab',
         'QRouteTab',
         'QTabPanels',
+        'QDialog',
+        'QSelect',
         'QTabPanel',
         'QFab',
-        'QFabAction'
+        'QFabAction',
+        'QMenu',
+        'QUploader',
+        'QEditor',
+        'QCard',
+        'QChip'
       ],
 
       directives: [
-        'Ripple'
+        'Ripple',
+        'ClosePopup'
       ],
 
       // Quasar plugins

quasar.conf.js

@@ -0,0 +1,74 @@
+<template>
+  <div id="child-select">
+    <br />
+    <multiselect
+      id="dropdown"
+      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>
+  #child-select {
+    min-width: 300px;
+    min-height: 200px;
+  }
+</style>

src/components/ChildrenMultiselect.vue

@@ -5,30 +5,59 @@
       v-for="componentData in activeRouteArray"
       :key="componentData.componentName"
       :x="componentData.x"
-      :y="componentData.y"
+      :y="componentData.y + 20"
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
-      class-name-resizable="my-resizable-class"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"
       @resizing="onResize"
+      @dblclick.native="onDoubleClick(componentData)"
     >
-
-      <div class="component-title">
+     <div class="component-title">
         <p>{{ componentData.componentName }}</p>
       </div>
       <div class="component-children">
-        <p>children: </p>
+        <p># of children: {{ componentMap[componentData.componentName].children.length }} </p>
+        <p>children: {{ componentMap[componentData.componentName].children }}</p>
          <!-- <p v-for="child in childList" :key="childList.indexOf(child)"> {{ child.text }}</p> -->
       </div>
+      <q-menu context-menu>
+        <q-list>
+          <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 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>
+    <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; background-color: #fd5f00"
+        />
+      </q-dialog>
+    </div>
   </div>
 </template>
 <script>
 import { mapState, mapActions } from 'vuex'
 import VueDraggableResizable from 'vue-draggable-resizable'
+// import ChildrenMultiselect from '../components/ChildrenMultiselect'
 import 'vue-draggable-resizable/dist/VueDraggableResizable.css'
 
 export default {
@@ -38,7 +67,10 @@ export default {
   },
   data () {
     return {
-      abilityToDelete: false
+      modalOpen: false,
+      abilityToDelete: false,
+      testOptions: ['parent', 'child', 'grandchild'],
+      testModel: []
     }
   },
   mounted () {
@@ -52,7 +84,8 @@ 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])
       return this.routes[this.activeRoute]
@@ -65,10 +98,21 @@ export default {
     },
     childList () {
       return this.componentMap[componentData.componentName].children
+    }, 
+    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
@@ -93,6 +137,20 @@ export default {
     },
     onDeactivated () {
       this.activeComponentData.isActive = false
+    },
+    onDoubleClick (compData) {
+      this.setActiveComponent(compData.componentName)
+      this.activeComponentData.isActive = true
+    },
+    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) {
@@ -164,7 +222,6 @@ export default {
   -ms-transition: background-color 200ms linear;
   transition: background-color 200ms linear;
 }
-
 .active {
   background-color: rgba(57, 63, 84, 0.5);
   border: 1px dashed rgb(227, 203, 71);