Finish search page
This commit is contained in:
@@ -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 />
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user