From 442aea2bbe562fc6cde62155c73f4a04b46d843d Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 13 Jun 2023 14:27:32 +0200
Subject: [PATCH] Forms try to hold your place better Expanding form sections
 keeps them expanded when changing property viewed or opening a new prop
 Disabled auto-focus, because it forces scroll

---
 .../client/ui/properties/PropertyForm.vue     |  2 ++
 .../client/ui/properties/forms/ActionForm.vue |  2 +-
 .../ui/properties/forms/AdjustmentForm.vue    |  8 +------
 .../ui/properties/forms/AttributeForm.vue     |  2 +-
 .../client/ui/properties/forms/BranchForm.vue |  2 +-
 .../client/ui/properties/forms/BuffForm.vue   |  2 +-
 .../ui/properties/forms/BuffRemoverForm.vue   |  2 +-
 .../client/ui/properties/forms/ClassForm.vue  |  2 +-
 .../ui/properties/forms/ClassLevelForm.vue    |  1 +
 .../ui/properties/forms/ConstantForm.vue      |  1 +
 .../ui/properties/forms/ContainerForm.vue     |  5 ++++-
 .../client/ui/properties/forms/DamageForm.vue |  2 +-
 .../properties/forms/DamageMultiplierForm.vue |  2 +-
 .../client/ui/properties/forms/EffectForm.vue |  1 +
 .../ui/properties/forms/FeatureForm.vue       |  1 +
 .../client/ui/properties/forms/FolderForm.vue |  2 +-
 .../client/ui/properties/forms/ItemForm.vue   |  2 +-
 .../client/ui/properties/forms/NoteForm.vue   |  1 +
 .../ui/properties/forms/PointBuyForm.vue      |  2 +-
 .../ui/properties/forms/ProficiencyForm.vue   |  1 +
 .../ui/properties/forms/ReferenceForm.vue     |  1 +
 .../client/ui/properties/forms/RollForm.vue   |  2 +-
 .../ui/properties/forms/SavingThrowForm.vue   |  2 +-
 .../client/ui/properties/forms/SkillForm.vue  |  2 +-
 .../ui/properties/forms/SlotFillerForm.vue    |  1 +
 .../client/ui/properties/forms/SlotForm.vue   |  9 +-------
 .../client/ui/properties/forms/SpellForm.vue  |  2 +-
 .../ui/properties/forms/SpellListForm.vue     |  1 +
 .../client/ui/properties/forms/ToggleForm.vue |  2 +-
 .../ui/properties/forms/TriggerForm.vue       |  2 +-
 .../properties/forms/shared/FormSections.vue  | 21 ++++++++++++++++++-
 app/imports/client/ui/vuexStore.js            |  9 +++++++-
 32 files changed, 62 insertions(+), 35 deletions(-)

