starts working on ItemInput

lootalot_front/src/App.vue

@@ -1,10 +1,14 @@
 <template>
-  <PlayerView :id="state.player_id" 
-      v-slot="{ player, loot, notifications, actions }">
+  <PlayerView
+    :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">
-        </Wealth>
+            @update="actions.updateWealth"
+        ></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>
-            <li :class="{ 'is-active': activeView == 'player' }" 
-              v-show="!playerIsGroup">
-              <a @click="switchView('player')">Mon coffre</a></li>
+              <a @click="switchView('group')">
+                Coffre de groupe
+              </a>
+            </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,9 @@
       </nav>
       <main class="section">
         <template v-if="isAdding">
-          <h2 v-show="playerIsGroup">ItemInput</h2>
+          <ItemInput v-if="playerIsGroup" :source="state.inventory" @addItem="item => pending_loot.push(item)"></ItemInput>
           <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 +83,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 +106,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 +117,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