* authorization added

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')
     }
   }
 }