From ed9cfee9f9754e6e014b5c1807264c0dd19c5c1a Mon Sep 17 00:00:00 2001
From: Thaum Rystra <stefanzermatten@gmail.com>
Date: Wed, 29 Apr 2020 10:53:06 +0200
Subject: [PATCH] Added autocomplete for fields that expect variable names

---
 .../computation/ComputedForCreature.vue       |  8 +++++-
 .../ui/components/global/SmartCombobox.vue    | 26 +++++++++++++++++++
 .../ui/components/global/SmartInputMixin.js   |  2 +-
 .../ui/components/global/globalIndex.js       | 12 +++++----
 .../ui/properties/forms/AdjustmentForm.vue    |  6 ++++-
 .../forms/AttributeConsumedForm.vue           |  6 ++++-
 .../ui/properties/forms/EffectForm.vue        | 16 ++++++------
 .../ui/properties/forms/ProficiencyForm.vue   | 11 +++++---
 app/imports/ui/properties/forms/SkillForm.vue | 12 ++++++++-
 .../forms/shared/ProficiencySelect.vue        | 21 ++++++---------
 .../forms/shared/lists/attributeListMixin.js  | 11 ++++++++
 .../shared/lists/createListOfProperties.js    | 21 +++++++++++++++
 .../forms/shared/lists/skillListMixin.js      | 11 ++++++++
 13 files changed, 128 insertions(+), 35 deletions(-)
 create mode 100644 app/imports/ui/components/global/SmartCombobox.vue
 create mode 100644 app/imports/ui/properties/forms/shared/lists/attributeListMixin.js
 create mode 100644 app/imports/ui/properties/forms/shared/lists/createListOfProperties.js
 create mode 100644 app/imports/ui/properties/forms/shared/lists/skillListMixin.js

diff --git a/app/imports/ui/components/computation/ComputedForCreature.vue b/app/imports/ui/components/computation/ComputedForCreature.vue
index 90e82e72..54bef855 100644
--- a/app/imports/ui/components/computation/ComputedForCreature.vue
+++ b/app/imports/ui/components/computation/ComputedForCreature.vue
@@ -1,9 +1,14 @@
 <template lang="html">
-  <computed :value="value" :scope="scope" v-bind="$attrs"/>
+  <computed
+    :value="value"
+    :scope="scope"
+    v-bind="$attrs"
+  />
 </template>
 
 <script>
 import Computed from '/imports/ui/components/computation/Computed.vue';
