* 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>
|
||||
|
||||
Reference in New Issue
Block a user