* fixing bugs due to eslint recommendation

feature: no-task

src/views/AboutView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is a About page</h1>
   </div>

src/views/AdministrationView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is an Administration page</h1>
   </div>

src/views/ArbeitenView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is an Arbeiten page</h1>
   </div>

src/views/ContactView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is an Contact page</h1>
   </div>

src/views/ContractView.vue

@@ -1,90 +1,93 @@
-<template>
-  <Navbar />
-  <div class="flex justify-center py-5">
-    <p class="text-3xl" v-if="currentContract"> {{ currentContract.name }} </p>
-  </div>
-  <div class="flex justify-center text-center pt-5">
-    <ul class="flex border-b border-gray-200 text-center max-sm:overflow-x-scroll max-sm:overflow-y-hidden sm:w-2/3 ">
-      <li class="flex-1 cursor-pointer" @click="changeTab('contract')">
-        <p
-          v-bind:class="{
-          'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'contract',
-          'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'contract'
-        }"
-        >
-          <span class="absolute inset-x-0 -bottom-px h-px w-full bg-white" v-if="currentTab === 'contract'"></span>
-          Auftrag
-        </p>
-      </li>
-
-      <li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')">
-        <p
-          v-bind:class="{
-          'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'client',
-          'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'client'
-        }"
-        >
-          Auftraggeber
-        </p>
-      </li>
-
-      <li class="flex-1 cursor-pointer" @click="changeTab('comments')">
-        <p
-          v-bind:class="{
-          'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'comments',
-          'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'comments'
-        }"
-        >
-          Comments
-        </p>
-      </li>
-
-    </ul>
-  </div>
-  <div class="flex justify-center text-left">
-    <div class="sm:w-2/3" v-if="currentContract">
-      <ContractTab v-bind:contract="currentContract" v-if="currentTab === 'contract'"/>
-      <ClientTab v-bind:contract="currentContract" v-if="currentTab === 'client'"/>
-      <CommentsTab v-bind:contract="currentContract" v-if="currentTab === 'comments'"/>
-    </div>
-  </div>
-</template>
-<script>
-import Navbar from "../components/Navbar.vue";
-import { mapActions, mapGetters } from "vuex";
-import ClientTab from "../components/tabs/ClientTab.vue";
-import ContractTab from "../components/tabs/ContractTab.vue";
-import CommentsTab from "../components/tabs/CommentsTab.vue";
-
-export default {
-  components: {
-    CommentsTab,
-    ContractTab,
-    ClientTab,
-    Navbar
-  },
-  data() {
-    return {
-      currentTab: 'contract'
-    }
-  },
-  mounted() {
-    const id = this.$route.query.id
-    if (id === null) {
-      this.$router.push('/error?message=' + 'Bad id' + '&code=404') //todo: check if works
-    }
-    this.fetchContractById(id)
-  },
-  methods: {
-    ...mapActions(['fetchContractById']),
-    changeTab(tabName) {
-      this.currentTab = tabName
-    }
-  },
-  computed: {
-    ...mapGetters([
-      'currentContract',
-    ]),
-  }
-}
-</script>
+<template>
+  <Navbar />
+  <div class="flex justify-center py-5">
+    <p v-if="currentContract" class="text-3xl">{{ currentContract.name }}</p>
+  </div>
+  <div class="flex justify-center text-center pt-5">
+    <ul
+      class="flex border-b border-gray-200 text-center max-sm:overflow-x-scroll max-sm:overflow-y-hidden sm:w-2/3">
+      <li class="flex-1 cursor-pointer" @click="changeTab('contract')">
+        <p
+          :class="{
+            'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
+              currentTab !== 'contract',
+            'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
+              currentTab === 'contract'
+          }">
+          <span
+            v-if="currentTab === 'contract'"
+            class="absolute inset-x-0 -bottom-px h-px w-full bg-white"></span>
+          Auftrag
+        </p>
+      </li>
+
+      <li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')">
+        <p
+          :class="{
+            'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
+              currentTab !== 'client',
+            'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
+              currentTab === 'client'
+          }">
+          Auftraggeber
+        </p>
+      </li>
+
+      <li class="flex-1 cursor-pointer" @click="changeTab('comments')">
+        <p
+          :class="{
+            'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
+              currentTab !== 'comments',
+            'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
+              currentTab === 'comments'
+          }">
+          Comments
+        </p>
+      </li>
+    </ul>
+  </div>
+  <div class="flex justify-center text-left">
+    <div v-if="currentContract" class="sm:w-2/3">
+      <ContractTab v-if="currentTab === 'contract'" :contract="currentContract" />
+      <ClientTab v-if="currentTab === 'client'" :contract="currentContract" />
+      <CommentsTab v-if="currentTab === 'comments'" :contract="currentContract" />
+    </div>
+  </div>
+</template>
+<script>
+import Navbar from '../components/Navbar.vue'
+import { mapActions, mapGetters } from 'vuex'
+import ClientTab from '../components/tabs/ClientTab.vue'
+import ContractTab from '../components/tabs/ContractTab.vue'
+import CommentsTab from '../components/tabs/CommentsTab.vue'
+
+export default {
+  components: {
+    CommentsTab,
+    ContractTab,
+    ClientTab,
+    Navbar
+  },
+  data() {
+    return {
+      currentTab: 'contract'
+    }
+  },
+  computed: {
+    ...mapGetters(['currentContract'])
+  },
+  mounted() {
+    const id = this.$route.query.id
+    if (id === null) {
+      this.$router.push('/error?message=' + 'Bad id' + '&code=404') //TODO: check if works
+    }
+    this.fetchContractById(id)
+  },
+  methods: {
+    ...mapActions(['fetchContractById']),
+    changeTab(tabName) {
+      this.currentTab = tabName
+    }
+  }
+}
+</script>

