%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">Clients</h1>
<div class="page-header-bottom grid md:grid-cols-3 gap-x-4">
<div class="flex items-center justify-center md:justify-start mb-6 md:mb-0">
<SearchForm
v-model="search_query"
placeholder="Search Clients" />
</div>
<div class="flex items-center justify-center">
<button
@click="isModalOpen =! isModalOpen"
class="w-auto btn btn-small btn-primary uppercase font-medium rounded-full">+ Add none-take a seat client</button>
</div>
</div>
</PageHeader>
<Block v-if="invitations.length > 0 "
title="Pending Invitations"
width="max-w-2xl">
<Invitation v-for="(invitation, key) in invitations"
v-bind:key="key"
:invitation="invitation" />
</Block>
<section
v-if="clients.length > 0 "
class="pt-2 px-6 md:px-8 lg:px-0">
<div class="max-w-5xl mx-auto w-full">
<Client v-for="(client, key) in clients"
v-bind:key="key"
:client="client" />
</div>
</section>
<section v-else
class="py-20 w-full bg-gray text-center">
<span class="font-bold text-3xl">You have no clients</span>
</section>
<Modal v-model="isModalOpen"
title="Invite none-take a seat client">
<div class="bg-gray h-full p-6">
<div class="max-w-lg w-full mx-auto">
<h2 class="text-center text-3xl font-bold mb-6">Invite a none-take a seat client</h2>
<ValidationObserver ref="invitationForm">
<form @submit.prevent="submit" role="form" method="POST">
<ValidationProvider rules="required" name="first_name" v-slot="{ errors }">
<t-input-group label="First Name">
<t-input v-model="form.first_name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<ValidationProvider rules="required" name="last_name" v-slot="{ errors }">
<t-input-group label="Last Name">
<t-input v-model="form.last_name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<ValidationProvider rules="required|email" name="email" v-slot="{ errors }">
<t-input-group label="Email">
<t-input type="email"
v-model="form.email" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</t-input-group>
</ValidationProvider>
<div class="flex items-center justify-center">
<button type="submit"
class="btn btn-primary">
<span v-if="working == false">Send Invite</span>
<span
class="flex items-center justify-center"
v-else>
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Sending</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</div>
</div>
</Modal>
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Clients | %s',
}
},
data() {
return {
working: false,
isModalOpen: false,
search_query: null,
form: {
first_name: '',
last_name: '',
email: ''
}
}
},
computed: {
clients() {
return this.$store.state.therapist.clients.list
},
meta() {
return this.$store.state.therapist.clients.meta
},
invitations() {
return this.$store.state.therapist.invitations.list
},
},
async asyncData ({ store }) {
await store.dispatch('therapist/clients/get')
await store.dispatch('therapist/invitations/get')
},
methods: {
async search() {
await this.$store.dispatch('therapist/clients/get', {
search_query: this.search_query
})
},
async submit() {
this.$refs.invitationForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/therapist/invitations/create', this.form).then((response) => {
this.working = false;
this.isModalOpen = false;
this.$store.dispatch('therapist/invitations/get')
this.$toast.success('Successfully invited '+this.form.first_name+' to join Takeaseat').goAway(3000);
}).catch((error) => {
this.working = false;
this.$refs.invitationForm.setErrors(error.response.data.errors);
})
})
}
},
watch: {
search_query: function () {
this.search()
}
},
}
</script>
Zerion Mini Shell 1.0