132 lines
4.3 KiB
Vue
132 lines
4.3 KiB
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"></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></PercentInput>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
|
|
<script>
|
|
import Request from './Request.vue'
|
|
import PercentInput from './PercentInput.vue'
|
|
import Loot from './Loot.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: []
|
|
},
|
|
perms: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
},
|
|
components: {
|
|
Request,
|
|
PercentInput,
|
|
Loot,
|
|
},
|
|
data () {
|
|
return {
|
|
is_selling: false,
|
|
selected_items: [],
|
|
};
|
|
},
|
|
methods: {
|
|
buySelectedItems () {
|
|
const items = this.items.filter(i => this.selected_items.includes(i.id));
|
|
this.$emit("buy", items);
|
|
this.selected_items.length = 0;
|
|
},
|
|
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));
|
|
this.$emit("sell", items);
|
|
this.selected_items = [];
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {
|
|
showSelectors () { return !this.perms.canGrab && (this.is_selling || this.perms.canBuy); },
|
|
totalSelectedValue () {
|
|
return this.items
|
|
.filter(item => this.selected_items.includes(item.id))
|
|
.map(item => {
|
|
if (this.is_selling) {
|
|
return item.base_price / 2;
|
|
} else {
|
|
return item.base_price;
|
|
}})
|
|
.reduce((total,value) => total + value, 0);
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.table td, .table th { vertical-align: middle; }
|
|
.buttons { flex-wrap: nowrap; }
|
|
label.is-checkbox {
|
|
background-color: #eee;
|
|
}
|
|
</style>
|