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

improves updateWealth error handling

Browse Source
This commit is contained in:
Arthur Gerbaud
2019-06-13 16:06:00 +02:00
parent 2efed539fb
commit 6843fc92cf
1 changed files with 33 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
lootalot_front/src/components/Wealth.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div> <div class="box is-primary">
<span class="icon is-large"> <span class="icon is-large">
<i class="fas fa-2x fa-piggy-bank"></i> <i class="fas fa-2x fa-piggy-bank"></i>
</span> </span>
@@ -21,35 +21,34 @@
<p class="is-size-3">{{ wealth[3] }}</p> <p class="is-size-3">{{ wealth[3] }}</p>
</div> </div>
</nav> </nav>
<nav v-show="edit" class="columns is-mobile"> <div v-if="edit"> <!-- or v-show ? -->
<div class="column"> <nav class="columns is-1 is-variable is-mobile">
<input type="number" class="input" v-show="edit" v-model="edit_values[0]"></input> <template v-for="i in 4">
</div> <div :key="`input-col-${i}`" class="column">
<div class="column"> <input type="text" size="6" class="input"
<input type="number" class="input" v-show="edit" v-model="edit_values[1]"></input> :key="inputs_key"
</div> :class="{'is-danger': form_errors[i - 1]}"
<div class="column"> v-model.number="edit_values[i - 1]">
<input type="number" class="input" v-show="edit" v-model="edit_values[2]"></input> </input>
</div>
<div class="column">
<input type="number" class="input" v-show="edit" v-model="edit_values[3]"></input>
</div> </div>
</template>
</nav> </nav>
<nav v-show="edit" class="columns is-mobile"> <nav class="columns is-mobile">
<div class="column is-3 is-offset-3"> <div class="column is-4 is-offset-2">
<button class="button is-fullwidth is-danger" <button class="button is-outlined is-fullwidth is-danger"
@click="updateWealth('minus')"> @click="updateWealth('minus')">
<span class="icon"><i class="fas fa-2x fa-minus"></i></span> <span class="icon"><i class="fas fa-2x fa-minus"></i></span>
</button> </button>
</div> </div>
<div class="column is-3"> <div class="column is-4">
<button class="button is-primary is-fullwidth" <button class="button is-outlined is-primary is-fullwidth"
@click="updateWealth('plus')"> @click="updateWealth('plus')">
<span class="icon"><i class="fas fa-2x fa-plus"></i></span> <span class="icon"><i class="fas fa-2x fa-plus"></i></span>
</button> </button>
</div> </div>
</nav> </nav>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -58,20 +57,28 @@
data () { data () {
return { return {
edit_values: [0,0,0,0], edit_values: [0,0,0,0],
form_errors: [false,false,false,false],
inputs_key: 0, // Hack to re-render inputs
}; };
}, },
methods: { methods: {
updateWealth (op) { updateWealth (op) {
const values = this.edit_values.map(Number); const values = this.edit_values;
console.log('updateWealth', op, values); this.form_errors.fill(false); // Reset error status
let success; values.forEach((v,i) => {
if (true) { if (isNaN(v)) {
success = true; console.log("error with value", v);
} this.form_errors[i] = true;
};
});
const success = !this.form_errors.includes(true);
if (success) { if (success) {
console.log('updated', op, values);
this.$emit('updated'); this.$emit('updated');
this.edit_values.fill(0) this.edit_values.fill(0) }
else {
console.log(this.form_errors);
this.inputs_key += 1;
} }
} }
} }