%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="mb-1 relative p-6 bg-gray grid grid-cols-1 sm:grid-cols-3 md:grid-cols-6 gap-6 transition duration-100 hover:bg-opacity-75">
<div class="absolute z-20 top-0 left-0 w-full h-full bg-white border border-black border-opacity-10 bg-opacity-75 flex flex-col items-center justify-center"
v-if="isOverlayShowing">
<span class="block mb-3 font-medium">Are you sure you want to delete this message?</span>
<div class="w-full px-8 sm:w-auto grid grid-cols-2 gap-4">
<button class="bg-red border border-red appearance-none px-3 py-3 text-center rounded-full text-white transition ease-in-out duration-200" @click="remove(message.id)">Yes</button>
<button class="btn btn-primary btn-small rounded-full" @click="isOverlayShowing = false">No</button>
</div>
</div>
<div class="sm:col-span-1">
<div class="relative">
<div class="absolute top-0 left-0 w-full h-full border-15 border-yellow border-opacity-50"></div>
<img class="w-full"
:src="'https://eu.ui-avatars.com/api/?name='+message.name" />
</div>
<div class="my-2 sm:my-0 flex justify-center sm:block">
<button @click="isOverlayShowing = true" class="sm:absolute sm:top-2 sm:right-2 sm:w-6 sm:h-6 sm:bg-red sm:rounded-full text-red sm:text-white flex items-center justify-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 hidden sm:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span class="block sm:hidden">Remove</span>
</button>
</div>
</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">
<small class="uppercase text-sm text-black text-opacity-80">{{ message.created_at }}</small>
<h2 class="text-2xl font-bold">{{ message.name }}</h2>
<div class="my-3 flex flex-col">
<a class="inline-flex items-center my-1 hover:text-blue-light transition" :href="'mailto:'+message.email" target="_blank">
<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="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
{{ message.email }}
</a>
<a class="inline-flex items-center my-1 hover:text-blue-light transition" :href="'tel:'+message.phone" target="_blank">
<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="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
</svg>
{{ message.phone }}
</a>
</div>
<button class="text-blue-light text-sm font-bold "
@click="readMessage">
<span v-if="working == true">Revealing Message...</span>
<span v-else-if="isMessageShowing == false">Reveal Message</span>
<span v-else>Hide Message</span>
</button>
<div class="mt-6"
v-if="isMessageShowing"
v-html="message.message" />
</div>
</div>
</div>
</template>
<script>
export default {
props: {
message: {
type: Object,
required: true
},
user_id: {
type: Number,
required: true
},
page_number: {
type: Number,
required: true
}
},
data() {
return {
working: false,
isOverlayShowing: false,
isMessageShowing: false
}
},
methods: {
async readMessage() {
if(this.isMessageShowing == false) {
this.working = true;
await this.$axios.patch('/user/'+this.user_id+'/messages/'+this.message.id).then((response) => {
this.$store.dispatch('therapist/messages/get', {
user_id: this.user_id,
page: this.page_number
});
this.isMessageShowing = true;
this.working = false;
}).catch((error) => {
this.working = false;
this.$toast.error('Oops, something went wrong, please try again later.').goAway(3000);
})
} else {
this.isMessageShowing = false;
}
},
async remove(message_id) {
await this.$axios.delete('/user/'+this.user_id+'/messages/'+message_id)
.then((response) => {
if(response.status == 200) {
this.isOverlayShowing = false;
this.$store.dispatch('therapist/messages/get', {
user_id: this.user_id,
page: this.page_number
});
this.$toast.success('Successfully deleted message #'.message_id).goAway(3000);
}
}).catch((error) => {
this.isOverlayShowing = false;
this.working = false;
this.$toast.error('Oops, something went wrong, please try again later.').goAway(3000);
})
}
}
}
</script>
Zerion Mini Shell 1.0