more work on ItemInput

lootalot_front/src/components/ItemInput.vue

@@ -1,7 +1,8 @@
 <template>
-<div class="container is-fluid">
+<div class="container">
   <div class="field has-addons">
-    <div class="control" :class="{'is-loading': is_loading }">
+    <div class="control is-expanded" 
+        :class="{'is-loading': is_loading }">
       <input type="text" 
         v-model="search"
         @input="autoCompletion" 
@@ -9,15 +10,19 @@
        :class="{'is-danger': no_results, 
                 'is-warning': auto_open}"
         autocomplete="on">
+        </input>
       </div>
     <div class="control">
       <button class="button is-primary"
         :disabled="no_results"
+        @click="addItem"
         >+</button>
       </div>
     </div>
   <ul class="box" v-show="auto_open">
-    <li v-for="(result,i) in results" :key="i">
+    <li v-for="(result,i) in results" :key="i"
+      @click="setResult(result.name)"
+      >
       {{ result.name }}
       </li>
     </ul>
@@ -45,23 +50,33 @@
             autoCompletion (ev) {
                 // TODO: a lot happens here that
                 //       need to be clarified
-                this.auto_open = true;
                 if (this.search == '') {
+                    this.auto_open = false;
                     this.results = [];
                     this.no_results = false;
-                    this.auto_open = false;
-                    console.log("empty search");
                 } else {
                     this.results = MOCK_ITEMS.filter(item => {
                         return item.name.includes(this.search);
                     });
                     // Update status 
-                    this.no_results = this.results.length == 0;
+                    if (this.results.length == 0) {
+                        this.no_results = true;
+                    } else {
+                        this.no_results = false;
+                        this.auto_open = true;
+                    }
                 }
             },
             setResult(result) {
                 this.search = result;
                 this.auto_open = false;
+            },
+            addItem () {
+                this.$emit("addItem", this.search);        
+                this.search = '';
+                this.results = [];
+                this.no_results = false;
+                this.auto_open = false;
             }
         },
     }

lootalot_front/src/components/Loot.vue

@@ -5,7 +5,7 @@
             Nouveau loot</p>
           </div>
         <div class="card-content">
-          <ItemInput></ItemInput>
+          <ItemInput @addItem="onAddItem"></ItemInput>
           <p v-for="(item, idx) in looted" :key="idx"
              class="has-text-left is-size-5">
             {{ item }}
@@ -22,7 +22,12 @@
         data () { return {
             looted: [],
         }; 
+        },
+        methods: {
+            onAddItem (item) {
+                this.looted.push(item);
+            }
+        }
 
     }
-    }
 </script>