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-toolbar-title>
<v-spacer /> <v-spacer />
<v-slide-x-reverse-transition hide-on-leave> <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-switch
v-if="tab === 0" v-if="tab === 0"
:input-value="showPropertyHelp" :input-value="showPropertyHelp"
@@ -173,7 +189,7 @@
<script lang="js"> <script lang="js">
import LibraryNodes from '/imports/api/library/LibraryNodes.js'; import LibraryNodes from '/imports/api/library/LibraryNodes.js';
import DialogBase from '/imports/ui/dialogStack/DialogBase.vue'; 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 TreeNodeView from '/imports/ui/properties/treeNodeViews/TreeNodeView.vue';
import LibraryNodeExpansionContent from '/imports/ui/library/LibraryNodeExpansionContent.vue'; import LibraryNodeExpansionContent from '/imports/ui/library/LibraryNodeExpansionContent.vue';
import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js'; import schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
@@ -235,7 +251,11 @@ export default {
}, },
toolbarColor(){ toolbarColor(){
return getThemeColor('secondary'); return getThemeColor('secondary');
} },
docsPath() {
const propDef = PROPERTIES[this.type];
return propDef && propDef.docsPath;
},
}, },
watch: { watch: {
type(newType){ 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){ searchChanged(val, ack){
this._subs.searchLibraryNodes.setData('searchTerm', val); this._subs.searchLibraryNodes.setData('searchTerm', val);
this._subs.searchLibraryNodes.setData('limit', undefined); this._subs.searchLibraryNodes.setData('limit', undefined);

View File

@@ -12,6 +12,13 @@
:value="model.color" :value="model.color"
@input="value => change({path: ['color'], value})" @input="value => change({path: ['color'], value})"
/> />
<v-btn
icon
data-id="help-button"
@click="helpDialog"
>
<v-icon>mdi-help</v-icon>
</v-btn>
</template> </template>
<component <component
:is="type" :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 schemaFormMixin from '/imports/ui/properties/forms/shared/schemaFormMixin.js';
import ColorPicker from '/imports/ui/components/ColorPicker.vue'; import ColorPicker from '/imports/ui/components/ColorPicker.vue';
import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js'; import propertySchemasIndex from '/imports/api/properties/propertySchemasIndex.js';
import PROPERTIES from '/imports/constants/PROPERTIES.js';
export default { export default {
components: { components: {
@@ -77,6 +85,12 @@ export default {
isLibraryForm: true, isLibraryForm: true,
}; };
}, },
computed: {
docsPath() {
const propDef = PROPERTIES[this.type];
return propDef && propDef.docsPath;
},
},
watch: { watch: {
type(newType) { type(newType) {
if (!newType) return; if (!newType) return;
@@ -87,6 +101,17 @@ export default {
this.model = model; this.model = model;
}, },
}, },
methods: {
helpDialog() {
this.$store.commit('pushDialogStack', {
component: 'help-dialog',
elementId: 'help-button',
data: {
path: this.docsPath,
},
});
},
}
} }
</script> </script>