Finish search page

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)

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)

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>

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"
 }

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"
 }

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,30 +23,104 @@ const searchStore = useSearchStore()
           </v-col>
         </v-row>
 
+        <div v-if="searchStore.alreadySearched">
           <v-row>
             <v-col>
-            {{ searchStore.bands }}
+              <section-divider :title="$t('band', 2)" />
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            {{ searchStore.locations }}
-          </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-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>
+
+
+
+          <!-- Section Location results -->
+          <v-row>
+            <v-col>
+              <section-divider :title="$t('location', 2)" />
+            </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>
@@ -55,26 +133,16 @@ const searchStore = useSearchStore()
             </v-col>
           </v-row>
 
-        <v-row
+          <v-row v-else >
-          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-col>
               <v-empty-state 
                 :title="$t('noEventsFound')"
-              icon="mdi-magnify"
+                icon="mdi-party-popper"
               />
             </v-col>
           </v-row>
+        </div>
+
       </v-col>
 
       <v-spacer />

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

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
@@ -108,3 +110,21 @@ export function lowestTicketPrice(concerts: Array<ConcertModel>): string {
     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) {
+    return "0"
+  }
+}