diff --git a/app/imports/client/ui/properties/PropertyForm.vue b/app/imports/client/ui/properties/PropertyForm.vue
index 003a1fbc..473e49ab 100644
--- a/app/imports/client/ui/properties/PropertyForm.vue
+++ b/app/imports/client/ui/properties/PropertyForm.vue
@@ -283,6 +283,7 @@ export default {
     }
   },
   mounted() {
+    /** Disable auto-focus, it gets in the way more than it helps
     // Don't autofocus on mobile, it brings up the on-screen keyboard
     if (this.$vuetify.breakpoint.smAndDown) return;
 
@@ -291,6 +292,7 @@ export default {
         this.$refs.focusFirst.focus()
       }
     }, 300);
+    */
   },
   methods: {
     selectSubProperty(_id){
diff --git a/app/imports/client/ui/properties/forms/ActionForm.vue b/app/imports/client/ui/properties/forms/ActionForm.vue
index 1b89930e..218f0c03 100644
--- a/app/imports/client/ui/properties/forms/ActionForm.vue
+++ b/app/imports/client/ui/properties/forms/ActionForm.vue
@@ -93,7 +93,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="action">
       <form-section name="Resources Consumed">
         <resources-form
           :model="model.resources"
diff --git a/app/imports/client/ui/properties/forms/AdjustmentForm.vue b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
index bc23b958..af738e78 100644
--- a/app/imports/client/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/client/ui/properties/forms/AdjustmentForm.vue
@@ -62,7 +62,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="adjustment">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
@@ -71,12 +71,6 @@
           @change="change('silent', ...arguments)"
         />
       </form-section>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
       <slot />
     </form-sections>
   </div>
diff --git a/app/imports/client/ui/properties/forms/AttributeForm.vue b/app/imports/client/ui/properties/forms/AttributeForm.vue
index 02f53aaa..32072b95 100644
--- a/app/imports/client/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/client/ui/properties/forms/AttributeForm.vue
@@ -74,7 +74,7 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-sections>
+    <form-sections type="attribute">
       <v-expand-transition>
         <form-section
           v-if="model.attributeType === 'healthBar'"
diff --git a/app/imports/client/ui/properties/forms/BranchForm.vue b/app/imports/client/ui/properties/forms/BranchForm.vue
index 98540fa6..5ea19084 100644
--- a/app/imports/client/ui/properties/forms/BranchForm.vue
+++ b/app/imports/client/ui/properties/forms/BranchForm.vue
@@ -29,7 +29,7 @@
           $emit('change', {path: ['condition', ...path], value, ack})"
       />
     </v-expand-transition>
-    <form-sections>
+    <form-sections type="branch">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
diff --git a/app/imports/client/ui/properties/forms/BuffForm.vue b/app/imports/client/ui/properties/forms/BuffForm.vue
index 38e19afa..fe2e8893 100644
--- a/app/imports/client/ui/properties/forms/BuffForm.vue
+++ b/app/imports/client/ui/properties/forms/BuffForm.vue
@@ -29,7 +29,7 @@
       :error-messages="errors.target"
       @change="change('target', ...arguments)"
     />
-    <form-sections>
+    <form-sections type="buff">
       <form-section
         v-if="$slots.children"
         name="Children"
diff --git a/app/imports/client/ui/properties/forms/BuffRemoverForm.vue b/app/imports/client/ui/properties/forms/BuffRemoverForm.vue
index f0226238..6aa8e299 100644
--- a/app/imports/client/ui/properties/forms/BuffRemoverForm.vue
+++ b/app/imports/client/ui/properties/forms/BuffRemoverForm.vue
@@ -52,7 +52,7 @@
         </v-row>
       </div>
     </v-expand-transition>
-    <form-sections>
+    <form-sections type="buffRemover">
       <form-section
         v-if="$slots.children"
         name="Children"
diff --git a/app/imports/client/ui/properties/forms/ClassForm.vue b/app/imports/client/ui/properties/forms/ClassForm.vue
index 08c8b5fb..3fb6ee98 100644
--- a/app/imports/client/ui/properties/forms/ClassForm.vue
+++ b/app/imports/client/ui/properties/forms/ClassForm.vue
@@ -22,7 +22,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="class">
       <form-section name="Class levels from libraries">
         <tag-targeting
           :model="model"
diff --git a/app/imports/client/ui/properties/forms/ClassLevelForm.vue b/app/imports/client/ui/properties/forms/ClassLevelForm.vue
index 5ee2f04b..ec02c05f 100644
--- a/app/imports/client/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/client/ui/properties/forms/ClassLevelForm.vue
@@ -39,6 +39,7 @@
     />
     <form-sections
       v-if="$slots.default"
+      type="classLevel"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/ConstantForm.vue b/app/imports/client/ui/properties/forms/ConstantForm.vue
index 297ff737..316688bd 100644
--- a/app/imports/client/ui/properties/forms/ConstantForm.vue
+++ b/app/imports/client/ui/properties/forms/ConstantForm.vue
@@ -24,6 +24,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="constant"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/ContainerForm.vue b/app/imports/client/ui/properties/forms/ContainerForm.vue
index 71e4ccec..9d8556f3 100644
--- a/app/imports/client/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/client/ui/properties/forms/ContainerForm.vue
@@ -71,7 +71,10 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections v-if="$slots.default">
+    <form-sections
+      v-if="$slots.default"
+      type="container"
+    >
       <slot />
     </form-sections>
   </div>
diff --git a/app/imports/client/ui/properties/forms/DamageForm.vue b/app/imports/client/ui/properties/forms/DamageForm.vue
index bf7682af..b7ed8881 100644
--- a/app/imports/client/ui/properties/forms/DamageForm.vue
+++ b/app/imports/client/ui/properties/forms/DamageForm.vue
@@ -42,7 +42,7 @@
       :error-messages="errors.target"
       @change="change('target', ...arguments)"
     />
-    <form-sections>
+    <form-sections type="damage">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
diff --git a/app/imports/client/ui/properties/forms/DamageMultiplierForm.vue b/app/imports/client/ui/properties/forms/DamageMultiplierForm.vue
index 11e9053c..41cfa862 100644
--- a/app/imports/client/ui/properties/forms/DamageMultiplierForm.vue
+++ b/app/imports/client/ui/properties/forms/DamageMultiplierForm.vue
@@ -39,7 +39,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="damageMultiplier">
       <form-section
         v-if="$slots.children"
         name="Children"
diff --git a/app/imports/client/ui/properties/forms/EffectForm.vue b/app/imports/client/ui/properties/forms/EffectForm.vue
index c274bdad..fbf57736 100644
--- a/app/imports/client/ui/properties/forms/EffectForm.vue
+++ b/app/imports/client/ui/properties/forms/EffectForm.vue
@@ -111,6 +111,7 @@
     </v-expand-transition>
     <form-sections
       v-if="$slots.default"
+      type="effect"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/FeatureForm.vue b/app/imports/client/ui/properties/forms/FeatureForm.vue
index fbde4df8..acf86e2c 100644
--- a/app/imports/client/ui/properties/forms/FeatureForm.vue
+++ b/app/imports/client/ui/properties/forms/FeatureForm.vue
@@ -21,6 +21,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="feature"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/FolderForm.vue b/app/imports/client/ui/properties/forms/FolderForm.vue
index 0d4e0825..3baab232 100644
--- a/app/imports/client/ui/properties/forms/FolderForm.vue
+++ b/app/imports/client/ui/properties/forms/FolderForm.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="folder-form">
     <div class="layout wrap">
-      <form-sections>
+      <form-sections type="folder">
         <form-section name="Grouping">
           <smart-switch
             label="Group children on a card"
diff --git a/app/imports/client/ui/properties/forms/ItemForm.vue b/app/imports/client/ui/properties/forms/ItemForm.vue
index 94182d0e..3bbebdd4 100644
--- a/app/imports/client/ui/properties/forms/ItemForm.vue
+++ b/app/imports/client/ui/properties/forms/ItemForm.vue
@@ -80,7 +80,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="item">
       <form-section
         name="Behavior"
       >
diff --git a/app/imports/client/ui/properties/forms/NoteForm.vue b/app/imports/client/ui/properties/forms/NoteForm.vue
index 0d14aabe..43397b4f 100644
--- a/app/imports/client/ui/properties/forms/NoteForm.vue
+++ b/app/imports/client/ui/properties/forms/NoteForm.vue
@@ -20,6 +20,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="note"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/PointBuyForm.vue b/app/imports/client/ui/properties/forms/PointBuyForm.vue
index 8705e17a..e366abf9 100644
--- a/app/imports/client/ui/properties/forms/PointBuyForm.vue
+++ b/app/imports/client/ui/properties/forms/PointBuyForm.vue
@@ -5,7 +5,7 @@
       :model="model"
       @change="e => $emit('change', e)"
     />
-    <form-sections>
+    <form-sections type="pointBuy">
       <form-section name="Point buy settings">
         <v-row dense>
           <v-col
diff --git a/app/imports/client/ui/properties/forms/ProficiencyForm.vue b/app/imports/client/ui/properties/forms/ProficiencyForm.vue
index efcf185a..f66c7055 100644
--- a/app/imports/client/ui/properties/forms/ProficiencyForm.vue
+++ b/app/imports/client/ui/properties/forms/ProficiencyForm.vue
@@ -77,6 +77,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="proficiency"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/ReferenceForm.vue b/app/imports/client/ui/properties/forms/ReferenceForm.vue
index e4afe1da..1248f89a 100644
--- a/app/imports/client/ui/properties/forms/ReferenceForm.vue
+++ b/app/imports/client/ui/properties/forms/ReferenceForm.vue
@@ -57,6 +57,7 @@
     </v-row>
     <form-sections
       v-if="$slots.default"
+      type="reference"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/RollForm.vue b/app/imports/client/ui/properties/forms/RollForm.vue
index 55c7da3a..27b326c4 100644
--- a/app/imports/client/ui/properties/forms/RollForm.vue
+++ b/app/imports/client/ui/properties/forms/RollForm.vue
@@ -28,7 +28,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="roll">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
diff --git a/app/imports/client/ui/properties/forms/SavingThrowForm.vue b/app/imports/client/ui/properties/forms/SavingThrowForm.vue
index 07c09ff0..4b5aaf25 100644
--- a/app/imports/client/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/client/ui/properties/forms/SavingThrowForm.vue
@@ -43,7 +43,7 @@
         />
       </v-col>
     </v-row>
-    <form-sections>
+    <form-sections type="savingThrow">
       <form-section name="Log">
         <smart-switch
           label="Don't show in log"
diff --git a/app/imports/client/ui/properties/forms/SkillForm.vue b/app/imports/client/ui/properties/forms/SkillForm.vue
index 5604bdbe..f4628fd3 100644
--- a/app/imports/client/ui/properties/forms/SkillForm.vue
+++ b/app/imports/client/ui/properties/forms/SkillForm.vue
@@ -52,7 +52,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="skill">
       <form-section name="Base Values">
         <v-row dense>
           <v-col
diff --git a/app/imports/client/ui/properties/forms/SlotFillerForm.vue b/app/imports/client/ui/properties/forms/SlotFillerForm.vue
index daa8eb98..90af79fd 100644
--- a/app/imports/client/ui/properties/forms/SlotFillerForm.vue
+++ b/app/imports/client/ui/properties/forms/SlotFillerForm.vue
@@ -8,6 +8,7 @@
     />
     <form-sections
       v-if="$slots.default"
+      type="slotFiller"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/SlotForm.vue b/app/imports/client/ui/properties/forms/SlotForm.vue
index 88a7467f..14fab234 100644
--- a/app/imports/client/ui/properties/forms/SlotForm.vue
+++ b/app/imports/client/ui/properties/forms/SlotForm.vue
@@ -105,14 +105,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
-      <form-section
-        v-if="$slots.children"
-        name="Children"
-      >
-        <slot name="children" />
-      </form-section>
-
+    <form-sections type="slot">
       <form-section name="Behavior">
         <v-row dense>
           <!--
diff --git a/app/imports/client/ui/properties/forms/SpellForm.vue b/app/imports/client/ui/properties/forms/SpellForm.vue
index c09e66c7..34a6cce1 100644
--- a/app/imports/client/ui/properties/forms/SpellForm.vue
+++ b/app/imports/client/ui/properties/forms/SpellForm.vue
@@ -231,7 +231,7 @@
       @change="({path, value, ack}) =>
         $emit('change', {path: ['description', ...path], value, ack})"
     />
-    <form-sections>
+    <form-sections type="spell">
       <form-section name="Resources Consumed">
         <resources-form
           :model="model.resources"
diff --git a/app/imports/client/ui/properties/forms/SpellListForm.vue b/app/imports/client/ui/properties/forms/SpellListForm.vue
index d6413189..6afd01b7 100644
--- a/app/imports/client/ui/properties/forms/SpellListForm.vue
+++ b/app/imports/client/ui/properties/forms/SpellListForm.vue
@@ -65,6 +65,7 @@
 
     <form-sections
       v-if="$slots.default"
+      type="spellList"
     >
       <slot />
     </form-sections>
diff --git a/app/imports/client/ui/properties/forms/ToggleForm.vue b/app/imports/client/ui/properties/forms/ToggleForm.vue
index 906dc7fd..d288666a 100644
--- a/app/imports/client/ui/properties/forms/ToggleForm.vue
+++ b/app/imports/client/ui/properties/forms/ToggleForm.vue
@@ -47,7 +47,7 @@
       </v-expand-transition>
     </v-row>
 
-    <form-sections>
+    <form-sections type="toggle">
       <form-section name="Behavior">
         <v-col
           cols="12"
diff --git a/app/imports/client/ui/properties/forms/TriggerForm.vue b/app/imports/client/ui/properties/forms/TriggerForm.vue
index 254f59c7..f6b9f19e 100644
--- a/app/imports/client/ui/properties/forms/TriggerForm.vue
+++ b/app/imports/client/ui/properties/forms/TriggerForm.vue
@@ -82,7 +82,7 @@
         $emit('change', {path: ['description', ...path], value, ack})"
     />
 
-    <form-sections>
+    <form-sections type="trigger">
       <form-section
         name="Log"
       >
diff --git a/app/imports/client/ui/properties/forms/shared/FormSections.vue b/app/imports/client/ui/properties/forms/shared/FormSections.vue
index e9f06985..96c46cfb 100644
--- a/app/imports/client/ui/properties/forms/shared/FormSections.vue
+++ b/app/imports/client/ui/properties/forms/shared/FormSections.vue
@@ -1,5 +1,6 @@
 <template lang="html">
   <v-expansion-panels
+    v-model="expand"
     accordion
     tile
     multiple
@@ -10,5 +11,23 @@
 </template>
 
 <script lang="js">
-export default {}
+export default {
+  props: {
+    type: {
+      type: String,
+      default: undefined,
+    }
+  },
+  data() {
+    return {
+      expand: this.$store.getters.formExpansionByType(this.type),
+    };
+  },
+  watch: {
+    expand(value) {
+      if (!this.type) return;
+      this.$store.commit('setFormExpansion', {type: this.type, value});
+    }
+  }
+}
 </script>
diff --git a/app/imports/client/ui/vuexStore.js b/app/imports/client/ui/vuexStore.js
index d4578aa0..fec340cd 100644
--- a/app/imports/client/ui/vuexStore.js
+++ b/app/imports/client/ui/vuexStore.js
@@ -17,6 +17,7 @@ const store = new Vuex.Store({
     pageTitle: undefined,
     characterSheetTabs: {},
     showDetailsDialog: false,
+    formExpansions: {},
   },
   getters: {
     tabById: (state) => (id) => {
@@ -30,7 +31,10 @@ const store = new Vuex.Store({
       } else {
         return tabs[tabNumber]
       }
-    }
+    },
+    formExpansionByType: (state) => (type) => {
+      return state.formExpansions[type] || [];
+    },
   },
   mutations: {
     toggleDrawer(state) {
@@ -68,6 +72,9 @@ const store = new Vuex.Store({
     setShowDetailsDialog(state, value) {
       state.showDetailsDialog = value;
     },
+    setFormExpansion(state, { type, value }) {
+      state.formExpansions[type] = value;
+    },
   },
 });