Added help to property creation forms
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user