blacklight/platypush
1
0
Fork 0
forked from platypush/platypush
Code Issues Pull requests Projects Releases Packages Wiki Activity

Several improvements for the Execute panel.

Browse source
This commit is contained in:
Fabio Manganiello 2023-10-10 01:45:35 +02:00
parent 434855ffdd
commit f6bf9438b9
Signed by: blacklight
GPG key ID: D90FBA7F76362774
1 changed files with 25 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
platypush/backend/http/webapp/src/components/panels/Execute/Index.vue
View file

@ -21,7 +21,8 @@
<label> <label>
<input ref="actionName" type="text" class="action-name" <input ref="actionName" type="text" class="action-name"
placeholder="Action Name" :disabled="running" v-model="action.name" placeholder="Action Name" :disabled="running" v-model="action.name"
@change="actionChanged=true" @blur="updateAction"> @input="updateAction(action.name)"
@blur="updateAction(action.name)">
</label> </label>
</div> </div>
<div class="buttons"> <div class="buttons">
@ -58,8 +59,7 @@
<label> <label>
<input type="text" class="action-param-value" :disabled="running" <input type="text" class="action-param-value" :disabled="running"
:placeholder="name" v-model="action.args[name].value" :placeholder="name" v-model="action.args[name].value"
@focus="selectAttrDoc(name)" @focus="selectAttrDoc(name)">
@blur="resetAttrDoc">
</label> </label>
<div class="attr-doc-container mobile" v-if="selectedAttrDoc && selectedAttr === name"> <div class="attr-doc-container mobile" v-if="selectedAttrDoc && selectedAttr === name">
@ -202,7 +202,6 @@ export default {
running: false, running: false,
docLoading: false, docLoading: false,
structuredInput: true, structuredInput: true,
actionChanged: false,
selectedDoc: undefined, selectedDoc: undefined,
selectedAttr: undefined, selectedAttr: undefined,
selectedAttrDoc: undefined, selectedAttrDoc: undefined,
@ -256,20 +255,23 @@ export default {
} }
const self = this const self = this
autocomplete(this.$refs.actionName, Object.keys(this.actions).sort(), (_, value) => { autocomplete(
this.action.name = value this.$refs.actionName,
self.updateAction() Object.keys(this.actions).sort(), (_, value) => self.updateAction(value)
}) )
}, },
async updateAction() { async updateAction(actionName) {
if (!(this.action.name in this.actions)) this.action.name = actionName
if (!(this.action.name in this.actions)) {
this.selectedDoc = undefined this.selectedDoc = undefined
this.resetAttrDoc()
if (!this.actionChanged || !(this.action.name in this.actions))
return return
}
this.resetAttrDoc()
this.docLoading = true this.docLoading = true
try { try {
this.action = { this.action = {
...this.actions[this.action.name], ...this.actions[this.action.name],
@ -295,7 +297,6 @@ export default {
this.actionDocsCache[this.action.name] = {} this.actionDocsCache[this.action.name] = {}
this.actionDocsCache[this.action.name].html = this.selectedDoc this.actionDocsCache[this.action.name].html = this.selectedDoc
this.actionChanged = false
this.response = undefined this.response = undefined
this.error = undefined this.error = undefined
}, },
@ -497,8 +498,11 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
@import "vars";
@import "~@/style/autocomplete.scss"; @import "~@/style/autocomplete.scss";
</style>
<style lang="scss" scoped>
@import "vars";
$params-desktop-width: 30em; $params-desktop-width: 30em;
$params-tablet-width: 20em; $params-tablet-width: 20em;
@ -599,6 +603,7 @@ $request-headers-btn-width: 7.5em;
.options { .options {
display: flex; display: flex;
margin-top: 0.15em;
margin-bottom: 1.5em; margin-bottom: 1.5em;
@include until($tablet) { @include until($tablet) {
@ -916,4 +921,10 @@ $request-headers-btn-width: 7.5em;
} }
} }
} }
:deep(.doc) {
blockquote {
margin-left: 0;
}
}
</style> </style>