Application Submitting process upgrade + Core methods

Core now has a axios methods with Catch forward. Errors will now print more detail.
Each input field now emits an event if its okstate or the content has been changed.
Submit button will be disabled if its submitting or if there was no change.
Added success/pending message.
Added styling to the button.

src/components/ApplicationInputSwitch.vue

@@ -1,9 +1,9 @@
 <template>
 	<div>
-		<LimitedTextField v-if="type === 'text-box-limited'" :highlight="highlight" :options="options" ref="element"/>
-		<TextField v-else-if="type === 'text-box'" :highlight="highlight" :options="options" ref="element"/>
-		<LineInput v-else-if="type === 'line'" :highlight="highlight" :options="options" ref="element"/>
-		<Age v-else-if="type === 'age'" :highlight="highlight" :options="options" ref="element"/>
+		<LimitedTextField v-if="type === 'text-box-limited'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<TextField v-else-if="type === 'text-box'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<LineInput v-else-if="type === 'line'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
+		<Age v-else-if="type === 'age'" @okchange="okchange" @update="changed" :highlight="highlight" :options="options" ref="element"/>
 
 		<span v-else>= OOPS, this input type '{{ type }}' has to be implemented.</span>
 	</div>
@@ -23,8 +23,15 @@
 		],
 		methods: {
 			getContent() {
+				//TODO: Get rid of undefined (Implment all input types)
 				return this.$refs.element === undefined ? '' : this.$refs.element.getContent()
 			},
+			changed() {
+				this.$emit('update', this)
+			},
+			okchange: function() {
+				this.$emit('okchange')
+			},
 		},
 		computed: {
 			isOkay() {

src/components/inputtypes/Age.vue

@@ -69,7 +69,15 @@
 				// eslint-disable-next-line
 				this.error = 'Please only enter one positive integer number without leading zeros.'
 				return false
-			}
+			},
+		},
+		watch: {
+			inputText: function() {
+				this.$emit('update')
+			},
+			isOkay: function() {
+				this.$emit('okchange')
+			},
 		},
 	}
 </script>

src/components/inputtypes/LimitedTextField.vue

@@ -31,6 +31,14 @@
 				return this.inputText.length >= this.options.min
 			},
 		},
+		watch: {
+			inputText: function() {
+				this.$emit('update')
+			},
+			isOkay: function() {
+				this.$emit('okchange')
+			},
+		},
 		components: {
 			SimpleProgressBar,
 		},

src/components/inputtypes/LineInput.vue

@@ -21,6 +21,14 @@
 				return true
 			},
 		},
+		watch: {
+			inputText: function() {
+				this.$emit('update')
+			},
+			isOkay: function() {
+				this.$emit('okchange')
+			},
+		},
 	}
 </script>
 

src/components/inputtypes/TextField.vue

@@ -21,6 +21,14 @@
 				return true
 			},
 		},
+		watch: {
+			inputText: function() {
+				this.$emit('update')
+			},
+			isOkay: function() {
+				this.$emit('okchange')
+			},
+		},
 	}
 </script>
 

src/scripts/core.js

@@ -10,26 +10,35 @@ export default class {
 		}
 	}
 
