From 48291d2c8f59bb8516db8a1827d3a0fe5b69b487 Mon Sep 17 00:00:00 2001
From: Stefan Zermatten <stefanzermatten@gmail.com>
Date: Tue, 8 Nov 2022 17:17:26 +0200
Subject: [PATCH] Added help to property creation forms

---
 .../AddCreaturePropertyDialog.vue             | 33 +++++++++++++++++--
 .../ui/library/LibraryNodeInsertForm.vue      | 25 ++++++++++++++
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue b/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
index 944c7642..720b4c45 100644
--- a/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
+++ b/app/imports/ui/creature/creatureProperties/AddCreaturePropertyDialog.vue
@@ -8,6 +8,22 @@
       </v-toolbar-title>
       <v-spacer />
       <v-slide-x-reverse-transition hide-on-leave>
+        <v-switch
+          v-if="tab === 0"
+          :input-value="showPropertyHelp"
+          append-icon="mdi-help"
+          hide-details
+          flat
+          @change="propertyHelpChanged"
+        />
+        <v-btn 
+          v-if="tab === 1"
+          icon
+          data-id="help-button"
+          @click="helpDialog"
+        >
+          <v-icon>mdi-help</v-icon>
+        </v-btn>
         <v-switch
           v-if="tab === 0"
           :input-value="showPropertyHelp"
@@ -173,7 +189,7 @@
 <script lang="js">
 import LibraryNodes from '/imports/api/library/LibraryNodes.js';
 import DialogBase from '/imports/ui/dialogStack/DialogBase.vue';
-import { getPropertyName } from '/imports/constants/PROPERTIES.js';
+import PROPERTIES, { getPropertyName } from '/imports/constants/PROPERTIES.js';
 import TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
 import LibraryNodeExpansionContent from '/imports/ui/library/LibraryNodeExpansionContent.vue';
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
@@ -235,7 +251,11 @@ export default {
     },
     toolbarColor(){
       return getThemeColor('secondary');
-    }
+    },
+    docsPath() {
+      const propDef = PROPERTIES[this.type];
+      return propDef && propDef.docsPath;
+    },
   },
   watch: {
     type(newType){
@@ -259,6 +279,15 @@ export default {
         });
       });
     },
+    helpDialog() {
+      this.$store.commit('pushDialogStack', {
+        component: 'help-dialog',
+        elementId: 'help-button',
+        data: {
+          path: this.docsPath,
+        },
+      });
+    },
     searchChanged(val, ack){
       this._subs.searchLibraryNodes.setData('searchTerm', val);
       this._subs.searchLibraryNodes.setData('limit', undefined);
diff --git a/app/imports/ui/library/LibraryNodeInsertForm.vue b/app/imports/ui/library/LibraryNodeInsertForm.vue
index ebd94d49..c006dde6 100644
--- a/app/imports/ui/library/LibraryNodeInsertForm.vue
+++ b/app/imports/ui/library/LibraryNodeInsertForm.vue
@@ -12,6 +12,13 @@
         :value="model.color"
         @input="value => change({path: ['color'], value})"
       />
+      <v-btn
+        icon
+        data-id="help-button"
+        @click="helpDialog"
+      >
+        <v-icon>mdi-help</v-icon>
+      </v-btn>
     </template>
     <component
       :is="type"
@@ -44,6 +51,7 @@ import propertyFormIndex from '/imports/ui/properties/forms/shared/propertyFormI
 import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
 import ColorPicker from '/imports/ui/components/ColorPicker.vue';
 import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
+import PROPERTIES from '/imports/constants/PROPERTIES.js';
 
 export default {
   components: {
@@ -77,6 +85,12 @@ export default {
       isLibraryForm: true,
     };
   },
+  computed: {
+    docsPath() {
+      const propDef = PROPERTIES[this.type];
+      return propDef && propDef.docsPath;
+    },
+  },
   watch: {
     type(newType) {
       if (!newType) return;
@@ -87,6 +101,17 @@ export default {
       this.model = model;
     },
   },
+  methods: {
+    helpDialog() {
+      this.$store.commit('pushDialogStack', {
+        component: 'help-dialog',
+        elementId: 'help-button',
+        data: {
+          path: this.docsPath,
+        },
+      });
+    },
+  }
 }
 </script>