Merge pull request #20 from JojuOlaode/componentSort

Component sort

Author: keliphan

src/components/HomeSideDropDownItems/ComponentList.vue

@@ -1,5 +1,18 @@
 <template>
   <div class="home-sidebar">
+    <multiselect
+      class='multiselect' 
+      v-model="value" 
+      :options='options' 
+      :searchable="true" 
+      :close-on-select="true"
+      :max-height="90"
+      :option-height="20"
+      @input="handleSelect(value)"
+      placeholder="Select a component">
+      <span slot='noResult'>No components found.</span>
+      </multiselect>
+      <br/>
     <a
       v-for="componentData in activeRouteDisplay"
       :key="componentData.componentName"
@@ -29,18 +42,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: {
@@ -56,6 +82,11 @@ export default {
     handleClick (componentData) {
       this.setActiveComponent(componentData.componentName)
       this.deleteActiveComponent(componentData.componentName)
+    },
+    handleSelect (componentName) {
+      this.setActiveComponent(componentName)
+      this.value = ''
+      this.activeComponentData.isActive = true
     }
   }
 }

src/components/ParentMultiselect.vue

@@ -8,10 +8,12 @@
       :close-on-select="true"
       :options="options"
       @input="handleSelect"
-      :max-height="150"
+      :max-height="90"
       :option-height="20"
       :searchable="true"
-    ></multiselect>
+    >
+    <span slot='noResult'>No components found.</span>
+    </multiselect>
   </div>
 </template>
 
@@ -65,7 +67,7 @@ export default {
 
 <style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
 <style scoped>
-  #parent-select{
+  #parent-select {
     height: 30px;
     margin: 0.75rem;
     width: 90%;