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

* Page for single contract

Browse Source 
feature: #9
This commit is contained in:
Denys Seredenko
2023-01-06 00:34:35 +01:00
parent 49cd7b2c72
commit 0fc5cbe8e8
11 changed files with 331 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/tabs/ContractTab.vue Normal file
View File

@@ -0,0 +1,75 @@
<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">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="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">
<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>
</td>
</tr>
</table>
</div>
</div>
</template>
<script>
export default {
props: {
contract: {
type: Object
}
}
}
</script>