From 4f6970c423a550125347e119e97a024ad53faa16 Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Fri, 4 Oct 2019 16:02:22 +0200
Subject: [PATCH] works on Loot adding UI

---
 lootalot_front/src/App.vue                  |   8 +-
 lootalot_front/src/components/ItemInput.vue | 103 ++++++++++----------
 2 files changed, 56 insertions(+), 55 deletions(-)

diff --git a/lootalot_front/src/App.vue b/lootalot_front/src/App.vue
index 15156fa..fcf96b5 100644
--- a/lootalot_front/src/App.vue
+++ b/lootalot_front/src/App.vue
@@ -56,7 +56,13 @@
       </nav>
       <main class="section">
         <template v-if="isAdding">
-          <ItemInput v-if="playerIsGroup" :source="state.inventory" @addItem="item => pending_loot.push(item)"></ItemInput>
+          <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 ? pending_loot : state.inventory"
               :perms="playerIsGroup ? {} : { canBuy: true }"
diff --git a/lootalot_front/src/components/ItemInput.vue b/lootalot_front/src/components/ItemInput.vue
index 9e1df90..ac6965f 100644
--- a/lootalot_front/src/components/ItemInput.vue
+++ b/lootalot_front/src/components/ItemInput.vue
@@ -1,101 +1,96 @@
 <template>
     <div class="container is-paddingless">
         <p class="heading">Ajouter un objet</p>
-        <div class="field has-addons">
+        <div class="field">
+            <label for="item_name" class="label">Nom</label>
             <div class="control is-expanded" :class="{'is-loading': is_loading }">
             <input type="text"
-                v-model="item_name"
-                @input="autocompletion"
+                id="item_name"
+                v-model="item.name"
+                @input="autoCompletion"
                 class="input"
-                :class="{'is-danger': no_results,
-                        'is-warning': auto_open}"
                 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>
+                </div>
+            </div>
+        </div>
+        <div class="field">
             <div class="control">
                 <input type="text"
                     class="input"
-                    :class="{'is-danger': !item_price}"
-                    v-model.number="item_price"
+                    :class="{'is-danger': item.base_price == ''}"
+                    v-model.number="item.base_price"
                 ></input>
             </div>
             <div class="control">
             <button class="button is-primary"
-                :disabled="no_results"
-                @click="additem"
+                @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>
-
     export default {
         props: ["source"],
         data () {
             return {
                 is_loading: false,
-                no_results: false,
-                item_name: '',
-                item_price: '',
+                item: {
+                    name: '',
+                    base_price: '',
+                },
                 results: [],
-                auto_open: false,
             };
         },
         methods: {
-            autoCompletion (ev) {
-                // TODO: a lot happens here that
-                //       need to be clarified
-                if (this.item_name == '') {
-                    this.auto_open = false;
+            autoCompletion () {
+                // Unset any previous value on input (for every field except item's name)
+                this.item.base_price = '';
+
+                if (this.item.name == '') {
                     this.results = [];
-                    this.no_results = false;
                 } else {
-                    this.results = this.source.filter(item => {
-                        return 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;
-                    }
+                    this.results = this.source.filter(
+                        item => item.name.toUpperCase().includes(this.item.name.toUpperCase())
+                    );
                 }
             },
             setResult(result) {
-                this.item_name = result.name;
-                this.item_price = result.base_price;
-                this.auto_open = false;
+                this.item.name = result.name;
+                this.item.base_price = result.base_price;
+                // Clear results to close completionFrame
+                this.results = [];
             },
             addItem () {
-                this.$emit("addItem", {
-                   name: this.item_name,
-                   base_price: this.item_price
-                });        
-                this.item_name = '';
-                this.item_price = '';
+                // TODO: check item is valid
+                this.$emit("addItem", this.item);
+                this.item = {
+                    name: '',
+                    base_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>