Implement global search

software/src/pages/events/searchPage/index.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  Search
-</template>

software/src/pages/homePage/highlightCarousel.vue

@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import OutlinedButton from '@/components/basics/outlinedButton.vue';
-import { useConcertStore } from '@/data/stores/concertStore';
+import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useRouter } from 'vue-router';
 
-const concertStore = useConcertStore()
+const shoppingStore = useShoppingStore()
 const router = useRouter()
+
+shoppingStore.getEvents()
 </script>
 
 <template>
@@ -31,27 +33,27 @@ const router = useRouter()
     </template>
 
     <v-carousel-item
-      v-for="band in concertStore.bands"
-      :src="'http://localhost:3000/static/' + band.imageMembers" 
+      v-for="event in shoppingStore.events"
+      :src="'http://localhost:3000/static/' + event.band.imageMembers" 
       cover
     >
       <v-card
         class="position-absolute bottom-0"
-        :title="band.name"
+        :title="event.name"
         width="100%"
         :rounded="false"
         background-opacity="50%"
       >
         <v-card-text>
           <div>
-            {{ band.descriptionDe }}
+            {{ event.band.descriptionDe }}
           </div>
 
           <outlined-button
             append-icon="mdi-arrow-right"
             class="mt-2"
             color="primary"
-            @click="router.push('bands/' + band.name.replaceAll(' ', '-').toLowerCase())"
+            @click="router.push('bands/' + event.name.replaceAll(' ', '-').toLowerCase())"
           >
             {{ $t('tickets', 2) }}
           </outlined-button>

software/src/pages/homePage/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useConcertStore } from '@/data/stores/concertStore';
 import highlightCarousel from './highlightCarousel.vue';
 import sectionDivider from '@/components/basics/sectionDivider.vue';
 import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';

software/src/pages/locations/locationsPage/index.vue

@@ -4,6 +4,7 @@ import cardWithTopImage from '@/components/basics/cardViewTopImage.vue';
 import { useRouter } from 'vue-router';
 import { useShoppingStore } from '@/data/stores/shoppingStore';
 import { useFeedbackStore } from '@/data/stores/feedbackStore';
+import locationListItem from '@/components/pageParts/locationListItem.vue';
 
 const shoppingStore = useShoppingStore()
 const feedbackStore = useFeedbackStore()
@@ -51,15 +52,7 @@ shoppingStore.getCities()
 
           <v-row>
             <v-col v-for="location in city.locations" cols="3">
-              <card-with-top-image
-                :image="location.imageOutdoor"
-                :title="location.name"
-                @click="router.push('locations/' + location.name.replaceAll(' ', '-').toLowerCase())"
-              >
-                <div>
-                  {{ location.nrOfConcerts }} {{ $t('concert', location.nrOfConcerts) }}
-                </div>
-              </card-with-top-image>
+              <location-list-item :location="location" />
             </v-col>
           </v-row>
         </div>

software/src/pages/searchPage/index.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import searchBar from './searchBar.vue';
+import eventListItem from '@/components/pageParts/eventListItem.vue';
+import sectionDivider from '@/components/basics/sectionDivider.vue';
+import { useSearchStore } from '@/data/stores/searchStore';
+
+const searchStore = useSearchStore()
+</script>
+
+<template>
+  <v-container>
+    <v-row>
+      <v-spacer />
+
+      <v-col cols="10">
+        <v-row>
+          <v-col>
+            <search-bar />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            {{ searchStore.bands }}
+          </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-for="event in searchStore.events"
+        >
+          <v-col>
+            <event-list-item :event="event" :loading="searchStore.searchInProgress" />
+          </v-col>
+        </v-row>
+
+        <v-row
+          v-else-if="searchStore.alreadySearched && searchStore.searchInProgress"
+          v-for="i in 3"
+        >
+          <v-col>
+            <event-list-item :loading="searchStore.searchInProgress" />
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col>
+            <v-empty-state 
+              :title="$t('noEventsFound')"
+              icon="mdi-magnify"
+            />
+          </v-col>
+        </v-row>
+      </v-col>
+
+      <v-spacer />
+    </v-row>
+  </v-container>
+</template>

software/src/pages/searchPage/searchBar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import cardView from '@/components/basics/cardView.vue';
+import { useSearchStore } from '@/data/stores/searchStore';
+
+const searchStore = useSearchStore()
+</script>
+
+<template>
+  <card-view >
+    <v-text-field
+      variant="outlined"
+      hide-details
+      v-model="searchStore.searchTerm"
+      :placeholder="$t('enterSomeKeywords')"
+    >
+      <template #append-inner>
+        <v-btn
+          icon="mdi-magnify"
+          variant="plain"
+          @click="searchStore.startSearch"
+        />
+      </template>
+    </v-text-field>
+  </card-view>
+</template>