From 1d4daac9aea83af3dd7af38fc750ae4743f29530 Mon Sep 17 00:00:00 2001
From: Tobias Zoghaib <tobias.zoghaib@stud.uni-hannover.de>
Date: Fri, 11 Oct 2024 18:59:19 +0200
Subject: [PATCH] Finish search page

---
 software/backend/routes/band.routes.ts        |  13 +-
 software/backend/routes/location.routes.ts    |   3 +-
 .../src/components/pageParts/bandListItem.vue |  68 +++++++
 software/src/locales/de.json                  |   4 +-
 software/src/locales/en.json                  |   4 +-
 software/src/pages/searchPage/index.vue       | 168 ++++++++++++------
 software/src/pages/searchPage/searchBar.vue   |   1 +
 software/src/scripts/concertScripts.ts        |  20 +++
 8 files changed, 227 insertions(+), 54 deletions(-)
 create mode 100644 software/src/components/pageParts/bandListItem.vue

diff --git a/software/backend/routes/band.routes.ts b/software/backend/routes/band.routes.ts
index 8632cbc..04fc8d1 100644
--- a/software/backend/routes/band.routes.ts
+++ b/software/backend/routes/band.routes.ts
@@ -118,8 +118,19 @@ band.get("/search", (req: Request, res: Response) => {
     where: {
       name: {
         [Op.substring]: req.query.value
+      },
+    },
+    include: [
+      {
+        model: Event,
+        include: [
+          Concert
+        ]
+      },
+      {
+        model: Genre
       }
-    }
+    ]
   })
     .then(bands => {
       res.status(200).json(bands)
diff --git a/software/backend/routes/location.routes.ts b/software/backend/routes/location.routes.ts
index 209c787..33c10eb 100644
--- a/software/backend/routes/location.routes.ts
+++ b/software/backend/routes/location.routes.ts
@@ -116,7 +116,8 @@ location.get("/search", (req: Request, res: Response) => {
       name: {
         [Op.substring]: req.query.value
       }
-    }
+    },
+    include: [ Concert ]
   })
     .then(locations => {
       res.status(200).json(locations)
diff --git a/software/src/components/pageParts/bandListItem.vue b/software/src/components/pageParts/bandListItem.vue
new file mode 100644
index 0000000..8852127
--- /dev/null
+++ b/software/src/components/pageParts/bandListItem.vue
@@ -0,0 +1,68 @@
+<script setup lang="ts">
+import { BandModel } from '@/data/models/acts/bandModel';
+import { lowestTicketPrice, lowestTicketPriceEvents } from '@/scripts/concertScripts';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import { EventModel } from '@/data/models/acts/eventModel';
+import { useRouter } from 'vue-router';
+import { GenreModel } from '@/data/models/acts/genreModel';
+import { EventApiModel } from '@/data/models/acts/eventApiModel';
+
+const router = useRouter()
+
+defineProps({
+  /** Band to display */
+  band: {
+    type: BandModel,
+    required: true
+  },
+
+  /** Events where the band participate */
+  events: {
+    type: Array<EventApiModel>,
+    required: true
+  },
+
+  genres: {
+    type: Array<GenreModel>,
+    required: true
+  },
+
+  /** Display text parts as skeleton */
+  loading: Boolean
+})
+</script>
+
+<template>
+  <card-view-horizontal
+    v-if="!loading"
+    :title="band.name"
+    :image="'http://localhost:3000/static/' + band.logo"
+    @click="router.push('/bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
+  >
+    <template #content>
+      <div>
+        <v-chip
+          v-for="genre in genres"
+          class="mr-2 my-1"
+          variant="flat"
+        >
+          {{ genre.name }}
+        </v-chip>
+      </div>
+    </template>
+
+    <template #append>
+      <div>
+        <div class="text-secondary font-weight-medium text-h6 pb-1">
+          {{ $t('from') + ' ' + lowestTicketPriceEvents(events) + ' €' }}
+        </div>
+
+        <div>
+          <v-btn variant="flat" color="secondary">
+            {{ events.length }} {{ $t('event', events.length) }}
+          </v-btn>
+        </div>
+      </div>
+    </template>
+  </card-view-horizontal>
+</template>
\ No newline at end of file
diff --git a/software/src/locales/de.json b/software/src/locales/de.json
index 8c1cd72..5f820ef 100644
--- a/software/src/locales/de.json
+++ b/software/src/locales/de.json
@@ -171,5 +171,7 @@
   },
   "goToTheConcert": "Zum Konzert",
   "selectedConcert": "Ausgewähltes Konzert",
-  "enterSomeKeywords": "Füge Schlagworte ein um nach Bands, Events, Konzerten und Veranstaltungsorten zu suchen"
+  "enterSomeKeywords": "Füge Schlagworte ein um nach Bands, Events, Konzerten und Veranstaltungsorten zu suchen",
+  "noBandFound": "Keine Band gefunden",
+  "noLocationsFound": "Keine Veranstaltungsorte gefunden"
 }
