113 lines
4.9 KiB
Vue
113 lines
4.9 KiB
Vue
<script setup>
|
|
import Navbar from '../components/Navbar.vue'
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
</script>
|
|
<template>
|
|
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
|
<div class="flex justify-center pt-8 pb-8">
|
|
<p
|
|
class="text-2xl md:text-2xl lg:text-3xl xl:text-4xl 2xl:text-5xl font-serif font-medium tracking-wide flex justify-center items-center">
|
|
<span class="inline-block w-5 h-1 mr-4 bg-gray-900 ::before"></span>
|
|
Aufträge
|
|
<span class="inline-block w-5 h-1 ml-4 bg-gray-900 ::after"></span>
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-center pb-6">
|
|
<div class="overflow-x-auto">
|
|
<RouterLink v-if="isVerwaltung" to="/contract/create">
|
|
<button
|
|
class="bg-sky-500 text-white active:bg-sky-600 font-bold uppercase text-xs px-4 py-2 mb-3 rounded shadow hover:shadow-md outline-none focus:outline-none mr-1 ease-linear transition-all duration-150"
|
|
type="button">
|
|
Create Auftrag
|
|
</button>
|
|
</RouterLink>
|
|
<RouterLink v-if="isEmployee" to="/contracts/open">
|
|
<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">
|
|
<font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5" /> Für Auftrag
|
|
anmelden
|
|
</button>
|
|
</RouterLink>
|
|
<table class="min-w-full border-collapse bg-white border border-gray-600">
|
|
<thead class="bg-gray-800 text-white">
|
|
<tr>
|
|
<th class="py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
|
|
<th class="py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
|
|
<th class="py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
|
|
<th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th>
|
|
<th class="py-3 px-4 uppercase font-semibold text-sm text-center">Updated</th>
|
|
<th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-gray-700">
|
|
<tr
|
|
v-for="(contract, index) in contracts"
|
|
:key="contract.id"
|
|
:class="{ 'bg-gray-100': index % 2 !== 0 }">
|
|
<td class="py-3 px-4 text-center">{{ contract.id }}</td>
|
|
<td class="py-3 px-4 text-center">{{ contract.name }}</td>
|
|
<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
|
|
}}</span>
|
|
</td>
|
|
<td class="py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
|
|
<td class="py-3 px-4 text-center">
|
|
{{ new Date(contract.updatedAt).toDateString() }}
|
|
</td>
|
|
<td class="text-left py-2">
|
|
<button
|
|
v-if="isVerwaltung"
|
|
class="bg-red-500 text-white active:bg-red-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"
|
|
@click="openDeleteDialog()">
|
|
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">
|
|
<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>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
|
|
export default {
|
|
computed: {
|
|
contracts() {
|
|
return this.$store.state.contracts.contracts
|
|
},
|
|
isVerwaltung() {
|
|
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
|
|
},
|
|
isEmployee() {
|
|
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee')
|
|
}
|
|
},
|
|
mounted() {
|
|
this.fetchContracts()
|
|
},
|
|
methods: {
|
|
...mapActions(['fetchContracts']),
|
|
openDeleteDialog() {
|
|
console.log('Prepare to delete')
|
|
}
|
|
}
|
|
}
|
|
</script>
|