Show invoice buttons depending of payment status. Fixes #54
This commit is contained in:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user