diff --git a/software/src/locales/en.json b/software/src/locales/en.json
index b8feb18..284b3d4 100644
--- a/software/src/locales/en.json
+++ b/software/src/locales/en.json
@@ -171,5 +171,7 @@
   },
   "goToTheConcert": "To the concert",
   "selectedConcert": "Selected Concert",
-  "enterSomeKeywords": "Enter keywords to search for bands, events, concerts and locations"
+  "enterSomeKeywords": "Enter keywords to search for bands, events, concerts and locations",
+  "noBandFound": "No band found",
+  "noLocationsFound": "No location found"
 }
diff --git a/software/src/pages/searchPage/index.vue b/software/src/pages/searchPage/index.vue
index 90adbae..588399f 100644
--- a/software/src/pages/searchPage/index.vue
+++ b/software/src/pages/searchPage/index.vue
@@ -2,6 +2,10 @@
 import searchBar from './searchBar.vue';
 import eventListItem from '@/components/pageParts/eventListItem.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
+import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
+import locationListItem from '@/components/pageParts/locationListItem.vue';
+import cardViewTopImage from '@/components/basics/cardViewTopImage.vue';
+import bandListItem from '@/components/pageParts/bandListItem.vue';
 import { useSearchStore } from '@/data/stores/searchStore';
 
 const searchStore = useSearchStore()
@@ -19,62 +23,126 @@ const searchStore = useSearchStore()
           </v-col>
         </v-row>
 
-        <v-row>
-          <v-col>
-            {{ searchStore.bands }}
-          </v-col>
-        </v-row>
+        <div v-if="searchStore.alreadySearched">
+          <v-row>
+            <v-col>
+              <section-divider :title="$t('band', 2)" />
+            </v-col>
+          </v-row>
 
-        <v-row>
-          <v-col>
-            {{ searchStore.locations }}
-          </v-col>
-        </v-row>
+          <v-row
+            v-if="searchStore.searchInProgress"
+            v-for="i in 2"
+          >
+            <v-col>
+              <card-view-horizontal :loading="true" />
+            </v-col>
+          </v-row>
+
+          <v-row 
+            v-else-if="searchStore.bands.length > 0"
+            v-for="band in searchStore.bands">
+            <v-col>
+              <band-list-item
+                :band="band"
+                :events="band.events"
+                :genres="band.genres"
+                :loading="searchStore.searchInProgress"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row v-else >
+            <v-col>
+              <v-empty-state 
+                :title="$t('noBandFound')"
+                icon="mdi-guitar-electric"
+              />
+            </v-col>
+          </v-row>
 
 
-        <v-row>
-          <v-col>
-            <section-divider
-              v-if="searchStore.alreadySearched"
-              :title="$t('event', 2)"
-            />
-          </v-col>
-        </v-row>
 
-        <v-row
-          v-if="searchStore.alreadySearched && !searchStore.searchInProgress"
-          v-for="event in searchStore.events"
-        >
-          <v-col>
-            <event-list-item
-              :event="event"
-              :band="event.band"
-              :concerts="event.concerts"
-              :loading="searchStore.searchInProgress"
-            />
-          </v-col>
-        </v-row>
+          <!-- Section Location results -->
+          <v-row>
+            <v-col>
+              <section-divider :title="$t('location', 2)" />
+            </v-col>
+          </v-row>
 
