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

* fixing bugs due to eslint recommendation

Browse Source 
feature: no-task
This commit is contained in:
Denys Seredenko
2023-01-07 17:27:34 +01:00
parent 3b417c9ddd
commit 8463f87f9a
20 changed files with 1385 additions and 558 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc.json
View File

@@ -5,5 +5,6 @@
"singleQuote": true, "singleQuote": true,
"arrowParens": "avoid", "arrowParens": "avoid",
"printWidth": 100, "printWidth": 100,
"bracketSameLine": true "bracketSameLine": true,
"endOfLine" : "auto"
} }

994
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@@ -14,6 +14,7 @@
"@fortawesome/free-regular-svg-icons": "^6.2.1", "@fortawesome/free-regular-svg-icons": "^6.2.1",
"@fortawesome/free-solid-svg-icons": "^6.2.1", "@fortawesome/free-solid-svg-icons": "^6.2.1",
"@fortawesome/vue-fontawesome": "^3.0.2", "@fortawesome/vue-fontawesome": "^3.0.2",
"@volar-plugins/vetur": "^0.1.0",
"@vuelidate/core": "^2.0.0", "@vuelidate/core": "^2.0.0",
"@vuelidate/validators": "^2.0.0", "@vuelidate/validators": "^2.0.0",
"axios": "^1.2.2", "axios": "^1.2.2",

2
src/components/Navbar.vue
View File

@@ -74,7 +74,7 @@
<li v-if="isAnonym" class="block text-md py-4 text-white text-center"> <li v-if="isAnonym" class="block text-md py-4 text-white text-center">
<RouterLink to="/about">Über uns</RouterLink> <RouterLink to="/about">Über uns</RouterLink>
</li> </li>
<li v-if="isAnonym" class="block py-2 flex justify-center"> <li v-if="isAnonym" class="py-2 flex justify-center">
<button <button
class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded" class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
@click="login"> @click="login">

12
src/components/tabs/ClientTab.vue
View File

@@ -12,13 +12,15 @@
</tr> </tr>
<tr class="border-b"> <tr class="border-b">
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Anschprechpartner:</td> <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> <td class="w-full pl-3 text-lg max-sm:text-base py-2">
{{ contract.client.contactPerson }}
</td>
</tr> </tr>
<tr class="border-b"> <tr class="border-b">
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Email:</td> <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"> <td class="w-full pl-3 text-lg max-sm:text-base py-2">
<a v-bind:href="'mailto:' + contract.client.email"> <a :href="'mailto:' + contract.client.email">
<font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/> <font-awesome-icon class="pl-1 h-5 mt-1" icon="fa-solid fa-envelope" />
</a> </a>
</td> </td>
</tr> </tr>
@@ -31,11 +33,11 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
contract: { contract: {
type: Object type: Object,
default: () => ({})
} }
} }
} }

38
src/components/tabs/CommentsTab.vue
View File

@@ -2,37 +2,51 @@
<div class="bg-zinc-50"> <div class="bg-zinc-50">
<div class="flex flex-row justify-center py-5"> <div class="flex flex-row justify-center py-5">
<ul class="justify-around"> <ul class="justify-around">
<li v-for="comment in contract.comments" class="bg-white rounded-lg shadow-2xl mb-4"> <li
<div class="relative grid grid-cols-1 gap-4 p-4 mb-8 border rounded-lg bg-white shadow-lg"> 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"> <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" /> <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-col w-full">
<div class="flex flex-row justify-between"> <div class="flex flex-row justify-between">
<p class="relative text-xl whitespace-nowrap truncate overflow-hidden">{{comment.name}}</p> <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> <a class="text-gray-500 text-xl" href="#"><i class="fa-solid fa-trash"></i></a>
</div> </div>
<p class="text-gray-400 text-sm">{{new Date(comment.date).toDateString() }}</p> <p class="text-gray-400 text-sm">{{ new Date(comment.date).toDateString() }}</p>
</div> </div>
</div> </div>
<p class="-mt-4 text-gray-500"> {{comment.message}} </p> <p class="-mt-4 text-gray-500">{{ comment.message }}</p>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex justify-center"> <div class="flex justify-center">
<div class="py-4 mb-10 shadow-2xl"> <div class="py-4 mb-10 shadow-2xl">
<form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2"> <form class="w-full max-w-xl bg-white rounded-lg px-4 pt-2">
<div class="flex flex-wrap -mx-3 mb-6"> <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> <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"> <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> <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>
<div class="w-full md:w-full flex items-start md:w-full px-3"> <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="flex items-start w-1/2 text-gray-700 px-2 mr-auto"></div>
<div class="-mr-1"> <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'> <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> </div>
</div> </div>
@@ -42,11 +56,11 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
contract: { contract: {
type: Object type: Object,
default: () => ({})
} }
} }
} }

