Added match button action

src/App.vue

@@ -1,8 +1,11 @@
 <template>
   <div id="app">
     <OtuWidget
-      :otu-list="otuList"
-      :taxon-list="taxonList"/>
+      :name-list="otuList"
+      column-name="Otu"
+      column-match="Taxon name"
+      :possible-matches-list="taxonList"
+      @matched="setMatches"/>
   </div>
 </template>
 
@@ -20,7 +23,13 @@ export default {
   data () {
     return {
       otuList: OtuList,
-      taxonList: taxonNames
+      taxonList: taxonNames,
+      matchedList: []
+    }
+  },
+  methods: {
+    setMatches (list) {
+      this.matchedList = list
     }
   }
 }

src/components/List.vue

@@ -1,16 +1,16 @@
 <template>
-  <table>
+  <table border="1">
     <thead>
       <tr>
         <th>Select</th>
-        <th>OTU name</th>
+        <th>{{ columnName }}</th>
         <th>Modifier for mapping</th>
-        <th>Taxon name</th>
+        <th>{{ columnMatch }}</th>
       </tr>
     </thead>
     <tbody>
       <tr
-        v-for="(otu, index) in otuList"
+        v-for="(otu, index) in nameList"
         :key="index.id">
         <td>
           <input
@@ -23,8 +23,34 @@
           <input
             type="text"
             v-model="temporaryNameList[index]">
+          <button
+            type="button"
+            @click="removeTemporaryName(index)">
+            Remove
+          </button>
+        </td>
+        <td>
+          <div v-if="mappedList[index]">
+            <span v-if="mappedList[index].length > 1">Possible mappings</span>
+            <button
+              v-if="mappedList[index].length"
+              type="button">
+              Remove
+            </button>
+            <ul>
+              <li
+                v-for="(item, mIindex) in mappedList[index]"
+                :key="mIindex">
+                <button
+                  type="button"
+                  @click="acceptMatch(otu, item, index)">
+                  Accept
+                </button>
+                {{ item }}
+              </li>
+            </ul>
+          </div>
         </td>
-        <td>{{ mappedTaxon[index] }}</td>
       </tr>
     </tbody>
   </table>
@@ -34,13 +60,13 @@
 
 export default {
   props: {
-    otuList: {
+    nameList: {
       type: Array
     },
     taxonList: {
       type: Array
     },
-    mappedTaxon: {
+    mappedList: {
       type: Array
     },
     temporaryNameList: {
@@ -51,6 +77,14 @@ export default {
       type: Array,
       default: () => []
     },
+    columnName: {
+      type: String,
+      required: true
+    },
+    columnMatch: {
+      type: String,
+      required: true
+    },
     value: {
       type: Array,
       default: () => []
@@ -65,6 +99,27 @@ export default {
         this.$emit('input', value)
       }
     }
+  },
+  data () {
+    return {
+      matchesList: []
+    }
+  },
+  methods: {
+    acceptMatch (name, mappedName, nameIndex) {
+      const matched = {
+        name: name,
+        matched: mappedName
+      }
+      this.matchesList.push(matched)
+      this.$emit('matched', {
+        mapped: matched,
+        index: nameIndex
+      })
+    },
+    removeTemporaryName (index) {
+      this.$set(this.temporaryNameList, index, undefined)
+    }
   }
 }
 </script>

src/components/OtuWidget.vue

@@ -2,13 +2,16 @@
   <div>
     <mapping-view
       v-model="mappingOptions"
-      @mapping="mappingTaxon"/>
+      @mapping="mappingList"/>
     <list-component
       v-model="selectedOtus"
-      :otu-list="otuList"
-      :taxon-list="taxonList"
+      :name-list="nameList"
+      :column-name="columnName"
+      :column-match="columnMatch"
+      :taxon-list="possibleMatchesList"
       :temporary-name-list="temporaryNameList"
-      :mapped-taxon="mappedTaxon"/>
+      :mapped-list="mappedList"
+      @matched="addMatched"/>
   </div>
 </template>
 
@@ -23,28 +26,37 @@ export default {
     MappingView
   },
   props: {
-    otuList: {
+    nameList: {
       type: Array,
       default: () => []
     },
-    taxonList: {
+    possibleMatchesList: {
       type: Array,
       default: () => []
+    },
+    columnName: {
+      type: String,
+      required: true
+    },
+    columnMatch: {
+      type: String,
+      required: true
     }
   },
   data () {
     return {
       mappers: [],
       mappingOptions: [],
       temporaryNameList: [],
-      mappedTaxon: [],
-      selectedOtus: []
+      mappedList: [],
+      selectedOtus: [],
+      matchedNames: []
     }
   },
   watch: {
     mappingOptions: {
       handler (newVal) {
-        this.temporaryNameList = this.otuList.map(otu => this.getTemporaryName(otu.name))
+        this.temporaryNameList = this.nameList.map(otu => this.getTemporaryName(otu.name))
       },
       deep: true
     }
@@ -61,8 +73,13 @@ export default {
       })
       return name.trim()
     },
-    mappingTaxon () {
-      this.mappedTaxon = this.temporaryNameList.map(name => this.taxonList.filter(taxon => taxon.name === name))
+    mappingList () {
+      this.mappedList = this.temporaryNameList.map(name => this.possibleMatchesList.filter(taxon => taxon.name === name))
+    },
+    addMatched (event) {
+      this.matchedNames.push(event.mapped)
+      this.nameList.splice(event.index, 1)
+      this.mappedList.splice(event.index, 1)
     }
   }
 }