* authorization added

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">
-              {{ status }}
+            <option v-for="status in statuses" :key="status.position" :value="status.name">
+              {{ 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>
-                    75%
+                      class="bg-blue-600 absolute bottom-[-2px] left-1/2 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
+                    {{ 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')
     }
   }
 }