merge conflicts - rename invalid component name placeholder

Author: keliphan

src/components/HomeQueue.vue

@@ -16,7 +16,7 @@
       <div :class="activeHTML === element[2] ? 'list-group-item-selected' : 'list-group-item'" @dblclick.self="setActiveElement(element)" v-for="(element) in renderList" :key="element[1] + Date.now()">
         <i class="fas fa fa-angle-double-down fa-md" @click="setLayer({text: element[0], id: element[2]})"></i>
         {{ element[0] }}
-        <i class="fas fa fa-trash fa-md" @click.self="deleteElement(element[2])"></i>
+        <i class="fas fa fa-trash fa-md" @click.self="deleteElement([element[1],element[2]])"></i>
       </div>
     </draggable>
   </section>
@@ -83,8 +83,8 @@ export default {
   methods: {
     ...mapActions(['setActiveHTML', 'setActiveLayer', 'upOneLayer']),
     deleteElement (id) {
-      if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id)
-      else this.$store.dispatch(deleteFromComponentHtmlList, id)
+      if (this.activeComponent === '') this.$store.dispatch(deleteSelectedElement, id[0])
+      else this.$store.dispatch(deleteFromComponentHtmlList, id[1])
     },
     setActiveElement (element) {
       this.setActiveHTML(element)

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,11 +8,12 @@
       :close-on-select="true"
       :options="options"
       @input="handleSelect"
-      :max-height="150"
+      :max-height="90"
       :option-height="20"
       :searchable="true"
-      @click.native="resetActiveComponent"
-    ></multiselect>
+    >
+    <span slot='noResult'>No components found.</span>
+    </multiselect>
   </div>
 </template>
 
@@ -71,7 +72,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%;