100 lines
3.9 KiB
Vue
100 lines
3.9 KiB
Vue
<script setup lang="ts">
|
|
import { ref, computed } from 'vue'
|
|
import AppLayout from '@/layouts/AppLayout.vue'
|
|
import AppHeader from '@/components/AppHeader.vue'
|
|
import { Product } from '@/types';
|
|
import Fuse from 'fuse.js';
|
|
import { Input } from '@/components/ui/crm-input'
|
|
import { Button } from '@/components/ui/crm-button'
|
|
import { Delete, Search, Plus } from "lucide-vue-next"
|
|
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
|
|
import { toCurrency, toRoundedCurrency } from '@/lib/utils';
|
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
|
|
import { Kbd, KbdGroup } from '@/components/ui/kbd'
|
|
|
|
interface Props {
|
|
productsData: Product[];
|
|
}
|
|
const props = defineProps<Props>();
|
|
const searchQuery = ref('')
|
|
const searchField = ref()
|
|
const fuse = computed(() => {
|
|
return new Fuse(props.productsData, {
|
|
keys: ['title', 'description', 'notes'],
|
|
threshold: 0.3
|
|
});
|
|
})
|
|
|
|
const filteredProducts = computed(() => {
|
|
if (!searchQuery.value) {
|
|
return props.productsData;
|
|
}
|
|
|
|
return fuse.value.search(searchQuery.value).map(result => result.item);
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
|
|
<AppLayout title="Produkte">
|
|
|
|
<AppHeader>
|
|
<template #left></template>
|
|
<template #middle>
|
|
<!-- Search field -->
|
|
<Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
|
|
v-model="searchQuery" />
|
|
<span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
|
|
<Search class="size-4 text-muted-foreground" :stroke-width="1.5" />
|
|
</span>
|
|
<span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
|
|
<Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
|
|
<Delete class="size-4 text-muted-foreground" :stroke-width="1.5" />
|
|
</Button>
|
|
</span>
|
|
</template>
|
|
<template #right>
|
|
<!-- New button -->
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger>
|
|
<Button size="sm" variant="action" @click="">
|
|
<Plus />
|
|
Neu
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>
|
|
<span>Neuen Kunden anlegen</span>
|
|
<KbdGroup class="ml-2">
|
|
<Kbd class="visible-mac">⌘ N</Kbd>
|
|
<Kbd class="visible-pc">Ctrl N</Kbd>
|
|
</KbdGroup>
|
|
</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
</template>
|
|
</AppHeader>
|
|
|
|
<div class="flex flex-wrap gap-8 lg:gap-12">
|
|
<div v-for="product in filteredProducts"
|
|
class="w-[calc(50%-4*var(--spacing))] md:w-[calc(33%-5.333*var(--spacing))] lg:w-[calc(25%-9*var(--spacing))] xl:w-[calc(20%-9.6*var(--spacing))] flex flex-col gap-4">
|
|
<div class="w-full relative aspect-4/3 overflow-hidden rounded-lg">
|
|
<img v-if="product.image" :src="'storage/uploads/products/' + product.image"
|
|
class="size-full object-cover" loading="lazy" />
|
|
<PlaceholderPattern v-else />
|
|
</div>
|
|
|
|
<div>
|
|
<h2 class="truncate">{{ product.title }}</h2>
|
|
<p class="text-muted-foreground text-sm truncate">{{ product.description }}</p>
|
|
</div>
|
|
|
|
<span class="grow flex items-end text-sm font-bold">{{ toCurrency((product?.price || 0) * (1 +
|
|
Number(product.margin))) }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
</AppLayout>
|
|
</template>
|