adds search filter on Chest

lootalot_front/src/components/Chest.vue

@@ -1,4 +1,9 @@
 <template>
+  <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>
@@ -6,9 +11,13 @@
           <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>
+              <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>
@@ -17,7 +26,8 @@
             <div v-else-if="perms.canBuy">
               <button class="button is-danger is-fullwidth"
                 :disabled="selected_items.length == 0"
-              @click="buySelectedItems">Acheter ({{ totalSelectedValue}}po)</button>
+                @click="buySelectedItems"
+              >Acheter ({{ totalSelectedValue}}po)</button>
             </div>
             <div v-else-if="perms.canGrab">
               <button class="button is-static is-fullwidth">Demander</button>
@@ -26,22 +36,32 @@
         </tr>
       </thead>
       <tbody>
-      <template v-for="(item, idx) in items">
+        <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" 
+              <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>
+                @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);

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>