From 986fe8fd9317b8af619b7666659cb772371c0804 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Fri, 5 Jun 2020 22:39:21 +0200
Subject: [PATCH] Added an autofocus field to most forms

---
 app/imports/ui/components/global/SmartInputMixin.js        | 3 +++
 app/imports/ui/components/global/TextField.vue             | 1 +
 app/imports/ui/properties/forms/ActionForm.vue             | 1 +
 app/imports/ui/properties/forms/AttributeForm.vue          | 1 +
 app/imports/ui/properties/forms/BuffForm.vue               | 1 +
 app/imports/ui/properties/forms/ClassLevelForm.vue         | 1 +
 app/imports/ui/properties/forms/ContainerForm.vue          | 1 +
 app/imports/ui/properties/forms/DamageForm.vue             | 1 +
 app/imports/ui/properties/forms/DamageMultiplierForm.vue   | 1 +
 app/imports/ui/properties/forms/EffectForm.vue             | 1 +
 app/imports/ui/properties/forms/FeatureForm.vue            | 1 +
 app/imports/ui/properties/forms/FolderForm.vue             | 1 +
 app/imports/ui/properties/forms/ItemForm.vue               | 1 +
 app/imports/ui/properties/forms/NoteForm.vue               | 1 +
 app/imports/ui/properties/forms/ProficiencyForm.vue        | 1 +
 app/imports/ui/properties/forms/RollForm.vue               | 1 +
 app/imports/ui/properties/forms/SavingThrowForm.vue        | 1 +
 app/imports/ui/properties/forms/SkillForm.vue              | 1 +
 app/imports/ui/properties/forms/SpellForm.vue              | 1 +
 app/imports/ui/properties/forms/SpellListForm.vue          | 1 +
 app/imports/ui/properties/forms/ToggleForm.vue             | 1 +
 .../ui/properties/forms/shared/propertyFormMixin.js        | 7 ++++++-
 22 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index b39b0c5f..266e4029 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -93,6 +93,9 @@ export default {
       this.safeValue = null;
       this.$nextTick(() => this.safeValue = this.value);
     },
