%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">Messages</h1>
</PageHeader>
<section ref="scrollTo" v-if="messages.length > 0">
<div class="max-w-5xl mx-auto w-full">
<Message v-for="(message, key) in messages"
v-bind:key="key"
:message="message"
:user_id="user.data.id"
:page_number="current_page" />
<t-pagination
v-if="meta.total > meta.per_page"
:total-items="meta.total"
:per-page="meta.per_page"
:limit="meta.last_page"
v-model="current_page"
/>
</div>
</section>
<section v-else
class="py-20 w-full bg-gray text-center">
<span class="font-bold text-3xl">You have no messages</span>
</section>
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Messages | %s',
}
},
data() {
return {
working: false,
current_page: 1,
}
},
computed: {
user() {
return this.$auth.user;
},
messages() {
return this.$store.state.therapist.messages.list
},
meta() {
return this.$store.state.therapist.messages.meta
},
},
async mounted() {
await this.$store.dispatch('therapist/messages/get', {
user_id: this.user.data.id
})
},
methods: {
async changePage(pageNumber) {
this.$router.push({
query: {
page: pageNumber
}}
);
this.$store.dispatch('therapist/messages/get', {
user_id: this.user.data.id,
page: pageNumber
}).then(() => {
console.log('scroll!');
this.scrollToTop();
})
},
scrollToTop() {
if (this.$refs.scrollTo) {
this.$SmoothScroll(this.$refs.scrollTo, 500);
}
}
},
watch: {
current_page: function (val) {
this.changePage(val);
}
}
}
</script>
Zerion Mini Shell 1.0