update

frontend/src/components/AehnlichTab.vue

@@ -1,11 +1,15 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import MovieCard from './MovieCard.vue'
 import { filterParameter } from '../filter.js'
 
 // Der Ausgangsfilm steht als erste Karte davor, macht einundzwanzig
 const TREFFER = 20
 
+// Eine Detailkarte nimmt die halbe Breite ein, eine kompakte ein Achtel.
+// Gleich viele Vorschläge wären mal eine Reihe, mal zehn.
+const VORSCHLAEGE = { kompakt: 20, details: 8 }
+
 const props = defineProps({
   filter: { type: Object, default: () => ({}) },
   ansicht: { type: String, default: 'kompakt' },
@@ -16,7 +20,11 @@ const props = defineProps({
 const emit = defineEmits(['open', 'gestartet'])
 
 const query = ref('')
-const vorschlaege = ref([])
+const gefunden = ref([])
+// Beim Wechsel der Ansicht wird nur neu geschnitten, nicht neu gesucht
+const vorschlaege = computed(() =>
+  gefunden.value.slice(0, VORSCHLAEGE[props.ansicht] ?? 8)
+)
 const gewaehlt = ref(null)
 const treffer = ref([])
 const laden = ref(false)
@@ -32,7 +40,7 @@ let laufendeTreffer = 0
 // dazu passt.
 async function suchen(term) {
   if (term.trim().length < 2) {
-    vorschlaege.value = []
+    gefunden.value = []
     return
   }
   const meine = ++laufende
@@ -41,7 +49,7 @@ async function suchen(term) {
     if (!resp.ok) throw new Error('Suche fehlgeschlagen')
     const daten = await resp.json()
     if (meine !== laufende) return
-    vorschlaege.value = daten.slice(0, 8)
+    gefunden.value = daten
   } catch (err) {
     if (meine === laufende) fehler.value = err.message
   }
@@ -50,7 +58,7 @@ async function suchen(term) {
 async function waehlen(film) {
   const meine = ++laufendeWahl
   gewaehlt.value = film
-  vorschlaege.value = []
+  gefunden.value = []
   query.value = ''
   nachladen()