%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<div class="page-wrapper">
<PageHeader classObject='bg-pink'>
<img class="relative z-20 mb-8"
src="~assets/images/logo-white-small.svg" alt="Takeaseat" />
<span class="font-bold uppercase text-xl">Account</span>
<h1 class="relative z-20 text-5xl lg:text-7xl font-bold m-0">Profile</h1>
<AccountProgressBar slug="profile" />
<div class="page-header-bottom">
<AccountNav />
</div>
</PageHeader>
<Personalisation />
<Block title="About"
description="This is the clients' first impression of you. Let them see you as a person and how therapy will improve their lives. Use emotive words to express your passion for your work and ask open questions about what they want to achieve."
width="max-w-3xl">
<ValidationObserver ref="bioForm">
<form @submit.prevent="saveBio" role="form" method="POST">
<t-input-group label="About">
<div class="absolute top-0 -mt-5 px-3 right-0 text-xs text-pink">{{ (max_chars - form.description.length)+' / '+max_chars }}</div>
<ValidationProvider rules="required|max:750" name="About" v-slot="{ errors }">
<vue-editor
v-model="form.description"
:editor-toolbar="customToolbar" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<div class="flex items-center justify-center">
<button class="btn btn-small btn-primary rounded-full"
type="submit">
<span v-if="working == false">Save Bio</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>Saving</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</Block>
<ProfileRates />
<ProfileSessionTypes />
<Block title="Specialisms"
description="Let potential clients know what issues you excel at helping with. This will help with client matching when filtering.">
<ValidationObserver ref="specialismsForm">
<form @submit.prevent="saveSpecialisms" role="form" method="POST">
<t-input-group label="Primary Specialism">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-rich-select
v-model="form.primary_specialism"
:options="specialisms"
placeholder="Select One..."
value-attribute="id"
text-attribute="name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Other Specialisms">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-rich-select
multiple
v-model="form.specialisms"
:options="specialisms"
:close-on-select="false"
placeholder="Select Multiple..."
value-attribute="id"
text-attribute="name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<div class="flex items-center justify-center">
<button
class="btn btn-small btn-primary rounded-full"
type="submit">
<span v-if="working == false">Save Specialisms</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>Saving</span>
</span>
</button>
</div>
</form>
</ValidationObserver>
</Block>
<QuestionSectionOne />
</div>
</template>
<script>
export default {
middleware: ['auth', 'therapist'],
head () {
return {
titleTemplate: 'Profile | %s',
}
},
computed: {
user() {
return this.$auth.user;
},
session_types() {
return this.$store.state.session_types.list
},
specialisms() {
return this.$store.state.specialisms.list
},
tags() {
return this.$store.state.tags.list
}
},
data() {
return {
working: false,
customToolbar: [
["bold", "italic", "underline"]
],
max_chars: 750,
form: {
session_types: [],
description: '',
primary_specialism: null,
specialisms: []
}
}
},
async asyncData ({ store }) {
await store.dispatch('session_types/get')
await store.dispatch('specialisms/list')
await store.dispatch('tags/list')
},
async mounted() {
await this.$axios.$get('/profile').then((response) => {
for (const [key, value] of Object.entries(response.data)) {
if(value !== null) {
let formattedValue = value;
if (key === 'description') {
// Vue2Editor currently has a bug that doesn't like divs, so strip them
formattedValue = value.replace(/<div/g, "<p").replace(/<\/div>/g,"</p>");
}
this.form[key] = formattedValue;
} else if(Array.isArray(value) && value !== null) {
this.form[key].push(value);
}
}
})
await this.$axios.$get('/profile/specialisms').then((response) => {
this.form.primary_specialism = response.primary_specialism;
this.form.specialisms = response.specialisms;
})
},
methods: {
async saveSpecialisms() {
this.$refs.specialismsForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/profile/specialisms/update', {
primary_specialism: this.form.primary_specialism,
specialisms: this.form.specialisms
}).then((response) => {
this.working = false;
this.$toast.success(response).goAway(1500);
})
})
},
async saveBio() {
this.$refs.bioForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/profile/update', {
description: this.form.description
}).then((response) => {
this.working = false;
this.$toast.success('Succesfully updated your bio').goAway(1500);
})
})
}
}
}
</script>
Zerion Mini Shell 1.0