Büchersuche: Trefferanzahl gefundener Bücher

components.d.ts

@@ -26,6 +26,7 @@ declare module 'vue' {
     AppStepper: typeof import('./src/@core/components/AppStepper.vue')['default']
     AppTextarea: typeof import('./src/@core/components/app-form-elements/AppTextarea.vue')['default']
     AppTextField: typeof import('./src/@core/components/app-form-elements/AppTextField.vue')['default']
+    Buchkarten: typeof import('./src/components/Buchkarten.vue')['default']
     Buecherdatenbank: typeof import('./src/pages/buecherdatenbank.vue')['default']
     BuyNow: typeof import('./src/@core/components/BuyNow.vue')['default']
     CardAddEditDialog: typeof import('./src/components/dialogs/CardAddEditDialog.vue')['default']

src/components/Buchkarten.vue

@@ -0,0 +1,116 @@
+<template>
+  <VCol
+      v-for="book in books"
+      :key="book.id"
+      cols="12"
+      sm="6"
+      md="4"
+    >
+      <RouterLink :to="`/buchdetailseite/${book.id}`" class="buchkarten-router-link">
+        <VCard class="pa-3 hover-card" elevation="2">
+          <div class="buchkarten-grid">
+            <!-- Cover links, volle Höhe -->
+            <VImg
+              :src="book.image"
+              class="buch-cover"
+              cover
+            />
+
+            <!-- Inhalt rechts -->
+            <div class="buch-details">
+              <div class="titel-und-icon">
+                <div class="text-subtitle-1 font-weight-bold">
+                  {{ book.title }}
+                </div>
+                <VIcon icon="tabler-search" class="search-icon" />
+              </div>
+
+              <div v-if="book.authors?.length" class="text-caption text-medium-emphasis mb-2">
+                von {{ book.authors.map(a => a.name).join(', ') }}
+              </div>
+
+              <div class="d-flex flex-wrap mb-2">
+                <VChip
+                  v-for="genre in book.genres"
+                  :key="genre"
+                  color="primary"
+                  size="small"
+                  class="ma-1"
+                >
+                  {{ genre }}
+                </VChip>
+              </div>
+
+              <Fieberkurve
+                :is-static="true"
+                :default-values="book.fieberkurve"
+                :hide-text="true"
+              />
+            </div>
+          </div>
+        </VCard>
+      </RouterLink>
+    </VCol>
+</template>
+
+<script setup>
+import Fieberkurve from '@/components/Fieberkurve.vue'
+import { RouterLink } from 'vue-router'
+
+defineProps({
+  books: Array
+})
+</script>
+
+<style scoped>
+.buchkarten-router-link {
+  text-decoration: none;
+  color: inherit;
+}
+
+.buchkarten-grid {
+  display: grid;
+  grid-template-columns: 160px 1fr;
+  gap: 1rem;
+  align-items: center;
+}
+
+.buch-cover {
+  width: 160px;
+  height: 240px;
+  border-radius: 8px;
+}
+
+.buch-details {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 240px;
+  position: relative;
+}
+
+.titel-und-icon {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+}
+
+.search-icon {
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  color: #888;
+}
+
+.hover-card:hover .search-icon {
+  opacity: 1;
+}
+
+.hover-card {
+  transition: transform 0.25s ease, box-shadow 0.25s ease;
+  border-radius: 12px;
+}
+.hover-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
+}
+</style>

src/components/buecherdatenbank.js

@@ -4,7 +4,7 @@ export const books = [
     isbn: "9783898798822",
     title: "Rich Dad Poor Dad",
     authors: [{ id: null, name: "Robert T. Kiyosaki" }],
-    blurb: "Warum bleiben die Reichen reich und die Armen arm? Weil die Reichen ihren Kindern beibringen, wie sie mit Geld umgehen müssen, und die anderen nicht! ...",
+    blurb: "Warum bleiben die Reichen reich und die Armen arm?",
     genres: ["Crime", "Erotik"],
     subtitle: "Was die Reichen ihren Kindern über Geld beibringen",
     publishers: null,
@@ -12,13 +12,7 @@ export const books = [
     language: "de",
     publishedDate: "2014-12",
     image: "https://m.media-amazon.com/images/I/81gW3OmXQeL._SL1500_.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 1 }, { value: 1 }, { value: 1 }, { value: 1 }, { value: 1 }],
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-      { value: 1 },
-    ],
   },
   {
     id: 2,
@@ -33,20 +27,14 @@ export const books = [
     language: "de",
     publishedDate: "1997-07",
     image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }],
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
     id: 3,
     isbn: null,
     title: "Der Herr der Ringe",
     authors: [{ id: null, name: "J.R.R. Tolkien" }],
