From 8289e9bd112b1869a87935a0f24e17849c798ecf Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 16 May 2023 16:37:42 +0200
Subject: [PATCH] Form overhaul: Adjustment form

---
 .../client/ui/properties/PropertyForm.vue     | 13 +++-
 .../ui/properties/forms/AdjustmentForm.vue    | 76 ++++++++++---------
 .../properties/forms/shared/FormSection.vue   |  4 +-
 .../properties/forms/shared/FormSections.vue  |  2 +
 4 files changed, 53 insertions(+), 42 deletions(-)

diff --git a/app/imports/client/ui/properties/PropertyForm.vue b/app/imports/client/ui/properties/PropertyForm.vue
index a5293b08..40301e3f 100644
--- a/app/imports/client/ui/properties/PropertyForm.vue
+++ b/app/imports/client/ui/properties/PropertyForm.vue
@@ -7,6 +7,7 @@
         style="gap: 8px"
       >
         <text-field
+          v-if="schemaHasName"
           ref="focusFirst"
           label="Name"
           style="flex-basis: 320px;"
@@ -31,8 +32,9 @@
         v-if="context.isLibraryForm"
         name="Library Options"
       >
-        <v-row 
+        <v-row
           v-if="context.isLibraryForm"
+          dense
         >
           <v-col
             cols="12"
@@ -89,7 +91,6 @@
           </v-col>
           <v-col
             cols="12"
-            md="6"
           >
             <smart-combobox
               label="Library Tags"
@@ -97,7 +98,7 @@
               small-chips
               deletable-chips
               hint="Used to let slots find this property in a library"
-              :value="model.tags"
+              :value="model.libraryTags"
               @change="(value, ack) => $emit('change', {path: ['libraryTags'], value, ack})"
             />
           </v-col>
@@ -190,6 +191,7 @@ import CreaturePropertiesTree from '/imports/client/ui/creature/creatureProperti
 import OutlinedInput from '/imports/client/ui/properties/viewers/shared/OutlinedInput.vue';
 import { getSuggestedChildren } from '/imports/constants/PROPERTIES.js';
 import PROPERTIES from '/imports/constants/PROPERTIES.js';
+import propertySchemasIndex from '/imports/api/properties/computedPropertySchemasIndex.js';
 
 const slotTypes = [];
 for (let key in PROPERTIES) {
@@ -231,6 +233,11 @@ export default {
       if (!this.model?.type) return;
       return getSuggestedChildren(this.model.type);
     },
+    schemaHasName() {
+      if (!this.model?.type) return true;
+      const schema = propertySchemasIndex[this.model.type];
+      return schema.allowsKey('name');
+    }
   },
   mounted() {
     // Don't autofocus on mobile, it brings up the on-screen keyboard
diff --git a/app/imports/client/ui/properties/forms/AdjustmentForm.vue b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
index 38a9a507..74d7a34c 100644
--- a/app/imports/client/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
@@ -7,7 +7,7 @@
       >
         <smart-combobox
           label="Attribute"
-          hint="The attribute this adjustment will apply to"
+          hint="The attribute that will be damaged or healed"
           style="flex-basis: 300px;"
           :items="attributeList"
           :value="model.stat"
@@ -22,7 +22,6 @@
         <computed-field
           label="Amount"
           :hint="model.operation === 'set' ? setHint : damageHint"
-          style="flex-basis: 300px;"
           :model="model.amount"
           :error-messages="errors.amount"
           @change="({path, value, ack}) =>
@@ -30,42 +29,45 @@
         />
       </v-col>
     </v-row>
-    <smart-select
-      label="Operation"
-      class="mx-1"
-      style="flex-basis: 300px;"
-      hint="Should the attribute be damaged by the amount, or set to the amount"
-      :items="adjustmentOps"
-      :value="model.operation"
-      :error-messages="errors.operation"
-      @change="change('operation', ...arguments)"
-    />
-    <smart-select
-      v-if="parentTarget !== 'self'"
-      label="Target"
-      :hint="targetOptionHint"
-      :items="targetOptions"
-      :value="model.target"
-      :error-messages="errors.target"
-      :menu-props="{auto: true, lazy: true}"
-      @change="change('target', ...arguments)"
-    />
-    <smart-combobox
-      label="Tags"
-      multiple
-      chips
-      deletable-chips
-      hint="Used to let slots find this property in a library, should otherwise be left blank"
-      :value="model.tags"
-      @change="change('tags', ...arguments)"
-    />
-    <smart-switch
-      label="Don't show in log"
-      :value="model.silent"
-      :error-messages="errors.silent"
-      @change="change('silent', ...arguments)"
-    />
+    <v-row dense>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <smart-select
+          label="Operation"
+          hint="Should the attribute be damaged by the amount, or set to the amount"
+          :items="adjustmentOps"
+          :value="model.operation"
+          :error-messages="errors.operation"
+          @change="change('operation', ...arguments)"
+        />
+      </v-col>
+      <v-col
+        cols="12"
+        md="6"
+      >
+        <smart-select
+          v-if="parentTarget !== 'self'"
+          label="Target"
+          :hint="targetOptionHint"
+          :items="targetOptions"
+          :value="model.target"
+          :error-messages="errors.target"
+          :menu-props="{auto: true, lazy: true}"
+          @change="change('target', ...arguments)"
+        />
+      </v-col>
+    </v-row>
     <form-sections>
+      <form-section name="Log">
+        <smart-switch
+          label="Don't show in log"
+          :value="model.silent"
+          :error-messages="errors.silent"
+          @change="change('silent', ...arguments)"
+        />
+      </form-section>
       <form-section
         v-if="$slots.children"
         name="Children"
diff --git a/app/imports/client/ui/properties/forms/shared/FormSection.vue b/app/imports/client/ui/properties/forms/shared/FormSection.vue
index 378024f5..c74d5213 100644
--- a/app/imports/client/ui/properties/forms/shared/FormSection.vue
+++ b/app/imports/client/ui/properties/forms/shared/FormSection.vue
@@ -4,7 +4,7 @@
       <v-expansion-panel-header>
         {{ name }}
       </v-expansion-panel-header>
-      <v-expansion-panel-content class="pt-2">
+      <v-expansion-panel-content class="pt-4">
         <slot />
       </v-expansion-panel-content>
     </v-expansion-panel>
@@ -13,7 +13,7 @@
     <v-expansion-panel-header>
       {{ name }}
     </v-expansion-panel-header>
-    <v-expansion-panel-content class="pt-2">
+    <v-expansion-panel-content class="pt-4">
       <slot />
     </v-expansion-panel-content>
   </v-expansion-panel>
diff --git a/app/imports/client/ui/properties/forms/shared/FormSections.vue b/app/imports/client/ui/properties/forms/shared/FormSections.vue
index 6010fb96..e9f06985 100644
--- a/app/imports/client/ui/properties/forms/shared/FormSections.vue
+++ b/app/imports/client/ui/properties/forms/shared/FormSections.vue
@@ -1,7 +1,9 @@
 <template lang="html">
   <v-expansion-panels
     accordion
+    tile
     multiple
+    hover
   >
     <slot />
   </v-expansion-panels>