%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="mb-1">
<div @click="modalOpen =! modalOpen"
class="relative p-6 bg-gray grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-6 cursor-pointer transition duration-100 hover:bg-opacity-75">
<div class="relative sm:col-span-1">
<div class="absolute top-0 left-0 w-full h-full border-15 border-yellow border-opacity-50"></div>
<img v-if="role == 'therapist'"
:src="booking.user.photo_url" />
<img v-else
:src="booking.therapist.user.photo_url" />
</div>
<div class="sm:col-span-2 md:col-span-5 grid grid-cols-1 md:grid-cols-6 py-2">
<div class="md:col-span-4 flex flex-col justify-between">
<div>
<small class="uppercase text-sm text-black text-opacity-80">{{ booking.date +' '+booking.time }}</small>
<h2 v-if="role == 'therapist'"
class="text-xl font-bold">{{ booking.user.full_name }}</h2>
<h2 v-else
class="text-xl font-bold">{{ booking.therapist.user.full_name }}</h2>
<span class="mt-2 inline-block bg-red text-white text-xs leading-3 p-2 rounded-xl"
v-if="booking.status == 'Cancelled'">Cancelled</span>
</div>
</div>
<div class="md:col-span-2 flex flex-col md:items-end md:justify-end">
<div v-if="booking.session">
<span class="block text-sm font-regular">{{ booking.session.name }}</span>
<template v-if="role == 'therapist'">
<span v-if="booking.user.mobile && booking.session.name == 'Phone'"
class="block text-sm font-regular">{{ booking.user.mobile }}</span>
</template>
<template v-else>
<span v-if="booking.therapist.user.mobile && booking.session.name == 'Phone'"
class="block text-sm font-regular">{{ booking.therapist.user.mobile }}</span>
</template>
</div>
</div>
</div>
</div>
<Modal v-model="modalOpen">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 h-full">
<div class="md:col-span-3 flex flex-col items-start justify-between bg-gray p-8">
<div class="w-full flex items-center">
<div class="w-40 mr-5 relative">
<div class="absolute top-0 left-0 w-full h-full border-4 border-yellow border-opacity-50"></div>
<img v-if="role == 'therapist'"
:src="booking.user.photo_url" />
<img v-else
:src="booking.therapist.user.photo_url" />
</div>
<div class="relative">
<h2 v-if="role == 'therapist'"
class="block mb-4 text-3xl font-bold">{{ booking.user.full_name }}</h2>
<h2 v-else
class="block mb-4 text-3xl font-bold">{{ booking.therapist.user.full_name }}</h2>
<span class="block my-1 text-lg font-medium">{{ booking.date }}</span>
<span class="block my-1 text-lg font-medium">{{ booking.time }}</span>
</div>
</div>
<div v-if="booking.session"
class="w-full flex flex-col items-end justify-center">
<span class="block mb-2 text-md font-medium uppercase">{{ booking.session.name }}</span>
<template v-if="role == 'therapist'">
<a class="text-2xl font-bold"
v-if="booking.session.name == 'Phone'"
:href="'tel:'+booking.user.phone">{{ booking.user.phone }}</a>
<a class="text-2xl font-bold"
v-else-if="booking.session.name == 'Video'"
:href="'tel:'+booking.user.phone">{{ booking.user.phone }}</a>
<a class="text-2xl font-bold"
v-else-if="booking.session.name == 'In Person'"
:href="'tel:'+booking.user.phone">{{ booking.user.phone }}</a>
</template>
<template v-else>
<a class="text-2xl font-bold"
v-if="booking.session.name == 'Phone'"
:href="'tel:'+booking.therapist.user.phone">{{ booking.therapist.user.phone }}</a>
<a class="text-2xl font-bold"
v-else-if="booking.session.name == 'Video'"
:href="'tel:'+booking.therapist.user.phone">{{ booking.therapist.user.phone }}</a>
<span class="text-2xl font-bold"
v-else-if="booking.session.name == 'In Person' && booking.address">{{ booking.address.formatted }}</span>
</template>
</div>
</div>
<div class="md:col-span-1 grid grid-cols-1 gap-y-4">
<template v-if="role == 'therapist'">
<a v-if="booking.user.phone"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light transition hover:bg-blue-light hover:text-white" :href="'tel:'+booking.user.phone">Phone Client</a>
<a v-if="booking.user.email"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light transition hover:bg-blue-light hover:text-white"
:href="'mailto:'+booking.user.email"
target="_blank">Email Client</a>
<button v-if="booking.is_cancelable == true && booking.status !== 'Cancelled'"
@click="cancelSession"
type="button"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light">Cancel Session</button>
</template>
<template v-else>
<a v-if="booking.therapist.user.phone"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light transition hover:bg-blue-light hover:text-white" :href="'tel:'+booking.therapist.user.phone">Phone Client</a>
<a v-if="booking.therapist.user.email"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light transition hover:bg-blue-light hover:text-white"
:href="'mailto:'+booking.therapist.user.email"
target="_blank">Email Client</a>
<button v-if="booking.is_cancelable == true && booking.status !== 'Cancelled'"
@click="cancelSession"
type="button"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light">Cancel Session</button>
</template>
<NuxtLink v-if="booking.is_reschedulable == true"
:to="'/booking/'+booking.therapist.slug+'/reschedule/'+booking.id"
class="flex items-center text-lg font-bold p-6 bg-gray text-blue-light transition hover:bg-blue-light hover:text-white" href="#">Reschedule Session</NuxtLink>
</div>
</div>
</Modal>
</div>
</template>
<script>
export default {
props: {
booking: {
type: Object,
required: true
}
},
data() {
return {
modalOpen: false
}
},
computed: {
role() {
if(this.$auth.loggedIn == true) {
return this.$auth.user.data.role.name;
}
}
},
methods: {
async cancelSession() {
this.$toast.info('Are you sure you want to cancel this booking?', {
duration : 5000,
action: [
{
text: 'Yes',
onClick : (e, toastObject) => {
toastObject.goAway(0);
this.working = true;
if(this.working == true) {
this.$axios.post('/booking/cancel/'+this.booking.id).then((response) => {
this.working = false;
this.modalOpen = false;
if(this.role == 'therapist') {
this.$store.dispatch('therapist/bookings/get')
} else {
this.$store.dispatch('bookings/get')
}
this.$toast.success('Booking cancelled succesfully').goAway(1000);
}).catch((error) => {
this.$toast.error(error).goAway(1000);
})
}
}
},
{
text: 'No',
onClick : (e, toastObject) => {
toastObject.goAway(0);
}
}
]
});
}
}
}
</script>
Zerion Mini Shell 1.0