Finish search page

This commit is contained in:
2024-10-11 18:59:19 +02:00
parent 8f0de99634
commit 7b991d2ff8
8 changed files with 227 additions and 54 deletions

View File

@@ -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 />

View File

@@ -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