Implementation Engineer
180 lines
6.6 KiB
Vue
180 lines
6.6 KiB
Vue
<template>
|
||
<Teleport to="body">
|
||
<!-- Backdrop -->
|
||
<Transition name="cart-backdrop">
|
||
<div
|
||
v-if="modelValue"
|
||
class="fixed inset-0 z-[60] bg-black/60"
|
||
data-testid="cart-drawer-backdrop"
|
||
@click="close"
|
||
/>
|
||
</Transition>
|
||
|
||
<!-- Drawer Panel -->
|
||
<Transition name="cart-drawer">
|
||
<aside
|
||
v-if="modelValue"
|
||
class="fixed z-[61] bg-panel border-l border-border-default shadow-xl flex flex-col"
|
||
:class="isMobile ? 'bottom-0 left-0 right-0 rounded-t-lg max-h-[80vh]' : 'top-0 right-0 bottom-0 w-96'"
|
||
role="dialog"
|
||
aria-label="Warenkorb"
|
||
data-testid="cart-drawer"
|
||
>
|
||
<!-- Header -->
|
||
<div class="flex items-center justify-between px-4 py-3 border-b border-border-default shrink-0">
|
||
<h2 class="text-lg font-bold text-text" data-testid="cart-drawer-title">
|
||
Warenkorb
|
||
<span v-if="totalCount > 0" class="text-sm font-normal text-text-muted ml-1">({{ totalCount }})</span>
|
||
</h2>
|
||
<button
|
||
class="text-text-muted hover:text-accent transition-colors duration-fast w-8 h-8 flex items-center justify-center"
|
||
aria-label="Warenkorb schließen"
|
||
@click="close"
|
||
>
|
||
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div v-if="isEmpty" class="flex-1 flex flex-col items-center justify-center px-6 py-12 text-center">
|
||
<div class="w-16 h-16 mb-4 flex items-center justify-center rounded-full bg-surface">
|
||
<svg class="w-8 h-8 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z" />
|
||
</svg>
|
||
</div>
|
||
<p class="text-text-muted text-sm mb-4">Ihr Warenkorb ist leer.</p>
|
||
<button class="btn-primary" @click="close">
|
||
Weiter einkaufen
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Items List -->
|
||
<div v-else class="flex-1 overflow-y-auto px-4 py-3 space-y-3">
|
||
<div
|
||
v-for="item in items"
|
||
:key="item.equipment_id"
|
||
class="flex items-center gap-3 bg-surface rounded-md p-3"
|
||
data-testid="cart-drawer-item"
|
||
>
|
||
<!-- Item Image -->
|
||
<div class="w-12 h-12 rounded-md overflow-hidden bg-card shrink-0">
|
||
<img
|
||
v-if="item.image_url"
|
||
:src="item.image_url"
|
||
:alt="item.name"
|
||
class="w-full h-full object-cover"
|
||
/>
|
||
<div v-else class="w-full h-full flex items-center justify-center">
|
||
<svg class="w-6 h-6 text-secondary" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 3.75h16.5a1.5 1.5 0 011.5 1.5v12a1.5 1.5 0 01-1.5 1.5H3.75a1.5 1.5 0 01-1.5-1.5V5.25a1.5 1.5 0 011.5-1.5z" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Item Info -->
|
||
<div class="flex-grow min-w-0">
|
||
<NuxtLink :to="`/mietkatalog/${item.equipment_id}`" class="text-sm font-medium text-text hover:text-accent transition-colors duration-fast line-clamp-1" @click="close">
|
||
{{ item.name }}
|
||
</NuxtLink>
|
||
<p class="text-xs text-text-muted">
|
||
{{ item.quantity }}×
|
||
<span v-if="item.rental_price != null">{{ formatPrice(item.rental_price) }} €/Tag</span>
|
||
<span v-else>Preis auf Anfrage</span>
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Remove Button -->
|
||
<button
|
||
class="text-text-muted hover:text-error transition-colors duration-fast w-8 h-8 flex items-center justify-center shrink-0"
|
||
:aria-label="`${item.name} entfernen`"
|
||
data-testid="cart-drawer-remove"
|
||
@click="removeItem(item.equipment_id)"
|
||
>
|
||
<svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
|
||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div v-if="!isEmpty" class="shrink-0 border-t border-border-default px-4 py-3 space-y-3">
|
||
<NuxtLink to="/warenkorb" class="btn-secondary w-full" @click="close" data-testid="cart-drawer-view-cart">
|
||
Warenkorb ansehen
|
||
</NuxtLink>
|
||
<NuxtLink to="/mietanfrage" class="btn-primary w-full" @click="close" data-testid="cart-drawer-checkout">
|
||
Zur Mietanfrage
|
||
</NuxtLink>
|
||
</div>
|
||
</aside>
|
||
</Transition>
|
||
</Teleport>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { useCart } from "~/composables/useCart";
|
||
|
||
const props = defineProps<{
|
||
modelValue: boolean;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
"update:modelValue": [boolean];
|
||
}>();
|
||
|
||
const { items, totalCount, isEmpty, removeItem } = useCart();
|
||
|
||
const isMobile = ref(false);
|
||
|
||
function checkViewport(): void {
|
||
if (import.meta.client) {
|
||
isMobile.value = window.innerWidth < 768;
|
||
}
|
||
}
|
||
|
||
onMounted(() => {
|
||
checkViewport();
|
||
window.addEventListener("resize", checkViewport);
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
if (import.meta.client) {
|
||
window.removeEventListener("resize", checkViewport);
|
||
}
|
||
});
|
||
|
||
function close(): void {
|
||
emit("update:modelValue", false);
|
||
}
|
||
|
||
function formatPrice(price: number | null): string {
|
||
if (price == null) return "—";
|
||
return new Intl.NumberFormat("de-DE", {
|
||
minimumFractionDigits: 2,
|
||
maximumFractionDigits: 2,
|
||
}).format(price);
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cart-backdrop-enter-active,
|
||
.cart-backdrop-leave-active {
|
||
transition: opacity 0.25s ease;
|
||
}
|
||
.cart-backdrop-enter-from,
|
||
.cart-backdrop-leave-to {
|
||
opacity: 0;
|
||
}
|
||
|
||
.cart-drawer-enter-active,
|
||
.cart-drawer-leave-active {
|
||
transition: transform 0.3s ease;
|
||
}
|
||
.cart-drawer-enter-from,
|
||
.cart-drawer-leave-to {
|
||
transform: translateX(100%);
|
||
}
|
||
</style>
|