works on Loot adding UI

lootalot_front/src/App.vue

@@ -1,10 +1,14 @@
 <template>
-  <PlayerView :id="state.player_id" 
+  <PlayerView
-      v-slot="{ player, loot, notifications, actions }">
+    :id="state.player_id"
+    v-slot="{ player, loot, notifications, actions }"
+  >
     <main id="app" class="container">
-      <header >
+      <header>
         <HeaderBar :app_state="state">
-          <template v-slot:title>{{ player.name }}</template>
+          <template v-slot:title>
+            {{ player.name }}
+          </template>
           <template v-slot:links>
             <a class="navbar-item">History of Loot</a>
             <template v-if="playerIsGroup">
@@ -24,20 +28,26 @@
         <Wealth 
             :wealth="[player.cp, player.sp, player.gp, player.pp]" 
             :debt="player.debt"
-            @update="actions.updateWealth">
+            @update="actions.updateWealth"
-        </Wealth>
+        ></Wealth>
         <p v-show="notifications.length > 0">{{ notifications }}</p>
       </header>
       <nav>
         <div class="tabs is-centered is-boxed is-medium">
           <ul>
             <li :class="{ 'is-active': activeView == 'group' }">
-              <a @click="switchView('group')">Coffre de groupe</a></li>
+              <a @click="switchView('group')">
-            <li :class="{ 'is-active': activeView == 'player' }" 
+                Coffre de groupe
-              v-show="!playerIsGroup">
+              </a>
-              <a @click="switchView('player')">Mon coffre</a></li>
+            </li>
+            <li v-show="!playerIsGroup" :class="{ 'is-active': activeView == 'player' }">
+              <a @click="switchView('player')">
+                Mon coffre
+              </a>
+            </li>
             <li :class="{'is-active': activeView == 'adding' }">
-              <a class="has-text-grey-light" @click="switchView('adding')">
+              <a class="has-text-grey-light"
+                 @click="switchView('adding')">
                 + {{ playerIsGroup ? 'Nouveau Loot' : 'Acheter' }}
               </a>
             </li>
@@ -46,9 +56,15 @@
       </nav>
       <main class="section">
         <template v-if="isAdding">
-          <h2 v-show="playerIsGroup">ItemInput</h2>
+          <div v-if="playerIsGroup" class="box">
+            <ItemInput v-if="playerIsGroup"
+              :source="state.inventory"
+              @addItem="item => pending_loot.push(item)"
+            ></ItemInput>
+            <button>Envoyer</button>
+          </div>
           <AddingChest 
-              :items="playerIsGroup ? [] : state.inventory"
+              :items="playerIsGroup ? pending_loot : state.inventory"
               :perms="playerIsGroup ? {} : { canBuy: true }"
               @buy="(data) => { switchView('player'); actions.buyItems(data); }">
           </AddingChest>
@@ -73,6 +89,7 @@ import PlayerView from './components/PlayerView.js'
 import HeaderBar from './components/HeaderBar.vue'
 import Wealth from './components/Wealth.vue'
 import Chest from './components/Chest.vue'
+import ItemInput from './components/ItemInput.vue'
 import { AppStorage } from './AppStorage'
 
 function getCookie(cname) {
@@ -95,9 +112,10 @@ export default {
   name: 'app',
   data () {
       return {
-  	    state: AppStorage.state,
+        state: AppStorage.state,
         activeView: 'group',
         shopInventory: [{id: 1, name: "Item from shop #1", base_price: 2000}],
+        pending_loot: [],
       };
   },
   components: {
@@ -105,7 +123,8 @@ export default {
     HeaderBar,
     'AddingChest': Chest, // Alias to prevent component re-use 
     Chest,
-    Wealth
+    Wealth,
+    ItemInput,
   },
   created () {
     // Initiate with active player set to value found in cookie

lootalot_front/src/components/ItemInput.vue

@@ -1,100 +1,96 @@
 <template>
-<div class="container is-paddingless">
+    <div class="container is-paddingless">
-  <div class="field has-addons">
+        <p class="heading">Ajouter un objet</p>
-    <div class="control is-expanded" 
+        <div class="field">
-        :class="{'is-loading': is_loading }">
+            <label for="item_name" class="label">Nom</label>
-      <input type="text" 
+            <div class="control is-expanded" :class="{'is-loading': is_loading }">
-        v-model="item_name"
+            <input type="text"
-        @input="autoCompletion" 
+                id="item_name"
-        class="input" 
+                v-model="item.name"
-       :class="{'is-danger': no_results, 
+                @input="autoCompletion"
-                'is-warning': auto_open}"
+                class="input"
-        autocomplete="on">
+                autocomplete="on"
-        </input>
+            ></input>
-      </div>
-    <div class="control">
-      <input type="text" class="input"
-        :class="{'is-danger': !item_price}"
-        v-model.number="item_price"></input>
-    </div>
-    <div class="control">
-      <button class="button is-primary"
-        :disabled="no_results"
-        @click="addItem"
-        >+</button>
-      </div>
-    </div>
-    <div class="dropdown" :class="{'is-active': auto_open}">
-      <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 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>
+        <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>
+            <div class="control">
+            <button class="button is-primary"
+                @click="addItem"
+            >+</button>
+            </div>
+        </div>
+
+    </div>
 </template>
 
 <script>
-
     export default {
         props: ["source"],
         data () {
             return {
                 is_loading: false,
-                no_results: false,
+                item: {
-                item_name: '',
+                    name: '',
-                item_price: '',
+                    base_price: '',
+                },
                 results: [],
-                auto_open: false,
             };
         },
         methods: {
-            autoCompletion (ev) {
+            autoCompletion () {
-                // TODO: a lot happens here that
+                // Unset any previous value on input (for every field except item's name)
-                //       need to be clarified
+                this.item.base_price = '';
-                if (this.item_name == '') {
+
-                    this.auto_open = false;
+                if (this.item.name == '') {
                     this.results = [];
-                    this.no_results = false;
                 } else {
-                    this.results = this.source.filter(item => {
+                    this.results = this.source.filter(
-                        return item.name.includes(this.item_name);
+                        item => item.name.toUpperCase().includes(this.item.name.toUpperCase())
-                    });
+                    );
-                    // Update status 
-                    if (this.results.length == 0) {
-                        this.no_results = true;
-                    } else {
-                        this.no_results = false;
-                        this.auto_open = true;
-                    }
                 }
             },
             setResult(result) {
-                this.item_name = result.name;
+                this.item.name = result.name;
-                this.item_price = result.sell_value;
+                this.item.base_price = result.base_price;
-                this.auto_open = false;
+                // Clear results to close completionFrame
+                this.results = [];
             },
             addItem () {
-                this.$emit("addItem", {
+                // TODO: check item is valid
-                   name: this.item_name,
+                this.$emit("addItem", this.item);
-                   sell_value: this.item_price
+                this.item = {
-                });        
+                    name: '',
-                this.item_name = '';
+                    base_price: '',
-                this.item_price = '';
+                };
                 this.results = [];
-                this.no_results = false;
+            },
-                this.auto_open = false;
-            }
         },
+        computed: {
+            showCompletionFrame () { return this.results.length > 0 },
+        }
     }
 </script>
 
 <style scoped>
     .dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
-    .dropdown { top: -0.75rem; }
+    /*.dropdown { top: -0.75rem; }*/
 </style>