keksAccountGUI/src/views/NewApp.vue

103 lines
3.5 KiB
Vue

<template>
<div style="">
<v-container grid-list-md pa-10>
<v-layout row wrap>
<v-flex md12>
<h1>New App</h1>
<v-text-field
label="Name"
value=""
type="text"
v-model="name"
error=true
:error=nameErrorFlag
:error-messages=nameError
></v-text-field>
<v-text-field
label="Description"
value=""
type="text"
v-model="description"
error=true
:error=descriptionErrorFlag
:error-messages=descriptionError
></v-text-field>
<v-text-field
label="URL"
value=""
type="text"
v-model="url"
:error-messages=urlError
:error=urlErrorFlag
></v-text-field>
</v-flex>
</v-layout>
<v-btn
color="success"
@click="createApp"
>
Create App
</v-btn>
</v-container>
</div>
</template>
<script>
import AppService from '../services/Apps'
export default {
data () {
return {
name: '',
nameError: null,
nameErrorFlag: false,
description: '',
descriptionError: '',
descriptionErrorFlag: false,
url: '',
urlError: '',
urlErrorFlag: false
}
},
methods: {
createApp: function () {
this.nameErrorFlag = false;
this.nameError = null;
this.descriptionErrorFlag = false;
this.descriptionError = null;
this.urlErrorFlag = false;
this.urlError = null;
AppService.newApp(this.name, this.description, this.url).then((res) => {
this.$router.push({name: 'appDetails', params: {id: res.data.data.id}});
}).catch((error) => {
if(error.response.status == 422){
if(error.response.data.data.name != undefined) {
this.nameErrorFlag = true;
this.nameError = error.response.data.data.name[0]
}
if(error.response.data.data.description != undefined) {
this.descriptionErrorFlag = true;
this.descriptionError = error.response.data.data.description[0]
}
if(error.response.data.data.url != undefined) {
this.urlErrorFlag = true;
this.urlError = error.response.data.data.url[0]
}
console.log(error.response.data.data);
} else {
alert(error.response.data.msg);
}
});
}
},
mounted: function() {
}
}
</script>