jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Extracted tag targeting form into a component

Browse Source
This commit is contained in:
Stefan Zermatten
2023-05-16 20:02:59 +02:00
parent 0b8d824b2d
commit 1bc48330e0
2 changed files with 134 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
app/imports/client/ui/properties/forms/BuffRemoverForm.vue
View File

@@ -11,71 +11,14 @@
/>
<v-expand-transition>
<div v-if="!model.targetParentBuff">
<v-layout
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.targetParentBuff"
group
>
<div
v-for="(extras, i) in model.extraTags"
:key="extras._id"
class="target-tags layout align-center justify-space-between"
>
<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]})"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</div>
</v-slide-x-transition>
<div class="mb-8" />
<tag-targeting
:model="model"
:errors="errors"
@change="e => $emit('change', e)"
@push="e => $emit('push', e)"
@pull="e => $emit('pull', e)"
/>
<div class="mb-6" />
<v-row dense>
<v-col
cols="12"
@@ -133,11 +76,16 @@
<script lang="js">
import propertyFormMixin from '/imports/client/ui/properties/forms/shared/propertyFormMixin.js';
import TagTargeting from '/imports/client/ui/properties/forms/shared/TagTargeting.vue';
import {
BuffRemoverSchema
} from '/imports/api/properties/BuffRemovers.js';
export default {
components: {
TagTargeting,
},
mixins: [propertyFormMixin],
data(){return {
addExtraTagsLoading: false,

121
app/imports/client/ui/properties/forms/shared/TagTargeting.vue Normal file
View File

@@ -0,0 +1,121 @@
<template lang="html">
<div class="tag-targeting">
<v-layout
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="Applied to properties that have all the listed tags"
class="mb-2"
multiple
small-chips
deletable-chips
persistent-hint
:value="model.targetTags"
:error-messages="errors.targetTags"
@change="change('targetTags', ...arguments)"
/>
</v-layout>
<v-slide-x-transition
group
>
<div
v-for="(extras, i) in model.extraTags"
:key="extras._id"
class="target-tags layout align-center justify-space-between"
>
<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' ? 'Also applied to properties that have all of these tags' : 'Ignore properties that have any of these tags'"
class="mx-2 mb-2"
multiple
small-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]})"
>
<v-icon>mdi-delete</v-icon>
</v-btn>
</div>
</v-slide-x-transition>
</div>
</template>
<script lang="js">
import propertySchemasIndex from '/imports/api/properties/computedPropertySchemasIndex.js';
export default {
props: {
model: {
type: Object,
required: true,
},
errors: {
type: Object,
required: true,
},
},
data() {
return {
addExtraTagsLoading: false,
}
},
computed: {
maxTags() {
if (!this.model?.type) return 0;
const schema = propertySchemasIndex[this.model.type];
return schema.get('extraTags', 'maxCount');
},
extraTagsFull() {
if (!this.model.extraTags) return false;
return this.model.extraTags.length >= this.maxTags;
},
},
methods: {
addExtraTags() {
this.addExtraTagsLoading = true;
this.$emit('push', {
path: ['extraTags'],
value: {
_id: Random.id(),
operation: 'OR',
tags: [],
},
ack: () => this.addExtraTagsLoading = false,
});
},
change(path, value, ack) {
if (!Array.isArray(path)) {
path = [path];
}
this.$emit('change', { path, value, ack });
},
},
}
</script>