From e8c6f26a0ba3593ffe5d33e421feb65cc4dc955a Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Mon, 12 Jul 2021 14:39:05 +0200
Subject: [PATCH] fix skills UI bugs and icon consistency for skills

---
 .../components/skills/SkillListTile.vue       | 24 +++++---------
 .../components/skills/SkillProficiency.vue    | 13 ++------
 .../forms/shared/ProficiencySelect.vue        | 17 ++--------
 .../ui/properties/shared/ProficiencyIcon.vue  | 18 ++++-------
 .../treeNodeViews/ProficiencyTreeNode.vue     | 32 +++++++++++++++++++
 .../treeNodeViews/treeNodeViewIndex.js        |  2 ++
 .../properties/viewers/ProficiencyViewer.vue  |  7 ++--
 .../ui/properties/viewers/SkillViewer.vue     | 13 ++------
 app/imports/ui/utility/getProficiencyIcon.js  | 13 ++++++++
 9 files changed, 74 insertions(+), 65 deletions(-)
 create mode 100644 app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue
 create mode 100644 app/imports/ui/utility/getProficiencyIcon.js

diff --git a/app/imports/ui/properties/components/skills/SkillListTile.vue b/app/imports/ui/properties/components/skills/SkillListTile.vue
index 0ab9be72..1ca8f98a 100644
--- a/app/imports/ui/properties/components/skills/SkillListTile.vue
+++ b/app/imports/ui/properties/components/skills/SkillListTile.vue
@@ -4,9 +4,10 @@
     style="min-height: 36px;"
     v-on="hasClickListener ? {click} : {}"
   >
-    <v-icon class="prof-icon">
-      {{ icon }}
-    </v-icon>
+    <proficiency-icon
+      :value="model.proficiency"
+      class="prof-icon"
+    />
     <v-list-item-content class="py-1">
       <v-list-item-title>
         <span
@@ -41,8 +42,12 @@
 
 <script lang="js">
 import numberToSignedString from '/imports/ui/utility/numberToSignedString.js';