src/views/ContractsView.vue

@@ -1,6 +1,6 @@
 <script setup>
 import Navbar from '../components/Navbar.vue'
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 </script>
 <template>
   <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
@@ -15,50 +15,65 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
   <div class="flex justify-center pb-6">
     <div class="overflow-x-auto">
       <RouterLink v-if="isVerwaltung" to="/contract/create">
-        <button class="bg-sky-500 text-white active:bg-sky-600 font-bold uppercase text-xs px-4 py-2 mb-3 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-        >
+        <button
+          class="bg-sky-500 text-white active:bg-sky-600 font-bold uppercase text-xs px-4 py-2 mb-3 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
+          type="button">
           Create Auftrag
         </button>
       </RouterLink>
       <RouterLink v-if="isEmployee" to="/contracts/register">
-        <button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-        >
-          <font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5"/> Für Auftrag anmelden
+        <button
+          class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+          type="button">
+          <font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5" /> Für Auftrag
+          anmelden
         </button>
       </RouterLink>
       <table class="min-w-full border-collapse bg-white border border-gray-600">
         <thead class="bg-gray-800 text-white">
           <tr>
-            <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
-            <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
-            <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
-            <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th>
-            <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Updated</th>
-            <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
+            <th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Updated</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
           </tr>
         </thead>
         <tbody class="text-gray-700">
-          <tr v-for="(contract, index) in contracts" :key="contract.id" :class="{ 'bg-gray-100': index % 2 !== 0 }">
-            <td class="text-left py-3 px-4 text-center">{{ contract.id }}</td>
-            <td class="text-left py-3 px-4 text-center">{{ contract.name }}</td>
-            <td class="text-left py-3 px-4 text-center">
-              <!-- todo: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels -->
-              <span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{ contract.status }}</span>
+          <tr
+            v-for="(contract, index) in contracts"
+            :key="contract.id"
+            :class="{ 'bg-gray-100': index % 2 !== 0 }">
+            <td class="py-3 px-4 text-center">{{ contract.id }}</td>
+            <td class="py-3 px-4 text-center">{{ contract.name }}</td>
+            <td class="py-3 px-4 text-center">
+              <!-- TODO: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels -->
+              <span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{
+                contract.status
+              }}</span>
+            </td>
+            <td class="py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
+            <td class="py-3 px-4 text-center">
+              {{ new Date(contract.updatedAt).toDateString() }}
             </td>
