CubeBit/fst-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

* contracts page

Browse Source 
feature: #4
This commit is contained in:
Denys Seredenko
2023-01-04 22:16:28 +01:00
parent 1eab4c586f
commit 819fffec70
9 changed files with 185 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
src/views/ContractsView.vue
View File

@@ -1,15 +1,97 @@
<script setup>
import Navbar from '../components/Navbar.vue'
</script>
<script>
export default {
mounted() {}
}
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
</script>
<template>
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
<div class="about">
<h1>This is an Contracts page</h1>
<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 mb-1 ease-linear transition-all duration-150" type="button"
>
Create Auftrag
</button>
</RouterLink>
<RouterLink v-if="isEmployee" to="/contracts/register">
<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="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Id</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Name</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Status</th>
<th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Updated</th>
<th class="text-left 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="text-left py-3 px-4 text-center">{{ contract.id }}</td>
<td class="text-left py-3 px-4 text-center">{{ contract.name }}</td>
<td class="text-left 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="text-left py-3 px-4 text-center">{{ contract.mitarbeiter.join(', ') }}</td>
<td class="text-left py-3 px-4 text-center">{{ new Date(contract.updatedAt).toDateString() }}</td>
<td class="text-left py-2">
<button @click="openDeleteDialog()" 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"
>
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>
<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>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<style></style>
<script>
import { mapActions } from "vuex";
export default {
mounted() {
this.fetchContracts()
},
methods: {
...mapActions([
'fetchContracts'
]),
openDeleteDialog() {
console.log("Prepare to delete")
}
},
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')
}
}
}
</script>