Form overhaul: Class Form

app/imports/client/ui/properties/forms/ClassForm.vue

@@ -3,19 +3,6 @@
     <v-row dense>
       <v-col
         cols="12"
-        md="6"
-      >
-        <text-field
-          ref="focusFirst"
-          label="Name"
-          :value="model.name"
-          :error-messages="errors.name"
-          @change="change('name', ...arguments)"
-        />
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
       >
         <text-field
           label="Variable name"
@@ -36,91 +23,30 @@
     />
 
     <form-sections>
-      <form-section
+      <form-section name="Class levels from libraries">
-        v-if="$slots.children"
+        <tag-targeting
-        name="Children"
+          :model="model"
-      >
+          :errors="errors"
-        <slot name="children" />
+          tag-field="slotTags"
-      </form-section>
+          tag-hint="Find class levels that have all of these tags"
-
+          or-hint="Also find class levels that have all of these tags instead"
-      <form-section name="Advanced">
+          not-hint="Ignore class levels that have any of these tags"
-        <smart-combobox
+          @change="e => $emit('change', e)"
-          label="Tags"
+          @push="e => $emit('push', e)"
-          hint="This class's own tags"
+          @pull="e => $emit('pull', e)"
-          multiple
-          chips
-          deletable-chips
-          :value="model.tags"
-          @change="change('tags', ...arguments)"
         />
-        <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="Class levels added to this class must have these tags"
-            multiple
-            chips
-            deletable-chips
-            :value="model.slotTags"
-            :error-messages="errors.slotTags"
-            @change="change('slotTags', ...arguments)"
-          />
-        </v-layout>
-        <v-slide-x-transition group>
-          <div
-            v-for="(extras, i) in model.extraTags"
-            :key="extras._id"
-            class="extra-tags layout align-center justify-space-between"
-          >
-            <smart-select
-              label="Operation"
-              style="width: 90px; flex-grow: 0;"
-              :items="extraTagOperations"
-              :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 class levels can have these tags instead' : 'The class levels can not have any of these tags'"
-              class="mx-2"
-              multiple
-              chips
-              deletable-chips
-              :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>
 
         <computed-field
-          label="Condition"
+          label="Active condition"
-          hint="A caclulation to determine if this class can have levels added to it"
+          hint="A calculation to determine if this class can have class levels added to it"
-          placeholder="Always allow"
+          placeholder="Always active"
           :model="model.slotCondition"
           :error-messages="errors.slotCondition"
           @change="({path, value, ack}) =>
             $emit('change', {path: ['slotCondition', ...path], value, ack})"
         />
       </form-section>
+      <slot />
     </form-sections>
   </div>
 </template>
@@ -130,10 +56,12 @@ import propertyFormMixin from '/imports/client/ui/properties/forms/shared/proper
 import FormSection from '/imports/client/ui/properties/forms/shared/FormSection.vue';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
 import { SlotSchema } from '/imports/api/properties/Slots.js';
+import TagTargeting from '/imports/client/ui/properties/forms/shared/TagTargeting.vue';
 
 export default {
   components: {
     FormSection,
+    TagTargeting,
   },
   mixins: [propertyFormMixin],
   inject: {

app/imports/client/ui/properties/forms/shared/TagTargeting.vue

@@ -17,22 +17,22 @@
       </v-btn>
       <smart-combobox
         label="Tags Required"
-        hint="Applied to properties that have all the listed tags"
+        :hint="tagHint"
         class="mb-2"
         multiple
         small-chips
         deletable-chips
         persistent-hint
-        :value="model.targetTags"
+        :value="model[tagField]"
-        :error-messages="errors.targetTags"
+        :error-messages="errors[tagField]"
-        @change="change('targetTags', ...arguments)"
+        @change="change(tagField, ...arguments)"
       />
     </v-layout>
     <v-slide-x-transition
       group
     >
       <div
-        v-for="(extras, i) in model.extraTags"
+        v-for="(extras, i) in model[extraTagsField]"
         :key="extras._id"
         class="target-tags layout align-center justify-space-between"
       >
@@ -41,24 +41,24 @@
           style="width: 90px; flex-grow: 0;"
           :items="['OR', 'NOT']"
           :value="extras.operation"
-          :error-messages="errors.extraTags && errors.extraTags[i]"
+          :error-messages="errors[extraTagsField] && errors[extraTagsField][i]"
-          @change="change(['extraTags', i, 'operation'], ...arguments)"
+          @change="change([extraTagsField, 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'"
+          :hint="extras.operation === 'OR' ? orHint : notHint"
           class="mx-2 mb-2"
           multiple
           small-chips
           deletable-chips
           persistent-hint
           :value="extras.tags"
-          @change="change(['extraTags', i, 'tags'], ...arguments)"
+          @change="change([extraTagsField, i, 'tags'], ...arguments)"
         />
         <v-btn
           icon
           style="margin-top: -30px;"
-          @click="$emit('pull', {path: ['extraTags', i]})"
+          @click="$emit('pull', {path: [extraTagsField, i]})"
         >
           <v-icon>mdi-delete</v-icon>
         </v-btn>
@@ -80,6 +80,26 @@ export default {
       type: Object,
       required: true,
     },
+    tagField: {
+      type: String,
+      default: 'targetTags',
+    },
+    extraTagsField: {
+      type: String,
+      default: 'extraTags',
+    },
+    tagHint: {
+      type: String,
+      default: 'Applied to properties that have all the listed tags',
+    },
+    orHint: {
+      type: String,
+      default: 'Also applied to properties that have all of these tags',
+    },
+    notHint: {
+      type: String,
+      default: 'Ignore properties that have any of these tags',
+    },
   },
   data() {
     return {
@@ -90,18 +110,18 @@ export default {
     maxTags() {
       if (!this.model?.type) return 0;
       const schema = propertySchemasIndex[this.model.type];
-      return schema.get('extraTags', 'maxCount');
+      return schema.get(this.extraTagsField, 'maxCount');
     },
     extraTagsFull() {
-      if (!this.model.extraTags) return false;
+      if (!this.model[this.extraTagsField]) return false;
-      return this.model.extraTags.length >= this.maxTags;
+      return this.model[this.extraTagsField].length >= this.maxTags;
     },
   },
   methods: {
     addExtraTags() {
       this.addExtraTagsLoading = true;
       this.$emit('push', {
-        path: ['extraTags'],
+        path: [this.extraTagsField],
         value: {
           _id: Random.id(),
           operation: 'OR',