%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="And finally…"
description="These questions are optional and aim to bring you more to life as a person. We feel this will help clients when choosing to work with you."
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-two">
<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-two" />
<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>
</ValidationProvider>
<div class="max-w-lg w-full mx-auto">
<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: '',
questions: []
}
},
async mounted() {
await this.$axios.$post('/account/profile/questions', {
section_id: 2
}).then((response) => {
this.photo_url = response.image_two_url;
this.questions = response.questions;
}).catch((error) => {
this.$toast.error(error).goAway(3000)
})
},
methods: {
async handleFileChange(e) {
const { valid } = await this.$refs.provider.validate(e);
if (valid) {
this.photo_url = URL.createObjectURL(this.$refs.file.files[0]);
this.file = this.$refs.file.files[0];
}
},
async save() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.uploadImage();
this.$axios.$post('/account/profile/questions/create', {
questions: this.questions
}).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.$toast.error(error).goAway(1500);
})
})
},
async uploadImage() {
let formData = new FormData();
formData.append('file', this.file);
formData.append('prefix', 'image_two_');
formData.append('photo_title', this.form.photo_title);
formData.append('photo_description', this.form.photo_description);
this.working = true;
await this.$axios.$post('/account/profile/images/upload', formData).then((response) => {
this.working = false;
}).catch((error) => {
this.$toast.error(error).goAway(1500);
})
}
}
}
</script>
Zerion Mini Shell 1.0