+import Creatures from '/imports/api/creature/Creatures.js';
 
 export default {
   inject: ['computationContext'],
@@ -13,6 +18,7 @@ export default {
   props: {
     value: {
       type: String,
+      default: undefined,
     },
   },
   meteor: {
diff --git a/app/imports/ui/components/global/SmartCombobox.vue b/app/imports/ui/components/global/SmartCombobox.vue
new file mode 100644
index 00000000..5852be5a
--- /dev/null
+++ b/app/imports/ui/components/global/SmartCombobox.vue
@@ -0,0 +1,26 @@
+<template lang="html">
+  <v-combobox
+    v-bind="$attrs"
+    :loading="loading"
+    :error-messages="errors"
+    :value="safeValue"
+    :menu-props="{auto: true, lazy: true}"
+    box
+    @change="change"
+    @focus="focused = true"
+    @blur="focused = false"
+  >
+    <slot
+      slot="prepend"
+      name="prepend"
+    />
+  </v-combobox>
+</template>
+
+<script>
+	import SmartInput from '/imports/ui/components/global/SmartInputMixin.js';
+
+	export default {
+		mixins: [SmartInput],
+	};
+</script>
diff --git a/app/imports/ui/components/global/SmartInputMixin.js b/app/imports/ui/components/global/SmartInputMixin.js
index f483361c..cb2d4a1a 100644
--- a/app/imports/ui/components/global/SmartInputMixin.js
+++ b/app/imports/ui/components/global/SmartInputMixin.js
@@ -20,7 +20,7 @@ export default {
     inputValue: this.value,
   };},
   props: {
-    value: [String, Number, Date],
+    value: [String, Number, Date, Array],
     debounceTime: {
       type: Number,
       default: 750,
diff --git a/app/imports/ui/components/global/globalIndex.js b/app/imports/ui/components/global/globalIndex.js
index 8560470d..1e578e5e 100644
--- a/app/imports/ui/components/global/globalIndex.js
+++ b/app/imports/ui/components/global/globalIndex.js
@@ -1,11 +1,13 @@
-import Vue from "vue";
+import Vue from 'vue';
 // Global components
 import DatePicker from '/imports/ui/components/global/DatePicker.vue';
 import TextField from '/imports/ui/components/global/TextField.vue';
 import TextArea from '/imports/ui/components/global/TextArea.vue';
 import SmartSelect from '/imports/ui/components/global/SmartSelect.vue';
+import SmartCombobox from '/imports/ui/components/global/SmartCombobox.vue';
 
-Vue.component("date-picker", DatePicker);
-Vue.component("text-field", TextField);
-Vue.component("text-area", TextArea);
-Vue.component("smart-select", SmartSelect);
+Vue.component('DatePicker', DatePicker);
+Vue.component('TextField', TextField);
+Vue.component('TextArea', TextArea);
+Vue.component('SmartSelect', SmartSelect);
+Vue.component('SmartCombobox', SmartCombobox);
diff --git a/app/imports/ui/properties/forms/AdjustmentForm.vue b/app/imports/ui/properties/forms/AdjustmentForm.vue
index 97616988..3d4ae5bf 100644
--- a/app/imports/ui/properties/forms/AdjustmentForm.vue
+++ b/app/imports/ui/properties/forms/AdjustmentForm.vue
@@ -1,10 +1,11 @@
 <template lang="html">
   <div>
     <div class="layout row">
-      <text-field
+      <smart-combobox
         label="Attribute"
         hint="The attribute this adjustment will apply to"
         style="flex-basis: 300px;"
+        :items="attributeList"
         :value="model.stat"
         :error-messages="errors.stat"
         :debounce-time="debounceTime"
@@ -35,7 +36,10 @@
 </template>
 
 <script>
+import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+
 export default {
+  mixins: [attributeListMixin],
 	props: {
 		model: {
 			type: Object,
diff --git a/app/imports/ui/properties/forms/AttributeConsumedForm.vue b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
index efaa6d01..3442b0e1 100644
--- a/app/imports/ui/properties/forms/AttributeConsumedForm.vue
+++ b/app/imports/ui/properties/forms/AttributeConsumedForm.vue
@@ -1,9 +1,10 @@
 <template lang="html">
   <div class="layout row">
-    <text-field
+    <smart-combobox
       label="Attribute"
       hint="The attribute variable name that will be consumed"
       style="flex-basis: 300px;"
+      :items="attributeList"
       :value="model.variableName"
       :error-messages="errors.variableName"
       :debounce-time="debounceTime"
@@ -22,7 +23,10 @@
 </template>
 
 <script>
+import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
+
 export default {
+  mixins: [attributeListMixin],
 	props: {
 		model: {
 			type: Object,
diff --git a/app/imports/ui/properties/forms/EffectForm.vue b/app/imports/ui/properties/forms/EffectForm.vue
index 4684766c..af21c992 100644
--- a/app/imports/ui/properties/forms/EffectForm.vue
+++ b/app/imports/ui/properties/forms/EffectForm.vue
@@ -50,14 +50,15 @@
         @change="(value, ack) => $emit('change', {path: ['calculation'], value, ack})"
       />
 
-      <text-field
+      <smart-combobox
         label="Stat"
         class="mr-2"
-        :value="model.stats[0]"
-        :items="stats"
+        multiple
+        :value="model.stats"
+        :items="attributeList"
         :error-messages="errors.stats"
         :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['stats'], value: [value], ack})"
+        @change="(value, ack) => $emit('change', {path: ['stats'], value, ack})"
       />
     </div>
   </div>
@@ -65,9 +66,11 @@
 
 <script>
 	import getEffectIcon from '/imports/ui/utility/getEffectIcon.js';
+  import attributeListMixin from '/imports/ui/properties/forms/shared/lists/attributeListMixin.js';
 
 	const ICON_SPIN_DURATION = 300;
 	export default {
+    mixins: [attributeListMixin],
 		props: {
 			model: {
 				type: Object,
@@ -77,10 +80,6 @@
 				type: Object,
 				default: () => ({}),
 			},
-			stats: {
-				type: Array,
-        default: () => [],
-			},
       debounceTime: {
         type: Number,
         default: undefined,
@@ -142,6 +141,7 @@
 		},
 		methods: {
 			getEffectIcon,
+      log: console.log,
 		}
 	};
 </script>
diff --git a/app/imports/ui/properties/forms/ProficiencyForm.vue b/app/imports/ui/properties/forms/ProficiencyForm.vue
index f9ac26eb..76278e3c 100644
--- a/app/imports/ui/properties/forms/ProficiencyForm.vue
+++ b/app/imports/ui/properties/forms/ProficiencyForm.vue
@@ -8,14 +8,15 @@
       @change="(value, ack) => $emit('change', {path: ['name'], value, ack})"
     />
     <div class="layout row wrap justify-start proficiency-form">
-      <text-field
+      <smart-combobox
         label="Skill"
         class="mr-2"
-        :value="model.stats[0]"
-        :items="stats"
+        multiple
+        :value="model.stats"
+        :items="skillList"
         :error-messages="errors.stats"
         :debounce-time="debounceTime"
-        @change="(value, ack) => $emit('change', {path: ['stats'], value: [value], ack})"
+        @change="(value, ack) => $emit('change', {path: ['stats'], value, ack})"
       />
       <proficiency-select
         label="Proficiency"
@@ -30,11 +31,13 @@
 
 <script>
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
+  import skillListMixin from '/imports/ui/properties/forms/shared/lists/skillListMixin.js';
 
 	export default {
 		components: {
 			ProficiencySelect,
 		},
+    mixins: [skillListMixin],
 		props: {
       model: {
 				type: Object,
diff --git a/app/imports/ui/properties/forms/SkillForm.vue b/app/imports/ui/properties/forms/SkillForm.vue
index 33ae90bf..d3a2b8ab 100644
--- a/app/imports/ui/properties/forms/SkillForm.vue
+++ b/app/imports/ui/properties/forms/SkillForm.vue
@@ -17,11 +17,12 @@
         :debounce-time="debounceTime"
         @change="(value, ack) => $emit('change', {path: ['variableName'], value, ack})"
       />
-      <text-field
+      <smart-combobox
         label="Ability"
         :value="model.ability"
         style="flex-basis: 300px;"
         hint="Which ability is this skill based off of"
+        :items="abilityScoreList"
         :error-messages="errors.ability"
         :debounce-time="debounceTime"
         @change="(value, ack) => $emit('change', {path: ['ability'], value, ack})"
@@ -73,6 +74,7 @@
 <script>
 	import ProficiencySelect from '/imports/ui/properties/forms/shared/ProficiencySelect.vue';
 	import FormSection from '/imports/ui/properties/forms/shared/FormSection.vue';
+  import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js';
 
 	export default {
 		components: {
@@ -119,6 +121,14 @@
 				},
 			]
 		};},
+    meteor: {
+      abilityScoreList(){
+        return createListOfProperties({
+          type: 'attribute',
+          attributeType: 'ability',
+        });
+      },
+    },
 	};
 </script>
 
diff --git a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
index 8df7cd91..83bf7c31 100644
--- a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
+++ b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
@@ -56,21 +56,16 @@
 		watch: {
 			'value': {
 				immediate: true,
-				handler(newValue, oldValue){
+				handler(newValue){
 					let newIcon = proficiencyIcon(newValue);
-					if (!oldValue){
-						// Skip animation
+					this.iconClass='leaving';
+					setTimeout(() => {
 						this.displayedIcon = newIcon;
-					} else {
-						this.iconClass='leaving';
-						setTimeout(() => {
-							this.displayedIcon = newIcon;
-							this.iconClass='arriving';
-							requestAnimationFrame(() => {
-								this.iconClass='';
-							});
-						}, ICON_SPIN_DURATION / 2);
-					}
+						this.iconClass='arriving';
+						requestAnimationFrame(() => {
+							this.iconClass='';
+						});
+					}, ICON_SPIN_DURATION / 2);
 				},
 			},
 		}
diff --git a/app/imports/ui/properties/forms/shared/lists/attributeListMixin.js b/app/imports/ui/properties/forms/shared/lists/attributeListMixin.js
new file mode 100644
index 00000000..f3b45a24
--- /dev/null
+++ b/app/imports/ui/properties/forms/shared/lists/attributeListMixin.js
@@ -0,0 +1,11 @@
+import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js';
+
+const attributeListMixin = {
+  meteor: {
+    attributeList(){
+      return createListOfProperties({type: 'attribute'});
+    },
+  },
+};
+
+export default attributeListMixin;
diff --git a/app/imports/ui/properties/forms/shared/lists/createListOfProperties.js b/app/imports/ui/properties/forms/shared/lists/createListOfProperties.js
new file mode 100644
index 00000000..b5e5fef8
--- /dev/null
+++ b/app/imports/ui/properties/forms/shared/lists/createListOfProperties.js
@@ -0,0 +1,21 @@
+import CreatureProperties from '/imports/api/creature/CreatureProperties.js';
+import LibraryNodes from '/imports/api/library/LibraryNodes.js';
+
+export default function createListOfProperties(filter = {}){
+  filter.removed = {$ne: true};
+  let propertyList = [];
+  let variableNames = new Set();
+  function addUniquePropertys(property){
+    if (property.variableName && !variableNames.has(property.variableName)){
+      variableNames.add(property.variableName);
+      propertyList.push({
+        text: property.name || property.variableName,
+        value: property.variableName,
+        propertyType: property.propertyType,
+      });
+    }
+  }
+  CreatureProperties.find(filter).forEach(addUniquePropertys);
+  LibraryNodes.find(filter).forEach(addUniquePropertys);
+  return Array.from(variableNames);
+}
diff --git a/app/imports/ui/properties/forms/shared/lists/skillListMixin.js b/app/imports/ui/properties/forms/shared/lists/skillListMixin.js
new file mode 100644
index 00000000..69d12256
--- /dev/null
+++ b/app/imports/ui/properties/forms/shared/lists/skillListMixin.js
@@ -0,0 +1,11 @@
+import createListOfProperties from '/imports/ui/properties/forms/shared/lists/createListOfProperties.js'
+
+const skillListMixin = {
+  meteor: {
+    skillList(){
+      return createListOfProperties({type: 'skill'});
+    },
+  },
+};
+
+export default skillListMixin;