63
src/components/tabs/ContractTab.vue
View File

@@ -2,10 +2,26 @@
<div class="bg-zinc-50"> <div class="bg-zinc-50">
<div class="px-4 pt-3"> <div class="px-4 pt-3">
<!-- Draw buttons by roles --> <!-- 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
<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> type="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> class="inline-block px-6 mr-3 py-2.5 bg-green-500 text-white font-medium text-xs rounded shadow-md">
<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> 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>
<div class="py-2"> <div class="py-2">
<table class="w-full table-auto"> <table class="w-full table-auto">
@@ -20,7 +36,7 @@
<tr class="pt-5 border-b"> <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="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"> <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"> <span class="px-3 py-1 text-sm rounded-full text-slate-800 bg-cyan-200 font-semibold">
{{ contract.status }} {{ contract.status }}
</span> </span>
</td> </td>
@@ -30,13 +46,12 @@
<td class="w-full pl-2 text-lg max-sm:text-base py-2"> <td class="w-full pl-2 text-lg max-sm:text-base py-2">
<div class="mt-7 mb-"> <div class="mt-7 mb-">
<div class="bg-slate-200 relative h-[10px] w-full rounded-2xl"> <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 --> <div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl">
<!-- TODO: calculate in percents progress -->
<span <span
class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white" class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white">
>
<span <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" 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>
></span>
75% 75%
</span> </span>
</div> </div>
@@ -48,10 +63,10 @@
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td> <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"> <td class="w-full pl-2 text-lg max-sm:text-base py-2">
<ul class="list-disc pl-4"> <ul class="list-disc pl-4">
<li v-for="person in contract.mitarbeiter"> <li v-for="person in contract.mitarbeiter" :key="person.name">
{{ person.name }}({{ person.role }}) {{person.phone}} {{ person.name }}({{ person.role }}) {{ person.phone }}
<a v-bind:href="'mailto:' + person.email"> <a :href="'mailto:' + person.email">
<font-awesome-icon class="pl-1 h-5 mt-1" icon='fa-solid fa-envelope'/> <font-awesome-icon class="pl-1 h-5 mt-1" icon="fa-solid fa-envelope" />
</a> </a>
</li> </li>
</ul> </ul>
@@ -61,10 +76,12 @@
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Unterlagen:</td> <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"> <td class="w-full pl-2 text-lg max-sm:text-base py-2">
<ul class="list-disc pl-4"> <ul class="list-disc pl-4">
<li v-for="document in contract.unterlagen"> <li v-for="document in contract.unterlagen" :key="document.id">
<a v-bind:href='document.url' class="underline"> <a :href="document.url" class="underline">
{{ document.name }} {{ document.name }}
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" /> <font-awesome-icon
class="h-3 mb-0.5 pl-1"
icon="fa-solid fa-arrow-up-right-from-square" />
</a> </a>
</li> </li>
</ul> </ul>
@@ -78,10 +95,12 @@
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td> <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"> <td class="w-full pl-2 text-lg py-2">
<ul class="list-disc pl-4"> <ul class="list-disc pl-4">
<li v-for="(example, index) in contract.examples"> <li v-for="(example, index) in contract.examples" :key="index">
<a v-bind:href='example' class="underline"> <a :href="example" class="underline">
Link {{ index + 1 }} Link {{ index + 1 }}
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" /> <font-awesome-icon
class="h-3 mb-0.5 pl-1"
icon="fa-solid fa-arrow-up-right-from-square" />
</a> </a>
</li> </li>
</ul> </ul>
@@ -92,11 +111,11 @@
</div> </div>
</template> </template>
<script> <script>
export default { export default {
props: { props: {
contract: { contract: {
type: Object type: Object,
default: () => ({})
} }
} }
} }

