* fixing bugs due to eslint recommendation
feature: no-task
This commit is contained in:
@@ -74,7 +74,7 @@
|
||||
<li v-if="isAnonym" class="block text-md py-4 text-white text-center">
|
||||
<RouterLink to="/about">Über uns</RouterLink>
|
||||
</li>
|
||||
<li v-if="isAnonym" class="block py-2 flex justify-center">
|
||||
<li v-if="isAnonym" class="py-2 flex justify-center">
|
||||
<button
|
||||
class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
|
||||
@click="login">
|
||||
|
||||
@@ -1,42 +1,44 @@
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="py-2">
|
||||
<table class="w-full table-auto">
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.name }}</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Address:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.address }}</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Anschprechpartner:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.contactPerson }}</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Email:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">
|
||||
<a v-bind:href="'mailto:' + contract.client.email">
|
||||
<font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/>
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Nummer:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.phone }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="py-2">
|
||||
<table class="w-full table-auto">
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.name }}</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Address:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.address }}</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Anschprechpartner:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">
|
||||
{{ contract.client.contactPerson }}
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Email:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">
|
||||
<a :href="'mailto:' + contract.client.email">
|
||||
<font-awesome-icon class="pl-1 h-5 mt-1" icon="fa-solid fa-envelope" />
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Nummer:</td>
|
||||
<td class="w-full pl-3 text-lg max-sm:text-base py-2">{{ contract.client.phone }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,53 +1,67 @@
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="flex flex-row justify-center py-5">
|
||||
<ul class="justify-around">
|
||||
<li v-for="comment in contract.comments" class="bg-white rounded-lg shadow-2xl mb-4">
|
||||
<div class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
|
||||
<div class="relative flex gap-4">
|
||||
<font-awesome-icon icon="fa-solid fa-user-large" class="relative -mb-4 bg-white h-11 w-11" />
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex flex-row justify-between">
|
||||
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{comment.name}}</p>
|
||||
<a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">{{new Date(comment.date).toDateString() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="-mt-4 text-gray-500"> {{comment.message}} </p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
|
||||
<div class="py-4 mb-10 shadow-2xl">
|
||||
<form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2">
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
|
||||
<div class="w-full md:w-full px-3 mb-2 mt-2">
|
||||
<textarea class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white" name="body" placeholder='Type Your Comment' required></textarea>
|
||||
</div>
|
||||
<div class="w-full md:w-full flex items-start md:w-full px-3">
|
||||
<div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
|
||||
<div class="-mr-1">
|
||||
<input type='submit' class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100" value='Post Comment'>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="flex flex-row justify-center py-5">
|
||||
<ul class="justify-around">
|
||||
<li
|
||||
v-for="comment in contract.comments"
|
||||
:key="comment.id"
|
||||
class="bg-white rounded-lg shadow-2xl mb-4">
|
||||
<div
|
||||
class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg">
|
||||
<div class="relative flex gap-4">
|
||||
<font-awesome-icon
|
||||
icon="fa-solid fa-user-large"
|
||||
class="relative -mb-4 bg-white h-11 w-11" />
|
||||
<div class="flex flex-col w-full">
|
||||
<div class="flex flex-row justify-between">
|
||||
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">
|
||||
{{ comment.name }}
|
||||
</p>
|
||||
<a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
|
||||
</div>
|
||||
<p class="text-gray-400 text-sm">{{ new Date(comment.date).toDateString() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<p class="-mt-4 text-gray-500">{{ comment.message }}</p>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
<div class="py-4 mb-10 shadow-2xl">
|
||||
<form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2">
|
||||
<div class="flex flex-wrap -mx-3 mb-6">
|
||||
<h2 class="px-4 pt-3 pb-2 text-gray-800 text-lg">Add comment</h2>
|
||||
<div class="w-full md:w-full px-3 mb-2 mt-2">
|
||||
<textarea
|
||||
class="bg-gray-100 rounded border border-gray-400 leading-normal resize-none w-full h-20 py-2 px-3 font-medium placeholder-gray-700 focus:outline-none focus:bg-white"
|
||||
name="body"
|
||||
placeholder="Type Your Comment"
|
||||
required></textarea>
|
||||
</div>
|
||||
<div class="w-full md:w-full flex items-start px-3">
|
||||
<div class="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
|
||||
<div class="-mr-1">
|
||||
<input
|
||||
type="submit"
|
||||
class="bg-white text-gray-700 font-medium py-1 px-4 border border-gray-400 rounded-lg tracking-wide mr-1 hover:bg-gray-100"
|
||||
value="Post Comment" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,103 +1,122 @@
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="px-4 pt-3">
|
||||
<!-- Draw buttons by roles -->
|
||||
<button type="button" class="inline-block px-6 mr-3 py-2.5 bg-green-500 text-white font-medium text-xs rounded shadow-md">Nächstes Schritt</button>
|
||||
<button type="button" class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Status wächseln</button>
|
||||
<button type="button" class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Mitarbeitern wächseln</button>
|
||||
<button type="button" class="inline-block max-md:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Anmeldung anfangen</button>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<table class="w-full table-auto">
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">ID:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.id }}</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.name }}</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Status:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<span class="px-3 py-1 text-sm rounded-full bg-cyan-300 text-slate-800 bg-cyan-200 font-semibold">
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Progress:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<div class="mt-7 mb-">
|
||||
<div class="bg-slate-200 relative h-[10px] w-full rounded-2xl">
|
||||
<div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl"> <!-- todo: calculate in percents progress -->
|
||||
<span
|
||||
class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white"
|
||||
>
|
||||
<span
|
||||
class="bg-blue-600 absolute bottom-[-2px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"
|
||||
></span>
|
||||
75%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="person in contract.mitarbeiter">
|
||||
{{ person.name }}({{ person.role }}) {{person.phone}}
|
||||
<a v-bind:href="'mailto:' + person.email">
|
||||
<font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Unterlagen:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="document in contract.unterlagen">
|
||||
<a v-bind:href='document.url' class="underline">
|
||||
{{ document.name }}
|
||||
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beschreibung:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.beschreibung }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
|
||||
<td class="w-full pl-2 text-lg py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="(example, index) in contract.examples">
|
||||
<a v-bind:href='example' class="underline">
|
||||
Link {{ index + 1 }}
|
||||
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="bg-zinc-50">
|
||||
<div class="px-4 pt-3">
|
||||
<!-- Draw buttons by roles -->
|
||||
<button
|
||||
type="button"
|
||||
class="inline-block px-6 mr-3 py-2.5 bg-green-500 text-white font-medium text-xs rounded shadow-md">
|
||||
Nächstes Schritt
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">
|
||||
Status wächseln
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">
|
||||
Mitarbeitern wächseln
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="inline-block max-md:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">
|
||||
Anmeldung anfangen
|
||||
</button>
|
||||
</div>
|
||||
<div class="py-2">
|
||||
<table class="w-full table-auto">
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">ID:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.id }}</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Name:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.name }}</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Status:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<span class="px-3 py-1 text-sm rounded-full text-slate-800 bg-cyan-200 font-semibold">
|
||||
{{ contract.status }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="pt-5 border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Progress:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<div class="mt-7 mb-">
|
||||
<div class="bg-slate-200 relative h-[10px] w-full rounded-2xl">
|
||||
<div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl">
|
||||
<!-- TODO: calculate in percents progress -->
|
||||
<span
|
||||
class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white">
|
||||
<span
|
||||
class="bg-blue-600 absolute bottom-[-2px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"></span>
|
||||
75%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="person in contract.mitarbeiter" :key="person.name">
|
||||
{{ person.name }}({{ person.role }}) {{ person.phone }}
|
||||
<a :href="'mailto:' + person.email">
|
||||
<font-awesome-icon class="pl-1 h-5 mt-1" icon="fa-solid fa-envelope" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Unterlagen:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="document in contract.unterlagen" :key="document.id">
|
||||
<a :href="document.url" class="underline">
|
||||
{{ document.name }}
|
||||
<font-awesome-icon
|
||||
class="h-3 mb-0.5 pl-1"
|
||||
icon="fa-solid fa-arrow-up-right-from-square" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="border-b">
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beschreibung:</td>
|
||||
<td class="w-full pl-2 text-lg max-sm:text-base py-2">{{ contract.beschreibung }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
|
||||
<td class="w-full pl-2 text-lg py-2">
|
||||
<ul class="list-disc pl-4">
|
||||
<li v-for="(example, index) in contract.examples" :key="index">
|
||||
<a :href="example" class="underline">
|
||||
Link {{ index + 1 }}
|
||||
<font-awesome-icon
|
||||
class="h-3 mb-0.5 pl-1"
|
||||
icon="fa-solid fa-arrow-up-right-from-square" />
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
contract: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -26,7 +26,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/support',
|
||||
name: 'support',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/SupportView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
@@ -35,7 +34,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/administration',
|
||||
name: 'administration',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AdministrationView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true,
|
||||
@@ -45,7 +43,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/arbeiten',
|
||||
name: 'arbeiten',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/ArbeitenView.vue'),
|
||||
meta: {
|
||||
requiresAuth: false
|
||||
@@ -54,7 +51,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/contact',
|
||||
name: 'contact',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/ContactView.vue'),
|
||||
meta: {
|
||||
requiresAuth: false
|
||||
@@ -63,7 +59,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue'),
|
||||
meta: {
|
||||
requiresAuth: false
|
||||
@@ -72,7 +67,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/contract',
|
||||
name: 'contract',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/ContractView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
@@ -81,7 +75,6 @@ const router = createRouter({
|
||||
{
|
||||
path: '/contracts/register',
|
||||
name: 'contractRegistration',
|
||||
// this page is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/OpenContractsView.vue'),
|
||||
meta: {
|
||||
requiresAuth: true
|
||||
|
||||
@@ -7,7 +7,7 @@ import router from '../router'
|
||||
//Auth: provide auth token in request
|
||||
//OnError: redirect to page /error?message=somemessage&code=404
|
||||
export async function getContracts() {
|
||||
return HttpClient.get('contracts') //todo: provide here auth header
|
||||
return HttpClient.get('contracts') //TODO: provide here auth header
|
||||
.then(resp => {
|
||||
return resp.data.contracts
|
||||
})
|
||||
@@ -20,7 +20,7 @@ export async function getContracts() {
|
||||
//Auth: provide auth token in request
|
||||
//OnError: redirect to page /error?message=somemessage&code=404
|
||||
export async function getOpenContracts() {
|
||||
return HttpClient.get('contracts/register') //todo: provide here auth header
|
||||
return HttpClient.get('contracts/register') //TODO: provide here auth header
|
||||
.then(resp => {
|
||||
return resp.data.openContracts
|
||||
})
|
||||
@@ -37,7 +37,7 @@ export async function getOpenContracts() {
|
||||
export async function getContractById(identifier) {
|
||||
return HttpClient.get('/contract', { params: { id: identifier } })
|
||||
.then(resp => {
|
||||
//todo: send also auth token with request
|
||||
//TODO: send also auth token with request
|
||||
return resp.data
|
||||
})
|
||||
.catch(error => {
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is a About page</h1>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is an Administration page</h1>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is an Arbeiten page</h1>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is an Contact page</h1>
|
||||
</div>
|
||||
|
||||
@@ -1,90 +1,93 @@
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="flex justify-center py-5">
|
||||
<p class="text-3xl" v-if="currentContract"> {{ currentContract.name }} </p>
|
||||
</div>
|
||||
<div class="flex justify-center text-center pt-5">
|
||||
<ul class="flex border-b border-gray-200 text-center max-sm:overflow-x-scroll max-sm:overflow-y-hidden sm:w-2/3 ">
|
||||
<li class="flex-1 cursor-pointer" @click="changeTab('contract')">
|
||||
<p
|
||||
v-bind:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'contract',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'contract'
|
||||
}"
|
||||
>
|
||||
<span class="absolute inset-x-0 -bottom-px h-px w-full bg-white" v-if="currentTab === 'contract'"></span>
|
||||
Auftrag
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')">
|
||||
<p
|
||||
v-bind:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'client',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'client'
|
||||
}"
|
||||
>
|
||||
Auftraggeber
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex-1 cursor-pointer" @click="changeTab('comments')">
|
||||
<p
|
||||
v-bind:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'comments',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'comments'
|
||||
}"
|
||||
>
|
||||
Comments
|
||||
</p>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex justify-center text-left">
|
||||
<div class="sm:w-2/3" v-if="currentContract">
|
||||
<ContractTab v-bind:contract="currentContract" v-if="currentTab === 'contract'"/>
|
||||
<ClientTab v-bind:contract="currentContract" v-if="currentTab === 'client'"/>
|
||||
<CommentsTab v-bind:contract="currentContract" v-if="currentTab === 'comments'"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Navbar from "../components/Navbar.vue";
|
||||
import { mapActions, mapGetters } from "vuex";
|
||||
import ClientTab from "../components/tabs/ClientTab.vue";
|
||||
import ContractTab from "../components/tabs/ContractTab.vue";
|
||||
import CommentsTab from "../components/tabs/CommentsTab.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommentsTab,
|
||||
ContractTab,
|
||||
ClientTab,
|
||||
Navbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'contract'
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const id = this.$route.query.id
|
||||
if (id === null) {
|
||||
this.$router.push('/error?message=' + 'Bad id' + '&code=404') //todo: check if works
|
||||
}
|
||||
this.fetchContractById(id)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['fetchContractById']),
|
||||
changeTab(tabName) {
|
||||
this.currentTab = tabName
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters([
|
||||
'currentContract',
|
||||
]),
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="flex justify-center py-5">
|
||||
<p v-if="currentContract" class="text-3xl">{{ currentContract.name }}</p>
|
||||
</div>
|
||||
<div class="flex justify-center text-center pt-5">
|
||||
<ul
|
||||
class="flex border-b border-gray-200 text-center max-sm:overflow-x-scroll max-sm:overflow-y-hidden sm:w-2/3">
|
||||
<li class="flex-1 cursor-pointer" @click="changeTab('contract')">
|
||||
<p
|
||||
:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
|
||||
currentTab !== 'contract',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
|
||||
currentTab === 'contract'
|
||||
}">
|
||||
<span
|
||||
v-if="currentTab === 'contract'"
|
||||
class="absolute inset-x-0 -bottom-px h-px w-full bg-white"></span>
|
||||
Auftrag
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')">
|
||||
<p
|
||||
:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
|
||||
currentTab !== 'client',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
|
||||
currentTab === 'client'
|
||||
}">
|
||||
Auftraggeber
|
||||
</p>
|
||||
</li>
|
||||
|
||||
<li class="flex-1 cursor-pointer" @click="changeTab('comments')">
|
||||
<p
|
||||
:class="{
|
||||
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
|
||||
currentTab !== 'comments',
|
||||
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
|
||||
currentTab === 'comments'
|
||||
}">
|
||||
Comments
|
||||
</p>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="flex justify-center text-left">
|
||||
<div v-if="currentContract" class="sm:w-2/3">
|
||||
<ContractTab v-if="currentTab === 'contract'" :contract="currentContract" />
|
||||
<ClientTab v-if="currentTab === 'client'" :contract="currentContract" />
|
||||
<CommentsTab v-if="currentTab === 'comments'" :contract="currentContract" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
import { mapActions, mapGetters } from 'vuex'
|
||||
import ClientTab from '../components/tabs/ClientTab.vue'
|
||||
import ContractTab from '../components/tabs/ContractTab.vue'
|
||||
import CommentsTab from '../components/tabs/CommentsTab.vue'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommentsTab,
|
||||
ContractTab,
|
||||
ClientTab,
|
||||
Navbar
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentTab: 'contract'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(['currentContract'])
|
||||
},
|
||||
mounted() {
|
||||
const id = this.$route.query.id
|
||||
if (id === null) {
|
||||
this.$router.push('/error?message=' + 'Bad id' + '&code=404') //TODO: check if works
|
||||
}
|
||||
this.fetchContractById(id)
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['fetchContractById']),
|
||||
changeTab(tabName) {
|
||||
this.currentTab = tabName
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -1,55 +1,47 @@
|
||||
<script setup>
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
</script>
|
||||
<template>
|
||||
<Navbar/>
|
||||
<div
|
||||
class="
|
||||
flex
|
||||
items-center
|
||||
justify-center
|
||||
bg-gradient-to-r
|
||||
from-indigo-600
|
||||
to-blue-400
|
||||
py-10
|
||||
"
|
||||
>
|
||||
<div class="md:px-40 md:py-20 bg-white rounded-md shadow-xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="font-bold text-blue-600 text-3xl">{{code}}</h1>
|
||||
|
||||
<h6 class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
|
||||
<span class="text-red-500">Oops!</span> Error happend
|
||||
</h6>
|
||||
|
||||
<p class="mb-8 text-center text-gray-500 md:text-lg">
|
||||
{{ message }}
|
||||
</p>
|
||||
|
||||
<div class="pb-10">
|
||||
<a @click="navigateToPrevious()" class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100">
|
||||
Zurück
|
||||
</a>
|
||||
<RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">
|
||||
Go Home
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
message: this.$route.query.message,
|
||||
code: this.$route.query.code
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
navigateToPrevious() {
|
||||
this.$router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script setup>
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
</script>
|
||||
<template>
|
||||
<Navbar />
|
||||
<div class="flex items-center justify-center bg-gradient-to-r from-indigo-600 to-blue-400 py-10">
|
||||
<div class="md:px-40 md:py-20 bg-white rounded-md shadow-xl">
|
||||
<div class="flex flex-col items-center">
|
||||
<h1 class="font-bold text-blue-600 text-3xl">{{ code }}</h1>
|
||||
|
||||
<h6 class="mb-2 text-2xl font-bold text-center text-gray-800 md:text-3xl">
|
||||
<span class="text-red-500">Oops!</span> Error happend
|
||||
</h6>
|
||||
|
||||
<p class="mb-8 text-center text-gray-500 md:text-lg">
|
||||
{{ message }}
|
||||
</p>
|
||||
|
||||
<div class="pb-10">
|
||||
<a
|
||||
class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100"
|
||||
@click="navigateToPrevious()">
|
||||
Zurück
|
||||
</a>
|
||||
<RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">
|
||||
Go Home
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
message: this.$route.query.message,
|
||||
code: this.$route.query.code
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateToPrevious() {
|
||||
this.$router.back()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is a Home page</h1>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
import Navbar from '../components/Navbar.vue'
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<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">
|
||||
@@ -13,51 +13,65 @@ import Navbar from '../components/Navbar.vue'
|
||||
</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">
|
||||
<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>
|
||||
<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="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
|
||||
<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-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>
|
||||
</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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { mapActions } from "vuex";
|
||||
import { mapActions } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@@ -65,21 +79,19 @@ export default {
|
||||
dialog: null
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchOpenContracts()
|
||||
},
|
||||
methods: {
|
||||
...mapActions([
|
||||
'fetchOpenContracts'
|
||||
]),
|
||||
openDialog(name) {
|
||||
this.dialog = name
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
openContracts() {
|
||||
return this.$store.state.contracts.openContracts
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.fetchOpenContracts()
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['fetchOpenContracts']),
|
||||
openDialog(name) {
|
||||
this.dialog = name
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -7,7 +7,7 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue-->
|
||||
<Navbar /><!-- Causes rerendering each time TODO: possible use in App.vue-->
|
||||
<div class="about">
|
||||
<h1>This is an Support page</h1>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user