From b65b4b4497a47c0f7afe8afada3b72cf3d1eff13 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 May 2023 20:53:36 +0200
Subject: [PATCH] Form overhaul: Effect Form

---
 .../client/ui/properties/forms/EffectForm.vue | 293 ++++++------------
 1 file changed, 98 insertions(+), 195 deletions(-)

diff --git a/app/imports/client/ui/properties/forms/EffectForm.vue b/app/imports/client/ui/properties/forms/EffectForm.vue
index 1d386bf8..ef70df47 100644
--- a/app/imports/client/ui/properties/forms/EffectForm.vue
+++ b/app/imports/client/ui/properties/forms/EffectForm.vue
@@ -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>