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

* apply and misapply by open contracts + modals

Browse Source 
feature: #8
This commit is contained in:
Denys Seredenko
2023-01-08 00:30:41 +01:00
parent 1872097882
commit 1f9db78a4f
12 changed files with 411 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/views/OpenContractsView.vue
View File

@@ -2,71 +2,81 @@
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="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="py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th>
<th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Notes</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 openContracts"
: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">
{{ new Date(contract.appointment).toDateString() }}
</td>
<td class="py-3 px-4 text-center">{{ contract.notes }}</td>
<td class="text-left py-2">
<RouterLink to="/contract?id=TESTID">
<div>
<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="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="py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th>
<th class="w-1/3 py-3 px-4 uppercase font-semibold text-sm text-center">Notes</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 openContracts"
: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">
{{ new Date(contract.appointment).toDateString() }}
</td>
<td class="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
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
v-if="contract.registered"
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"
@click="
selectContract(contract.id);
openModal('register')
">
Anmelden
</button>
</RouterLink>
<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"
@click="openDialog('register')">
Anmelden
</button>
<button
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="openDialog('deregister')">
Abmelden
</button>
</td>
</tr>
</tbody>
</table>
<button
v-if="!contract.registered"
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="
selectContract(contract.id);
openModal('deregister')
">
Abmelden
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
@@ -74,11 +84,6 @@ import Navbar from '../components/Navbar.vue'
import { mapActions } from 'vuex'
export default {
data() {
return {
dialog: null
}
},
computed: {
openContracts() {
return this.$store.state.contracts.openContracts
@@ -88,9 +93,10 @@ export default {
this.fetchOpenContracts()
},
methods: {
...mapActions(['fetchOpenContracts']),
openDialog(name) {
this.dialog = name
...mapActions(['fetchOpenContracts', 'openModal']),
selectContract(ID) {
console.log(ID)
this.$store.commit('setSelectedContract', ID)
}
}
}