58 lines
1.3 KiB
Vue
58 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { useBandStore } from '@/stores/band.store';
|
|
import cardViewHorizontal from '@/components/basics/cardViewHorizontal.vue';
|
|
import bandListItem from '@/components/pageParts/bandListItem.vue';
|
|
import bandFilterbar from './bandFilterbar.vue';
|
|
import { watch } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
|
|
const bandStore = useBandStore()
|
|
const router = useRouter()
|
|
|
|
bandStore.getBands()
|
|
|
|
// Refetch bands if query parameter changes
|
|
watch(() => router.currentRoute.value.query, () => {
|
|
bandStore.getBands()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<v-container>
|
|
<v-row>
|
|
<v-spacer />
|
|
|
|
<v-col cols="10">
|
|
<v-row>
|
|
<v-col>
|
|
<band-filterbar />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row
|
|
v-if="bandStore.fetchInProgress"
|
|
v-for="i in 3"
|
|
>
|
|
<v-col>
|
|
<card-view-horizontal :loading="true" />
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row
|
|
v-else-if="bandStore.bands.length > 0"
|
|
v-for="band in bandStore.bands"
|
|
>
|
|
<v-col>
|
|
<band-list-item
|
|
:band="band"
|
|
:concerts="band.concerts"
|
|
:genres="band.genres"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-col>
|
|
|
|
<v-spacer />
|
|
</v-row>
|
|
</v-container>
|
|
</template> |