+    focus(){
+      this.$refs.input.focus();
+    }
   },
   computed: {
     errors(){
diff --git a/app/imports/ui/components/global/TextField.vue b/app/imports/ui/components/global/TextField.vue
index f7fab2f9..5f8b79c3 100644
--- a/app/imports/ui/components/global/TextField.vue
+++ b/app/imports/ui/components/global/TextField.vue
@@ -1,5 +1,6 @@
 <template lang="html">
   <v-text-field
+    ref="input"
     v-bind="$attrs"
     :loading="loading"
     :error-messages="errors"
diff --git a/app/imports/ui/properties/forms/ActionForm.vue b/app/imports/ui/properties/forms/ActionForm.vue
index 5db8a24a..4bd36261 100644
--- a/app/imports/ui/properties/forms/ActionForm.vue
+++ b/app/imports/ui/properties/forms/ActionForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div :class="attackForm ? 'attack-form' : 'action-form'">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/AttributeForm.vue b/app/imports/ui/properties/forms/AttributeForm.vue
index 8fe4f719..b2ae4b77 100644
--- a/app/imports/ui/properties/forms/AttributeForm.vue
+++ b/app/imports/ui/properties/forms/AttributeForm.vue
@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout column align-center">
       <text-field
+        ref="focusFirst"
         label="Base Value"
         class="base-value-field"
         hint="This is the value of the attribute before effects are applied"
diff --git a/app/imports/ui/properties/forms/BuffForm.vue b/app/imports/ui/properties/forms/BuffForm.vue
index d8d5cb01..5620d058 100644
--- a/app/imports/ui/properties/forms/BuffForm.vue
+++ b/app/imports/ui/properties/forms/BuffForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="buff-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/ClassLevelForm.vue b/app/imports/ui/properties/forms/ClassLevelForm.vue
index 8251e30a..160bb5ea 100644
--- a/app/imports/ui/properties/forms/ClassLevelForm.vue
+++ b/app/imports/ui/properties/forms/ClassLevelForm.vue
@@ -12,6 +12,7 @@
     </div>
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/ContainerForm.vue b/app/imports/ui/properties/forms/ContainerForm.vue
index 3601d81a..1435bf47 100644
--- a/app/imports/ui/properties/forms/ContainerForm.vue
+++ b/app/imports/ui/properties/forms/ContainerForm.vue
@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout row justify-space-between wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/DamageForm.vue b/app/imports/ui/properties/forms/DamageForm.vue
index d29eb568..c90621a2 100644
--- a/app/imports/ui/properties/forms/DamageForm.vue
+++ b/app/imports/ui/properties/forms/DamageForm.vue
@@ -2,6 +2,7 @@
   <div>
     <div class="layout row">
       <text-field
+        ref="focusFirst"
         label="Damage"
         style="flex-basis: 300px;"
         :value="model.amount"
diff --git a/app/imports/ui/properties/forms/DamageMultiplierForm.vue b/app/imports/ui/properties/forms/DamageMultiplierForm.vue
index 7940bd16..b0baf772 100644
--- a/app/imports/ui/properties/forms/DamageMultiplierForm.vue
+++ b/app/imports/ui/properties/forms/DamageMultiplierForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/EffectForm.vue b/app/imports/ui/properties/forms/EffectForm.vue
index c37bd3f1..59581c5b 100644
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="effect-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/FeatureForm.vue b/app/imports/ui/properties/forms/FeatureForm.vue
index d52dafd8..09fd0539 100644
--- a/app/imports/ui/properties/forms/FeatureForm.vue
+++ b/app/imports/ui/properties/forms/FeatureForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/FolderForm.vue b/app/imports/ui/properties/forms/FolderForm.vue
index 791b8489..640971f7 100644
--- a/app/imports/ui/properties/forms/FolderForm.vue
+++ b/app/imports/ui/properties/forms/FolderForm.vue
@@ -2,6 +2,7 @@
   <div class="folder-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         style="flex-basis: 300px;"
         :value="model.name"
diff --git a/app/imports/ui/properties/forms/ItemForm.vue b/app/imports/ui/properties/forms/ItemForm.vue
index 8540208a..79ff3630 100644
--- a/app/imports/ui/properties/forms/ItemForm.vue
+++ b/app/imports/ui/properties/forms/ItemForm.vue
@@ -20,6 +20,7 @@
     </div>
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/NoteForm.vue b/app/imports/ui/properties/forms/NoteForm.vue
index ff71d7c0..6067d18d 100644
--- a/app/imports/ui/properties/forms/NoteForm.vue
+++ b/app/imports/ui/properties/forms/NoteForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/ProficiencyForm.vue b/app/imports/ui/properties/forms/ProficiencyForm.vue
index 2d526355..cd3c9296 100644
--- a/app/imports/ui/properties/forms/ProficiencyForm.vue
+++ b/app/imports/ui/properties/forms/ProficiencyForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div>
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/RollForm.vue b/app/imports/ui/properties/forms/RollForm.vue
index dbec3346..1118495c 100644
--- a/app/imports/ui/properties/forms/RollForm.vue
+++ b/app/imports/ui/properties/forms/RollForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="roll-form">
     <text-field
+      ref="focusFirst"
       label="Roll"
       :value="model.roll"
       :error-messages="errors.roll"
diff --git a/app/imports/ui/properties/forms/SavingThrowForm.vue b/app/imports/ui/properties/forms/SavingThrowForm.vue
index ce2a26d2..c4ed3410 100644
--- a/app/imports/ui/properties/forms/SavingThrowForm.vue
+++ b/app/imports/ui/properties/forms/SavingThrowForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="saving-throw-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/SkillForm.vue b/app/imports/ui/properties/forms/SkillForm.vue
index b72a4b94..57381ce6 100644
--- a/app/imports/ui/properties/forms/SkillForm.vue
+++ b/app/imports/ui/properties/forms/SkillForm.vue
@@ -2,6 +2,7 @@
   <div class="skill-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/SpellForm.vue b/app/imports/ui/properties/forms/SpellForm.vue
index 26216e88..f975578e 100644
--- a/app/imports/ui/properties/forms/SpellForm.vue
+++ b/app/imports/ui/properties/forms/SpellForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="attribute-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/SpellListForm.vue b/app/imports/ui/properties/forms/SpellListForm.vue
index f9f44511..6f854787 100644
--- a/app/imports/ui/properties/forms/SpellListForm.vue
+++ b/app/imports/ui/properties/forms/SpellListForm.vue
@@ -2,6 +2,7 @@
   <div class="attribute-form">
     <div class="layout row wrap">
       <text-field
+        ref="focusFirst"
         label="Name"
         :value="model.name"
         :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/ToggleForm.vue b/app/imports/ui/properties/forms/ToggleForm.vue
index aa1b03e3..ecc9f248 100644
--- a/app/imports/ui/properties/forms/ToggleForm.vue
+++ b/app/imports/ui/properties/forms/ToggleForm.vue
@@ -1,6 +1,7 @@
 <template lang="html">
   <div class="feature-form">
     <text-field
+      ref="focusFirst"
       label="Name"
       :value="model.name"
       :error-messages="errors.name"
diff --git a/app/imports/ui/properties/forms/shared/propertyFormMixin.js b/app/imports/ui/properties/forms/shared/propertyFormMixin.js
index ce026260..3ce093aa 100644
--- a/app/imports/ui/properties/forms/shared/propertyFormMixin.js
+++ b/app/imports/ui/properties/forms/shared/propertyFormMixin.js
@@ -9,6 +9,11 @@ export default {
       default: () => ({}),
     },
   },
+  mounted(){
+    if (this.$refs.focusFirst){
+      setTimeout(() => this.$refs.focusFirst.focus(), 300);
+    }
+  },
   methods: {
     change(path, value, ack){
       if (!Array.isArray(path)){
@@ -16,5 +21,5 @@ export default {
       }
       this.$emit('change', {path, value, ack});
     }
-  }
+  },
 }