fst-frontend/src/components/tabs/ContractTab.vue

<template>
  <div class="bg-zinc-50">
    <div class="px-4 pt-3">
      <!-- Draw buttons by roles -->
      <button
        type="button"
        class="inline-block px-6 mr-3 py-2.5 bg-green-500 text-white font-medium text-xs rounded shadow-md"
        @click="nextStep()">
        Nächstes Schritt
      </button>
      <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="changeStatus()">
        Status wächseln
      </button>
      <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">
        Mitarbeitern wächseln
      </button>
      <button
        type="button"
        class="inline-block max-md:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">
        Anmeldung anfangen
      </button>
    </div>
    <div class="py-2">
      <table class="w-full table-auto">
        <tr class="border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">ID:</td>
          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.id }}</td>
        </tr>
        <tr class="border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.name }}</td>
        </tr>
        <tr class="pt-5 border-b">
          <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.name }}
            </span>
          </td>
        </tr>
        <tr class="pt-5 border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Progress:</td>
          <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
                  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 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 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
                    {{ Math.round((contract.status.position / amountOfStatuses) * 100) }} %
                  </span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr class="border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td>
          <td class="w-full pl-2 text-lg max-sm:text-base py-2">
            <ul class="list-disc pl-4">
              <li v-for="person in contract.employees" :key="person.name">
                {{ person.name }}({{ person.role }}) {{ person.phone }}
                <a :href="'mailto:' + person.email">
                  <font-awesome-icon class="pl-1 h-5 mt-1" icon="fa-solid fa-envelope" />
                </a>
              </li>
            </ul>
          </td>
        </tr>
        <tr class="border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Unterlagen:</td>
          <td class="w-full pl-2 text-lg max-sm:text-base py-2">
            <ul class="list-disc pl-4">
              <li v-for="document in contract.files" :key="document.name">
                <a :href="document.url" class="underline">
                  {{ document.name }}
                  <font-awesome-icon
                    class="h-3 mb-0.5 pl-1"
                    icon="fa-solid fa-arrow-up-right-from-square" />
                </a>
              </li>
            </ul>
          </td>
        </tr>
        <tr class="border-b">
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beschreibung:</td>
          <td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.description }}</td>
        </tr>
        <tr>
          <td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
          <td class="w-full pl-2 text-lg py-2">
            <ul class="list-disc pl-4">
              <li v-for="(example, index) in contract.examples" :key="example">
                <a :href="example" class="underline">
                  Link {{ index + 1 }}
                  <font-awesome-icon
                    class="h-3 mb-0.5 pl-1"
                    icon="fa-solid fa-arrow-up-right-from-square" />
                </a>
              </li>
            </ul>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>
<script>
import { moveToNextStep } from '../../service/ContractsService'
import { mapActions } from 'vuex'
import { getAmountOfStatuses } from '../../service/ContractsService'

export default {
  props: {
    contract: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      amountOfStatuses: 1
    }
  },
  async mounted() {
    this.amountOfStatuses = await getAmountOfStatuses()
  },
  methods: {
    ...mapActions(['openModal']),
    async nextStep() {
      await moveToNextStep(this.contract.id)
        .then(resp => {
          this.$router.go()
        })
        .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')
    }
  }
}
</script>