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> <template>
<table class="table is-fullwidth is-striped"> <article>
<thead> <p class="control has-icons-left">
<tr> <input type="text" class="input" v-model="searchText">
<th width="100%">Objets</th> <span class="icon is-small is-left"><i class="fas fa-search"></i></span>
<th>Valeur</th> </p>
<th> <table class="table is-fullwidth is-striped">
<div v-if="perms.canSell" class="buttons" :class="{'has-addons': is_selling}"> <thead>
<button class="button" :class="is_selling ? 'is-danger' : 'is-warning'" <tr>
@click="sellSelectedItems"> <th width="100%">Objets</th>
<span class="icon"><i class="fas fa-coins"></i></span> <th>Valeur</th>
<p v-if="!is_selling">Vendre</p> <th>
<p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p> <div v-if="perms.canSell" class="buttons" :class="{'has-addons': is_selling}">
</button> <button class="button"
<PercentInput v-show="is_selling" v-model="global_mod"></PercentInput> :class="is_selling ? 'is-danger' : 'is-warning'"
</div> @click="sellSelectedItems"
<div v-else-if="perms.canBuy"> >
<button class="button is-danger is-fullwidth" <span class="icon">
:disabled="selected_items.length == 0" <i class="fas fa-coins"></i>
@click="buySelectedItems">Acheter ({{ totalSelectedValue}}po)</button> </span>
</div> <p v-if="!is_selling">Vendre</p>
<div v-else-if="perms.canGrab"> <p v-else>{{ selected_items.length > 0 ? `${totalSelectedValue} po` : 'Annuler' }}</p>
<button class="button is-static is-fullwidth">Demander</button> </button>
</div> <PercentInput v-show="is_selling" v-model="global_mod"></PercentInput>
</th> </div>
</tr> <div v-else-if="perms.canBuy">
</thead> <button class="button is-danger is-fullwidth"
<tbody> :disabled="selected_items.length == 0"
<template v-for="(item, idx) in items"> @click="buySelectedItems"
<tr :key="`row-${idx}`"> >Acheter ({{ totalSelectedValue}}po)</button>
<td><strong>{{item.name}}</strong></td> </div>
<td>{{ is_selling ? item.base_price / 2 : item.base_price }}po</td> <div v-else-if="perms.canGrab">
<td> <button class="button is-static is-fullwidth">Demander</button>
<Request v-if="perms.canGrab" </div>
:item="item.id" </th>
@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>
</tr> </tr>
</template> </thead>
</tbody> <tbody>
</table> <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> </template>
<script> <script>
@@ -60,7 +80,6 @@
items: { items: {
type: Array, type: Array,
required: true, required: true,
default () { return []; }
}, },
perms: { perms: {
type: Object, type: Object,
@@ -77,6 +96,7 @@
is_selling: false, is_selling: false,
selected_items: [], selected_items: [],
global_mod: 0, global_mod: 0,
searchText: "",
}; };
}, },
methods: { methods: {
@@ -97,7 +117,18 @@
}, },
}, },
computed: { 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 () { totalSelectedValue () {
var total = this.selected_items var total = this.selected_items
.map(([id, mod]) => { .map(([id, mod]) => {
@@ -106,7 +137,6 @@
if (this.is_selling) { if (this.is_selling) {
price = price / 2; price = price / 2;
} }
console.log(item, price, mod);
return price; return price;
}) })
.reduce((total,value) => total + value, 0); .reduce((total,value) => total + value, 0);

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

@@ -3,7 +3,7 @@
<label class="button is-fullwidth"> <label class="button is-fullwidth">
<input type="checkbox" class="checkbox" v-model="selected"> <input type="checkbox" class="checkbox" v-model="selected">
</label> </label>
<PercentInput v-model.number="mod_value"></PercentInput> <PercentInput v-show="selected" v-model.number="mod_value"></PercentInput>
</div> </div>
</template> </template>