Overall design work
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
import { computed } from 'vue'
|
||||
import { type Invoice } from '@/types'
|
||||
import { toLocalDate, toCurrency, toFixedRounded } from '@/lib/utils'
|
||||
import { StatusBadge, statusBadgeLabels, statusBadgeTextColor, castToStatusVariant } from '@/components/ui/status-badge'
|
||||
import { StatusBadge, statusBadgeLabels, statusTextStyle, castToStatusVariant } from '@/components/ui/status-badge'
|
||||
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from '@/components/ui/table'
|
||||
|
||||
|
||||
@@ -104,27 +104,27 @@ const calcTaxes = (amount: number) => {
|
||||
|
||||
|
||||
<template>
|
||||
<Table class="relative document-table">
|
||||
<Table class="relative document-table bg-none">
|
||||
<TableHeader>
|
||||
<TableRow class="hover:bg-transparent border-none">
|
||||
<TableHead class="sticky top-0 w-1/100 lg:w-1/100 hidden md:table-cell">Nr.</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/100 lg:w-1/20 text-center">Status</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
|
||||
<TableHead class="w-1/100 lg:w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5">Nr.</TableHead>
|
||||
<TableHead class="w-1/100 lg:w-1/20 text-center">Status</TableHead>
|
||||
<TableHead class="w-1/100 lg:w-1/20 lg:px-5 text-right hidden md:table-cell">Gestellt
|
||||
</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/5 text-right lg:hidden">Rechnung</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/5 hidden lg:table-cell">Kunde</TableHead>
|
||||
<TableHead colspan="2" class="sticky top-0 w-1/3 hidden lg:table-cell">Betreff</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/20 text-right">Netto</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
|
||||
<TableHead class="sticky top-0 w-1/20 text-right hidden lg:table-cell">Brutto</TableHead>
|
||||
<TableHead class="w-1/5 text-right lg:hidden">Rechnung</TableHead>
|
||||
<TableHead class="w-1/5 hidden lg:table-cell">Kunde</TableHead>
|
||||
<TableHead colspan="2" class="w-1/3 hidden lg:table-cell">Betreff</TableHead>
|
||||
<TableHead class="w-1/20 text-right">Netto</TableHead>
|
||||
<TableHead class="w-1/20 text-right hidden lg:table-cell">Ust.</TableHead>
|
||||
<TableHead class="w-1/20 text-right hidden lg:table-cell lg:pr-4">Brutto</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
|
||||
<TableBody class="overflow-clip rounded-lg">
|
||||
<TableRow v-for="invoice in invoices" :key="invoice.nr" @dblclick="onItemClicked(invoice)"
|
||||
<TableRow v-for="invoice in invoices" :key="invoice.nr" @click="onItemClicked(invoice)"
|
||||
class="select-none md:select-auto cursor-default bg-background"
|
||||
:style="'color:' + statusBadgeTextColor(invoice.paymentStatus)">
|
||||
<TableCell class="w-1/100 hidden md:table-cell lg:pr-5 tabular-nums">{{ invoice.nr }}
|
||||
:class="statusTextStyle(invoice.paymentStatus)">
|
||||
<TableCell class="w-1/100 hidden md:table-cell lg:pl-4 lg:pr-5 tabular-nums">{{ invoice.nr }}
|
||||
</TableCell>
|
||||
<TableCell class="w-1/100 text-center">
|
||||
<StatusBadge :variant="castToStatusVariant(invoice.paymentStatus)">{{
|
||||
@@ -149,15 +149,14 @@ const calcTaxes = (amount: number) => {
|
||||
</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{
|
||||
toCurrency(calcTaxes(invoice.totalAmount)) }}</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{
|
||||
<TableCell class="text-right tabular-nums hidden lg:pr-4 lg:table-cell">{{
|
||||
toCurrency(invoice.totalAmount + calcTaxes(invoice.totalAmount)) }}</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
|
||||
<TableFooter>
|
||||
<TableFooter class="border-none bg-transparent">
|
||||
<!-- Summe -->
|
||||
<TableRow
|
||||
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
|
||||
<TableRow class="border-none hover:bg-transparent">
|
||||
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
|
||||
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
|
||||
<TableCell colspan="1"></TableCell>
|
||||
@@ -165,12 +164,11 @@ const calcTaxes = (amount: number) => {
|
||||
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalAmount) }}</TableCell>
|
||||
<TableCell class="py-4 text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTax) }}
|
||||
</TableCell>
|
||||
<TableCell class="py-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
|
||||
<TableCell class="py-4 lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
|
||||
toCurrency(totalGross) }}</TableCell>
|
||||
</TableRow>
|
||||
<!-- Bezahlt -->
|
||||
<TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)"
|
||||
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60">
|
||||
<TableRow v-if="!(totalDue == 0 && totalNotIssued == 0)" class="border-none hover:bg-transparent">
|
||||
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
|
||||
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
|
||||
<TableCell colspan="1"></TableCell>
|
||||
@@ -178,12 +176,11 @@ const calcTaxes = (amount: number) => {
|
||||
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalPaid) }}</TableCell>
|
||||
<TableCell class=" text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxPaid) }}
|
||||
</TableCell>
|
||||
<TableCell class=" text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
|
||||
<TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossPaid)
|
||||
}}</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow v-if="totalDue > 0"
|
||||
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-destructive">
|
||||
<TableRow v-if="totalDue > 0" class="border-none text-destructive hover:bg-transparent">
|
||||
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
|
||||
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
|
||||
<TableCell colspan="1"></TableCell>
|
||||
@@ -191,12 +188,11 @@ const calcTaxes = (amount: number) => {
|
||||
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalDue) }}</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxDue) }}
|
||||
</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
|
||||
<TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{ toCurrency(totalGrossDue)
|
||||
}}</TableCell>
|
||||
</TableRow>
|
||||
|
||||
<TableRow v-if="totalNotIssued > 0"
|
||||
class="border-none bg-slate-100 dark:bg-neutral-900/60 hover:bg-slate-100 dark:hover:bg-neutral-900/60 text-muted-foreground">
|
||||
<TableRow v-if="totalNotIssued > 0" class="border-none text-muted-foreground hover:bg-transparent">
|
||||
<TableCell colspan="2" class="hidden lg:table-cell"></TableCell>
|
||||
<TableCell colspan="2" class="hidden md:table-cell"></TableCell>
|
||||
<TableCell colspan="1"></TableCell>
|
||||
@@ -204,7 +200,7 @@ const calcTaxes = (amount: number) => {
|
||||
<TableCell class="py-4 text-right tabular-nums">{{ toCurrency(totalNotIssued) }}</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell">{{ toCurrency(totalTaxNotIssued) }}
|
||||
</TableCell>
|
||||
<TableCell class="text-right tabular-nums hidden lg:table-cell font-bold">{{
|
||||
<TableCell class="lg:pr-4 text-right tabular-nums hidden lg:table-cell font-bold">{{
|
||||
toCurrency(totalGrossNotIssued) }}</TableCell>
|
||||
</TableRow>
|
||||
|
||||
@@ -216,9 +212,21 @@ const calcTaxes = (amount: number) => {
|
||||
.document-table {
|
||||
font-size: 0.833rem;
|
||||
}
|
||||
.document-table th,
|
||||
|
||||
.document-table th {
|
||||
|
||||
}
|
||||
.document-table td {
|
||||
padding-top: 0.694em !important;
|
||||
padding-bottom: 0.694em !important;
|
||||
padding-top: 1em !important;
|
||||
padding-bottom: 1em !important;
|
||||
}
|
||||
|
||||
.document-table tfoot tr:first-child td {
|
||||
padding-top: 2em !important;
|
||||
}
|
||||
|
||||
.document-table tfoot td {
|
||||
padding-top: 0.64em !important;
|
||||
padding-bottom: 0.64em !important;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user