* authorization added

src/api/HttpClient.js

@@ -1,9 +1,5 @@
 import axios from 'axios'
-
 export default axios.create({
   baseURL: 'http://localhost:8080',
-  headers: {
-    'Authorization' : 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCIgOiAiSldUIiwia2lkIiA6ICJkaUZYRnFmVkpqNURzWWIyX3NQYkhfZ1dQQkVjNDhWcjFhOUhHTGlvSUtZIn0.eyJleHAiOjE2NzM3NDUxNTksImlhdCI6MTY3Mzc0NDg1OSwianRpIjoiNWViNDIxYTktNTYzZS00OGZjLWE0MmYtMDI0ZTg4ZDZiM2MzIiwiaXNzIjoiaHR0cHM6Ly9hdXRoLmRlbnlzb2Z0LmV1L3JlYWxtcy9GU1QiLCJhdWQiOiJhY2NvdW50Iiwic3ViIjoiYTZjM2RhZDQtNmMxYS00MDMwLThkNmMtZmI4MTgzNjU2YmQyIiwidHlwIjoiQmVhcmVyIiwiYXpwIjoiYmFja2VuZCIsInNlc3Npb25fc3RhdGUiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJhY3IiOiIxIiwiYWxsb3dlZC1vcmlnaW5zIjpbIioiXSwicmVhbG1fYWNjZXNzIjp7InJvbGVzIjpbImRlZmF1bHQtcm9sZXMtZnN0Iiwib2ZmbGluZV9hY2Nlc3MiLCJzdXBlcmFkbWluIiwidW1hX2F1dGhvcml6YXRpb24iXX0sInJlc291cmNlX2FjY2VzcyI6eyJhY2NvdW50Ijp7InJvbGVzIjpbIm1hbmFnZS1hY2NvdW50IiwibWFuYWdlLWFjY291bnQtbGlua3MiLCJ2aWV3LXByb2ZpbGUiXX19LCJzY29wZSI6InByb2ZpbGUgZW1haWwiLCJzaWQiOiI2YTUxZTQ2Yy0xMzc5LTQ3YzQtODczNS1mYmM4MWMzOTNkNDIiLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibmFtZSI6IkRlbnlzIFNlcmVkZW5rbyIsInByZWZlcnJlZF91c2VybmFtZSI6ImFkbWluIiwiZ2l2ZW5fbmFtZSI6IkRlbnlzIiwiZmFtaWx5X25hbWUiOiJTZXJlZGVua28iLCJlbWFpbCI6ImRlbmlzLXNlcmVkZW5rb0B1a3IubmV0In0.kd24amtNoQNNMnosnmx2K7oS_lZJ-J-DmM8bYOQgBPxwiIyWksVrcorQvZSLeo9vgU1XtrLntdLi3Awe6pCsH2PFYgbFdw4scwxX16rt1cKn_uJDV3p-VW3-LTg916BRphqy7ZZSCK13xxutmXllBOgH9YPY4BfOy5DVxCP4v_QftVDk02Yba92MpYR4y6sRec0AheonzJbGRWIhGiLlI0cuPGRJYe6_dKK9Tt4nMLsN9RV1c05Z1ZlsSfvyJH1Hd4JcqBrR5ERPZsUIaYXbH6awG2NvIxmUV83Zus5Y-CoiWFDzpFDiReIVLKXzNF22Prjry8SaoLkmS7O32fe9CQ'
-  },
   timeout: 4000
 })

src/components/modals/ChangeStatusModal.vue

@@ -30,12 +30,13 @@
             v-model="selected"
             class="bg-gray-50 border mt-2 border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
             <option value="nothing" selected>Choose a status</option>
-            <option v-for="status in statuses" :key="status" :value="status">
+            <option v-for="status in statuses" :key="status.position" :value="status.name">
-              {{ status }}
+              {{ status.name }}
             </option>
           </select>
           <button
-            class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md">
+            class="inline-block px-6 mt-3 py-2.5 bg-green-500 text-white font-medium text-normal rounded shadow-md"
+            @click="changeStatus()">
             Wächseln
           </button>
         </div>
@@ -46,7 +47,7 @@
 <script>
 import { mapActions } from 'vuex'
 import router from '../../router/index'