+import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
 
 export default {
+  components: {
+    ProficiencyIcon,
+  },
 	props: {
     model: {
       type: Object,
@@ -51,19 +56,6 @@ export default {
     hideModifier: Boolean,
 	},
 	computed: {
-		icon(){
-      if (this.model.proficiency == 0.49){
-				return 'mdi-brightness-3';
-			} else if (this.model.proficiency == 0.5){
-				return 'mdi-brightness-2';
-			} else if (this.model.proficiency == 1) {
-				return 'mdi-brightness-1'
-			} else if (this.model.proficiency == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
-		},
 		displayedModifier(){
 			let mod = this.model.value;
 			if (this.model.fail){
diff --git a/app/imports/ui/properties/components/skills/SkillProficiency.vue b/app/imports/ui/properties/components/skills/SkillProficiency.vue
index 6a504aa8..9d55716a 100644
--- a/app/imports/ui/properties/components/skills/SkillProficiency.vue
+++ b/app/imports/ui/properties/components/skills/SkillProficiency.vue
@@ -43,6 +43,7 @@
 <script lang="js">
   import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
   import Breadcrumbs from '/imports/ui/creature/creatureProperties/Breadcrumbs.vue';
+  import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
 
   export default {
     components: {
@@ -58,17 +59,7 @@
     },
     computed: {
       icon(){
-        if (this.model.value == 0.49){
-          return 'mdi-brightness-3';
-        } else if (this.model.value == 0.5) {
-          return 'mdi-brightness-2'
-        } else if (this.model.value == 1) {
-          return 'mdi-brightness-1'
-        } else if (this.model.value == 2){
-          return 'album'
-        } else {
-          return 'mdi-radiobox-blank';
-        }
+        return getProficiencyIcon(this.model.value);
       },
       proficiencyText(){
         switch (this.model.value){
diff --git a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
index 42475c22..51e1dc4c 100644
--- a/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
+++ b/app/imports/ui/properties/forms/shared/ProficiencySelect.vue
@@ -20,20 +20,9 @@
 </template>
 
 <script lang="js">
+  import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
+
 	const ICON_SPIN_DURATION = 300;
-	let proficiencyIcon = function(value){
-    if (value == 0.49){
-			return 'mdi-brightness-3';
-		} else if (value == 0.5){
-			return 'mdi-brightness-2';
-		} else if (value == 1) {
-			return 'mdi-brightness-1'
-		} else if (value == 2){
-			return 'album'
-		} else {
-			return 'mdi-radiobox-blank';
-		}
-	};
 
 	export default {
 		props: {
@@ -60,7 +49,7 @@
 			'value': {
 				immediate: true,
 				handler(newValue){
-					let newIcon = proficiencyIcon(newValue);
+					let newIcon = getProficiencyIcon(newValue);
 					this.iconClass='leaving';
 					setTimeout(() => {
 						this.displayedIcon = newIcon;
diff --git a/app/imports/ui/properties/shared/ProficiencyIcon.vue b/app/imports/ui/properties/shared/ProficiencyIcon.vue
index 0a5f1d94..91249fc3 100644
--- a/app/imports/ui/properties/shared/ProficiencyIcon.vue
+++ b/app/imports/ui/properties/shared/ProficiencyIcon.vue
@@ -5,22 +5,18 @@
 </template>
 
 <script lang="js">
+import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
+
 export default {
 	props: {
-		value: Number,
+		value: {
+      type: Number,
+      default: undefined,
+    },
 	},
 	computed: {
 		displayedIcon(){
-			let value = this.value;
-			if (value == 0.5){
-				return 'mdi-brightness-2';
-			} else if (value == 1) {
-				return 'mdi-brightness-1'
-			} else if (value == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
+      return getProficiencyIcon(this.value);
 		}
 	}
 }
diff --git a/app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue b/app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue
new file mode 100644
index 00000000..18d5f2b2
--- /dev/null
+++ b/app/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue
@@ -0,0 +1,32 @@
+<template lang="html">
+  <div class="layout align-center justify-start">
+    <proficiency-icon
+      v-if="!hideIcon"
+      class="mr-2"
+      :class="selected && 'primary--text'"
+      :color="model.color"
+      :value="model.value"
+    />
+    <div class="text-no-wrap text-truncate">
+      <template v-if="model.stats && model.stats.length">
+        {{ model.stats.join(', ') }}
+      </template>
+      <template v-else>
+        {{ title }}
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="js">
+// Most of this was copied from EffectViewer and should probably be generalised
+import treeNodeViewMixin from '/imports/ui/properties/treeNodeViews/treeNodeViewMixin.js';
+import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+
+export default {
+  components: {
+    ProficiencyIcon,
+  },
+  mixins: [treeNodeViewMixin]
+}
+</script>
diff --git a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
index 86fe7968..3ce03502 100644
--- a/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
+++ b/app/imports/ui/properties/treeNodeViews/treeNodeViewIndex.js
@@ -4,6 +4,7 @@ import ItemTreeNode from '/imports/ui/properties/treeNodeViews/ItemTreeNode.vue'
 import DamageTreeNode from '/imports/ui/properties/treeNodeViews/DamageTreeNode.vue';
 import EffectTreeNode from '/imports/ui/properties/treeNodeViews/EffectTreeNode.vue';
 import ClassLevelTreeNode from '/imports/ui/properties/treeNodeViews/ClassLevelTreeNode.vue';
+import ProficiencyTreeNode from '/imports/ui/properties/treeNodeViews/ProficiencyTreeNode.vue';
 import ReferenceTreeNode from '/imports/ui/properties/treeNodeViews/ReferenceTreeNode.vue';
 
 export default {
@@ -13,5 +14,6 @@ export default {
   damage: DamageTreeNode,
   effect: EffectTreeNode,
   item: ItemTreeNode,
+  proficiency: ProficiencyTreeNode,
   reference: ReferenceTreeNode,
 }
diff --git a/app/imports/ui/properties/viewers/ProficiencyViewer.vue b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
index b5c31f00..a7c44e1b 100644
--- a/app/imports/ui/properties/viewers/ProficiencyViewer.vue
+++ b/app/imports/ui/properties/viewers/ProficiencyViewer.vue
@@ -1,10 +1,12 @@
 <template lang="html">
   <div class="proficiency-viewer">
+    <div class="text-h5">
+      {{ model.stats && model.stats.join(' ') }}
+    </div>
     <div class="text-h5 layout">
-      {{ model.skill }}
       <proficiency-icon
         :value="model.value"
-        class="ml-3 mr-1"
+        class="mr-1"
       />
       <div>
         {{ proficiencyText }}
@@ -16,6 +18,7 @@
 <script lang="js">
 import propertyViewerMixin from '/imports/ui/properties/viewers/shared/propertyViewerMixin.js';
 import ProficiencyIcon from '/imports/ui/properties/shared/ProficiencyIcon.vue';
+
 export default {
   components: {
     ProficiencyIcon,
diff --git a/app/imports/ui/properties/viewers/SkillViewer.vue b/app/imports/ui/properties/viewers/SkillViewer.vue
index 5b03002f..df8be16a 100644
--- a/app/imports/ui/properties/viewers/SkillViewer.vue
+++ b/app/imports/ui/properties/viewers/SkillViewer.vue
@@ -89,6 +89,7 @@ import CreatureProperties from '/imports/api/creature/creatureProperties/Creatur
 import AttributeEffect from '/imports/ui/properties/components/attributes/AttributeEffect.vue';
 import SkillProficiency from '/imports/ui/properties/components/skills/SkillProficiency.vue';
 import Creatures from '/imports/api/creature/creatures/Creatures.js';
+import getProficiencyIcon from '/imports/ui/utility/getProficiencyIcon.js';
 
 export default {
   components: {
@@ -109,17 +110,7 @@ export default {
 			}
 		},
     icon(){
-			if (this.model.proficiency == 0.49){
-				return 'mdi-brightness-3';
-			} else if (this.model.proficiency == 0.5){
-				return 'mdi-brightness-2';
-			} else if (this.model.proficiency == 1) {
-				return 'mdi-brightness-1'
-			} else if (this.model.proficiency == 2){
-				return 'album'
-			} else {
-				return 'mdi-radiobox-blank';
-			}
+      return getProficiencyIcon(this.model.proficiency);
 		},
   },
   methods: {
diff --git a/app/imports/ui/utility/getProficiencyIcon.js b/app/imports/ui/utility/getProficiencyIcon.js
new file mode 100644
index 00000000..4756cd9b
--- /dev/null
+++ b/app/imports/ui/utility/getProficiencyIcon.js
@@ -0,0 +1,13 @@
+export default function getProficiencyIcon(proficiency){
+  if (proficiency == 0.49){
+    return 'mdi-brightness-3';
+  } else if (proficiency == 0.5){
+    return 'mdi-brightness-2';
+  } else if (proficiency == 1) {
+    return 'mdi-brightness-1'
+  } else if (proficiency == 2){
+    return 'mdi-album'
+  } else {
+    return 'mdi-radiobox-blank';
+  }
+}