Can select parent when creating a component

Author: Dean Ohashi

src/components/CreateComponent.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/ParentMultiselect.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/store/actions.js

@@ -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/mutations.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
   }
 }
 

src/store/state/index.js

@@ -34,7 +34,8 @@ const newState = {
   projectNumber: 2,
   activeTab: 0,
   componentChildrenMultiselectValue: [],
-  modalOpen: false
+  modalOpen: false,
+  parentSelected: false
 }
 
 export default newState

src/store/types.js

@@ -38,6 +38,7 @@ export const UPDATE_ACTIVE_COMPONENT_CHILDREN_VALUE =
 export const ADD_COMPONENT_TO_COMPONENT_CHILDREN =
   'ADD_COMPONENT_TO_COMPONENT_CHILDREN'
 export const UPDATE_OPEN_MODAL = 'UPDATE_OPEN_MODAL'
+export const PARENT_SELECTED = 'PARENT_SELECTED'
 
 // Actions
 export const registerComponent = 'registerComponent'
@@ -69,3 +70,4 @@ export const updateActiveComponentChildrenValue =
 export const updateComponentChildrenValue = 'updateComponentChildrenValue'
 export const updateComponentNameInputValue = 'updateComponentNameInputValue'
 export const updateOpenModal = 'updateOpenModal'
+export const parentSelected = 'parentSelected'