io.vertigo.ui.static.js.v-components.v-commands.js Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of vertigo-ui Show documentation
There is a newer version: 4.2.0
Vue.component('v-commands', {
	template : `
	
		
			{{selectedCommand.commandName}}
		
		
			{{selectedCommand.commandName}}
			
				
				{{$q.lang.vui.commands.executeCommand}}
				
			
			
				{{commandResult.display}}
				{{$q.lang.vui.commands.linkLabel}}
				
			
		
	
	`
	,
	data: function() {
		return {
			text: "",
			commandParamsValues: [],
			commands : [],
			commandAutocompleteOptions : [],
			isCommandCommited: false,
			selectedCommand: {},
			isExecuted: false,
			commandResult : {},
			paramsAutocompleteOptions: []
		}
	},
	props : {
		baseUrl : { type: String, 'default': '/' },
	},
	methods : {
		searchCommands : function(val, update, abort) {
			this.$data.text = val;
			this.$data.selectedCommand = {};
			if (val.length < 1) {
				abort();
				return;
			}
			this.$http.post(this.baseUrl+'api/vertigo/commands/_search', {prefix: val} )
		        .then( function (response) { //Ok
		        	this.$data.commands = response.body;
		        	update(function() {
			        	this.$data.commandAutocompleteOptions = this.$data.commands.map(function(command) {
							 return {
								 label: command.commandName,
								 sublabel: command.descpription,
								 value: command.commandName,
								 command : command
							 }
						});
					}.bind(this));
		        	if (this.$data.commands.length > 0) {
		        		this.chooseCommand(this.$data.commands[0], false);
		        	}
				});
			
		},
		selectCommand : function (selection) {
			this.chooseCommand(selection.command, true);
		},
		chooseCommand: function (command, commitCommand) {
			this.$data.selectedCommand = command;
			if (this.$data.selectedCommand.commandParams) {
				// if we have params
				this.$data.commandParamsValues = this.$data.selectedCommand.commandParams.map(function(param)  {
					// we prepare params
					return {
						value:""
					};	
				});
			} else {
				this.$data.commandParamsValues = [];
			}
			this.$data.isCommandCommited = commitCommand;
		},
		commitCommand : function(keyEvent) {
			if (this.$data.selectedCommand && this.$data.selectedCommand.commandName) {
				switch(keyEvent.keyCode) {
					case 9:
					case 13:
						this.$data.isCommandCommited = true;
						keyEvent.preventDefault();
				}
			}
		},
		executeCommand : function() {
			if (this.$data.commandParamsValues.every(function(paramValue){ return paramValue;})) {
				var actualParams = this.$data.commandParamsValues.map(function (param) {
					return param.value;
				});
				
				this.$http.post(this.baseUrl+'api/vertigo/commands/_execute', {command: this.$data.selectedCommand.commandName, params: actualParams} )
			        .then( function (response) { //Ok
			        	this.$data.isExecuted = true;
			        	this.$data.commandResult = response.body;
					});
			} else {
				return false;
			}
			
		},
		handleEnter: function (index, event) {
			if (index === this.$data.selectedCommand.commandParams.length - 1 && this.$data.commandParamsValues[index].value) {
				this.executeCommand();
			}
			// otherwise nothing particular
		},
		autocompleteParam : function(param, index, val, update, abort) {
			if (val.length < 1) {
				abort();
				return;
			}
			this.$http.get(this.baseUrl+'api/vertigo/commands/params/_autocomplete', {params : {terms: val, entityClass: param.paramType.actualTypeArguments[0]}})
				.then( function (response) {
					update(function() {
						var newOptions = this.$data.paramsAutocompleteOptions.slice();
						newOptions[index] = response.body.map(function(element) {
							return {
								label: element.label,
								value: element.urn,
							}
						});
						this.$data.paramsAutocompleteOptions = newOptions;
					}.bind(this));
				});
			
		},
		selectParam : function (selection, index) {
			var newParams = this.$data.commandParamsValues.slice();
			newParams[index] = selection;
			this.$data.commandParamsValues = newParams;
			
		},
		getParamValue(index) {
			var actualValue = this.$data.commandParamsValues[index];
			if (actualValue && actualValue.value) {
				return actualValue;
			}
		},
		backIfNeeded: function (index, isFirst) {
			if (isFirst && !this.$data.commandParamsValues[0].value) {
				this.back();
			}
			// otherwise nothing particular
		},
		back: function () {
			this.$data.commandParamsValues = [];
			this.$data.commands = [];
			this.$data.isCommandCommited = false;
			this.$data.selectedCommand = {};
			this.$data.isExecuted = false;
			this.$data.commandResult = {};
			this.$data.paramsAutocompleteOptions = [];
			this.$nextTick(function () {
				this.$refs.commandInput.updateInputValue(this.$data.text);
			});
			
		},
		reset: function() {
			this.back();
			this.$data.text = "";
		}
	} 
})