makes selector work

lootalot_front/src/components/Chest.vue

@@ -12,7 +12,7 @@
               <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="modifiers['global']"></PercentInput>
+            <PercentInput v-show="is_selling" v-model="global_mod"></PercentInput>
           </div>
           <div v-else-if="perms.canBuy">
             <button class="button is-danger is-fullwidth" 
@@ -36,7 +36,7 @@
               @claim="(data) => $emit('claim', data)"
               @unclaim="(data) => $emit('unclaim', data)">
             </Request>
-            <Selector :id="`select-${idx}`" v-else-if="showSelectors" v-model="selected_items"></Selector>
+            <Selector :id="item.id" v-else-if="showSelectors" v-model="selected_items"></Selector>
           </td>
         </tr>
       </template>
@@ -76,19 +76,12 @@
             return {
                 is_selling: false,
                 selected_items: [],
-                modifiers: {},
+                global_mod: 0,
             };
         },
         methods: {
             buySelectedItems () {
-                const items = this.items.filter(i => this.selected_items.includes(i.id));
-                var payload = [];
-                for (var idx in items) {
-                    var item = items[idx];
-                    var mod = this._modifierForItem(item.id);
-                    payload.push([item.id, mod]);
-                }
-                this.$emit("buy", payload);
+                this.$emit("buy", this.selected_items);
                 this.selected_items = [];
             },
             sellSelectedItems () {
@@ -97,41 +90,27 @@
                 } else {
                     this.is_selling = false;
                     if (this.selected_items.length > 0) {
-                        const items = this.items.filter(i => this.selected_items.includes(i.id));
-                        var payload = [];
-                        items.forEach(item => {
-                            const mod = this._modifierForItem(item.id);
-                            payload.push([item.id, mod]);
-                        });
-                        this.$emit("sell", payload);
+                        this.$emit("sell", this.selected_items);
                         this.selected_items = [];
                     }
                 }
             },
-            // TODO: fix this. It breaks reactivity and it's lazy
-            _modifierForItem (itemId) {
-                if (!(itemId in this.modifiers)) {
-                    this.modifiers[itemId] = 0;
-                }
-                return 1 + this.modifiers[itemId] / 100;
-            }
         },
         computed: {
             showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
             totalSelectedValue () {
-                const global_mod = this._modifierForItem("global");
-                var total = this.items
-                    .filter(item => this.selected_items.includes(item.id))
-                    .map(item => {
-                        const mod = this._modifierForItem(item.id);
+                var total = this.selected_items
+                    .map(([id, mod]) => {
+                        const item = this.items.find(item => item.id == id);
                         var price = item.base_price * mod;
                         if (this.is_selling) { 
                             price = price / 2;
                         }
+                        console.log(item, price, mod);
                         return price;
                     })
                     .reduce((total,value) => total + value, 0);
-                return global_mod * total;
+                return (1 + this.global_mod / 100) * total;
             },
         },
     }

lootalot_front/src/components/Selector.vue

@@ -3,47 +3,55 @@
     <label class="button is-fullwidth">
         <input type="checkbox" class="checkbox" v-model="selected">
     </label>
-    <PercentInput v-model="modifier"></PercentInput>
+    <PercentInput v-model.number="mod_value"></PercentInput>
   </div>
 </template>
 
 <script>
 import PercentInput from './PercentInput.vue'
 
-/*
-Selector for a specific item, with an associated price modifier.
-
+/*  Selector for a specific item, with an associated price modifier.
     Acts as checkbox on a v-model, except it populates an array with [value, modifier] instead of value alone
-
 */
 
 export default {
-    props: ["value"],
+    props: ["id", "value"],
     components: { PercentInput },
     data () {
         return {
             selected: false,
-            modifier: 0,
+            mod_value: 0,
         };
     },
-    methods: {
-        update () {
+    computed: {
+        modifier () {
+            return 1 + this.mod_value / 100;
+        }
+    },
+    watch: {
+        selected (newState) {
+            let idx = this._findData();
             var updated = this.value;
-            let idx = this.value.findIndex(([val, mod]) => this.value == val);
-            if (idx == -1) {
-                if this.selected {
-                    updated.push([this.value, this.modifier])
-                }
-            } else {
-                if this.selected {
-                    updated.splice(idx, 1, [this.value, this.modifier])
-                    // Replace this.value[idx] by [val, this.modifier]
-                } else {
-                    // Remove this.value[idx]
-                }
+            if (newState == true && idx == -1) {
+                updated.push([this.id, this.modifier]);
+            } else if (newState == false && idx != -1 ) {
+                updated.splice(idx, 1);
             }
             this.$emit('input', updated);
         },
+        mod_value (newState) {
+            let idx = this._findData();
+            var updated = this.value;
+            if (idx != -1) {
+                updated.splice(idx, 1, [this.id, this.modifier]);
+                this.$emit('input', updated);
+            }
+        }
+    },
+    methods: {
+        _findData () {
+            return this.value.findIndex(([val,mod]) => this.id == val);
+        }
     }
   }
 </script>