hms-licht-ton/frontend/pages/warenkorb.vue

<template>
  <div class="max-w-5xl mx-auto px-4 py-8">
    <!-- Breadcrumb -->
    <nav class="flex items-center gap-2 text-sm text-text-muted mb-6" aria-label="Breadcrumb">
      <NuxtLink to="/" class="hover:text-accent transition-colors duration-fast">Home</NuxtLink>
      <span class="text-secondary">/</span>
      <span class="text-text font-medium">Warenkorb</span>
    </nav>

    <h1 class="text-2xl font-bold text-text mb-6" data-testid="warenkorb-title">Warenkorb</h1>

    <!-- Empty State -->
    <div v-if="isEmpty" class="flex flex-col items-center justify-center py-16 text-center" data-testid="warenkorb-empty">
      <div class="w-20 h-20 mb-4 flex items-center justify-center rounded-full bg-surface">
        <svg class="w-10 h-10 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>
      <h2 class="text-lg font-bold text-text mb-2">Ihr Warenkorb ist leer</h2>
      <p class="text-text-muted text-sm mb-6 max-w-sm">Sie haben noch keine Artikel zum Ausleihen ausgewählt.</p>
      <NuxtLink to="/mietkatalog" class="btn-primary" data-testid="warenkorb-empty-cta">
        Zum Mietkatalog
      </NuxtLink>
    </div>

    <!-- Cart Items -->
    <div v-else class="space-y-4">
      <div
        v-for="item in items"
        :key="item.equipment_id"
        class="card rounded-lg border border-border-default p-4 flex flex-col sm:flex-row gap-4"
        data-testid="warenkorb-item"
      >
        <!-- Item Image -->
        <div class="w-full sm:w-24 h-24 rounded-md overflow-hidden bg-surface 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-10 h-10 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 flex flex-col justify-between">
          <div>
            <NuxtLink :to="`/mietkatalog/${item.equipment_id}`" class="text-base font-bold text-text hover:text-accent transition-colors duration-fast" data-testid="warenkorb-item-name">
              {{ item.name }}
            </NuxtLink>
            <p class="text-sm text-text-muted mt-1">
              <span v-if="item.rental_price != null" class="text-accent font-semibold">{{ formatPrice(item.rental_price) }} €/Tag</span>
              <span v-else>Preis auf Anfrage</span>
            </p>
          </div>
        </div>

        <!-- Quantity Stepper -->
        <div class="flex items-center gap-3 shrink-0" data-testid="warenkorb-item-stepper">
          <button
            class="w-9 h-9 rounded-md bg-surface border border-border-default text-text-muted hover:text-accent hover:border-accent-border transition-colors duration-fast flex items-center justify-center"
            :aria-label="`Menge von ${item.name} verringern`"
            data-testid="warenkorb-item-decrement"
            @click="decrementQuantity(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="M5 12h14" />
            </svg>
          </button>
          <span class="text-base font-semibold text-text w-8 text-center" data-testid="warenkorb-item-quantity">{{ item.quantity }}</span>
          <button
            class="w-9 h-9 rounded-md bg-surface border border-border-default text-text-muted hover:text-accent hover:border-accent-border transition-colors duration-fast flex items-center justify-center"
            :aria-label="`Menge von ${item.name} erhöhen`"
            data-testid="warenkorb-item-increment"
            @click="incrementQuantity(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="M12 4v16m8-8H4" />
            </svg>
          </button>
        </div>

        <!-- Remove Button -->
        <div class="flex items-center shrink-0">
          <button
            class="text-text-muted hover:text-error transition-colors duration-fast w-9 h-9 flex items-center justify-center"
            :aria-label="`${item.name} aus Warenkorb entfernen`"
            data-testid="warenkorb-item-remove"
            @click="removeItem(item.equipment_id)"
          >
            <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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
            </svg>
          </button>
        </div>
      </div>

      <!-- Summary & Actions -->
      <div class="flex flex-col sm:flex-row items-center justify-between gap-4 pt-4 border-t border-border-default">
        <p class="text-sm text-text-muted">
          Insgesamt <span class="text-text font-bold">{{ totalCount }}</span> Artikel
        </p>
        <div class="flex items-center gap-3">
          <button
            class="btn-secondary"
            data-testid="warenkorb-clear"
            @click="clearCart"
          >
            Warenkorb leeren
          </button>
          <NuxtLink to="/mietanfrage" class="btn-primary" data-testid="warenkorb-checkout">
            Zur Mietanfrage
          </NuxtLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useCart } from "~/composables/useCart";

const { items, totalCount, isEmpty, removeItem, incrementQuantity, decrementQuantity, clearCart } = useCart();

function formatPrice(price: number | null): string {
  if (price == null) return "—";
  return new Intl.NumberFormat("de-DE", {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2,
  }).format(price);
}

useHead({
  title: "Warenkorb – HMS Licht & Ton",
  meta: [{ name: "robots", content: "noindex, nofollow, noarchive, nosnippet" }],
});
</script>