%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper" ref="scrollTo">
<PageHeader classObject="bg-orange z-30">
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<h1 class="relative mb-10 z-20 text-5xl lg:text-7xl font-bold">{{ location.town_city + ' therapists' }}</h1>
<NuxtLink class="flex items-center relative z-20 text-white text-lg"
to="/therapists">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 17l-5-5m0 0l5-5m-5 5h12" />
</svg>
<span>View all Therapists</span>
</NuxtLink>
</PageHeader>
<div class="px-6 lg:px-0">
<div v-if="meta.total > 0">
<div class="grid gap-x-8 gap-y-12 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
<Therapist
v-for="(therapist, key) in therapists"
v-bind:key="key"
:therapist="therapist" />
</div>
<div
v-if="meta.total > meta.current_page"
class="mt-8 sm:flex sm:items-center sm:justify-center sm:px-6 lg:px-0">
<button v-if="current_page !== 1"
@click="previousPage"
class="btn btn-primary rounded-full shadow-md my-2 sm:my-0 sm:mx-3">Previous Page</button>
<button v-if="current_page < meta.last_page"
@click="nextPage"
class="btn btn-primary rounded-full shadow-md my-2 sm:my-0 sm:mx-3">Next Page</button>
</div>
</div>
<div v-else
class="text-center py-10 md:py-20 px-6 md:px-8 bg-gray">
<p class="text-2xl md:text-4xl font-bold m-0">No therapists found</p>
</div>
</div>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: this.location.town_city+' therapists | %s',
meta: [
{
hid: 'description',
name: 'description',
content: 'Take a seat with a Therapist location in '+this.location.town_city+' face to face, via video or telephone and start the journey to a new you.'
}
],
}
},
data() {
return {
timer: null,
current_page: 1,
}
},
computed: {
location() {
return this.$store.state.location.location
},
therapists() {
return this.$store.state.location.therapists
},
meta() {
return this.$store.state.location.meta
},
},
async asyncData ({ store, params }) {
await store.dispatch('location/get', params.slug)
},
methods: {
async previousPage() {
this.scrollToTop();
this.current_page = this.current_page - 1;
this.$router.push({
query: {
page: this.current_page
}}
);
await this.$store.dispatch('therapists/get', {
page: this.current_page
})
},
async nextPage() {
this.scrollToTop();
this.current_page = this.current_page + 1;
this.$router.push({
query: {
page: this.current_page
}}
);
await this.$store.dispatch('therapists/get', {
page: this.current_page
})
},
scrollToTop() {
if (this.$refs.scrollTo) {
this.$refs.scrollTo.scrollIntoView({ behaviour: "smooth" });
}
}
},
}
</script>
Zerion Mini Shell 1.0