139 lines
No EOL
3.2 KiB
Vue
139 lines
No EOL
3.2 KiB
Vue
<template>
|
|
<form @submit.prevent="submitForm" class="uk-form-stacked">
|
|
|
|
<div v-for="(field, index) in schema" :key="index">
|
|
<div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
|
|
<div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand">
|
|
<component
|
|
:is="subfield.fieldType"
|
|
v-model="formData[subfield.name]"
|
|
v-bind="subfield">
|
|
</component>
|
|
</div>
|
|
</div>
|
|
|
|
<component
|
|
:is="field.fieldType"
|
|
v-model="formData[field.name]"
|
|
v-bind="field">
|
|
</component>
|
|
</div>
|
|
|
|
<div class="uk-text-center uk-container" v-if="taskRunning">
|
|
<div class="center-spinner" uk-spinner></div>
|
|
</div>
|
|
|
|
<button v-bind:hidden="taskRunning" type="submit" class="uk-button uk-button-primary uk-form-small uk-float-right uk-margin-small uk-width-1-1">Submit</button>
|
|
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
import numberInput from "./fieldComponents/numberInput";
|
|
import selectList from "./fieldComponents/selectList";
|
|
import textInput from "./fieldComponents/textInput";
|
|
import htmlBlock from "./fieldComponents/htmlBlock";
|
|
import radioList from "./fieldComponents/radioList";
|
|
import checkList from "./fieldComponents/checkList"
|
|
|
|
export default {
|
|
name: 'JsonForm',
|
|
|
|
components: {
|
|
numberInput,
|
|
selectList,
|
|
textInput,
|
|
htmlBlock,
|
|
radioList,
|
|
checkList
|
|
},
|
|
|
|
props: {
|
|
'schema': {
|
|
type: Array,
|
|
required: true
|
|
},
|
|
'route': {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
|
|
data: function () {
|
|
return {
|
|
formData: {},
|
|
taskRunning: false
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
updateForm(fieldName, value) {
|
|
this.$set(this.formData, fieldName, value);
|
|
this.$emit('input', this.formData)
|
|
},
|
|
|
|
submitForm() {
|
|
this.newQuickRequest(this.formData)
|
|
},
|
|
|
|
newQuickRequest: function(params) {
|
|
console.log(this.submitApiUri)
|
|
console.log(params)
|
|
// Send a quick request
|
|
axios.post(this.submitApiUri, params)
|
|
.then(response => {
|
|
console.log(response)
|
|
// TODO: Have this perform a GET request to update all available parameters
|
|
})
|
|
.catch(error => {
|
|
this.modalError(error) // Let mixin handle error
|
|
})
|
|
},
|
|
|
|
newLongRequest: function(params) {
|
|
this.taskRunning = true
|
|
axios.post(this.submitApiUri, params)
|
|
.then(response => {
|
|
console.log("Task ID: " + response.data.id)
|
|
// Start the store polling TaskId for success
|
|
return this.$store.dispatch('pollTask', [response.data.id, null, null])
|
|
})
|
|
.then(() => {
|
|
console.log("Successfully finished task")
|
|
})
|
|
.catch(error => {
|
|
this.modalError(error) // Let mixin handle error
|
|
})
|
|
.finally(() => {
|
|
console.log("Cleaning up after task.")
|
|
this.taskRunning = false
|
|
})
|
|
},
|
|
|
|
},
|
|
|
|
computed: {
|
|
pluginApiUri: function () {
|
|
return this.$store.getters.uri + "/plugin"
|
|
},
|
|
|
|
submitApiUri: function () {
|
|
return this.pluginApiUri + this.route
|
|
},
|
|
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.flex-container {
|
|
display: flex;
|
|
}
|
|
|
|
.flex-container > div {
|
|
flex-basis: 100%
|
|
}
|
|
</style> |