Migrated Execute panel to the new Autocomplete widget.

This commit is contained in:
Fabio Manganiello 2023-10-10 21:13:54 +02:00
parent a717235453
commit 07f0535504
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -17,13 +17,16 @@
<form class="action-form" ref="actionForm" autocomplete="off" @submit.prevent="executeAction"> <form class="action-form" ref="actionForm" autocomplete="off" @submit.prevent="executeAction">
<div class="request structured-request" :class="structuredInput ? '' : 'hidden'"> <div class="request structured-request" :class="structuredInput ? '' : 'hidden'">
<div class="request-header"> <div class="request-header">
<div class="autocomplete"> <div class="autocomplete-container">
<label> <Autocomplete
<input ref="actionName" type="text" class="action-name" ref="autocomplete"
placeholder="Action Name" :disabled="running" v-model="action.name" :items="autocompleteItems"
@input="updateAction(action.name)" @input="updateAction"
@blur="updateAction(action.name)"> placeholder="Action Name"
</label> show-results-when-blank
autofocus
:disabled="running"
:value="action.name" />
</div> </div>
<div class="buttons"> <div class="buttons">
<button type="submit" class="run-btn btn-primary" <button type="submit" class="run-btn btn-primary"
@ -185,15 +188,15 @@
</template> </template>
<script> <script>
import autocomplete from "@/components/elements/Autocomplete" import Autocomplete from "@/components/elements/Autocomplete"
import Tabs from "@/components/elements/Tabs"; import Loading from "@/components/Loading"
import Tab from "@/components/elements/Tab"; import Tab from "@/components/elements/Tab"
import Tabs from "@/components/elements/Tabs"
import Utils from "@/Utils" import Utils from "@/Utils"
import Loading from "@/components/Loading";
export default { export default {
name: "Execute", name: "Execute",
components: {Loading, Tabs, Tab}, components: {Autocomplete, Loading, Tab, Tabs},
mixins: [Utils], mixins: [Utils],
data() { data() {
@ -232,6 +235,18 @@ export default {
currentActionDocURL() { currentActionDocURL() {
return this.action?.doc_url return this.action?.doc_url
}, },
autocompleteItems() {
if (this.getPluginName(this.action.name) in this.plugins) {
return Object.keys(this.actions).sort()
}
return Object.keys(this.plugins).sort().map((pluginName) => `${pluginName}.`)
},
actionInput() {
return this.$refs.autocomplete.$el.parentElement.querySelector('input[type=text]')
},
}, },
methods: { methods: {
@ -253,12 +268,6 @@ export default {
this.actions[action.name] = action this.actions[action.name] = action
} }
} }
const self = this
autocomplete(
this.$refs.actionName,
Object.keys(this.actions).sort(), (_, value) => self.updateAction(value)
)
}, },
async updateAction(actionName) { async updateAction(actionName) {
@ -370,7 +379,7 @@ export default {
this.error = undefined this.error = undefined
this.$nextTick(() => { this.$nextTick(() => {
if (structuredInput) { if (structuredInput) {
this.$refs.actionName.focus() this.actionInput.focus()
} else { } else {
this.$refs.rawAction.focus() this.$refs.rawAction.focus()
} }
@ -399,6 +408,13 @@ export default {
await navigator.clipboard.writeText(output) await navigator.clipboard.writeText(output)
}, },
getPluginName(actionName) {
if (!actionName?.length)
return ''
return actionName.split('.').slice(0, -1).join('.')
},
executeAction() { executeAction() {
if (!this.action.name && !this.rawRequest || this.running) if (!this.action.name && !this.rawRequest || this.running)
return return
@ -488,19 +504,11 @@ export default {
}, },
mounted() { mounted() {
this.$nextTick(() => {
this.$refs.actionName.focus()
})
this.refresh() this.refresh()
}, },
} }
</script> </script>
<style lang="scss">
@import "~@/style/autocomplete.scss";
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "vars"; @import "vars";
@ -562,7 +570,7 @@ $request-headers-btn-width: 7.5em;
display: flex; display: flex;
align-items: center; align-items: center;
.autocomplete { .autocomplete-container {
width: calc(100% - $request-headers-btn-width); width: calc(100% - $request-headers-btn-width);
flex-grow: 1; flex-grow: 1;
} }
@ -596,11 +604,6 @@ $request-headers-btn-width: 7.5em;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.action-name {
box-shadow: $action-name-shadow;
width: 100%;
}
.options { .options {
display: flex; display: flex;
margin-top: 0.15em; margin-top: 0.15em;