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

makes adding loot working

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-10-07 15:10:35 +02:00
parent 4f6970c423
commit 70eed30bee
8 changed files with 118 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
lootalot_front/src/components/ItemInput.vue
View File

@@ -1,44 +1,51 @@
<template>
<div class="container is-paddingless">
<p class="heading">Ajouter un objet</p>
<div class="field">
<label for="item_name" class="label">Nom</label>
<div class="control is-expanded" :class="{'is-loading': is_loading }">
<input type="text"
id="item_name"
v-model="item.name"
@input="autoCompletion"
class="input"
autocomplete="on"
></input>
</div>
<div class="dropdown" :class="{'is-active': showCompletionFrame}">
<div class="dropdown-menu">
<div class="dropdown-content">
<a v-for="(result,i) in results"
:key="i"
@click="setResult(result)"
class="dropdown-item"
>{{ result.name }}</a>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Nouvel objet</label>
</div>
<div class="field-body">
<div class="field">
<div class="control is-expanded">
<input type="text"
placeholder="Nom de l'objet"
v-model="item.name"
@input="autoCompletion"
class="input"
autocomplete="on"
>
</div>
<div class="dropdown" :class="{'is-active': showCompletionFrame}">
<div class="dropdown-menu">
<div class="dropdown-content">
<a v-for="(result,i) in results"
:key="i"
@click="setResult(result)"
class="dropdown-item"
>{{ result.name }}</a>
</div>
</div>
</div>
</div>
</div>
<div class="field">
<div class="control">
<input type="text"
class="input"
:class="{'is-danger': item.base_price == ''}"
v-model.number="item.base_price"
></input>
<div class="field is-expanded has-addons" v-show="item.name != ''">
<p class="control"><a class="button is-static">PO</a></p>
<p class="control">
<input type="text"
placeholder="Prix"
class="input"
:class="{'is-danger': item.base_price == ''}"
v-model.number="item.base_price"
>
</p>
</div>
<div class="control">
<button class="button is-primary"
@click="addItem"
>+</button>
<div class="field">
<div class="control">
<button class="button is-primary"
@click="addItem"
:disabled="!isItemValid"
>Ajouter</button>
</div>
</div>
</div>
</div>
</template>
@@ -49,6 +56,7 @@
return {
is_loading: false,
item: {
id: 0,
name: '',
base_price: '',
},
@@ -59,7 +67,6 @@
autoCompletion () {
// Unset any previous value on input (for every field except item's name)
this.item.base_price = '';
if (this.item.name == '') {
this.results = [];
} else {
@@ -69,13 +76,13 @@
}
},
setResult(result) {
this.item.id = result.id;
this.item.name = result.name;
this.item.base_price = result.base_price;
// Clear results to close completionFrame
this.results = [];
},
addItem () {
// TODO: check item is valid
this.$emit("addItem", this.item);
this.item = {
name: '',
@@ -86,11 +93,15 @@
},
computed: {
showCompletionFrame () { return this.results.length > 0 },
isItemValid () { return this.item.name != '' && this.item.base_price != '' },
}
}
</script>
<style scoped>
.dropdown, .dropdown-menu { min-width: 100%; margin-top: 0; padding-top: 0;}
/*.dropdown { top: -0.75rem; }*/
.dropdown, .dropdown-menu {
min-width: 100%;
margin-top: 0;
padding-top: 0;
}
</style>