* integration with backend

feature: no-task

src/api/HttpClient.js

@@ -1,6 +1,9 @@
 import axios from 'axios'
 
 export default axios.create({
-  baseURL: 'https://0100a919-8f1d-4f29-910c-a6955ea84e40.mock.pstmn.io/',
+  baseURL: 'http://localhost:8080',
+  headers: {
+    'Authorization' : 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJkaUZYRnFmVkpqNURzWWIyX3NQYkhfZ1dQQkVjNDhWcjFhOUhHTGlvSUtZIn0.eyJleHAiOjE2NzM3NDUxNTksImlhdCI6MTY3Mzc0NDg1OSwianRpIjoiNWViNDIxYTktNTYzZS00OGZjLWE0MmYtMDI0ZTg4ZDZiM2MzIiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmRlbnlzb2Z0LmV1L3JlYWxtcy9GU1QiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiYTZjM2RhZDQtNmMxYS00MDMwLThkNmMtZmI4MTgzNjU2YmQyIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYmFja2VuZCIsInNlc3Npb25fc3RhdGUiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbIioiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbImRlZmF1bHQtcm9sZXMtZnN0Iiwib2ZmbGluZV9hY2Nlc3MiLCJzdXBlcmFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJzaWQiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibmFtZSI6IkRlbnlzIFNlcmVkZW5rbyIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IkRlbnlzIiwiZmFtaWx5X25hbWUiOiJTZXJlZGVua28iLCJlbWFpbCI6ImRlbmlzLXNlcmVkZW5rb0B1a3IubmV0In0.kd24amtNoQNNMnosnmx2K7oS_lZJ-J-DmM8bYOQgBPxwiIyWksVrcorQvZSLeo9vgU1XtrLntdLi3Awe6pCsH2PFYgbFdw4scwxX16rt1cKn_uJDV3p-VW3-LTg916BRphqy7ZZSCK13xxutmXllBOgH9YPY4BfOy5DVxCP4v_QftVDk02Yba92MpYR4y6sRec0AheonzJbGRWIhGiLlI0cuPGRJYe6_dKK9Tt4nMLsN9RV1c05Z1ZlsSfvyJH1Hd4JcqBrR5ERPZsUIaYXbH6awG2NvIxmUV83Zus5Y-CoiWFDzpFDiReIVLKXzNF22Prjry8SaoLkmS7O32fe9CQ'
+  },
   timeout: 4000
 })

src/components/modals/CreateModal.vue

@@ -124,7 +124,16 @@ export default {
       const isFormCorrect = await this.v$.$validate()
       if (!isFormCorrect) return
 
-      serviceCreateContract(this.id, this.name, this.auftraggeber, this.password)
+      await serviceCreateContract(this.id, this.name, this.auftraggeber, this.password)
+        .then(resp => {
+          //TODO: send also auth token with request
+          this.$router.go()
+          return resp.data
+        })
+        .catch(error => {
+          console.error(error)
+          router.push('/error?message=' + error.message + '&code=' + error.code)
+        })
       this.closeModal()
     }
   }

src/components/modals/RegisterModal.vue

@@ -4,11 +4,12 @@
     tabindex="-1"
     class="fixed top-0 left-0 right-0 z-50 flex justify-center text-center p-4 overflow-x-hidden overflow-y-auto md:inset-0 h-modal md:h-full">
     <div class="relative w-full h-full max-w-md md:h-auto">
-      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700" @click="closeModal()">
+      <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
         <button
           type="button"
           class="absolute top-3 right-2.5 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-800 dark:hover:text-white"
-          data-modal-hide="popup-modal">
+          data-modal-hide="popup-modal"
+          @click="closeModal()">
           <svg
             aria-hidden="true"
             class="w-5 h-5"

src/components/tabs/ContractTab.vue

@@ -39,7 +39,7 @@
           <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Status:</td>
           <td class="w-full pl-2 text-lg max-sm:text-base py-2">
             <span class="px-3 py-1 text-sm rounded-full text-slate-800 bg-cyan-200 font-semibold">
-              {{ contract.status }}
+              {{ contract.status.name }}
             </span>
           </td>
         </tr>

src/service/ContractsService.js

@@ -9,7 +9,7 @@ import router from '../router'
 export async function getContracts() {
   return HttpClient.get('contracts') //TODO: provide here auth header
     .then(resp => {
-      return resp.data.contracts
+      return resp.data
     })
     .catch(error => {
       router.push('/error?message=' + error.message + '&code=' + error.code)
@@ -82,20 +82,10 @@ export async function createContract(contractId, contractName, contractClient, c
     client: contractClient,
     password: contractPassword
   })
-    .then(resp => {
-      //TODO: send also auth token with request
-      return resp.data
-    })
-    .catch(error => {
-      console.error(error)
-      router.push('/error?message=' + error.message + '&code=' + error.code)
-    })
 }
 
 export async function deleteContract(contractId) {
-  return HttpClient.delete('/contract/delete', {
-    id: contractId
-  })
+  return HttpClient.delete('/contract/delete?id=' + contractId)
     .then(resp => {
       //TODO: send also auth token with request
       return resp.data

src/views/ContractsView.vue

@@ -39,7 +39,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
             <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
           </tr>
         </thead>
-        <tbody class="text-gray-700">
+        <tbody class="text-gray-700" v-if:="contracts">
           <tr
             v-for="(contract, index) in contracts"
             :key="contract.id"
@@ -49,12 +49,18 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
             <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
+                contract.status.name
               }}</span>
             </td>
-            <td class="py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
+            <td class="py-3 px-4 text-center" v-if:="contract.mitarbeiter">
+              {{ contract.mitarbeiter.join(', ') }}
+            </td>
+            <td class="py-3 px-4 text-center" v-else:>Not found</td>
             <td class="py-3 px-4 text-center">
-              {{ new Date(contract.updatedAt).toDateString() }}
+              <span v-if:="contract.updatedAt !== null">{{
+                new Date(contract.updatedAt).toUTCString()
+              }}</span>
+              <span v-else:> Never </span>
             </td>
             <td class="text-left py-2">
               <button
@@ -64,18 +70,18 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
                 @click="deleteContract(contract.id)">
                 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">
-                Update
-              </button>
-              <RouterLink to="/contract?id=TESTID">
+              <RouterLink :to="'/contract?id=' + contract.id">
                 <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>
+              <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>
             </td>
           </tr>
         </tbody>