Fix clear bug
This commit is contained in:
Michael Götz
parent
667bdf63cd
commit
78f08e54a4
@ -39,9 +39,14 @@
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row class="text-center pb-2 bg-dark font-white p-2">
|
||||
<b-col cols="4" class="text-left">
|
||||
<b-col cols="2" class="text-left">
|
||||
<small>Version 0.1.1</small>
|
||||
</b-col>
|
||||
<b-col cols="2" id="bug-report">
|
||||
<router-link :to="{name: 'bug-report'}">
|
||||
<small>Bug Report</small>
|
||||
</router-link>
|
||||
</b-col>
|
||||
<b-col cols="8" class="text-right">
|
||||
<small>© Copyright 2018, Michael Götz</small>
|
||||
</b-col>
|
||||
@ -65,6 +70,10 @@
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#bug-report {
|
||||
color: white;
|
||||
}
|
||||
|
||||
#header {
|
||||
top: 0;
|
||||
height: 55px;
|
||||
|
||||
141
basta/src/components/bugReport/BugReportFormular.vue
Normal file
141
basta/src/components/bugReport/BugReportFormular.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<div v-if="isAuthenticated()">
|
||||
<b-card no-body class="mb-1 rounded-0">
|
||||
<b-card-header header-tag="header" class="p-0" role="tab">
|
||||
<b-btn block href="#" v-b-toggle.bugReportBox variant="light">Bug Report</b-btn>
|
||||
</b-card-header>
|
||||
<b-collapse id="bugReportBox" accordion="bugReportBox-accordion" role="tabpanel" :visible="showFormular">
|
||||
<b-card-body>
|
||||
<b-form @submit="onSubmit">
|
||||
<b-form-group id="commentShort">
|
||||
<!--label="Überschrift, Zusammenfassung"-->
|
||||
<!--label-for="commentShort">-->
|
||||
<b-form-input id="commentShort"
|
||||
type="text"
|
||||
v-model="form.bugTitle"
|
||||
required
|
||||
placeholder="Titel">
|
||||
</b-form-input>
|
||||
</b-form-group>
|
||||
<b-form-group id="bugCategory">
|
||||
<!--label="Kommentar"-->
|
||||
<!--label-for="bugCategory">-->
|
||||
<multiselect id="bugCategory"
|
||||
v-model="form.category"
|
||||
:options="categoryOptions"
|
||||
:multiple="false"
|
||||
:custom-label="optionLabel"
|
||||
track-by="text"
|
||||
placeholder="Kategorie"
|
||||
>
|
||||
</multiselect>
|
||||
</b-form-group>
|
||||
<b-form-group id="bugDescription">
|
||||
<!--label="Kommentar"-->
|
||||
<!--label-for="bugDescription">-->
|
||||
<b-form-textarea id="bugDescription"
|
||||
v-model="form.bugDescription"
|
||||
placeholder="Beschreibung"
|
||||
:rows="3"
|
||||
:max-rows="6">
|
||||
</b-form-textarea>
|
||||
</b-form-group>
|
||||
<b-button type="submit" variant="primary" :disabled="$v.form.$invalid">Speichern</b-button>
|
||||
</b-form>
|
||||
</b-card-body>
|
||||
</b-collapse>
|
||||
</b-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as CONFIG from '../../config'
|
||||
import authentication from "../../authentication";
|
||||
import Multiselect from 'vue-multiselect';
|
||||
import {validationMixin} from "vuelidate";
|
||||
import {required,} from "vuelidate/lib/validators";
|
||||
|
||||
|
||||
export default {
|
||||
name: "BugReportFormular",
|
||||
components: {Multiselect,},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
bugTitle: '',
|
||||
bugDescription: '',
|
||||
category: '',
|
||||
},
|
||||
categoryOptions: [],
|
||||
showFormular: true,
|
||||
};
|
||||
},
|
||||
mixins: [validationMixin],
|
||||
validations: {
|
||||
form: {
|
||||
bugTitle: {
|
||||
required,
|
||||
},
|
||||
bugDescription: {
|
||||
required,
|
||||
},
|
||||
category: {
|
||||
required,
|
||||
},
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.loadBugCategories();
|
||||
},
|
||||
methods: {
|
||||
onSubmit(evt) {
|
||||
evt.preventDefault();
|
||||
let url = CONFIG.API_ROOT_BUGREPORT + '/reports/';
|
||||
let jsonData = {
|
||||
"title": this.form.bugTitle,
|
||||
"description": this.form.bugDescription,
|
||||
"category": this.form.category.value,
|
||||
"status": "REGISTERED"
|
||||
};
|
||||
window.axios
|
||||
.post(url, jsonData)
|
||||
.then(response => {
|
||||
this.$store.dispatch('loadBugReports').then();
|
||||
for (let elem in this.form) {
|
||||
console.log(elem);
|
||||
this.form[elem] = '';
|
||||
}
|
||||
this.showFormular = false;
|
||||
})
|
||||
.catch(
|
||||
// TODO: Add error handling
|
||||
)
|
||||
},
|
||||
isAuthenticated: function () {
|
||||
return authentication.authenticated();
|
||||
},
|
||||
optionLabel(option) {
|
||||
return option.text;
|
||||
},
|
||||
loadBugCategories() {
|
||||
this.categoryOptions = [];
|
||||
let url = CONFIG.API_ROOT_BUGREPORT + '/categories/';
|
||||
window.axios.get(url)
|
||||
.then(response => {
|
||||
console.log(response.data);
|
||||
let categories = response.data;
|
||||
for (const category of categories) {
|
||||
this.categoryOptions.push({text: category.name, value: category.id})
|
||||
}
|
||||
})
|
||||
.catch()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
41
basta/src/components/bugReport/BugReportOverview.vue
Normal file
41
basta/src/components/bugReport/BugReportOverview.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<b-row class="bg-light text-dark m-0">
|
||||
<b-col class="pt-2">
|
||||
<h5>Bug Report</h5>
|
||||
<bug-report-formular></bug-report-formular>
|
||||
</b-col>
|
||||
<div v-for="bugReport in bugReports" class="col col-12">
|
||||
<b-card :title="bugReport.title" header-tag="header">
|
||||
<p class="card-text">
|
||||
{{bugReport.description}}
|
||||
</p>
|
||||
<b-card-footer class="text-center">
|
||||
<small>{{bugReport.category}} | {{bugReport.status}}</small>
|
||||
</b-card-footer>
|
||||
</b-card>
|
||||
<p></p>
|
||||
</div>
|
||||
</b-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import BugReportFormular from "./BugReportFormular";
|
||||
|
||||
export default {
|
||||
name: "BugReportOverview",
|
||||
components: {BugReportFormular},
|
||||
created() {
|
||||
this.$store.dispatch('loadBugReports').then()
|
||||
|
||||
},
|
||||
computed: {
|
||||
bugReports() {
|
||||
return this.$store.getters.getBugReports;
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,3 +1,4 @@
|
||||
export const API_ROOT_FOOD = 'http://localhost:8080/api/v1.2/food';
|
||||
export const API_ROOT_ACCOUNT = 'http://localhost:8080/api/v1.2/account';
|
||||
export const API_ROOT_BUGREPORT = 'http://localhost:8080/api/v1.2/bug-report';
|
||||
export const API_ROOT = 'http://localhost:8080/api';
|
||||
|
||||
@ -8,6 +8,7 @@ import Activation from '@/components/account/Activation'
|
||||
import Registration from '@/components/account/Registration'
|
||||
import PasswordResetMail from '@/components/account/PasswordResetMail'
|
||||
import PasswordResetConfirmation from '@/components/account/PasswordResetConfirmation'
|
||||
import BugReportOverview from '@/components/bugReport/BugReportOverview'
|
||||
|
||||
|
||||
import FoodOverview from '@/components/food/FoodOverview'
|
||||
@ -18,7 +19,7 @@ Vue.use(Router);
|
||||
export default new Router({
|
||||
routes: [
|
||||
{path: '/', name: 'home', component: Home},
|
||||
{path: '/login', name: 'login', component: Login },
|
||||
{path: '/login', name: 'login', component: Login},
|
||||
{path: '/logout', name: 'logout', component: Logout, meta: {auth: false}},
|
||||
{path: '/registration', name: 'registration', component: Registration},
|
||||
{path: '/activation/:uuid/:token', name: 'activation', component: Activation},
|
||||
@ -33,5 +34,6 @@ export default new Router({
|
||||
|
||||
{path: '/food', name: 'food', component: FoodOverview},
|
||||
{path: '/food/:id', name: 'food-detail', component: FoodDetail},
|
||||
{path: '/bug-report', name: 'bug-report', component: BugReportOverview},
|
||||
]
|
||||
})
|
||||
|
||||
@ -16,6 +16,7 @@ export const store = new Vuex.Store({
|
||||
currentFoodComments: [],
|
||||
currentFoodUserImage: '',
|
||||
},
|
||||
bugReports: [],
|
||||
},
|
||||
getters: {
|
||||
isAuthenticated: state => {
|
||||
@ -55,6 +56,9 @@ export const store = new Vuex.Store({
|
||||
getDetailedFoodComments: state => {
|
||||
return state.foodAppStudWue.currentFoodComments
|
||||
},
|
||||
getBugReports: state => {
|
||||
return state.bugReports
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
logout(state) {
|
||||
@ -128,13 +132,23 @@ export const store = new Vuex.Store({
|
||||
},
|
||||
setUserImage(state, {image}) {
|
||||
state.foodAppStudWue.currentFoodUserImage = image;
|
||||
}
|
||||
},
|
||||
loadBugReports(state) {
|
||||
let url = CONFIG.API_ROOT_BUGREPORT + '/reports/';
|
||||
window.axios
|
||||
.get(url)
|
||||
.then(response => {
|
||||
state.bugReports = response.data;
|
||||
})
|
||||
.catch(e => {
|
||||
console.error(e)
|
||||
})
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
login(context) {
|
||||
context.commit('login')
|
||||
},
|
||||
|
||||
logout(context) {
|
||||
context.commit('logout')
|
||||
},
|
||||
@ -153,5 +167,8 @@ export const store = new Vuex.Store({
|
||||
setUserImage(context, image) {
|
||||
context.commit('setUserImage', image)
|
||||
},
|
||||
loadBugReports(context) {
|
||||
context.commit('loadBugReports')
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user