Unified the add buttons for results as a single menu button

This commit is contained in:
Thaum Rystra
2020-04-23 15:37:05 +02:00
parent 95bfcd79c9
commit 4e57bd4a73
5 changed files with 66 additions and 86 deletions

View File

@@ -8,7 +8,7 @@ const ResourceSchema = new SimpleSchema({
'itemsConsumed.$': {
type: Object,
},
'itemsConsumed.$.variableName': {
'itemsConsumed.$.tag': {
type: String,
},
'itemsConsumed.$.quantity': {

View File

@@ -27,23 +27,11 @@
</div>
</div>
</v-slide-x-transition>
<div class="layout row justify-center">
<v-btn
:loading="addAdjustmentLoading"
:disabled="addAdjustmentLoading"
outline
icon
@click="addAdjustment"
>
<v-icon>add</v-icon>
</v-btn>
</div>
</div>
</template>
<script>
import AdjustmentForm from '/imports/ui/properties/forms/AdjustmentForm.vue';
import AdjustmentSchema from '/imports/api/properties/subSchemas/AdjustmentSchema.js';
export default {
components: {
@@ -63,22 +51,6 @@
default: undefined,
},
},
data(){return {
addAdjustmentLoading: false,
}},
methods: {
acknowledgeAddAdjustment(){
this.addAdjustmentLoading = false;
},
addAdjustment(){
this.addAdjustmentLoading = true;
this.$emit('push', {
path: [],
value: AdjustmentSchema.clean({}),
ack: this.acknowledgeAddAdjustment,
});
},
},
}
</script>

View File

@@ -30,17 +30,6 @@
</div>
</div>
</v-slide-x-transition>
<div class="layout row justify-center">
<v-btn
:loading="addBuffLoading"
:disabled="addBuffLoading"
outline
icon
@click="addBuff"
>
<v-icon>add</v-icon>
</v-btn>
</div>
</div>
</template>
@@ -66,18 +55,6 @@
default: undefined,
},
},
data(){return {
addBuffLoading: false,
}},
methods: {
acknowledgeAddBuff(){
this.addBuffLoading = false;
},
addBuff(){
this.addBuffLoading = true;
this.$emit('push', {path: [], value: StoredBuffWithIdSchema.clean({}), ack: this.acknowledgeAddBuff});
},
},
}
</script>

View File

@@ -27,23 +27,11 @@
</div>
</div>
</v-slide-x-transition>
<div class="layout row justify-center">
<v-btn
:loading="addDamageLoading"
:disabled="addDamageLoading"
outline
icon
@click="addDamage"
>
<v-icon>add</v-icon>
</v-btn>
</div>
</div>
</template>
<script>
import DamageForm from '/imports/ui/properties/forms/DamageForm.vue';
import DamageSchema from '/imports/api/properties/subSchemas/DamageSchema.js';
export default {
components: {
@@ -63,24 +51,5 @@
default: undefined,
},
},
data(){return {
addDamageLoading: false,
}},
methods: {
acknowledgeAddDamage(){
this.addDamageLoading = false;
},
addDamage(){
this.addDamageLoading = true;
this.$emit('push', {
path: [],
value: DamageSchema.clean({}),
ack: this.acknowledgeAddDamage,
});
},
},
}
</script>
<style lang="css" scoped>
</style>

View File

@@ -1,6 +1,6 @@
<template lang="html">
<div class="results-form">
<div class="subheading">
<div class="subheading" v-if="model.damages.length">
Damage
</div>
<damage-list-form
@@ -10,7 +10,7 @@
@push="({path, value, ack}) => $emit('push', {path: ['damages', ...path], value, ack})"
@pull="({path, ack}) => $emit('pull', {path: ['damages', ...path], ack})"
/>
<div class="subheading">
<div class="subheading" v-if="model.adjustments.length">
Adjustments
</div>
<adjustment-list-form
@@ -20,7 +20,7 @@
@push="({path, value, ack}) => $emit('push', {path: ['adjustments', ...path], value, ack})"
@pull="({path, ack}) => $emit('pull', {path: ['adjustments', ...path], ack})"
/>
<div class="subheading">
<div class="subheading" v-if="model.buffs.length">
Buffs
</div>
<buff-list-form
@@ -31,6 +31,33 @@
@push="({path, value, ack}) => $emit('push', {path: ['buffs', ...path], value, ack})"
@pull="({path, ack}) => $emit('pull', {path: ['buffs', ...path], ack})"
/>
<div class="layout row justify-center">
<v-menu origin="center center" transition="scale-transition" nudge-top="50%" nudge-left="50%">
<template v-slot:activator="{ on }">
<v-btn
:loading="addResultLoading"
:disabled="addResultLoading"
icon
large
outline
v-on="on"
>
<v-icon>add</v-icon>
</v-btn>
</template>
<v-list>
<v-list-tile@click="addDamage">
<v-list-tile-title>Add Damage</v-list-tile-title>
</v-list-tile>
<v-list-tile@click="addAdjustment">
<v-list-tile-title>Add Adjustment</v-list-tile-title>
</v-list-tile>
<v-list-tile@click="addBuff">
<v-list-tile-title>Add Buff</v-list-tile-title>
</v-list-tile>
</v-list>
</v-menu>
</div>
</div>
</template>
@@ -39,6 +66,9 @@
import DamageListForm from '/imports/ui/properties/forms/DamageListForm.vue';
import BuffListForm from '/imports/ui/properties/forms/BuffListForm.vue';
import ResultsSchema from '/imports/api/properties/subSchemas/ResultsSchema.js';
import DamageSchema from '/imports/api/properties/subSchemas/DamageSchema.js';
import AdjustmentSchema from '/imports/api/properties/subSchemas/AdjustmentSchema.js';
import { StoredBuffWithIdSchema } from '/imports/api/properties/Buffs.js';
export default {
components: {
@@ -46,6 +76,9 @@
DamageListForm,
BuffListForm,
},
data(){return {
addResultLoading: false,
}},
props: {
model: {
type: Object,
@@ -63,6 +96,35 @@
default: undefined,
},
},
methods: {
acknowledgeAddResult(){
this.addResultLoading = false;
},
addDamage(){
this.addResultLoading = true;
this.$emit('push', {
path: ['damages'],
value: DamageSchema.clean({}),
ack: this.acknowledgeAddResult,
});
},
addAdjustment(){
this.addResultLoading = true;
this.$emit('push', {
path: ['adjustments'],
value: AdjustmentSchema.clean({}),
ack: this.acknowledgeAddResult,
});
},
addBuff(){
this.addResultLoading = true;
this.$emit('push', {
path: ['buffs'],
value: StoredBuffWithIdSchema.clean({}),
ack: this.acknowledgeAddResult
});
},
},
}
</script>