-	commit(method, data)
-	{
+	commit(method, data) {
 		this.vuex.commit(method, data)
 	}
 
-	post(path, data)
-	{
+	post(path, data) {
+		//TODO: Global error thing.
 		return axios
 				.post(this.api + path, data)
 				.catch((error) => {
-					console.error('Error: ', error)
+					console.error('Error while sending POST request to ' + this.api + path + ' with data ' + JSON.stringify(data) + ':', error)
 				})
 	}
 
-	get(path)
-	{
+	postCatchFWD(path, data) {
+		//TODO: Global error thing.
+		return axios
+				.post(this.api + path, data)
+				.catch((error) => {
+					console.error('Error while sending POST request to ' + this.api + path + ' with data ' + JSON.stringify(data) + ':', error)
+					throw error //Forward the error for next consumer
+				})
+	}
+
+	get(path) {
+		//TODO: Global error thing.
 		return axios
 				.get(this.api + path)
 				.catch((error) => {
-					console.error('Error: ', error)
+					console.error('Error while sending GET request to ' + this.api + path + ':', error)
 				})
 	}
 

src/views/CreateApplication.vue

@@ -7,11 +7,12 @@
 				<h3 class="question">- {{ element.text }}</h3>
 				<span v-if="element.optional"> (Optional)</span>
 				<br>
-				<ApplicationInputSwitch class="textfield" :highlight="highlight" :type="element.type" :options="element.options" :ref="index"></ApplicationInputSwitch>
+				<ApplicationInputSwitch class="textfield" @okchange="onOkUpdate" @update="onUpdate" :highlight="highlight" :type="element.type" :options="element.options" :ref="index"/>
 				<span class="hint">{{ element.hint }}</span>
 			</div>
-			<button @click="update">Create/Update</button>
+			<button class="button" @click="onSubmit" :disabled="!(changed && !pending)">Create/Update</button>
 			<span class="error"> {{ error }}</span>
+			<span> {{ message }}</span>
 		</div>
 		<span v-else>You are not logged in.</span>
 	</div>
@@ -23,16 +24,38 @@
 	export default {
 		data () {
 			return {
+				//The instruction and questions sent by server
 				instruction: '',
 				pattern: null,
-				highlight: false,
+				//Stores the questions inserted as Vue Components from the application pattern
+				questions: null,
+
+				//Shows issues with posting the application
 				error: '',
+				message: '',
+				highlightMessage: false,
+
+				//State of the application:
+				pending: false, //true when the app is being sent to server
+				okay: false, //true if it all requirements are fullfilled
+				changed: false, //true if it changed after submitting
+
+				//Advanced error highlighting per question
+				highlight: false,
 			}
 		},
 		created () {
 			this.core.get('/app-pattern').then((response) => {
 				this.instruction = response.data.instruction;
 				this.pattern = response.data.fields;
+				this.$nextTick(() => {
+					let childreen = []
+					for(let key in this.$refs) {
+						let el = this.$refs[key][0];
+						childreen.push(el)
+					}
+					this.questions = childreen
+				})
 			})
 		},
 		computed: {
@@ -41,18 +64,6 @@
 			},
 		},
 		methods: {
-			isReady() {
-				for(let key in this.$refs) {
-					//TBI What is that 0
-					let el = this.$refs[key][0]
-
-					if(!el.isOkay) {
-						return false;
-					}
-				}
-
-				return true
-			},
 			getContent() {
 				let answers = []
 				for(let key in this.$refs) {
@@ -62,23 +73,57 @@
 
 				return answers
 			},
-			update() {
-				if(this.isReady()) {
-					this.core.post('/application', {
+			onOkUpdate() {
+				for(let ok of this.questions) {
+					if(!ok.isOkay) {
+						this.okay = false
+						return
+					}
+				}
+				this.okay = true
+
+				//Remove the error messsage, cause the user fixed it.
+				if(this.highlightMessage) {
+					this.error = ''
+				}
+			},
+			onUpdate() {
+				this.changed = true
+			},
+			onSubmit() {
+				if(this.okay) {
+					this.pending = true //Set the state to pending => Blocks button
+					this.changed = false //Reset the change state, prevent submitting the same app plenty times.
+					this.setMessage('Sending to server...')
+
+					this.core.postCatchFWD('/application', {
 						//TODO: Pattern, User-token
 						answers: this.getContent(),
 						creator: this.user.username,
 					}).then((response) => {
-						
-						console.log('Response: ', response.data);
+						this.setMessage('Updated application')
+					}).catch(() => {
+						this.changed = true //The submission failed, it was possible to submit before, revert the state, no matter if it is still changed.
+						this.setError('Could not submit the app to the server. Please try again.')
+					}).then(() => {
+						this.pending = false //Finally no longer pending.
 					});
-
-					this.error = ''
 				} else {
-					this.highlight = true
-					this.error = 'Please fill the required fields'
+					this.highlight = true //Highlight if a question has issues or not.
+					this.setError('Please fill/correct the red marked fields.')
+					this.highlightMessage = true //Set the highlight message flag, to easily remove the message later on.
 				}
 			},
+			setError(text) {
+				this.error = text
+				this.message = ''
+				this.highlightMessage = false
+			},
+			setMessage(text) {
+				this.error = ''
+				this.message = text
+				this.highlightMessage = false
+			}
 		},
 		components: {
 			ApplicationInputSwitch,
@@ -103,4 +148,22 @@
 	.error {
 		color: red;
 	}
+
+	button {
+		font-size: 1em;
+		border: none;
+
+		color: #bbb;
+		background-color: #555;
+	}
+
+	button:hover {
+		color: #fff;
+		background-color: #777;
+	}
+
+	button:disabled {
+		color: #555;
+		background-color: #333;
+	}
 </style>