* fixing bugs due to eslint recommendation
feature: no-task
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
<script setup>
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
@@ -15,50 +15,65 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
<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"
|
||||
>
|
||||
<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/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
|
||||
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>
|
||||
<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="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>
|
||||
<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-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 v-if="isVerwaltung" @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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
@@ -70,20 +85,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
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
|
||||
@@ -91,9 +95,18 @@ export default {
|
||||
isVerwaltung() {
|
||||
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
|
||||
},
|
||||
isEmployee(){
|
||||
isEmployee() {
|
||||
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee')
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchContracts()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['fetchContracts']),
|
||||
openDeleteDialog() {
|
||||
console.log('Prepare to delete')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user