Added help to property creation forms

This commit is contained in:
Stefan Zermatten
2022-11-08 17:17:26 +02:00
parent 1cedf55fbf
commit 48291d2c8f
2 changed files with 56 additions and 2 deletions

View File

@@ -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);

View File

@@ -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>