%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Getting To Know you"
description="Add a little bit more professional detail and insight to who you are as a therapist. This will help to bring you the right clients."
width="max-w-5xl">
<ValidationObserver ref="form">
<form @submit.prevent="save" role="form" method="POST">
<ValidationProvider rules="image|size:10000" ref="provider" v-slot="{ validate, errors }">
<div class="mb-8 text-center">
<label class="w-full cursor-pointer"
for="photo-one">
<div class="rounded-lg overflow-hidden shadow"
v-if="photo_url">
<img class="w-full"
:src="photo_url" />
</div>
<div class="border border-dashed border-1 border-black border-opacity-20 bg-white p-10 rounded-lg"
v-else>
<span class="text-sm text-black text-opacity-50">Click to add a photo</span>
</div>
<input
@change="handleFileChange()"
class="hidden"
type="file"
ref="file"
id="photo-one" />
<span class="mt-4 block uppercase text-blue-light">Upload Photo</span>
</label>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</div>
<t-modal
ref="cropModal"
header="Crop & Upload">
<vue-croppie
ref="croppieRef"
:enableOrientation="true"
:enableResize="false"
:boundary="{ width: 500, height: 250}"
:viewport="{ width: 400, height: 200}"
@result="result">
</vue-croppie>
<template v-slot:footer>
<div class="flex flex-wrap justify-between">
<button
@click="$refs.cropModal.hide()"
class="btn btn-small btn-primary"
type="button">
Cancel
</button>
<button
class="btn btn-small btn-primary"
@click="crop()"
type="button">
<span v-if="working == false">Crop & Upload</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>Processing</span>
</span>
</button>
</div>
</template>
</t-modal>
</ValidationProvider>
<div class="max-w-lg w-full mx-auto">
<t-input-group label="Gender">
<ValidationProvider rules="required" name="enthicity" v-slot="{ errors }">
<t-select
v-model="form.gender"
placeholder="Select..."
:options="['Female', 'Male', 'Prefer not to say']" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Languages Spoken">
<ValidationProvider rules="required" name="enthicity" v-slot="{ errors }">
<t-rich-select
multiple
v-model="form.languages"
:options="languages"
:close-on-select="false"
placeholder="Select..."
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="Describe yourself"
feedback="Please select five options that describe you or your approach">
<ValidationProvider rules="required" name="tags" v-slot="{ errors }">
<t-rich-select
multiple
@change="limiter"
v-model="form.tags"
:options="tags"
:close-on-select="false"
placeholder="Select..."
value-attribute="id"
text-attribute="name" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<div v-for="(item, key) in questions"
v-bind:key="key">
<t-input-group :label="item.question">
<t-input
v-if="item.question_type == 1"
v-model="item.answer" />
<t-textarea
v-else
v-model="item.answer" />
</t-input-group>
</div>
<div class="flex items-center justify-center">
<button type="submit"
class="btn btn-primary rounded-full">
<span v-if="working == false">Save Changes</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>
</div>
</form>
</ValidationObserver>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
photo_url: '',
file: '',
form: {
gender: '',
languages: [],
tags: []
},
questions: []
}
},
computed: {
languages() {
return this.$store.state.languages.list
},
tags() {
return this.$store.state.tags.list
}
},
async mounted() {
await this.$store.dispatch('languages/get')
await this.$store.dispatch('tags/list')
await this.$axios.$post('/account/profile/questions', {
section_id: 1
}).then((response) => {
this.photo_url = response.image_one_url;
this.form.gender = response.gender;
this.form.languages = response.languages;
this.form.tags = response.tags;
this.questions = response.questions;
}).catch((error) => {
this.$toast.error(error).goAway(3000);
})
},
methods: {
async handleFileChange(e) {
const { valid } = await this.$refs.provider.validate(e);
let fileUrl = this.$refs.file.files[0];
if (valid == true) {
this.$refs.cropModal.show()
if(fileUrl) {
setTimeout(() => {
this.$refs.croppieRef.bind({
url: URL.createObjectURL(fileUrl)
});
}, 250)
}
}
},
crop() {
let options = {
format: 'jpeg',
size: { width: 1500 },
}
this.$refs.croppieRef.result(options, (output) => {
this.file = output;
this.uploadImage();
});
},
result(output) {
this.file = output;
},
async save() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/account/profile/questions/create', {
gender: this.form.gender,
languages: this.form.languages,
questions: this.questions,
tags: this.form.tags
}).then((response) => {
this.working = false;
this.$store.dispatch('account/progress/get', { slug: 'profile' })
this.$toast.success(response).goAway(1500);
}).catch((error) => {
this.working = false;
this.$refs.form.setErrors(error.response.data.errors);
})
})
},
async uploadImage() {
let formData = new FormData();
formData.append('file', this.file);
formData.append('prefix', 'image_one_');
this.working = true;
await this.$axios.$post('/account/profile/images/upload', formData
).then((response) => {
this.working = false;
this.photo_url = response;
this.$refs.cropModal.hide()
this.$store.dispatch('account/progress/get', { slug: 'profile' })
this.$toast.success('Successfully updated your photo').goAway(1500);
}).catch((error) => {
this.working = false;
this.$refs.cropModal.hide()
this.$refs.form.setErrors(error.response.data.errors);
})
},
limiter(e) {
if(e.length > 5) {
this.$toast.info('You can only select a max of five').goAway(1000);
e.pop()
}
}
}
}
</script>
Zerion Mini Shell 1.0