75 lines
1.7 KiB
Vue
75 lines
1.7 KiB
Vue
<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> |