%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='pb-48 md:pb-10 tas-bg-yellow'>
<div class="relative z-20 text-center">
<figure class="relative inline-block w-40 mb-8">
<div class="absolute top-0 left-0 w-full h-full border-15 border-yellow border-opacity-50"></div>
<img class="block w-full"
:src="client.photo_url"
:alt="client.first_name" />
</figure>
<h1>
<span class="block w-full text-7xl leading-none ">{{ client.first_name }}</span>
<span class="block w-full uppercase text-2xl">{{ client.last_name }}</span>
</h1>
</div>
<div class="page-header-bottom grid grid-cols-1 md:grid-cols-3 gap-x-4">
<div class="flex items-center justify-center md:justify-start">
<NuxtLink
class="uppercase font-medium flex items-center justify-center"
to="/therapist/clients">
<svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back
</NuxtLink>
</div>
<div class="flex items-center justify-center py-4 md:py-0">
<NuxtLink :to="'/booking/'+client.therapist.slug+'/create/'+client.id"
class="btn btn-primary btn-small rounded-full">Book a session</NuxtLink>
</div>
<div class="flex items-center justify-center md:justify-end">
<span v-if="client.next_booking"
class="font-bold">Next Session: {{ client.next_booking.date+' '+client.next_booking.time }}</span>
<span v-else
class="font-bold">No upcoming sessions</span>
</div>
</div>
</PageHeader>
<div class="max-w-5xl w-full mx-auto px-6 lg:px-0">
<div class="my-16">
<h2 class="mb-6 text-3xl font-bold">Booked Sessions ({{ client.bookings.length }})</h2>
<div v-if="client.bookings.length">
<Booking
v-for="(booking, key) in client.bookings"
v-bind:key="key"
:booking="booking" />
</div>
<div v-else
class="py-10 w-full bg-gray text-center">
<span class="font-bold text-2xl">No sessions booked</span>
</div>
</div>
<div class="my-16">
<h2 class="mb-6 text-3xl font-bold">Contact Details</h2>
<div v-if="client.phone"
class="bg-gray py-8 px-6 lg:px-10 flex flex-wrap items-center my-2">
<div class="w-full md:w-1/5">
<span class="block uppercase text-xs">Phone</span>
</div>
<div class="w-full md:w-3/5 my-2 md:0">
<span class="font-bold text-lg">{{ client.phone }}</span>
</div>
<div class="w-full md:w-1/5 flex flex-wrap items-center md:justify-end">
<a v-if="client.phone"
class="w-10 h-8 bg-no-repeat bg-center bg-contain icon-phone"
:href="'tel:'+client.phone"
target="_blank"></a>
</div>
</div>
<div v-if="client.email"
class="bg-gray py-8 px-6 lg:px-10 flex flex-wrap items-center my-2">
<div class="w-full md:w-1/5">
<span class="block uppercase text-xs">Email</span>
</div>
<div class="w-full md:w-3/5 my-2 md:0">
<span class="font-bold text-lg">{{ client.email }}</span>
</div>
<div class="w-full md:w-1/5 flex flex-wrap items-center md:justify-end">
<a v-if="client.email"
class="w-10 h-8 bg-no-repeat bg-center bg-contain icon-envelope"
:href="'mailto:'+client.email"
target="_blank"></a>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
head () {
return {
titleTemplate: this.client.full_name+' | %s',
}
},
computed: {
client() {
return this.$store.state.therapist.clients.single
}
},
async asyncData ({ store, params }) {
await store.dispatch('therapist/clients/single', params.id)
}
}
</script>
Zerion Mini Shell 1.0