%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold m-0">My Bookings</h1>
<div class="page-header-bottom grid grid-cols-1 md:grid-cols-2 gap-x-4">
<div class="flex items-center justify-start">
<SearchForm
v-model="search_query"
placeholder="Search Bookings" />
</div>
</div>
</PageHeader>
<section class="px-6 lg:px-0"
v-if="bookings.length > 0">
<div class="max-w-5xl mx-auto w-full">
<Booking v-for="(booking, key) in bookings"
v-bind:key="key"
:booking="booking" />
</div>
</section>
<section v-else
class="py-20 w-full bg-gray text-center">
<span class="font-bold text-3xl">You have no bookings</span>
</section>
</div>
</template>
<script>
export default {
middleware: ['auth', 'hero'],
head () {
return {
titleTemplate: 'My Bookings | %s',
}
},
data() {
return {
search_query: ''
}
},
computed: {
bookings() {
return this.$store.state.hero.bookings.list
},
meta() {
return this.$store.state.hero.bookings.meta
},
},
async asyncData ({ store, query }) {
await store.dispatch('hero/bookings/get', query)
},
}
</script>
Zerion Mini Shell 1.0