Form overhaul: Effect Form
This commit is contained in:
Stefan Zermatten
@@ -1,181 +1,103 @@
|
||||
<template lang="html">
|
||||
<div class="effect-form">
|
||||
<text-field
|
||||
ref="focusFirst"
|
||||
label="Name"
|
||||
:value="model.name"
|
||||
:error-messages="errors.name"
|
||||
@change="change('name', ...arguments)"
|
||||
/>
|
||||
<smart-select
|
||||
label="Operation"
|
||||
append-icon="mdi-menu-down"
|
||||
:disabled="model.targetByTags"
|
||||
:hint="operationHint"
|
||||
:error-messages="errors.operation"
|
||||
:menu-props="{transition: 'slide-y-transition', lazy: true}"
|
||||
:items="operations"
|
||||
:value="model.operation"
|
||||
@change="change('operation', ...arguments)"
|
||||
>
|
||||
<v-icon
|
||||
slot="prepend-inner"
|
||||
class="icon ml-0"
|
||||
:class="iconClass"
|
||||
>
|
||||
{{ displayedIcon }}
|
||||
</v-icon>
|
||||
<template
|
||||
slot="item"
|
||||
slot-scope="item"
|
||||
>
|
||||
<v-icon class="icon mr-2">
|
||||
{{ getEffectIcon(item.item.value, 1) }}
|
||||
</v-icon>
|
||||
{{ item.item.text }}
|
||||
</template>
|
||||
</smart-select>
|
||||
<text-field
|
||||
v-if="model.operation === 'conditional'"
|
||||
label="Text"
|
||||
hint="The text to display on the affected stats"
|
||||
:value="model.text"
|
||||
:error-messages="errors.text"
|
||||
@change="change('text', ...arguments)"
|
||||
/>
|
||||
<computed-field
|
||||
v-else
|
||||
label="Value"
|
||||
hint="Number or calculation to determine the value of this effect"
|
||||
:persistent-hint="needsValue"
|
||||
:disabled="!needsValue"
|
||||
:model="model.amount"
|
||||
:error-messages="errors.amount"
|
||||
@change="({path, value, ack}) =>
|
||||
$emit('change', {path: ['amount', ...path], value, ack})"
|
||||
/>
|
||||
<v-btn-toggle
|
||||
mandatory
|
||||
:value="radioGroup"
|
||||
class="ma-2 mb-8"
|
||||
@change="changeTargetByTags"
|
||||
>
|
||||
<v-btn value="stats">
|
||||
Target stats by variable name
|
||||
</v-btn>
|
||||
<v-btn value="tags">
|
||||
Target properties by tag
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
|
||||
<smart-combobox
|
||||
v-if="!model.targetByTags"
|
||||
label="Stats"
|
||||
class="mr-2"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
hint="Which stats will this effect apply to"
|
||||
persistent-hint
|
||||
:value="model.stats"
|
||||
:items="attributeList"
|
||||
:error-messages="errors.stats"
|
||||
@change="change('stats', ...arguments)"
|
||||
/>
|
||||
<v-layout
|
||||
v-if="model.targetByTags"
|
||||
align-center
|
||||
>
|
||||
<v-btn
|
||||
icon
|
||||
style="margin-top: -30px;"
|
||||
class="mr-2"
|
||||
:loading="addExtraTagsLoading"
|
||||
:disabled="extraTagsFull"
|
||||
@click="addExtraTags"
|
||||
>
|
||||
<v-icon>
|
||||
mdi-plus
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
<smart-combobox
|
||||
label="Tags Required"
|
||||
hint="The effect will apply to properties that have all the listed tags"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
persistent-hint
|
||||
:value="model.targetTags"
|
||||
:error-messages="errors.targetTags"
|
||||
@change="change('targetTags', ...arguments)"
|
||||
/>
|
||||
</v-layout>
|
||||
<v-slide-x-transition
|
||||
v-if="model.targetByTags"
|
||||
group
|
||||
>
|
||||
<div
|
||||
v-for="(extras, i) in model.extraTags"
|
||||
:key="extras._id"
|
||||
class="target-tags layout align-center justify-space-between"
|
||||
<v-row dense>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<smart-select
|
||||
label="Operation"
|
||||
style="width: 90px; flex-grow: 0;"
|
||||
:items="['OR', 'NOT']"
|
||||
:value="extras.operation"
|
||||
:error-messages="errors.extraTags && errors.extraTags[i]"
|
||||
@change="change(['extraTags', i, 'operation'], ...arguments)"
|
||||
/>
|
||||
<smart-combobox
|
||||
label="Tags"
|
||||
:hint="extras.operation === 'OR' ? 'The effect will also target properties that have all of these tags instead' : 'The effect will ignore properties that have any of these tags'"
|
||||
class="mx-2"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
persistent-hint
|
||||
:value="extras.tags"
|
||||
@change="change(['extraTags', i, 'tags'], ...arguments)"
|
||||
/>
|
||||
<v-btn
|
||||
icon
|
||||
style="margin-top: -30px;"
|
||||
@click="$emit('pull', {path: ['extraTags', i]})"
|
||||
append-icon="mdi-menu-down"
|
||||
:disabled="model.targetByTags"
|
||||
:hint="operationHint"
|
||||
:error-messages="errors.operation"
|
||||
:menu-props="{transition: 'slide-y-transition', lazy: true}"
|
||||
:items="operations"
|
||||
:value="model.operation"
|
||||
@change="change('operation', ...arguments)"
|
||||
>
|
||||
<v-icon>mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-slide-x-transition>
|
||||
<form-sections>
|
||||
<form-section
|
||||
v-if="$slots.children"
|
||||
name="Children"
|
||||
<v-icon
|
||||
slot="prepend-inner"
|
||||
class="icon ml-0"
|
||||
:class="iconClass"
|
||||
>
|
||||
{{ displayedIcon }}
|
||||
</v-icon>
|
||||
<template
|
||||
slot="item"
|
||||
slot-scope="item"
|
||||
>
|
||||
<v-icon class="icon mr-2">
|
||||
{{ getEffectIcon(item.item.value, 1) }}
|
||||
</v-icon>
|
||||
{{ item.item.text }}
|
||||
</template>
|
||||
</smart-select>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<slot name="children" />
|
||||
</form-section>
|
||||
|
||||
<form-section name="Advanced">
|
||||
<v-expand-transition>
|
||||
<text-field
|
||||
v-if="model.targetByTags"
|
||||
label="Target field"
|
||||
:value="model.targetField"
|
||||
hint="Target a specific calculation field on the affected properties"
|
||||
:error-messages="errors.targetField"
|
||||
@change="change('targetField', ...arguments)"
|
||||
/>
|
||||
</v-expand-transition>
|
||||
<smart-combobox
|
||||
label="Tags"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
:value="model.tags"
|
||||
:error-messages="errors.tags"
|
||||
@change="change('tags', ...arguments)"
|
||||
<text-field
|
||||
v-if="model.operation === 'conditional'"
|
||||
label="Text"
|
||||
hint="The text to display on the affected stats"
|
||||
:value="model.text"
|
||||
:error-messages="errors.text"
|
||||
@change="change('text', ...arguments)"
|
||||
/>
|
||||
</form-section>
|
||||
<computed-field
|
||||
v-else
|
||||
label="Value"
|
||||
hint="Number or calculation to determine the value of this effect"
|
||||
:disabled="!needsValue"
|
||||
:model="model.amount"
|
||||
:error-messages="errors.amount"
|
||||
@change="({path, value, ack}) =>
|
||||
$emit('change', {path: ['amount', ...path], value, ack})"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<smart-toggle
|
||||
label="Target properties"
|
||||
:value="radioGroup"
|
||||
:options="[
|
||||
{name: 'Target by variable name', value: 'stats'},
|
||||
{name: 'Target by tags', value: 'tags'},
|
||||
]"
|
||||
@change="changeTargetByTags"
|
||||
/>
|
||||
|
||||
<v-slide-x-transition mode="out-in">
|
||||
<smart-combobox
|
||||
v-if="!model.targetByTags"
|
||||
label="Stats"
|
||||
class="mr-2"
|
||||
multiple
|
||||
chips
|
||||
deletable-chips
|
||||
hint="Which stats will this effect apply to"
|
||||
persistent-hint
|
||||
:value="model.stats"
|
||||
:items="attributeList"
|
||||
:error-messages="errors.stats"
|
||||
@change="change('stats', ...arguments)"
|
||||
/>
|
||||
<tag-targeting
|
||||
v-if="model.targetByTags"
|
||||
:model="model"
|
||||
:errors="errors"
|
||||
@change="e => $emit('change', e)"
|
||||
@push="e => $emit('push', e)"
|
||||
@pull="e => $emit('pull', e)"
|
||||
/>
|
||||
</v-slide-x-transition>
|
||||
<form-sections
|
||||
v-if="$slots.default"
|
||||
class="mt-4"
|
||||
>
|
||||
<slot />
|
||||
</form-sections>
|
||||
</div>
|
||||
</template>
|
||||
@@ -184,20 +106,18 @@
|
||||
import getEffectIcon from '/imports/client/ui/utility/getEffectIcon.js';
|
||||
import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
|
||||
import attributeListMixin from '/imports/client/ui/properties/forms/shared/lists/attributeListMixin.js';
|
||||
import { EffectSchema } from '/imports/api/properties/Effects.js';
|
||||
import FormSection from '/imports/client/ui/properties/forms/shared/FormSection.vue';
|
||||
import TagTargeting from '/imports/client/ui/properties/forms/shared/TagTargeting.vue';
|
||||
|
||||
const ICON_SPIN_DURATION = 300;
|
||||
export default {
|
||||
components: {
|
||||
FormSection,
|
||||
TagTargeting,
|
||||
},
|
||||
mixins: [propertyFormMixin, attributeListMixin],
|
||||
data() {
|
||||
return {
|
||||
displayedIcon: 'add',
|
||||
iconClass: '',
|
||||
addExtraTagsLoading: false,
|
||||
oldOperation: undefined,
|
||||
operations: [
|
||||
{ value: 'base', text: 'Base Value' },
|
||||
@@ -218,11 +138,6 @@ export default {
|
||||
radioGroup() {
|
||||
return this.model.targetByTags ? 'tags' : 'stats';
|
||||
},
|
||||
extraTagsFull() {
|
||||
if (!this.model.extraTags) return false;
|
||||
let maxCount = EffectSchema.get('extraTags', 'maxCount');
|
||||
return this.model.extraTags.length >= maxCount;
|
||||
},
|
||||
needsValue() {
|
||||
switch (this.model.operation) {
|
||||
case 'base': return true;
|
||||
@@ -242,7 +157,7 @@ export default {
|
||||
operationHint() {
|
||||
switch (this.model.operation) {
|
||||
case 'base': return 'Stats take their largest base value, and then apply all other effects';
|
||||
case 'add': return 'Add this vaulue to the stat';
|
||||
case 'add': return 'Add this value to the stat';
|
||||
case 'mul': return 'Multiply the stat by this value';
|
||||
case 'min': return 'The stat will be at least this value';
|
||||
case 'max': return 'The stat will not exceed this value';
|
||||
@@ -279,32 +194,20 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
getEffectIcon,
|
||||
changeTargetByTags(value) {
|
||||
changeTargetByTags(value, ack) {
|
||||
if (value === 'stats') {
|
||||
this.$emit('change', { path: ['targetByTags'], value: undefined });
|
||||
this.$emit('change', { path: ['targetByTags'], value: undefined, ack });
|
||||
if (this.oldOperation && this.oldOperation !== this.model.operation) {
|
||||
this.$emit('change', { path: ['operation'], value: this.oldOperation });
|
||||
}
|
||||
} else if (value === 'tags') {
|
||||
this.$emit('change', { path: ['targetByTags'], value: true });
|
||||
this.$emit('change', { path: ['targetByTags'], value: true, ack });
|
||||
if (this.model.operation !== 'add') {
|
||||
this.oldOperation = this.model.operation;
|
||||
this.$emit('change', { path: ['operation'], value: 'add' });
|
||||
}
|
||||
}
|
||||
},
|
||||
addExtraTags() {
|
||||
this.addExtraTagsLoading = true;
|
||||
this.$emit('push', {
|
||||
path: ['extraTags'],
|
||||
value: {
|
||||
_id: Random.id(),
|
||||
operation: 'OR',
|
||||
tags: [],
|
||||
},
|
||||
ack: () => this.addExtraTagsLoading = false,
|
||||
});
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user