-    blurb: "Ein episches Fantasy-Abenteuer von J.R.R. Tolkien.",
+    blurb: "Ein episches Fantasy-Abenteuer.",
     genres: ["Abenteuer", "Contemporary"],
     subtitle: null,
     publishers: null,
@@ -54,13 +42,7 @@ export const books = [
     language: "de",
     publishedDate: "1954-07",
     image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 5 }, { value: 4 }, { value: 6 }, { value: 4 }, { value: 2 }],
-      { value: 5 },
-      { value: 4 },
-      { value: 6 },
-      { value: 4 },
-      { value: 2 },
-    ],
   },
   {
     id: 4,
@@ -75,20 +57,14 @@ export const books = [
     language: "de",
     publishedDate: "2008-09",
     image: "https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 4 }, { value: 7 }, { value: 4 }, { value: 3 }, { value: 5 }],
-      { value: 4 },
-      { value: 7 },
-      { value: 4 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
     id: 5,
     isbn: null,
     title: "Game of Thrones",
     authors: [{ id: null, name: "George R.R. Martin" }],
-    blurb: "Der Auftakt zur epischen Saga von George R.R. Martin.",
+    blurb: "Der Auftakt zur epischen Saga.",
     genres: ["Fantasy", "ScienceFiction"],
     subtitle: null,
     publishers: null,
@@ -96,20 +72,14 @@ export const books = [
     language: "de",
     publishedDate: "1996-08",
     image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 5 }, { value: 2 }, { value: 7 }, { value: 3 }, { value: 5 }],
-      { value: 5 },
-      { value: 2 },
-      { value: 7 },
-      { value: 3 },
-      { value: 5 },
-    ],
   },
   {
     id: 6,
     isbn: null,
     title: "1984",
     authors: [{ id: null, name: "George Orwell" }],
-    blurb: "Ein dystopischer Klassiker von George Orwell.",
+    blurb: "Ein dystopischer Klassiker.",
     genres: ["History"],
     subtitle: null,
     publishers: null,
@@ -117,20 +87,14 @@ export const books = [
     language: "de",
     publishedDate: "1949-06",
     image: "https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 5 }, { value: 2 }, { value: 4 }, { value: 4 }, { value: 5 }],
-      { value: 5 },
-      { value: 2 },
-      { value: 4 },
-      { value: 4 },
-      { value: 5 },
-    ],
   },
   {
     id: 7,
     isbn: null,
     title: "Sakrileg - The Da Vinci Code",
     authors: [{ id: null, name: "Dan Brown" }],
-    blurb: "Ein spannender Thriller von Dan Brown.",
+    blurb: "Ein spannender Thriller.",
     genres: ["Horror", "Fantasy", "Romance"],
     subtitle: null,
     publishers: null,
@@ -138,12 +102,126 @@ export const books = [
     language: "de",
     publishedDate: "2003-03",
     image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
-    fieberkurve: [
+    fieberkurve: [{ value: 1 }, { value: 7 }, { value: 7 }, { value: 3 }, { value: 1 }],
-      { value: 1 },
+  },
-      { value: 7 },
+  {
-      { value: 7 },
+    id: 8,
-      { value: 3 },
+    isbn: "9783423246690",
-      { value: 1 },
+    title: "Der Alchimist",
-    ],
+    authors: [{ id: null, name: "Paulo Coelho" }],
+    blurb: "Ein andalusischer Hirte sucht seinen Schatz.",
+    genres: ["Contemporary", "Romance"],
+    subtitle: null,
+    publishers: "Diogenes",
+    pageCount: 192,
+    language: "de",
+    publishedDate: "2002-03",
+    image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
+    fieberkurve: [{ value: 3 }, { value: 4 }, { value: 6 }, { value: 2 }, { value: 4 }],
+  },
+  {
+    id: 9,
+    isbn: "9783442159477",
+    title: "Der Schwarm",
+    authors: [{ id: null, name: "Frank Schätzing" }],
+    blurb: "Die Rache der Natur.",
+    genres: ["ScienceFiction", "Horror"],
+    subtitle: null,
+    publishers: "Kiepenheuer & Witsch",
+    pageCount: 1008,
+    language: "de",
+    publishedDate: "2004-09",
+    image: "https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg",
+    fieberkurve: [{ value: 6 }, { value: 5 }, { value: 7 }, { value: 4 }, { value: 2 }],
+  },
+  {
+    id: 10,
+    isbn: "9783453436270",
+    title: "Die Physiker",
+    authors: [{ id: null, name: "Friedrich Dürrenmatt" }],
+    blurb: "Wissenschaft und Verantwortung.",
+    genres: ["History", "Philosophy"],
+    subtitle: null,
+    publishers: "Diogenes",
+    pageCount: 144,
+    language: "de",
+    publishedDate: "1962-01",
+    image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
+    fieberkurve: [{ value: 4 }, { value: 3 }, { value: 2 }, { value: 2 }, { value: 6 }],
+  },
+  {
+    id: 11,
+    isbn: "9783551317532",
+    title: "Tintenherz",
+    authors: [{ id: null, name: "Cornelia Funke" }],
+    blurb: "Eine Geschichte über Magie und Bücher.",
+    genres: ["Fantasy", "Abenteuer"],
+    subtitle: null,
+    publishers: "Dressler",
+    pageCount: 576,
+    language: "de",
+    publishedDate: "2003-09",
+    image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
+    fieberkurve: [{ value: 6 }, { value: 2 }, { value: 5 }, { value: 3 }, { value: 4 }],
+  },
+  {
+    id: 12,
+    isbn: "9783453434207",
+    title: "Der kleine Prinz",
+    authors: [{ id: null, name: "Antoine de Saint-Exupéry" }],
+    blurb: "Ein poetisches Märchen.",
+    genres: ["Philosophy", "Romance"],
+    subtitle: null,
+    publishers: "Karl Rauch Verlag",
+    pageCount: 112,
+    language: "de",
+    publishedDate: "1943-04",
+    image: "https://m.media-amazon.com/images/I/71kxa1-0mfL.jpg",
+    fieberkurve: [{ value: 3 }, { value: 1 }, { value: 5 }, { value: 1 }, { value: 6 }],
+  },
+  {
+    id: 13,
+    isbn: "9783453409533",
+    title: "Inferno",
+    authors: [{ id: null, name: "Dan Brown" }],
+    blurb: "Ein tödliches Rätsel rund um Dante.",
+    genres: ["Thriller", "Mystery"],
+    subtitle: null,
+    publishers: "Lübbe",
+    pageCount: 672,
+    language: "de",
+    publishedDate: "2013-05",
+    image: "https://m.media-amazon.com/images/I/91zbi9M+mKL._AC_UF1000,1000_QL80_.jpg",
+    fieberkurve: [{ value: 4 }, { value: 6 }, { value: 7 }, { value: 5 }, { value: 2 }],
+  },
+  {
+    id: 14,
+    isbn: "9783257230012",
+    title: "Homo Faber",
+    authors: [{ id: null, name: "Max Frisch" }],
+    blurb: "Technik trifft auf Leben.",
+    genres: ["Philosophy", "Contemporary"],
+    subtitle: null,
+    publishers: "Suhrkamp",
+    pageCount: 192,
+    language: "de",
+    publishedDate: "1957-03",
+    image: "https://m.media-amazon.com/images/I/81YOuOGFCJL.jpg",
+    fieberkurve: [{ value: 2 }, { value: 3 }, { value: 4 }, { value: 2 }, { value: 5 }],
+  },
+  {
+    id: 15,
+    isbn: "9783499255858",
+    title: "Er ist wieder da",
+    authors: [{ id: null, name: "Timur Vermes" }],
+    blurb: "Hitler erwacht 2011 – eine Satire.",
+    genres: ["Satire", "History"],
+    subtitle: null,
+    publishers: "Bastei Lübbe",
+    pageCount: 400,
+    language: "de",
+    publishedDate: "2012-09",
+    image: "https://m.media-amazon.com/images/I/61JfGcL2ljL._AC_UF1000,1000_QL80_.jpg",
+    fieberkurve: [{ value: 6 }, { value: 5 }, { value: 4 }, { value: 2 }, { value: 3 }],
   },
 ]

