platypush/platypush-webext
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Better representation for action default arguments and no more loss of values while changing the form

Browse source
This commit is contained in:
Fabio Manganiello 2020-06-26 23:43:37 +02:00
parent dda7f98b99
commit 12aaa2beb8
1 changed files with 30 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
src/options/Run.vue
View file

@ -27,18 +27,18 @@
<div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" /> <div class="action-doc" v-text="actionTemplate.doc" v-if="actionTemplate.doc" />
</div> </div>
<div class="row" v-for="(arg, name) in actionTemplate.args" :key="name"> <div class="row" v-for="(arg, name) in action.defaultArgs" :key="name">
<div class="label"> <div class="label">
<input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled /> <input type="text" :name="'arg_' + name" :value="name" autocomplete="off" disabled />
</div> </div>
<div class="value"> <div class="value">
<input <input
type="text" type="text"
:name="name"
:value="arg.default"
data-type="arg" data-type="arg"
:placeholder="arg.doc && arg.doc.length ? arg.doc : 'Value'"
autocomplete="off" autocomplete="off"
v-model="arg.value"
:name="name"
:placeholder="arg.doc && arg.doc.length ? arg.doc : 'Value'"
:disabled="loading" :disabled="loading"
/> />
</div> </div>
@ -50,7 +50,7 @@
</div> </div>
<div class="value"> <div class="value">
<input type="text" :name="arg.name" v-model="arg.value" data-type="arg" 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"> <button type="button" @click="removeActionArgument(i)" :disabled="loading">
<i class="fas fa-trash" /> <i class="fas fa-trash" />
</button> </button>
</div> </div>
@ -63,7 +63,7 @@
</div> </div>
<div class="row buttons" v-if="!saveMode"> <div class="row buttons" v-if="!saveMode">
<button type="button" @click="saveMode = true" :disabled="loading || !(action.name && action.name.length && action.name in actions)"> <button type="button" @click="toggleSaveMode" :disabled="loading || !(action.name && action.name.length && action.name in actions)">
<i class="fas fa-save" /> &nbsp; Save Action <i class="fas fa-save" /> &nbsp; Save Action
</button> </button>
</div> </div>
@ -75,7 +75,7 @@
<PrismEditor v-model="script" language="js" /> <PrismEditor v-model="script" language="js" />
<div class="row buttons"> <div class="row buttons">
<button type="button" @click="saveMode = true" :disabled="loading || script === scriptTemplate" v-if="!saveMode"><i class="fas fa-save" /> &nbsp; Save Script</button> <button type="button" @click="toggleSaveMode" :disabled="loading || script === scriptTemplate" v-if="!saveMode"><i class="fas fa-save" /> &nbsp; Save Script</button>
<button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button> <button type="submit" :disabled="loading"><i class="fas fa-play" /> &nbsp; Run</button>
</div> </div>
</form> </form>
@ -111,7 +111,7 @@
<div class="row buttons"> <div class="row buttons">
<button type="submit" :disabled="loading"><i class="fas fa-save" /> &nbsp; Save {{ actionMode === 'request' ? 'Action' : 'Script' }}</button> <button type="submit" :disabled="loading"><i class="fas fa-save" /> &nbsp; Save {{ actionMode === 'request' ? 'Action' : 'Script' }}</button>
<button type="button" @click="saveMode = false" :disabled="loading"><i class="fas fa-times" /> &nbsp; Cancel</button> <button type="button" @click="toggleSaveMode" :disabled="loading"><i class="fas fa-times" /> &nbsp; Cancel</button>
</div> </div>
</form> </form>
@ -174,6 +174,7 @@ export default {
action: { action: {
name: null, name: null,
args: [], args: [],
defaultArgs: {},
}, },
}; };
}, },
@ -244,6 +245,7 @@ export default {
clearAction() { clearAction() {
this.action.name = null; this.action.name = null;
this.action.args = []; this.action.args = [];
this.action.defaultArgs = {};
this.actionResponse = null; this.actionResponse = null;
this.actionError = null; this.actionError = null;
}, },
@ -287,6 +289,14 @@ export default {
}); });
}, },
removeActionArgument(i) {
this.action.args.splice(i, 1);
},
toggleSaveMode() {
this.saveMode = !this.saveMode;
},
async loadPlugins() { async loadPlugins() {
this.pluginsLoading = true; this.pluginsLoading = true;
@ -377,12 +387,21 @@ export default {
}, },
onActionChange(action) { onActionChange(action) {
if (action === this.action.name) {
return;
}
this.action.name = action; this.action.name = action;
this.action.args = []; this.action.args = [];
},
onCategoryInput(event) { if (action in this.actions) {
console.log(event); this.action.defaultArgs = Object.entries(this.actions[action].args).reduce((obj, [name, arg]) => {
obj[name] = { ...arg, value: arg.default };
return obj;
}, {});
} else {
this.action.defaultArgs = {};
}
}, },
}, },