-import { getStatuses, changeStatus } from '../../service/ContractsService'
+import { getStatuses, postChangeStatus } from '../../service/ContractsService'
 
 export default {
   data() {
@@ -66,14 +67,15 @@ export default {
   methods: {
     ...mapActions(['closeModal']),
     changeStatus() {
+      // TODO: selected is not defined
       const id = this.selectedContract
       if (id === null) {
         this.closeModal()
         router.push('/error?message=' + 'Contract not found' + '&code=404')
       }
-      if (selected === 'nothing') return
+      if (this.selected === 'nothing') return
       //TODO: provide here contractID
-      changeStatus(id, this.selected)
+      postChangeStatus(id, this.selected)
         .then(resp => {
           this.closeModal()
           this.$router.go()

src/components/tabs/ClientTab.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-zinc-50">
+  <div v-if="contract.client" class="bg-zinc-50">
     <div class="py-2">
       <table class="w-full table-auto">
         <tr class="border-b">

src/components/tabs/CommentsTab.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-zinc-50">
+  <div v-if="contract" class="bg-zinc-50">
     <div class="flex flex-row justify-center py-5">
-      <ul class="justify-around">
+      <ul v-if="contract.comments" class="justify-around">
         <li
           v-for="comment in contract.comments"
           :key="comment.id"
@@ -85,7 +85,7 @@ export default {
 
       const comment = {
         name: this.name,
-        text: this.message,
+        message: this.message,
         date: new Date()
       }
 

src/components/tabs/ContractTab.vue

@@ -11,7 +11,7 @@
       <button
         type="button"
         class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md"
-        @click="openModal('changeStatus')">
+        @click="changeStatus()">
         Status wächseln
       </button>
       <button
@@ -48,13 +48,21 @@
           <td class="w-full pl-2 text-lg max-sm:text-base py-2">
             <div class="mt-7 mb-">
               <div class="bg-slate-200 relative h-[10px] w-full rounded-2xl">
-                <div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl">
+                <div
+                  v-if="amountOfStatuses"
+                  class="bg-blue-600 absolute top-0 left-0 h-full rounded-2xl"
+                  :style="
+                    'width: ' +
+                    Math.round((contract.status.position / amountOfStatuses) * 100) +
+                    '%'
+                  ">
                   <!-- TODO: calculate in percents progress -->
                   <span
-                    class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white">
+                    class="bg-blue-600 absolute bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white"
+                    style="right: 1%">
                     <span
-                      class="bg-blue-600 absolute bottom-[-2px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
+                      class="bg-blue-600 absolute bottom-[-2px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
-                    75%
+                    {{ Math.round((contract.status.position / amountOfStatuses) * 100) }} %
                   </span>
                 </div>
               </div>
@@ -115,6 +123,7 @@
 <script>
 import { moveToNextStep } from '../../service/ContractsService'
 import { mapActions } from 'vuex'
+import { getAmountOfStatuses } from '../../service/ContractsService'
 
 export default {
   props: {
@@ -123,6 +132,14 @@ export default {
       default: () => ({})
     }
   },
+  data() {
+    return {
+      amountOfStatuses: 1
+    }
+  },
+  async mounted() {
+    this.amountOfStatuses = await getAmountOfStatuses()
+  },
   methods: {
     ...mapActions(['openModal']),
     async nextStep() {
@@ -133,6 +150,10 @@ export default {
         .catch(error => {
           this.$router.push('/error?message=' + error.message + '&code=' + error.code)
         })
+    },
+    async changeStatus() {
+      await this.$store.commit('setSelectedContract', this.contract.id)
+      this.openModal('changeStatus')
     }
   }
 }

src/service/ContractsService.js

@@ -1,13 +1,18 @@
 import HttpClient from '../api/HttpClient'
 import router from '../router'
+import store from '../store/index'
 
 //Request in order to retrieve all contracts and print in table
 //Backend: extra roles check. Allow admin, verwaltung, employee.
 //REST: GET /contracts
 //Auth: provide auth token in request
 //OnError: redirect to page /error?message=somemessage&code=404
-export async function getContracts() {
+export async function getContracts(authToken) {
-  return HttpClient.get('contracts') //TODO: provide here auth header
+  return HttpClient.get('contracts', {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  }) //TODO: provide here auth header
     .then(resp => {
       return resp.data
     })
@@ -20,7 +25,11 @@ export async function getContracts() {
 //Auth: provide auth token in request
 //OnError: redirect to page /error?message=somemessage&code=404
 export async function getOpenContracts() {
-  return HttpClient.get('contracts/open') //TODO: provide here auth header
+  return HttpClient.get('contracts/open', {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  }) //TODO: provide here auth header
     .then(resp => {
       return resp.data.openContracts
     })
@@ -34,8 +43,13 @@ export async function getOpenContracts() {
 //REST: GET /contract?id=someId
 //Auth: provide auth token in request
 //OnError: redirect to page /error?message=somemessage&code=404
-export async function getContractById(identifier) {
+export async function getContractById(identifier, authToken) {
-  return HttpClient.get('/contract', { params: { id: identifier } })
+  return HttpClient.get('/contract', {
+    params: { id: identifier },
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  })
     .then(resp => {
       //TODO: send also auth token with request
       return resp.data
@@ -47,10 +61,18 @@ export async function getContractById(identifier) {
 }
 
 export async function applyContract(contractID, prefRole) {
-  return HttpClient.post('/contract/apply', {
+  return HttpClient.post(
+    '/contract/apply',
+    {
       id: contractID,
       role: prefRole
-  })
+    },
+    {
+      headers: {
+        Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+      }
+    }
+  )
     .then(resp => {
       //TODO: send also auth token with request
       return resp.data
@@ -62,9 +84,17 @@ export async function applyContract(contractID, prefRole) {
 }
 
 export async function misapply(contractID) {
-  return HttpClient.post('/contract/misapply', {
+  return HttpClient.post(
+    '/contract/misapply',
+    {
       id: contractID
-  })
+    },
+    {
+      headers: {
+        Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+      }
+    }
+  )
     .then(resp => {
       //TODO: send also auth token with request
       return resp.data
@@ -76,16 +106,28 @@ export async function misapply(contractID) {
 }
 
 export async function createContract(contractId, contractName, contractClient, contractPassword) {
-  return HttpClient.post('/contract/create', {
+  return HttpClient.post(
+    '/contract/create',
+    {
       id: contractId,
       name: contractName,
       client: contractClient,
       password: contractPassword
-  })
+    },
+    {
+      headers: {
+        Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+      }
+    }
+  )
 }
 
 export async function deleteContract(contractId) {
-  return HttpClient.delete('/contract/delete?id=' + contractId)
+  return HttpClient.delete('/contract/delete?id=' + contractId, {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  })
     .then(resp => {
       //TODO: send also auth token with request
       return resp.data
@@ -97,20 +139,34 @@ export async function deleteContract(contractId) {
 }
 
 export async function saveComment(comment, contractId) {
-  return HttpClient.post('/contract/' + contractId + '/comments', comment)
+  return HttpClient.post('/contract/' + contractId + '/comments', comment, {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
     }
-
-export async function moveToNextStep(contractId) {
-  return HttpClient.post('/contract/nextstep', {
-    id: contractId
   })
 }
 
+export async function moveToNextStep(contractId) {
+  return HttpClient.post(
+    '/contract/nextstep?id=' + contractId,
+    {},
+    {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+      }
+    }
+  )
+}
+
 export async function getStatuses(contractId) {
-  return HttpClient.get('/statuses')
+  return HttpClient.get('/statuses', {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  })
     .then(resp => {
       //TODO: send also auth token with request
-      return resp.data.statuses
+      return resp.data
     })
     .catch(error => {
       console.error(error)
@@ -118,10 +174,34 @@ export async function getStatuses(contractId) {
     })
 }
 
-export async function changeStatus(contractId, newStatus) {
+export async function postChangeStatus(contractId, newStatus) {
   //TODO: send also auth token with request
-  return HttpClient.post('/contract/status', {
+  return HttpClient.post(
+    '/contract/status',
+    {
       id: contractId,
       status: newStatus
+    },
+    {
+      headers: {
+        Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+      }
+    }
+  )
+}
+
+export async function getAmountOfStatuses(token) {
+  return HttpClient.get('/statuses/amount', {
+    headers: {
+      Authorization: 'Bearer ' + store.state.keycloak.keycloak.token
+    }
+  })
+    .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)
     })
 }

src/store/contracts.module.js

@@ -1,3 +1,4 @@
+import store from '.'
 import { getContracts, getContractById, getOpenContracts } from '../service/ContractsService'
 
 export default {
@@ -23,11 +24,11 @@ export default {
   },
   actions: {
     async fetchContracts({ commit }) {
-      const contracts = await getContracts()
+      const contracts = await getContracts(store.state.keycloak.keycloak.token)
       commit('initContracts', contracts)
     },
     async fetchContractById({ commit, state }, id) {
-      const contract = await getContractById(id)
+      const contract = await getContractById(id, store.state.keycloak.keycloak.token)
       commit('setCurrentContract', contract)
       return state.currentContract
     },

src/views/ContractView.vue

@@ -81,7 +81,7 @@ export default {
     if (id === null) {
       this.$router.push('/error?message=' + 'Bad id' + '&code=404') //TODO: check if works
     }
-    this.fetchContractById(id)
+    this.fetchContractById(id, this.$store.state.keycloak.keycloak.token)
   },
   methods: {
     ...mapActions(['fetchContractById']),