src/pages/buechersuche.vue

@@ -74,88 +74,23 @@
         <br />
       </VCard>
     </VCol>
-
+  </VRow>
-
+  <!-- Trefferanzahl -->
-    <!-- Gefundene Bücher -->
+<!--  <VDivider class="my-2" />-->
-    <VCol cols="12" md="12">
+  <VCardTitle class="text-h5 px-6 pt-4 pb-2">
-      <VCard class="mb-6">
+    {{ filteredBooks.length }} {{ filteredBooks.length === 1 ? 'Buch' : 'Bücher' }} gefunden
-        <!-- Trefferanzahl -->
+  </VCardTitle>
-        <VCardTitle class="text-h5 px-6 pt-4 pb-2">
+<!--  <VDivider class="my-2" />-->
-          {{ resultCount }} {{ resultCount === 1 ? 'Buch' : 'Bücher' }} gefunden
+  <!-- Gefundene Bücher -->
-        </VCardTitle>
+  <VRow>
-        <VDivider class="my-2" />
+    <Buchkarten :books="filteredBooks" />
-
-        <VRow>
-          <VCol v-for="book in filteredBooks" :key="book.id" cols="12" sm="6" md="4">
-            <VCard class="pa-2">
-              <VCardText class="d-flex flex-column align-center">
-                <!-- Bild -->
-                <VImg
-                  :src="book.image"
-                  width="160"
-                  height="240"
-                  class="mb-3 rounded"
-                  cover
-                />
-
-                <!-- Titel -->
-                <div class="text-h6 font-weight-bold text-center">
-                  {{ book.title }}
-                </div>
-
-                <!-- Autoren -->
-                <div v-if="book.authors?.length" class="text-caption mb-2 text-center">
-                  von {{ book.authors.map(a => a.name).join(', ') }}
-                </div>
-
-                <!-- Genres -->
-                <div class="d-flex flex-wrap justify-center mb-2">
-                  <VChip
-                    v-for="genre in book.genres"
-                    :key="genre"
-                    color="primary"
-                    size="small"
-                    class="ma-1"
-                  >
-                    {{ genre }}
-                  </VChip>
-                </div>
-
-                <!-- Beschreibung (Blurb) -->
-                <div
-                  class="text-truncate mb-3 text-center"
-                  style="max-width: 90%; max-height: 3em; overflow: hidden;"
-                >
-                  {{ book.blurb }}
-                </div>
-
-                <!-- Fieberkurve -->
-                <Fieberkurve
-                  :is-static="true"
-                  :default-values="book.fieberkurve"
-                  :hide-text="true"
-                />
-
-                <!-- Aktionen -->
-                <VCardActions class="justify-center mt-2">
-                  <VBtn size="small" variant="outlined">
-                    <VIcon icon="tabler-list-details" />
-                    <span class="ms-2">Detail Seite</span>
-                  </VBtn>
-                  <IconBtn color="secondary" icon="tabler-share" />
-                </VCardActions>
-              </VCardText>
-            </VCard>
-          </VCol>
-        </VRow>
-      </VCard>
-    </VCol>
   </VRow>
 </template>
 
 <script setup lang="ts">
 import { ref, computed } from "vue";
 import Fieberkurve from "@/components/Fieberkurve.vue";
+import Buchkarten from '@/components/Buchkarten.vue';
 import { books } from "@/components/buecherdatenbank";
 import { genres } from "@/components/genredatenbank";