From 1ff24292447e875884d9c21297aad34a24102d06 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Fri, 4 Oct 2019 14:47:45 +0200
Subject: [PATCH] starts working on ItemInput

---
 lootalot_front/src/App.vue                  | 43 +++++++----
 lootalot_front/src/components/ItemInput.vue | 79 +++++++++++----------
 2 files changed, 68 insertions(+), 54 deletions(-)

diff --git a/lootalot_front/src/App.vue b/lootalot_front/src/App.vue
index 7048ec6..15156fa 100644
--- a/lootalot_front/src/App.vue
+++ b/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
diff --git a/lootalot_front/src/components/ItemInput.vue b/lootalot_front/src/components/ItemInput.vue
index 8072941..9e1df90 100644
--- a/lootalot_front/src/components/ItemInput.vue
+++ b/lootalot_front/src/components/ItemInput.vue
@@ -1,42 +1,43 @@
 <template>
-<div class="container is-paddingless">
-  <div class="field has-addons">
-    <div class="control is-expanded" 
-        :class="{'is-loading': is_loading }">
-      <input type="text" 
-        v-model="item_name"
-        @input="autoCompletion" 
-        class="input" 
-       :class="{'is-danger': no_results, 
-                'is-warning': auto_open}"
-        autocomplete="on">
-        </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 class="container is-paddingless">
+        <p class="heading">Ajouter un objet</p>
+        <div class="field has-addons">
+            <div class="control is-expanded" :class="{'is-loading': is_loading }">
+            <input type="text"
+                v-model="item_name"
+                @input="autocompletion"
+                class="input"
+                :class="{'is-danger': no_results,
+                        'is-warning': auto_open}"
+                autocomplete="on"
+            ></input>
             </div>
+            <div class="control">
+                <input type="text"
+                    class="input"
+                    :class="{'is-danger': !item_price}"
+                    v-model.number="item_price"
+                ></input>
             </div>
-      </div>
-  </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>
+        </div>
+    </div>
 </template>
 
 <script>
@@ -63,7 +64,7 @@
                     this.no_results = false;
                 } else {
                     this.results = this.source.filter(item => {
-                        return item.name.includes(this.item_name);
+                        return item.name.toUpperCase().includes(this.item_name.toUpperCase());
                     });
                     // Update status 
                     if (this.results.length == 0) {
@@ -76,13 +77,13 @@
             },
             setResult(result) {
                 this.item_name = result.name;
-                this.item_price = result.sell_value;
+                this.item_price = result.base_price;
                 this.auto_open = false;
             },
             addItem () {
                 this.$emit("addItem", {
                    name: this.item_name,
-                   sell_value: this.item_price
+                   base_price: this.item_price
                 });        
                 this.item_name = '';
                 this.item_price = '';