Merge pull request #7 from dnohashi/selectParent

Can select parent when creating a component

Author: dnohashi

package-lock.json

@@ -16,17 +16,20 @@
     "localforage": "^1.7.3",
     "mousetrap": "^1.6.3",
     "quasar": "^1.0.0",
+    "vue-drag-resize": "^1.3.2",
     "vue-draggable-resizable": "^2.0.0-rc2",
     "vue-loader": "^15.7.0",
     "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

@@ -147,7 +147,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

@@ -9,6 +9,7 @@
       :w="componentData.w"
       :h="componentData.h"
       :parent="true"
+      class-name-resizable="my-resizable-class"
       @activated="onActivated(componentData)"
       @deactivated="onDeactivated(componentData)"
       @dragging="onDrag"

src/components/ComponentDisplay.vue

@@ -16,29 +16,23 @@
     <div class="icon-container">
       <Icons @getClickedIcon="addToSelectedElementList" />
     </div>
-    <!-- <ChildrenMultiselect /> -->
+    <ParentMultiselect />
     <br />
-    <!-- <button
-      class="button is-primary"
-      id="add-component-btn"
-      @click="handleClick"
-      :disabled="!componentNameInputValue"
-    >Add Component</button> -->
     <q-btn id="add-component-btn" class="primary" color="secondary" label="Create Component" icon-right="add" @click="handleClick" :disabled="!componentNameInputValue" />
   </div>
 </template>
 
 <script>
 import Icons from './Icons'
-// import ChildrenMultiselect from '@/components/ChildrenMultiselect';
+import ParentMultiselect from '../components/ParentMultiselect'
 import { mapState, mapActions } from 'vuex'
 // import * as types from '../store/types.js'
 
 export default {
   name: 'HomeSidebar',
   components: {
-    // ChildrenMultiselect,
-    Icons
+    Icons,
+    ParentMultiselect
   },
   computed: {
     ...mapState(['componentMap', 'selectedElementList']),

src/components/CreateComponent.vue

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

src/components/FooterTabView.vue

@@ -0,0 +1,58 @@
+<template>
+  <div id="parent-select">
+    <br />
+    <multiselect
+      placeholder="Choose Parent (if applicable)"
+      :multiple="false"
+      :close-on-select="true"
+      :options="options"
+      @input="handleSelect"
+      :max-height="150"
+      :option-height="20"
+      :searchable="false"
+    ></multiselect>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+import Multiselect from 'vue-multiselect'
+
+export default {
+  name: 'ParentMultiselect',
+  components: {
+    Multiselect
+  },
+  computed: {
+    ...mapState([
+      'routes',
+      'componentMap',
+      'activeComponent'
+    ]),
+    options () {
+      const routes = Object.keys(this.routes)
+      const exceptions = new Set(['App', ...routes])
+      return Object.keys(this.componentMap).filter(component => {
+        if (!exceptions.has(component)) return component
+      })
+    }
+  },
+  methods: {
+    ...mapActions([
+      'setActiveComponent',
+      'parentSelected'
+    ]),
+    handleSelect (value) {
+      // Set Active Component to selected Parent
+      this.setActiveComponent(value)
+      // Set parentSelected to true IF VALUE IS A VALID PARENT (not null)
+      this.parentSelected(true)
+    }
+  }
+}
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped>
+
+</style>

src/components/ParentMultiselect.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

@@ -16,10 +16,17 @@ const actions = {
       let value = state.componentChildrenMultiselectValue.map(component => {
         return state.componentMap[component]
       })
+
+      if (state.parentSelected) {
+        commit(types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE, [...state.componentMap[state.activeComponent].children, payload.componentName])
+      }
+
       commit(types.UPDATE_COMPONENT_CHILDREN_VALUE, { component, value })
       commit(types.UPDATE_COMPONENT_CHILDREN_MULTISELECT_VALUE, [])
       commit(types.UPDATE_COMPONENT_NAME_INPUT_VALUE, '')
       commit(types.SET_SELECTED_ELEMENT_LIST, [])
+      commit(types.SET_ACTIVE_COMPONENT, '')
+      commit(types.PARENT_SELECTED, false)
     }
   },
   // sets component inside componentDisplay
@@ -102,6 +109,9 @@ const actions = {
   },
   [types.updateOpenModal]: ({ commit }, payload) => {
     commit(types.UPDATE_OPEN_MODAL, payload)
+  },
+  [types.parentSelected]: ({ commit }, payload) => {
+    commit(types.PARENT_SELECTED, payload)
   }
 }
 

src/store/actions.js

@@ -157,9 +157,6 @@ const mutations = {
   // additionally addes children to the component
   [types.UPDATE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
     const { component, value } = payload
-    console.log('IN MUTATIONS: ', value)
-    console.log('Type: ', typeof value)
-
     state.componentMap[component].children = value
   },
   [types.UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE]: (state, payload) => {
@@ -179,6 +176,9 @@ const mutations = {
   // invoked when element is double clicked, changing the boolean value
   [types.UPDATE_OPEN_MODAL]: (state, payload) => {
     state.modalOpen = payload
+  },
+  [types.PARENT_SELECTED]: (state, payload) => {
+    state.parentSelected = payload
   }
 }