inits Loot adding functionnality

lootalot_front/src/components/Chest.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="container">
-    <p class="notification is-paddingless is-info" v-show="canAdd">Peut ajouter</p> 
+    <button v-if="canAdd" class="button is-medium is-info">
+        Nouveau loot
+    </button>
+    <Loot></Loot>
     <table class="table is-fullwidth is-striped" >
         <thead>
           <tr>
@@ -55,6 +58,7 @@
     import { store } from '../App.vue'
     import Request from './Request.vue'
     import PercentInput from './PercentInput.vue'
+    import Loot from './Loot.vue'
     /*
         The chest displays the collection of items owned by a player
 
@@ -78,6 +82,7 @@
         components: {
             Request,
             PercentInput,
+            Loot,
         },
         data () {
             return {

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>

lootalot_front/src/components/Loot.vue

@@ -0,0 +1,28 @@
+<template>
+    <div class="card">
+        <div class="card-header">
+          <p class="card-header-title">
+            Nouveau loot</p>
+          </div>
+        <div class="card-content">
+          <ItemInput></ItemInput>
+          <p v-for="(item, idx) in looted" :key="idx"
+             class="has-text-left is-size-5">
+            {{ item }}
+          </p>
+          </div>
+      </div>
+</template>
+
+<script>
+    import ItemInput from './ItemInput.vue'
+
+    export default {
+        components: { ItemInput },
+        data () { return {
+            looted: [],
+        }; 
+
+        }
+    }
+</script>