* fixing bugs due to eslint recommendation
feature: no-task
This commit is contained in:
@@ -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