inits Loot adding functionnality

lootalot_front/src/components/ItemInput.vue

@@ -0,0 +1,68 @@
+<template>
+<div class="container is-fluid">
+  <div class="field has-addons">
+    <div class="control" :class="{'is-loading': is_loading }">
+      <input type="text" 
+          v-model="search"
+          @input="autoCompletion" 
+          class="input" 
+          :class="{'is-danger': no_results, 
+                   'is-warning': auto_open}"
+          autocomplete="on">
+      </div>
+    <div class="control">
+      <button class="button is-primary"
+        :disabled="no_results"
+        >+</button>
+      </div>
+    </div>
+  <ul class="box" v-show="auto_open">
+    <li v-for="(result,i) in results" :key="i">
+      {{ result.name }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+    // List of items for autocomplete
+    const MOCK_ITEMS = [
+        {id: 35, name: "Cape d'invisibilité", sell_value: 30000}, 
+        {id: 8, name: "Arc long", sell_value: 10}, 
+    ];
+ 
+    export default {
+        data () {
+            return {
+                is_loading: false,
+                no_results: false,
+                search: '',
+                results: [],
+                auto_open: false,
+            };
+        },
+        methods: {
+            autoCompletion (ev) {
+                // TODO: a lot happens here that
+                //       need to be clarified
+                this.auto_open = true;
+                if (this.search == '') {
+                    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;
+                }
+            },
+            setResult(result) {
+                this.search = result;
+                this.auto_open = false;
+            }
+        },
+    }
+</script>