rust/lootalot
1
0
Fork 0
Code Issues 3 Pull Requests Releases Wiki Activity

adds search filter on Chest

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-10-04 14:21:50 +02:00
parent c99a38a738
commit f1548aedfa
2 changed files with 76 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
lootalot_front/src/components/Chest.vue
View File

@@ -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);

2
lootalot_front/src/components/Selector.vue
View File

@@ -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>