Smart autocompletion logic for actions
This commit is contained in:
parent
a480a79998
commit
b7baec099d
3 changed files with 331 additions and 13 deletions
src
191
src/options/Autocomplete.vue
Normal file
191
src/options/Autocomplete.vue
Normal file
|
@ -0,0 +1,191 @@
|
||||||
|
<template>
|
||||||
|
<div class="input autocomplete">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="action"
|
||||||
|
autocomplete="off"
|
||||||
|
ref="input"
|
||||||
|
:value="value"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:disabled="disabled"
|
||||||
|
@keydown="onKeyDown"
|
||||||
|
@keyup="onKeyUp"
|
||||||
|
@focus="showItems = true"
|
||||||
|
@blur="showItems = false"
|
||||||
|
@change="onInput"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ul class="items" ref="items" v-if="filteredItems.length && showItems">
|
||||||
|
<li class="item" :class="{ selected: selectedItem == i }" v-for="(item, i) in filteredItems" :key="i" v-text="item" @mousedown="onSelect" @touchstart="onSelect" />
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mixins from '../utils';
|
||||||
|
|
||||||
|
function _filter(item, items) {
|
||||||
|
return items.filter(i => i.startsWith(item));
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'Autocomplete',
|
||||||
|
mixins: [mixins],
|
||||||
|
props: {
|
||||||
|
items: Array,
|
||||||
|
value: String,
|
||||||
|
placeholder: String,
|
||||||
|
filter: {
|
||||||
|
type: Function,
|
||||||
|
default: _filter,
|
||||||
|
},
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showItems: false,
|
||||||
|
selectedItem: -1,
|
||||||
|
lastValue: this.value,
|
||||||
|
filteredItems: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onInput() {
|
||||||
|
const value = this.$refs.input.value;
|
||||||
|
this.lastValue = value;
|
||||||
|
this.filterItems();
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
|
||||||
|
onSelect(event) {
|
||||||
|
const value = event.target.innerText;
|
||||||
|
this.$refs.input.value = value;
|
||||||
|
this.showItems = false;
|
||||||
|
this.filterItems();
|
||||||
|
this.$emit('change', value);
|
||||||
|
this.$refs.input.focus();
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyDown(event) {
|
||||||
|
if (event.key === 'Enter') {
|
||||||
|
this.showItems = false;
|
||||||
|
if (!this.$refs.items) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const selected = this.$refs.items.querySelector('.selected');
|
||||||
|
if (!selected) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$refs.input.value = selected.innerText;
|
||||||
|
this.$emit('change', selected.innerText);
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onKeyUp(event) {
|
||||||
|
if (event.key === 'Escape') {
|
||||||
|
this.showItems = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showItems = true;
|
||||||
|
|
||||||
|
if (['ArrowUp', 'ArrowDown'].indexOf(event.key) >= 0) {
|
||||||
|
switch (event.key) {
|
||||||
|
case 'ArrowUp':
|
||||||
|
if (this.selectedItem > 0) {
|
||||||
|
this.selectedItem--;
|
||||||
|
} else {
|
||||||
|
this.selectedItem = this.filteredItems.length - 1;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
|
||||||
|
case 'ArrowDown':
|
||||||
|
if (this.selectedItem >= this.filteredItems.length - 1) {
|
||||||
|
this.selectedItem = this.filteredItems.length ? 0 : -1;
|
||||||
|
} else {
|
||||||
|
this.selectedItem++;
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const self = this;
|
||||||
|
setTimeout(() => {
|
||||||
|
const selected = self.$refs.items.querySelector('.selected');
|
||||||
|
if (selected) {
|
||||||
|
self.$refs.items.scrollTop = selected.offsetTop;
|
||||||
|
}
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
event.stopPropagation();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const value = this.$refs.input.value;
|
||||||
|
if (this.lastValue === value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.selectedItem = -1;
|
||||||
|
this.lastValue = value;
|
||||||
|
this.filterItems();
|
||||||
|
this.$emit('change', value);
|
||||||
|
},
|
||||||
|
|
||||||
|
filterItems() {
|
||||||
|
const value = this.$refs.input.value;
|
||||||
|
if (!value.length) {
|
||||||
|
this.filteredItems = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.filteredItems = this.filter(value, this.items);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.autocomplete {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 20em;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
|
position: absolute;
|
||||||
|
top: 1.35em;
|
||||||
|
background: white;
|
||||||
|
z-index: 5;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5em;
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
background-color: rgba(200, 255, 220, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: rgba(200, 255, 220, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
<!-- vim:sw=2:ts=2:et: -->
|
|
@ -1,23 +1,46 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="page run">
|
<div class="page run">
|
||||||
<h2>Run a command on {{ host.name }}</h2>
|
<h2>Run a command on {{ host.name }}</h2>
|
||||||
<form @submit.prevent="runAction">
|
|
||||||
<div class="row action-name">
|
<div class="help">
|
||||||
<input type="text" name="action" v-model="action.name" placeholder="Action" autocomplete="off" :disabled="loading" />
|
<a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
|
||||||
<span class="help">
|
URL.
|
||||||
<a href="https://platypush.readthedocs.io/en/latest/plugins.html" target="_blank">Plugins reference</a>. Use <tt>$URL$</tt> as argument value to denote the current
|
</div>
|
||||||
URL.
|
|
||||||
</span>
|
<form ref="form" @submit.prevent="runAction">
|
||||||
|
<div class="row action-head">
|
||||||
|
<div class="action-name">
|
||||||
|
<Autocomplete :items="Object.keys(actions)" :value="action.name" :disabled="loading" placeholder="Action" @change="onActionChange" />
|
||||||
|
</div>
|
||||||
|
<div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row" v-for="(arg, name) in actionTemplate.args" :key="name">
|
||||||
|
<div class="label">
|
||||||
|
<input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
|
||||||
|
</div>
|
||||||
|
<div class="value">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
:name="name"
|
||||||
|
:value="arg.default"
|
||||||
|
data-type="arg"
|
||||||
|
:placeholder="arg.doc && arg.doc.length ? arg.doc.substr(0, 50) : 'Value'"
|
||||||
|
autocomplete="off"
|
||||||
|
:disabled="loading"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row" v-for="(arg, i) in action.args" :key="i">
|
<div class="row" v-for="(arg, i) in action.args" :key="i">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<input type="text" :name="'arg' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
|
<input type="text" :name="'arg_' + i" v-model="arg.name" placeholder="Name" autocomplete="off" :disabled="loading" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="value">
|
<div class="value">
|
||||||
<input type="text" :name="arg.name" v-model="arg.value" data-type="argument" placeholder="Value" autocomplete="off" :disabled="loading" />
|
<input type="text" :name="arg.name" v-model="arg.value" data-type="arg" placeholder="Value" autocomplete="off" :disabled="loading" />
|
||||||
<button type="button" @click="action.args.splice(i, 1)" :disabled="loading"><i class="fas fa-trash" /></button>
|
<button type="button" @click="action.args.splice(i, 1)" :disabled="loading">
|
||||||
|
<i class="fas fa-trash" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -35,16 +58,20 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import mixins from '../utils';
|
import mixins from '../utils';
|
||||||
|
import Autocomplete from './Autocomplete';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Run',
|
name: 'Run',
|
||||||
mixins: [mixins],
|
mixins: [mixins],
|
||||||
|
components: { Autocomplete },
|
||||||
props: {
|
props: {
|
||||||
host: Object,
|
host: Object,
|
||||||
},
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
plugins: {},
|
||||||
|
pluginsLoading: false,
|
||||||
actionResponse: null,
|
actionResponse: null,
|
||||||
actionError: null,
|
actionError: null,
|
||||||
action: {
|
action: {
|
||||||
|
@ -54,6 +81,36 @@ export default {
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
actions() {
|
||||||
|
return Object.values(this.plugins).reduce((obj, plugin) => {
|
||||||
|
return Object.values(plugin.actions).reduce((obj, action) => {
|
||||||
|
obj[plugin.name + '.' + action.name] = action;
|
||||||
|
return obj;
|
||||||
|
}, obj);
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
|
||||||
|
filteredActions() {
|
||||||
|
if (!(this.action.name && this.action.name.length)) return {};
|
||||||
|
|
||||||
|
return Object.entries(this.actions)
|
||||||
|
.filter(([name, action]) => name.startsWith(this.action.name))
|
||||||
|
.reduce((obj, [name, action]) => {
|
||||||
|
obj[name] = action;
|
||||||
|
return obj;
|
||||||
|
}, {});
|
||||||
|
},
|
||||||
|
|
||||||
|
actionTemplate() {
|
||||||
|
if (!(this.action.name in this.actions)) {
|
||||||
|
return { args: [] };
|
||||||
|
}
|
||||||
|
|
||||||
|
return this.actions[this.action.name];
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
clearAction() {
|
clearAction() {
|
||||||
this.action.name = null;
|
this.action.name = null;
|
||||||
|
@ -65,8 +122,22 @@ export default {
|
||||||
async runAction() {
|
async runAction() {
|
||||||
this.loading = true;
|
this.loading = true;
|
||||||
|
|
||||||
|
const args = [...this.$refs.form.querySelectorAll('[data-type="arg"]')].map(el => {
|
||||||
|
return {
|
||||||
|
name: el.name,
|
||||||
|
value: el.value,
|
||||||
|
};
|
||||||
|
}, {});
|
||||||
|
|
||||||
try {
|
try {
|
||||||
this.actionResponse = await this.run(this.action, this.host);
|
this.actionResponse = await this.run(
|
||||||
|
{
|
||||||
|
name: this.action.name,
|
||||||
|
args: [...args, ...this.action.args],
|
||||||
|
},
|
||||||
|
this.host
|
||||||
|
);
|
||||||
|
|
||||||
this.actionError = null;
|
this.actionError = null;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
this.actionResponse = null;
|
this.actionResponse = null;
|
||||||
|
@ -82,15 +153,64 @@ export default {
|
||||||
value: '',
|
value: '',
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
|
||||||
|
async loadPlugins() {
|
||||||
|
this.pluginsLoading = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
this.plugins = await this.run(
|
||||||
|
{
|
||||||
|
name: 'inspect.get_all_plugins',
|
||||||
|
args: {
|
||||||
|
html_doc: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
this.host
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
this.pluginsLoading = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onActionChange(action) {
|
||||||
|
this.action.name = action;
|
||||||
|
this.action.args = [];
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
created() {
|
created() {
|
||||||
this.clearAction();
|
this.clearAction();
|
||||||
|
this.loadPlugins();
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.help {
|
||||||
|
margin-bottom: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.action-name {
|
||||||
|
width: 20em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.action-doc {
|
||||||
|
width: 40em;
|
||||||
|
margin: 0.5em auto auto 1em;
|
||||||
|
white-space: pre;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
||||||
|
border-radius: 1em;
|
||||||
|
padding: 1em;
|
||||||
|
max-height: 10em;
|
||||||
|
overflow: auto;
|
||||||
|
background: rgba(250, 255, 240, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
form {
|
form {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: 50em;
|
max-width: 50em;
|
||||||
|
|
|
@ -30,6 +30,13 @@ export default {
|
||||||
}, {});
|
}, {});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Object.keys(args).forEach(name => {
|
||||||
|
if (args[name] === '$URL$') {
|
||||||
|
// URL wildcard
|
||||||
|
args[name] = window.location.href;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
if (host.token && host.token.length) {
|
if (host.token && host.token.length) {
|
||||||
config.headers = {
|
config.headers = {
|
||||||
'X-Token': host.token,
|
'X-Token': host.token,
|
||||||
|
@ -41,7 +48,7 @@ export default {
|
||||||
url,
|
url,
|
||||||
{
|
{
|
||||||
type: 'request',
|
type: 'request',
|
||||||
action: this.action.name,
|
action: action.name,
|
||||||
args: args,
|
args: args,
|
||||||
},
|
},
|
||||||
config
|
config
|
||||||
|
|
Loading…
Reference in a new issue