makes adding loot working

lootalot_front/src/components/ItemInput.vue

@@ -1,44 +1,51 @@
 <template>
-    <div class="container is-paddingless">
-        <p class="heading">Ajouter un objet</p>
-        <div class="field">
-            <label for="item_name" class="label">Nom</label>
-            <div class="control is-expanded" :class="{'is-loading': is_loading }">
-            <input type="text"
-                id="item_name"
-                v-model="item.name"
-                @input="autoCompletion"
-                class="input"
-                autocomplete="on"
-            ></input>
-            </div>
-            <div class="dropdown" :class="{'is-active': showCompletionFrame}">
-                <div class="dropdown-menu">
-                    <div class="dropdown-content">
-                        <a v-for="(result,i) in results"
-                            :key="i"
-                            @click="setResult(result)"
-                            class="dropdown-item"
-                        >{{ result.name }}</a>
+    <div class="field is-horizontal">
+        <div class="field-label">
+            <label class="label">Nouvel objet</label>
+        </div>
+        <div class="field-body">
+            <div class="field">
+                <div class="control is-expanded">
+                    <input type="text"
+                        placeholder="Nom de l'objet"
+                        v-model="item.name"
+                        @input="autoCompletion"
+                        class="input"
+                        autocomplete="on"
+                    >
+                </div>
+                <div class="dropdown" :class="{'is-active': showCompletionFrame}">
+                    <div class="dropdown-menu">
+                        <div class="dropdown-content">
+                            <a v-for="(result,i) in results"
+                                :key="i"
+                                @click="setResult(result)"
+                                class="dropdown-item"
+                            >{{ result.name }}</a>
+                        </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <div class="field">
-            <div class="control">
-                <input type="text"
-                    class="input"
-                    :class="{'is-danger': item.base_price == ''}"
-                    v-model.number="item.base_price"
-                ></input>
+            <div class="field is-expanded has-addons" v-show="item.name != ''">
+                <p class="control"><a class="button is-static">PO</a></p>
+                <p class="control">
+                    <input type="text"
+                        placeholder="Prix"
+                        class="input"
+                        :class="{'is-danger': item.base_price == ''}"
+                        v-model.number="item.base_price"
+                    >
+                </p>
             </div>
-            <div class="control">
-            <button class="button is-primary"
-                @click="addItem"
-            >+</button>
+            <div class="field">
+                <div class="control">
+                    <button class="button is-primary"
+                        @click="addItem"
+                        :disabled="!isItemValid"
+                    >Ajouter</button>
+                </div>
             </div>
         </div>
-
     </div>
 </template>
 
@@ -49,6 +56,7 @@
             return {
                 is_loading: false,
                 item: {
+                    id: 0,
                     name: '',
                     base_price: '',
                 },
@@ -59,7 +67,6 @@
             autoCompletion () {
                 // Unset any previous value on input (for every field except item's name)
                 this.item.base_price = '';
-
                 if (this.item.name == '') {
                     this.results = [];
                 } else {
@@ -69,13 +76,13 @@
                 }
             },
             setResult(result) {
+                this.item.id = result.id;
                 this.item.name = result.name;
                 this.item.base_price = result.base_price;
                 // Clear results to close completionFrame
                 this.results = [];
             },
             addItem () {
-                // TODO: check item is valid
                 this.$emit("addItem", this.item);
                 this.item = {
                     name: '',
@@ -86,11 +93,15 @@
         },
         computed: {
             showCompletionFrame () { return this.results.length > 0 },
+            isItemValid () { return this.item.name != '' && this.item.base_price != '' },
         }
     }
 </script>
 
 <style scoped>
-    .dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
-    /*.dropdown { top: -0.75rem; }*/
+.dropdown, .dropdown-menu {
+    min-width: 100%;
+    margin-top: 0;
+    padding-top: 0;
+}
 </style>

lootalot_front/src/components/Loot.vue

@@ -1,37 +1,33 @@
 <template>
-  <div>
-  <p class="heading has-text-left is-size-5">
-    Nouveau loot - {{ looted.length }} objet(s)</p>
-  <ItemInput @addItem="onAddItem" :source="inventory"></ItemInput>
-  <p v-for="(item, idx) in looted" :key="idx"
-     class="has-text-left is-size-5">
-    {{ item.name }} ({{ item.sell_value }}po)
-  </p>
+  <div class="box">
+    <ItemInput
+      @addItem="onAddItem"
+      :source="inventory"
+    ></ItemInput>
+    <div class="field is-horizontal">
+      <div class="field-label"><label class="label">ou</label></div>
+      <div class="field-body">
+        <div class="field">
+            <div class="control">
+                <button class="button is-primary">Depuis une liste</button>
+            </div>
+        </div>
+      </div>
+    </div>
+    <button class="button is-danger" @click="$emit('confirmAction')">Finaliser</button>
   </div>
 </template>
 
 <script>
     import ItemInput from './ItemInput.vue'
-    // 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}, 
-        {id: 9, name: "Arc court", sell_value: 10}, 
-    ];
- 
+
     export default {
+        props: ["inventory"],
         components: { ItemInput },
-        data () { return {
-            looted: [],
-            inventory: MOCK_ITEMS,
-        }; 
-        },
+        data () { return {}; },
         methods: {
             onAddItem (item) {
-                this.looted.push(item);
-            },
-            onClose () {
-                this.$emit('done');
+                this.$emit('addItem', item);
             },
         }