-            <td class="text-left py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
-            <td class="text-left py-3 px-4 text-center">{{ new Date(contract.updatedAt).toDateString() }}</td>
             <td class="text-left py-2">
-              <button v-if="isVerwaltung" @click="openDeleteDialog()" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-              >
+              <button
+                v-if="isVerwaltung"
+                class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                @click="openDeleteDialog()">
                 Delete
               </button>
-              <button class="bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-              >
+              <button
+                class="bg-amber-500 text-white active:bg-amber-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button">
                 Update
               </button>
               <RouterLink to="/contract?id=TESTID">
-                <button class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-                >
+                <button
+                  class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  type="button">
                   View
                 </button>
               </RouterLink>
@@ -70,20 +85,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions } from 'vuex'
 
 export default {
-  mounted() {
-    this.fetchContracts()
-  },
-  methods: {
-    ...mapActions([
-      'fetchContracts'
-    ]),
-    openDeleteDialog() {
-      console.log("Prepare to delete")
-    }
-  },
   computed: {
     contracts() {
       return this.$store.state.contracts.contracts
@@ -91,9 +95,18 @@ export default {
     isVerwaltung() {
       return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
     },
-    isEmployee(){
+    isEmployee() {
       return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee')
     }
+  },
+  mounted() {
+    this.fetchContracts()
+  },
+  methods: {
+    ...mapActions(['fetchContracts']),
+    openDeleteDialog() {
+      console.log('Prepare to delete')
+    }
   }
 }
 </script>

src/views/ErrorView.vue

@@ -1,55 +1,47 @@
-<script setup>
-import Navbar from '../components/Navbar.vue'
-</script>
-<template>
-  <Navbar/>
-  <div
-    class="
-    flex
-    items-center
-    justify-center
-    bg-gradient-to-r
-    from-indigo-600
-    to-blue-400
-    py-10
-  "
-  >
-    <div class="md:px-40 md:py-20 bg-white rounded-md shadow-xl">
-      <div class="flex flex-col items-center">
-        <h1 class="font-bold text-blue-600 text-3xl">{{code}}</h1>
-
-        <h6 class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
-          <span class="text-red-500">Oops!</span> Error happend
-        </h6>
-
-        <p class="mb-8 text-center text-gray-500 md:text-lg">
-          {{ message }}
-        </p>
-
-        <div class="pb-10">
-          <a @click="navigateToPrevious()" class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100">
-            Zurück
-          </a>
-          <RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">
-            Go Home
-          </RouterLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-export default {
-  data(){
-    return {
-      message: this.$route.query.message,
-      code: this.$route.query.code
-    }
-  },
-  methods:{
-    navigateToPrevious() {
-      this.$router.back()
-    }
-  }
-}
-</script>
+<script setup>
+import Navbar from '../components/Navbar.vue'
+</script>
+<template>
+  <Navbar />
+  <div class="flex items-center justify-center bg-gradient-to-r from-indigo-600 to-blue-400 py-10">
+    <div class="md:px-40 md:py-20 bg-white rounded-md shadow-xl">
+      <div class="flex flex-col items-center">
+        <h1 class="font-bold text-blue-600 text-3xl">{{ code }}</h1>
+
+        <h6 class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
+          <span class="text-red-500">Oops!</span> Error happend
+        </h6>
+
+        <p class="mb-8 text-center text-gray-500 md:text-lg">
+          {{ message }}
+        </p>
+
+        <div class="pb-10">
+          <a
+            class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100"
+            @click="navigateToPrevious()">
+            Zurück
+          </a>
+          <RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">
+            Go Home
+          </RouterLink>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      message: this.$route.query.message,
+      code: this.$route.query.code
+    }
+  },
+  methods: {
+    navigateToPrevious() {
+      this.$router.back()
+    }
+  }
+}
+</script>

src/views/HomeView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is a Home page</h1>
   </div>

src/views/OpenContractsView.vue

@@ -2,7 +2,7 @@
 import Navbar from '../components/Navbar.vue'
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="flex justify-center pt-8 pb-8">
     <p
       class="text-2xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-serif font-medium tracking-wide flex justify-center items-center">
