Add products module #46

2025-11-26 10:05:43 +01:00
parent 155f0d3525
commit 83dd8e9ecb
21 changed files with 607 additions and 50 deletions
@@ -0,0 +1,99 @@
+<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>