7
src/router/index.js
View File

@@ -26,7 +26,6 @@ const router = createRouter({
{ {
path: '/support', path: '/support',
name: 'support', name: 'support',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/SupportView.vue'), component: () => import('../views/SupportView.vue'),
meta: { meta: {
requiresAuth: true requiresAuth: true
@@ -35,7 +34,6 @@ const router = createRouter({
{ {
path: '/administration', path: '/administration',
name: 'administration', name: 'administration',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/AdministrationView.vue'), component: () => import('../views/AdministrationView.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
@@ -45,7 +43,6 @@ const router = createRouter({
{ {
path: '/arbeiten', path: '/arbeiten',
name: 'arbeiten', name: 'arbeiten',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/ArbeitenView.vue'), component: () => import('../views/ArbeitenView.vue'),
meta: { meta: {
requiresAuth: false requiresAuth: false
@@ -54,7 +51,6 @@ const router = createRouter({
{ {
path: '/contact', path: '/contact',
name: 'contact', name: 'contact',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/ContactView.vue'), component: () => import('../views/ContactView.vue'),
meta: { meta: {
requiresAuth: false requiresAuth: false
@@ -63,7 +59,6 @@ const router = createRouter({
{ {
path: '/about', path: '/about',
name: 'about', name: 'about',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/AboutView.vue'), component: () => import('../views/AboutView.vue'),
meta: { meta: {
requiresAuth: false requiresAuth: false
@@ -72,7 +67,6 @@ const router = createRouter({
{ {
path: '/contract', path: '/contract',
name: 'contract', name: 'contract',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/ContractView.vue'), component: () => import('../views/ContractView.vue'),
meta: { meta: {
requiresAuth: true requiresAuth: true
@@ -81,7 +75,6 @@ const router = createRouter({
{ {
path: '/contracts/register', path: '/contracts/register',
name: 'contractRegistration', name: 'contractRegistration',
// this page is lazy-loaded when the route is visited.
component: () => import('../views/OpenContractsView.vue'), component: () => import('../views/OpenContractsView.vue'),
meta: { meta: {
requiresAuth: true requiresAuth: true

6
src/service/ContractsService.js
View File

@@ -7,7 +7,7 @@ import router from '../router'
//Auth: provide auth token in request //Auth: provide auth token in request
//OnError: redirect to page /error?message=somemessage&code=404 //OnError: redirect to page /error?message=somemessage&code=404
export async function getContracts() { export async function getContracts() {
return HttpClient.get('contracts') //todo: provide here auth header return HttpClient.get('contracts') //TODO: provide here auth header
.then(resp => { .then(resp => {
return resp.data.contracts return resp.data.contracts
}) })
@@ -20,7 +20,7 @@ export async function getContracts() {
//Auth: provide auth token in request //Auth: provide auth token in request
//OnError: redirect to page /error?message=somemessage&code=404 //OnError: redirect to page /error?message=somemessage&code=404
export async function getOpenContracts() { 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 => { .then(resp => {
return resp.data.openContracts return resp.data.openContracts
}) })
@@ -37,7 +37,7 @@ export async function getOpenContracts() {
export async function getContractById(identifier) { export async function getContractById(identifier) {
return HttpClient.get('/contract', { params: { id: identifier } }) return HttpClient.get('/contract', { params: { id: identifier } })
.then(resp => { .then(resp => {
//todo: send also auth token with request //TODO: send also auth token with request
return resp.data return resp.data
}) })
.catch(error => { .catch(error => {

2
src/views/AboutView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is a About page</h1> <h1>This is a About page</h1>
</div> </div>

2
src/views/AdministrationView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is an Administration page</h1> <h1>This is an Administration page</h1>
</div> </div>

2
src/views/ArbeitenView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is an Arbeiten page</h1> <h1>This is an Arbeiten page</h1>
</div> </div>

2
src/views/ContactView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is an Contact page</h1> <h1>This is an Contact page</h1>
</div> </div>

71
src/views/ContractView.vue
View File

@@ -1,60 +1,65 @@
<template> <template>
<Navbar /> <Navbar />
<div class="flex justify-center py-5"> <div class="flex justify-center py-5">
<p class="text-3xl" v-if="currentContract"> {{ currentContract.name }} </p> <p v-if="currentContract" class="text-3xl">{{ currentContract.name }}</p>
</div> </div>
<div class="flex justify-center text-center pt-5"> <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 "> <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')"> <li class="flex-1 cursor-pointer" @click="changeTab('contract')">
<p <p
v-bind:class="{ :class="{
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'contract', 'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'contract' 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> }">
<span
v-if="currentTab === 'contract'"
class="absolute inset-x-0 -bottom-px h-px w-full bg-white"></span>
Auftrag Auftrag
</p> </p>
</li> </li>
<li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')"> <li class="flex-1 pl-px cursor-pointer" @click="changeTab('client')">
<p <p
v-bind:class="{ :class="{
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'client', 'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'client' currentTab !== 'client',
}" 'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
> currentTab === 'client'
}">
Auftraggeber Auftraggeber
</p> </p>
</li> </li>
<li class="flex-1 cursor-pointer" @click="changeTab('comments')"> <li class="flex-1 cursor-pointer" @click="changeTab('comments')">
<p <p
v-bind:class="{ :class="{
'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white': currentTab !== 'comments', 'block bg-gray-100 p-4 text-sm font-medium text-gray-500 ring-1 ring-inset ring-white':
'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium': currentTab === 'comments' currentTab !== 'comments',
}" 'relative block border-t border-l border-r border-gray-200 bg-white p-4 text-sm font-medium':
> currentTab === 'comments'
}">
Comments Comments
</p> </p>
</li> </li>
</ul> </ul>
</div> </div>
<div class="flex justify-center text-left"> <div class="flex justify-center text-left">
<div class="sm:w-2/3" v-if="currentContract"> <div v-if="currentContract" class="sm:w-2/3">
<ContractTab v-bind:contract="currentContract" v-if="currentTab === 'contract'"/> <ContractTab v-if="currentTab === 'contract'" :contract="currentContract" />
<ClientTab v-bind:contract="currentContract" v-if="currentTab === 'client'"/> <ClientTab v-if="currentTab === 'client'" :contract="currentContract" />
<CommentsTab v-bind:contract="currentContract" v-if="currentTab === 'comments'"/> <CommentsTab v-if="currentTab === 'comments'" :contract="currentContract" />
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import Navbar from "../components/Navbar.vue"; import Navbar from '../components/Navbar.vue'
import { mapActions, mapGetters } from "vuex"; import { mapActions, mapGetters } from 'vuex'
import ClientTab from "../components/tabs/ClientTab.vue"; import ClientTab from '../components/tabs/ClientTab.vue'
import ContractTab from "../components/tabs/ContractTab.vue"; import ContractTab from '../components/tabs/ContractTab.vue'
import CommentsTab from "../components/tabs/CommentsTab.vue"; import CommentsTab from '../components/tabs/CommentsTab.vue'
export default { export default {
components: { components: {
@@ -68,10 +73,13 @@ export default {
currentTab: 'contract' currentTab: 'contract'
} }
}, },
computed: {
...mapGetters(['currentContract'])
},
mounted() { mounted() {
const id = this.$route.query.id const id = this.$route.query.id
if (id === null) { if (id === null) {
this.$router.push('/error?message=' + 'Bad id' + '&code=404') //todo: check if works this.$router.push('/error?message=' + 'Bad id' + '&code=404') //TODO: check if works
} }
this.fetchContractById(id) this.fetchContractById(id)
}, },
@@ -80,11 +88,6 @@ export default {
changeTab(tabName) { changeTab(tabName) {
this.currentTab = tabName this.currentTab = tabName
} }
},
computed: {
...mapGetters([
'currentContract',
]),
} }
} }
</script> </script>

91
src/views/ContractsView.vue
View File

@@ -1,6 +1,6 @@
<script setup> <script setup>
import Navbar from '../components/Navbar.vue' import Navbar from '../components/Navbar.vue'
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
</script> </script>
<template> <template>
<Navbar /><!-- Causes rerendering each time todo: possible use in App.vue--> <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="flex justify-center pb-6">
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<RouterLink v-if="isVerwaltung" to="/contract/create"> <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 Create Auftrag
</button> </button>
</RouterLink> </RouterLink>
<RouterLink v-if="isEmployee" to="/contracts/register"> <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" <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"
<font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5"/> Für Auftrag anmelden type="button">
<font-awesome-icon icon="fa-solid fa-pen-to-square" class="pr-1 h-3.5" /> Für Auftrag
anmelden
</button> </button>
</RouterLink> </RouterLink>
<table class="min-w-full border-collapse bg-white border border-gray-600"> <table class="min-w-full border-collapse bg-white border border-gray-600">
<thead class="bg-gray-800 text-white"> <thead class="bg-gray-800 text-white">
<tr> <tr>
<th class="text-left 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">Id</th>
<th class="text-left 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">Name</th>
<th class="text-left 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">Status</th>
<th class="w-1/3 text-left py-3 px-4 uppercase font-semibold text-sm text-center">Mitarbeiter</th> <th class="w-1/3 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="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">Aktion</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-700"> <tbody class="text-gray-700">
<tr v-for="(contract, index) in contracts" :key="contract.id" :class="{ 'bg-gray-100': index % 2 !== 0 }"> <tr
<td class="text-left py-3 px-4 text-center">{{ contract.id }}</td> v-for="(contract, index) in contracts"
<td class="text-left py-3 px-4 text-center">{{ contract.name }}</td> :key="contract.id"
<td class="text-left py-3 px-4 text-center"> :class="{ 'bg-gray-100': index % 2 !== 0 }">
<!-- todo: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels --> <td class="py-3 px-4 text-center">{{ contract.id }}</td>
<span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{ contract.status }}</span> <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>
<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"> <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 Delete
</button> </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 Update
</button> </button>
<RouterLink to="/contract?id=TESTID"> <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 View
</button> </button>
</RouterLink> </RouterLink>
@@ -70,20 +85,9 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from "vuex"; import { mapActions } from 'vuex'
export default { export default {
mounted() {
this.fetchContracts()
},
methods: {
...mapActions([
'fetchContracts'
]),
openDeleteDialog() {
console.log("Prepare to delete")
}
},
computed: { computed: {
contracts() { contracts() {
return this.$store.state.contracts.contracts return this.$store.state.contracts.contracts
@@ -91,9 +95,18 @@ export default {
isVerwaltung() { isVerwaltung() {
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung') return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
}, },
isEmployee(){ isEmployee() {
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee') return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('employee')
} }
},
mounted() {
this.fetchContracts()
},
methods: {
...mapActions(['fetchContracts']),
openDeleteDialog() {
console.log('Prepare to delete')
}
} }
} }
</script> </script>

24
src/views/ErrorView.vue
View File

@@ -2,21 +2,11 @@
import Navbar from '../components/Navbar.vue' import Navbar from '../components/Navbar.vue'
</script> </script>
<template> <template>
<Navbar/> <Navbar />
<div <div class="flex items-center justify-center bg-gradient-to-r from-indigo-600 to-blue-400 py-10">
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="md:px-40 md:py-20 bg-white rounded-md shadow-xl">
<div class="flex flex-col items-center"> <div class="flex flex-col items-center">
<h1 class="font-bold text-blue-600 text-3xl">{{code}}</h1> <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"> <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 <span class="text-red-500">Oops!</span> Error happend
@@ -27,7 +17,9 @@ import Navbar from '../components/Navbar.vue'
</p> </p>
<div class="pb-10"> <div class="pb-10">
<a @click="navigateToPrevious()" class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100"> <a
class="px-6 py-2 mr-4 text-sm font-semibold text-blue-800 bg-blue-100"
@click="navigateToPrevious()">
Zurück Zurück
</a> </a>
<RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100"> <RouterLink to="/" class="px-6 py-2 text-sm font-semibold text-blue-800 bg-blue-100">
@@ -40,13 +32,13 @@ import Navbar from '../components/Navbar.vue'
</template> </template>
<script> <script>
export default { export default {
data(){ data() {
return { return {
message: this.$route.query.message, message: this.$route.query.message,
code: this.$route.query.code code: this.$route.query.code
} }
}, },
methods:{ methods: {
navigateToPrevious() { navigateToPrevious() {
this.$router.back() this.$router.back()
} }

2
src/views/HomeView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is a Home page</h1> <h1>This is a Home page</h1>
</div> </div>

80
src/views/OpenContractsView.vue
View File

@@ -2,7 +2,7 @@
import Navbar from '../components/Navbar.vue' import Navbar from '../components/Navbar.vue'
</script> </script>
<template> <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"> <div class="flex justify-center pt-8 pb-8">
<p <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"> 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,40 +13,54 @@ import Navbar from '../components/Navbar.vue'
</div> </div>
<div class="flex justify-center pb-6"> <div class="flex justify-center pb-6">
<div class="overflow-x-auto"> <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"> <thead class="bg-gray-800 text-white">
<tr> <tr>
<th class="text-left 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">Id</th>
<th class="text-left 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">Name</th>
<th class="text-left 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">Status</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm text-center">Planed Date</th> <th class="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="w-1/3 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> <th class="py-3 px-4 uppercase font-semibold text-sm text-center">Aktion</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-700"> <tbody class="text-gray-700">
<tr v-for="(contract, index) in openContracts" :key="contract.id" :class="{ 'bg-gray-100': index % 2 !== 0 }"> <tr
<td class="text-left py-3 px-4 text-center">{{ contract.id }}</td> v-for="(contract, index) in openContracts"
<td class="text-left py-3 px-4 text-center">{{ contract.name }}</td> :key="contract.id"
<td class="text-left py-3 px-4 text-center"> :class="{ 'bg-gray-100': index % 2 !== 0 }">
<!-- todo: set color specific from status. for colors use https://www.creative-tim.com/learning-lab/tailwind-starter-kit/documentation/css/labels --> <td class="py-3 px-4 text-center">{{ contract.id }}</td>
<span class="text-emerald-600 bg-emerald-200 rounded-full py-1 px-2">{{ contract.status }}</span> <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>
<td class="text-left py-3 px-4 text-center">{{ new Date(contract.appointment).toDateString() }}</td> <td class="py-3 px-4 text-center">
<td class="text-left py-3 px-4 text-center">{{ contract.notes }}</td> {{ new Date(contract.appointment).toDateString() }}
</td>
<td class="py-3 px-4 text-center">{{ contract.notes }}</td>
<td class="text-left py-2"> <td class="text-left py-2">
<RouterLink to="/contract?id=TESTID"> <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" <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 View
</button> </button>
</RouterLink> </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" <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 Anmelden
</button> </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" <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 Abmelden
</button> </button>
</td> </td>
@@ -57,7 +71,7 @@ import Navbar from '../components/Navbar.vue'
</div> </div>
</template> </template>
<script> <script>
import { mapActions } from "vuex"; import { mapActions } from 'vuex'
export default { export default {
data() { data() {
@@ -65,21 +79,19 @@ export default {
dialog: null dialog: null
} }
}, },
mounted() {
this.fetchOpenContracts()
},
methods: {
...mapActions([
'fetchOpenContracts'
]),
openDialog(name) {
this.dialog = name
}
},
computed: { computed: {
openContracts() { openContracts() {
return this.$store.state.contracts.openContracts return this.$store.state.contracts.openContracts
} }
},
mounted() {
this.fetchOpenContracts()
},
methods: {
...mapActions(['fetchOpenContracts']),
openDialog(name) {
this.dialog = name
}
} }
} }
</script> </script>

2
src/views/SupportView.vue
View File

@@ -7,7 +7,7 @@ export default {
} }
</script> </script>
<template> <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"> <div class="about">
<h1>This is an Support page</h1> <h1>This is an Support page</h1>
</div> </div>

5
volar.config.js Normal file
View File

@@ -0,0 +1,5 @@
const vetur = require('@volar-plugins/vetur');
module.exports = {
plugins: [vetur()]
}