@@ -13,51 +13,65 @@ import Navbar from '../components/Navbar.vue'
   </div>
   <div class="flex justify-center pb-6">
     <div class="overflow-x-auto">
-      <table v-if="openContracts" class="min-w-full border-collapse bg-white border border-gray-600">
+      <table
+        v-if="openContracts"
+        class="min-w-full border-collapse bg-white border border-gray-600">
         <thead class="bg-gray-800 text-white">
-        <tr>
-          <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
-          <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
-          <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
-          <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th>
-          <th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm text-center">Notes</th>
-          <th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
-        </tr>
+          <tr>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th>
+            <th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Notes</th>
+            <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
+          </tr>
         </thead>
         <tbody class="text-gray-700">
-        <tr v-for="(contract, index) in openContracts" :key="contract.id" :class="{ 'bg-gray-100': index % 2 !== 0 }">
-          <td class="text-left py-3 px-4 text-center">{{ contract.id }}</td>
-          <td class="text-left py-3 px-4 text-center">{{ contract.name }}</td>
-          <td class="text-left py-3 px-4 text-center">
-            <!-- todo: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels -->
-            <span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{ contract.status }}</span>
-          </td>
-          <td class="text-left py-3 px-4 text-center">{{ new Date(contract.appointment).toDateString() }}</td>
-          <td class="text-left py-3 px-4 text-center">{{ contract.notes }}</td>
-          <td class="text-left py-2">
-            <RouterLink to="/contract?id=TESTID">
-              <button class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-              >
-                View
+          <tr
+            v-for="(contract, index) in openContracts"
+            :key="contract.id"
+            :class="{ 'bg-gray-100': index % 2 !== 0 }">
+            <td class="py-3 px-4 text-center">{{ contract.id }}</td>
+            <td class="py-3 px-4 text-center">{{ contract.name }}</td>
+            <td class="py-3 px-4 text-center">
+              <!-- TODO: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels -->
+              <span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{
+                contract.status
+              }}</span>
+            </td>
+            <td class="py-3 px-4 text-center">
+              {{ new Date(contract.appointment).toDateString() }}
+            </td>
+            <td class="py-3 px-4 text-center">{{ contract.notes }}</td>
+            <td class="text-left py-2">
+              <RouterLink to="/contract?id=TESTID">
+                <button
+                  class="bg-blue-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                  type="button">
+                  View
+                </button>
+              </RouterLink>
+              <button
+                class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                @click="openDialog('register')">
+                Anmelden
               </button>
-            </RouterLink>
-            <button @click="openDialog('register')" class="bg-emerald-500 text-white active:bg-emerald-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-            >
-              Anmelden
-            </button>
-            <button @click="openDialog('deregister')" class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150" type="button"
-            >
-              Abmelden
-            </button>
-          </td>
-        </tr>
+              <button
+                class="bg-red-500 text-white active:bg-red-600 font-bold uppercase text-xs px-4 py-2 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 mb-1 ease-linear transition-all duration-150"
+                type="button"
+                @click="openDialog('deregister')">
+                Abmelden
+              </button>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
   </div>
 </template>
 <script>
-import { mapActions } from "vuex";
+import { mapActions } from 'vuex'
 
 export default {
   data() {
@@ -65,21 +79,19 @@ export default {
       dialog: null
     }
   },
-  mounted() {
-    this.fetchOpenContracts()
-  },
-  methods: {
-    ...mapActions([
-      'fetchOpenContracts'
-    ]),
-    openDialog(name) {
-      this.dialog = name
-    }
-  },
   computed: {
     openContracts() {
       return this.$store.state.contracts.openContracts
     }
+  },
+  mounted() {
+    this.fetchOpenContracts()
+  },
+  methods: {
+    ...mapActions(['fetchOpenContracts']),
+    openDialog(name) {
+      this.dialog = name
+    }
   }
 }
 </script>

src/views/SupportView.vue

@@ -7,7 +7,7 @@ export default {
 }
 </script>
 <template>
-  <Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
+  <Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
   <div class="about">
     <h1>This is an Support page</h1>
   </div>