%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">Bookings</h1>
<div class="page-header-bottom grid grid-cols-3 gap-x-4">
<div class="flex items-center justify-start">
<SearchForm
v-model="search_query"
placeholder="Search Bookings" />
</div>
</div>
</PageHeader>
<section 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', 'therapist'],
head () {
return {
titleTemplate: 'Bookings | %s',
}
},
data() {
return {
isModalOpen: false,
search_query: null,
}
},
computed: {
bookings() {
return this.$store.state.therapist.bookings.list
},
meta() {
return this.$store.state.therapist.bookings.meta
},
},
async asyncData ({ store, query }) {
await store.dispatch('therapist/bookings/get', query)
},
methods: {
async search() {
await this.$store.dispatch('therapist/bookings/get', {
search_query: this.search_query
})
},
},
watch: {
search_query: function () {
this.search()
}
},
}
</script>
Zerion Mini Shell 1.0