lootalot/lootalot_front/src/components/Chest.vue

<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="modifiers['global']"></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>
            <div v-else-if="showSelectors" class="buttons has-addons">
              <label :for="`select-${idx}`" class="button is-fullwidth">
              <input type="checkbox" class="checkbox"
                :id="`select-${idx}`"
                :value="item.id"
                v-model="selected_items">
              </label>
              <PercentInput v-model="modifiers[item.id]"></PercentInput>
            </div>
          </td>
        </tr>
      </template>
    </tbody>
  </table>
</template>

<script>
    import Request from './Request.vue'
    import PercentInput from './PercentInput.vue'
    /*
        The chest displays a collection of items.

        A set of permissions is passed as props, to update
        the possible actions of active user upon these items.

    */
    export default {
        props: {
            items: {
                type: Array,
                required: true,
                default () { return []; }
            },
            perms: {
                type: Object,
                required: true,
            },
        },
        components: {
            Request,
            PercentInput,
        },
        data () {
            return {
                is_selling: false,
                selected_items: [],
                modifiers: {},
            };
        },
        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.selected_items = [];
            },
            sellSelectedItems () {
                if (!this.is_selling) {
                    this.is_selling = true;
                } 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.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 price = item.base_price * mod;
                        if (this.is_selling) { 
                            price = price / 2;
                        }
                        return price;
                    })
                    .reduce((total,value) => total + value, 0);
                return global_mod * total;
            },
        },
    }
</script>

<style scoped>
    .table td, .table th { vertical-align: middle; }
    .buttons { flex-wrap: nowrap; }
    label.is-checkbox {
        background-color: #eee;
    }
</style>