Show invoice buttons depending of payment status. Fixes #54

This commit is contained in:
2025-11-14 11:55:41 +01:00
parent 9a84d36d68
commit 5cb0f97f8b
8 changed files with 356 additions and 241 deletions
@@ -1,5 +1,5 @@
<!-- TODO: Mengenfeld Komma als decimal point -->
<!-- Enter in LineItem = neue Zeile -->
<!-- TODO: Enter in LineItem = neue Zeile -->
<script setup lang="ts">
import { ref, watch, HTMLAttributes } from 'vue'
@@ -20,6 +20,7 @@ import { GrowingTextarea } from '../ui/growing-textarea';
const props = defineProps<{
lineItems: LineItem[],
stickyTop: number | string,
class?: HTMLAttributes['class']
}>()
@@ -60,7 +61,8 @@ const recalculatePositions = () => {
<div :class="cn(props.class)">
<div class="backdrop-blur mt-8 bg-background/80 sticky top-[100px] z-1">
<div class="backdrop-blur-sm bg-background/90 sticky z-1 pt-8"
:style="'top: calc(var(--spacing) * ' + (props.stickyTop ? props.stickyTop : 0) + ');'">
<Table class="table-fixed">
<TableHeader>
<TableRow class="hover:bg-transparent dark:hover:bg-transparent border-b-1">
@@ -71,7 +73,7 @@ const recalculatePositions = () => {
<TableHead class="w-20 text-center">Menge</TableHead>
<TableHead class="w-1/8 text-right pr-5">Einzel</TableHead>
<TableHead class="w-1/8 text-right">Total</TableHead>
<TableHead class="w-16"></TableHead>
<TableHead class="w-8"></TableHead>
</TableRow>
</TableHeader>
</Table>
@@ -94,9 +96,9 @@ const recalculatePositions = () => {
<!-- Posten -->
<TableCell>
<Input v-model="element.title" placeholder="Posten"
class="font-bold h-fit p-1 h-7! m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none hover:border-1 dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none mb-1" />
class="font-bold p-1 h-7! m-0 -mb-1 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 border-none hover:border-1 dark:hover:border-1 placeholder:text-muted-foreground/30 shadow-none" />
<GrowingTextarea v-model="element.description" placeholder="Beschreibung"
class="font-light m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 py-0 px-1 m-0 border-none shadow-none" />
class="text-muted-foreground font-light m-0 bg-transparent dark:bg-transparent hover:bg-background/66 dark:hover:bg-background/66 py-0 px-1 m-0 border-none shadow-none" />
</TableCell>
@@ -139,18 +141,18 @@ const recalculatePositions = () => {
<!-- Total -->
<TableCell class="w-1/8 text-right tabular-nums font-bold">{{ toCurrency(element.price * element.quantity)
}}
}}
</TableCell>
<!-- Buttons -->
<TableCell class="w-16 text-right">
<Button :variant="'ghost'" :size="'sm'" @click="deleteItem(element)"
<TableCell class="w-8 text-right">
<Button variant="ghost" size="sm" @click="deleteItem(element)"
class="has-[>svg]:px-1 text-muted-foreground hover:text-destructive">
<Trash2 :size="18" />
</Button>
<Button :variant="'ghost'" :size="'sm'" @click="" class="has-[>svg]:px-1 text-muted-foreground">
<!-- <Button :variant="'ghost'" :size="'sm'" @click="" class="has-[>svg]:px-1 text-muted-foreground">
<CirclePlus />
</Button>
</Button> -->
</TableCell>
</TableRow>
@@ -161,7 +163,7 @@ const recalculatePositions = () => {
<TableRow class="hover:bg-transparent dark:hover:bg-transparent">
<TableCell colspan="8" class="text-center">
<Button class="mt-2" variant="ghost" @click="newItem">
<Button class="mt-4" variant="ghost" @click="newItem">
<Plus /> Neue Zeile
</Button>