* Page for single contract

feature: #9

src/views/ContractView.vue

@@ -0,0 +1,90 @@
+<template>
+  <Navbar />
+  <div class="flex justify-center py-5">
+    <p 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
+          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">
+      <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 } 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: {
+    currentContract() {
+      return this.$store.state.contracts.currentContract
+    }
+  }
+}
+</script>

src/views/ContractsView.vue

@@ -56,10 +56,12 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
               >
                 Update
               </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 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"
+                >
+                  View
+                </button>
+              </RouterLink>
             </td>
           </tr>
         </tbody>