-        <v-row
-          v-else-if="searchStore.alreadySearched && searchStore.searchInProgress"
-          v-for="i in 3"
-        >
-          <v-col>
-            Loading...
-            <!-- <event-list-item
-              :loading="searchStore.searchInProgress"
-            /> -->
-          </v-col>
-        </v-row>
+          <v-row
+            v-if="searchStore.searchInProgress"
+          >
+            <v-col v-for="i in 4">
+              <card-view-top-image :loading="true" />
+            </v-col>
+          </v-row>
+
+          <v-row 
+            v-else-if="searchStore.locations.length > 0"
+          >
+            <v-col
+              cols="3"
+              v-for="locaiton in searchStore.locations"
+            >
+              <location-list-item
+                :location="locaiton"
+                :concerts="locaiton.concerts"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row v-else >
+            <v-col>
+              <v-empty-state 
+                :title="$t('noLocationsFound')"
+                icon="mdi-city"
+              />
+            </v-col>
+          </v-row>
+
+
+
+          <!-- Section Event results -->
+          <v-row>
+            <v-col>
+              <section-divider :title="$t('event', 2)" />
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-if="searchStore.searchInProgress"
+            v-for="i in 2"
+          >
+            <v-col>
+              <card-view-horizontal :loading="true" />
+            </v-col>
+          </v-row>
+
+          <v-row
+            v-else-if="searchStore.events.length > 0"
+            v-for="event in searchStore.events"
+          >
+            <v-col>
+              <event-list-item
+                :event="event"
+                :band="event.band"
+                :concerts="event.concerts"
+                :loading="searchStore.searchInProgress"
+              />
+            </v-col>
+          </v-row>
+
+          <v-row v-else >
+            <v-col>
+              <v-empty-state 
+                :title="$t('noEventsFound')"
+                icon="mdi-party-popper"
+              />
+            </v-col>
+          </v-row>
+        </div>
 
-        <v-row>
-          <v-col>
-            <v-empty-state 
-              :title="$t('noEventsFound')"
-              icon="mdi-magnify"
-            />
-          </v-col>
-        </v-row>
       </v-col>
 
       <v-spacer />
diff --git a/software/src/pages/searchPage/searchBar.vue b/software/src/pages/searchPage/searchBar.vue
index 840fba6..b4ffc32 100644
--- a/software/src/pages/searchPage/searchBar.vue
+++ b/software/src/pages/searchPage/searchBar.vue
@@ -12,6 +12,7 @@ const searchStore = useSearchStore()
       hide-details
       v-model="searchStore.searchTerm"
       :placeholder="$t('enterSomeKeywords')"
+      @keyup.enter="searchStore.startSearch"
     >
       <template #append-inner>
         <v-btn
diff --git a/software/src/scripts/concertScripts.ts b/software/src/scripts/concertScripts.ts
index 6eb3c2d..a3f912f 100644
--- a/software/src/scripts/concertScripts.ts
+++ b/software/src/scripts/concertScripts.ts
@@ -1,6 +1,8 @@
 import { RatingModel } from "@/data/models/acts/ratingModel"
 import { dateToHumanReadableString } from "./dateTimeScripts"
 import { ConcertModel } from "@/data/models/acts/concertModel"
+import { EventModel } from "@/data/models/acts/eventModel"
+import { EventApiModel } from "@/data/models/acts/eventApiModel"
 
 /**
  * Calculate a price based on parameters
@@ -102,6 +104,24 @@ export function lowestTicketPrice(concerts: Array<ConcertModel>): string {
 
   priceArray.sort()
 
+  try {
+    return priceArray[0].toFixed(2)
+  } catch(e) {
+    return "0"
+  }
+}
+
+export function lowestTicketPriceEvents(events: Array<EventApiModel>) {
+  const priceArray : Array<number> = []
+
+  for (let event of events) {
+    for (let concert of event.concerts) {
+      priceArray.push(concert.price)
+    }
+  }
+
+  priceArray.sort()
+
   try {
     return priceArray[0].toFixed(2)
   } catch(e) {