added a multiselect tag to allow for searching components in component list and sets selected component to active component

Author: JojuOlaode

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -1,5 +1,16 @@
 <template>
   <div class="home-sidebar">
+    <multiselect
+      class='multiselect' 
+      v-model="value" 
+      :options='options' 
+      :searchable="true" 
+      :close-on-select="false"
+      :max-height="150"
+      :option-height="20"
+      @input="onActivated(value)"
+      placeholder="Select a component"></multiselect>
+      <br/>
     <a
       v-for="componentData in activeRouteDisplay"
       :key="componentData.componentName"
@@ -29,18 +40,31 @@
  * TODO: Needs functionality to delete component, and (maybe) show child components
  */
 import { mapState, mapActions } from 'vuex'
+import Multiselect from 'vue-multiselect'
 
 export default {
+  data () {
+    return {
+      value: ''
+    }
+  },
+  components: { Multiselect },
   computed: {
     ...mapState(['routes', 'activeRoute', 'activeComponent']),
     activeRouteDisplay () {
       let component = this.routes[this.activeRoute]
+      console.log(component)
       return component
     },
     activeComponentData () {
       return this.activeRouteDisplay.filter(componentData => {
         return componentData.componentName === this.activeComponent
       })[0]
+    },
+    options () {
+      const val = this.activeRouteDisplay.map(component => component.componentName)
+      console.log('options', val)
+      return val
     }
   },
   methods: {
@@ -50,7 +74,12 @@ export default {
       'deleteActiveComponent'
     ]),
     onActivated (componentData) {
-      this.setActiveComponent(componentData.componentName)
+      if (!componentData.componentName) {
+        this.setActiveComponent(componentData)
+        this.value = ''
+      } else {
+        this.setActiveComponent(componentData.componentName)
+      }
       this.activeComponentData.isActive = true
     },
     handleClick (componentData) {