Fix clear bug

basta/src/App.vue

@@ -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;

basta/src/components/bugReport/BugReportFormular.vue

@@ -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>

basta/src/components/bugReport/BugReportOverview.vue

@@ -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>

basta/src/config.js

@@ -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';

basta/src/router/index.js

@@ -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},
   ]
 })

basta/src/store.js

@@ -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')
+    },
   },
 });