From f1548aedfa72fea6fc8e011b94a138cb6801189e Mon Sep 17 00:00:00 2001
From: Artus <artus@landoftheunicorn.ovh>
Date: Fri, 4 Oct 2019 14:21:50 +0200
Subject: [PATCH] adds search filter on Chest

---
 lootalot_front/src/components/Chest.vue    | 120 +++++++++++++--------
 lootalot_front/src/components/Selector.vue |   2 +-
 2 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/lootalot_front/src/components/Chest.vue b/lootalot_front/src/components/Chest.vue
index adecc79..c8b646e 100644
--- a/lootalot_front/src/components/Chest.vue
+++ b/lootalot_front/src/components/Chest.vue
@@ -1,47 +1,67 @@
 <template>
-  <table class="table is-fullwidth is-striped">
-    <thead>
-      <tr>
-        <th width="100%">Objets</th>
-        <th>Valeur</th>
-        <th>
-          <div v-if="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
-            <button class="button" :class="is_selling ? 'is-danger' : 'is-warning'"
-              @click="sellSelectedItems">
-              <span class="icon"><i class="fas fa-coins"></i></span>
-              <p v-if="!is_selling">Vendre</p>
-              <p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
-            </button>
-            <PercentInput v-show="is_selling" v-model="global_mod"></PercentInput>
-          </div>
-          <div v-else-if="perms.canBuy">
-            <button class="button is-danger is-fullwidth" 
-              :disabled="selected_items.length == 0"
-              @click="buySelectedItems">Acheter ({{ totalSelectedValue}}po)</button>
-          </div>
-          <div v-else-if="perms.canGrab">
-            <button class="button is-static is-fullwidth">Demander</button>
-          </div>
-        </th>
-      </tr>
-    </thead>
-    <tbody>
-      <template v-for="(item, idx) in items">
-        <tr :key="`row-${idx}`">
-          <td><strong>{{item.name}}</strong></td>
-          <td>{{ is_selling ? item.base_price / 2 : item.base_price }}po</td>
-          <td>
-            <Request v-if="perms.canGrab" 
-              :item="item.id"
-              @claim="(data) => $emit('claim', data)"
-              @unclaim="(data) => $emit('unclaim', data)">
-            </Request>
-            <Selector :id="item.id" v-else-if="showSelectors" v-model="selected_items"></Selector>
-          </td>
+  <article>
+    <p class="control has-icons-left">
+      <input type="text" class="input" v-model="searchText">
+      <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
+    </p>
+    <table class="table is-fullwidth is-striped">
+      <thead>
+        <tr>
+          <th width="100%">Objets</th>
+          <th>Valeur</th>
+          <th>
+            <div v-if="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
+              <button class="button"
+                :class="is_selling ? 'is-danger' : 'is-warning'"
+                @click="sellSelectedItems"
+              >
+                <span class="icon">
+                  <i class="fas fa-coins"></i>
+                </span>
+                <p v-if="!is_selling">Vendre</p>
+                <p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
+              </button>
+              <PercentInput v-show="is_selling" v-model="global_mod"></PercentInput>
+            </div>
+            <div v-else-if="perms.canBuy">
+              <button class="button is-danger is-fullwidth"
+                :disabled="selected_items.length == 0"
+                @click="buySelectedItems"
+              >Acheter ({{ totalSelectedValue}}po)</button>
+            </div>
+            <div v-else-if="perms.canGrab">
+              <button class="button is-static is-fullwidth">Demander</button>
+            </div>
+          </th>
         </tr>
-      </template>
-    </tbody>
-  </table>
+      </thead>
+      <tbody>
+        <template v-for="(item, idx) in shownItems">
+          <tr :key="`row-${idx}`">
+            <td>
+              <strong>{{item.name}}</strong>
+            </td>
+            <td>
+              {{ is_selling ? item.base_price / 2 : item.base_price }}po
+            </td>
+            <td>
+              <Request
+                v-if="perms.canGrab"
+                :item="item.id"
+                @claim="(data) => $emit('claim', data)"
+                @unclaim="(data) => $emit('unclaim', data)"
+              ></Request>
+              <Selector
+                v-else-if="showSelectors"
+                :id="item.id"
+                v-model="selected_items"
+              ></Selector>
+            </td>
+          </tr>
+        </template>
+      </tbody>
+    </table>
+  </article>
 </template>
 
 <script>
@@ -60,7 +80,6 @@
             items: {
                 type: Array,
                 required: true,
-                default () { return []; }
             },
             perms: {
                 type: Object,
@@ -77,6 +96,7 @@
                 is_selling: false,
                 selected_items: [],
                 global_mod: 0,
+                searchText: "",
             };
         },
         methods: {
@@ -97,7 +117,18 @@
             },
         },
         computed: {
-            showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
+            shownItems () {
+                if (this.searchText != "") {
+                    const searchText = this.searchText.toUpperCase();
+                    return this.items.filter(item => item.name.toUpperCase().includes(searchText));
+                } else {
+                    return this.items;
+                }
+            },
+            showSelectors () {
+                return !this.perms.canGrab
+                    && (this.is_selling || this.perms.canBuy);
+            },
             totalSelectedValue () {
                 var total = this.selected_items
                     .map(([id, mod]) => {
@@ -106,7 +137,6 @@
                         if (this.is_selling) { 
                             price = price / 2;
                         }
-                        console.log(item, price, mod);
                         return price;
                     })
                     .reduce((total,value) => total + value, 0);
diff --git a/lootalot_front/src/components/Selector.vue b/lootalot_front/src/components/Selector.vue
index 054dc9b..c932173 100644
--- a/lootalot_front/src/components/Selector.vue
+++ b/lootalot_front/src/components/Selector.vue
@@ -3,7 +3,7 @@
     <label class="button is-fullwidth">
         <input type="checkbox" class="checkbox" v-model="selected">
     </label>
-    <PercentInput v-model.number="mod_value"></PercentInput>
+    <PercentInput v-show="selected" v-model.number="mod_value"></PercentInput>
   </div>
 </template>