* Page with open contracts

feature: #8

src/router/index.js

@@ -75,7 +75,16 @@ const router = createRouter({
       // this page is lazy-loaded when the route is visited.
       component: () => import('../views/ContractView.vue'),
       meta: {
-        requiresAuth: false
+        requiresAuth: true
+      }
+    },
+    {
+      path: '/contracts/register',
+      name: 'contractRegistration',
+      // this page is lazy-loaded when the route is visited.
+      component: () => import('../views/OpenContractsView.vue'),
+      meta: {
+        requiresAuth: true
       }
     },
     {

src/service/ContractsService.js

@@ -16,6 +16,19 @@ export async function getContracts() {
     })
 }
 
+//REST: GET /contracts
+//Auth: provide auth token in request
+//OnError: redirect to page /error?message=somemessage&code=404
+export async function getOpenContracts() {
+  return HttpClient.get('contracts/register') //todo: provide here auth header
+    .then(resp => {
+      return resp.data.openContracts
+    })
+    .catch(error => {
+      router.push('/error?message=' + error.message + '&code=' + error.code)
+    })
+}
+
 //Request in order to retrieve specific contract using ID
 //Backend: extra roles check. Allow admin, verwaltung, employee.
 //REST: GET /contract?id=someId

src/store/contracts.module.js

@@ -1,14 +1,18 @@
-import { getContracts, getContractById } from '../service/ContractsService'
+import { getContracts, getContractById, getOpenContracts } from '../service/ContractsService'
 
 export default {
   state: () => ({
     contracts: [],
-    currentContract: null
+    currentContract: null,
+    openContracts: []
   }),
   mutations: {
     initContracts(state, data) {
       state.contracts = data
     },
+    initOpenContracts(state, data) {
+      state.openContracts = data
+    },
     setCurrentContract(state, data) {
       state.currentContract = data
     }
@@ -22,6 +26,10 @@ export default {
       const contract = await getContractById(id)
       commit('setCurrentContract', contract)
       return state.currentContract
+    },
+    async fetchOpenContracts({ commit }) {
+      const openContracts = await getOpenContracts()
+      commit('initOpenContracts', openContracts)
     }
   },
   getters: {

src/views/ContractView.vue

@@ -82,9 +82,6 @@ export default {
     }
   },
   computed: {
-    currentContract() {
-      return this.$store.state.contracts.currentContract
-    },
     ...mapGetters([
       'currentContract',
     ]),

src/views/OpenContractsView.vue

@@ -0,0 +1,85 @@
+<script setup>
+import Navbar from '../components/Navbar.vue'
+</script>
+<template>
+  <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">
+      <span class="inline-block w-5 h-1 mr-4 bg-gray-900 ::before"></span>
+      Offene Aufträge
+      <span class="inline-block w-5 h-1 ml-4 bg-gray-900 ::after"></span>
+    </p>
+  </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">
+        <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>
+        </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
+              </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>
+        </tbody>
+      </table>
+    </div>
+  </div>
+</template>
+<script>
+import { mapActions } from "vuex";
+
+export default {
+  data() {
+    return {
+      dialog: null
+    }
+  },
+  mounted() {
+    this.fetchOpenContracts()
+  },
+  methods: {
+    ...mapActions([
+      'fetchOpenContracts'
+    ]),
+    openDialog(name) {
+      this.dialog = name
+    }
+  },
+  computed: {
+    openContracts() {
+      return this.$store.state.contracts.openContracts
+    }
+  }
+}
+</script>