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

* Page with open contracts

Browse Source 
feature: #8
This commit is contained in:
Denys Seredenko
2023-01-07 00:34:41 +01:00
parent aff1564b64
commit 3b417c9ddd
6 changed files with 152 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/views/ContractView.vue
View File

@@ -82,9 +82,6 @@ export default {
}
},
computed: {
currentContract() {
return this.$store.state.contracts.currentContract
},
...mapGetters([
'currentContract',
]),

85
src/views/OpenContractsView.vue Normal file
View File

@@ -0,0 +1,85 @@
<script setup>
import Navbar from '../components/Navbar.vue'
</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>
Offene 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">
<table v-if="openContracts" 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="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th>
<th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm text-center">Notes</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 openContracts" :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">{{ new Date(contract.appointment).toDateString() }}</td>
<td class="text-left py-3 px-4 text-center">{{ contract.notes }}</td>
<td class="text-left py-2">
<RouterLink to="/contract?id=TESTID">
<button class="bg-blue-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>
<button @click="openDialog('register')" 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"
>
Anmelden
</button>
<button @click="openDialog('deregister')" 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"
>
Abmelden
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import { mapActions } from "vuex";
export default {
data() {
return {
dialog: null
}
},
mounted() {
this.fetchOpenContracts()
},
methods: {
...mapActions([
'fetchOpenContracts'
]),
openDialog(name) {
this.dialog = name
}
},
computed: {
openContracts() {
return this.$store.state.contracts.openContracts
}
}
}
</script>