%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">Settings</h1>
<AccountProgressBar slug="settings" />
<div class="page-header-bottom">
<AccountNav />
</div>
</PageHeader>
<Block title="Communication"
description="Please select the preferred channels take a seat can communicate with you. These preferences can be updated at any time.">
<ValidationObserver ref="form">
<form @submit.prevent="submit" role="form" method="POST">
<t-input-group label="Receive Communications Via:">
<ValidationProvider rules="required" v-slot="{ errors }">
<label class="px-3 my-3 flex items-center">
<t-checkbox
@change="submit"
v-model="communication_settings.is_emailed_allowed"
name="communication" />
<span class="ml-2 text-sm">Email</span>
</label>
<label class="px-3 my-3 flex items-center">
<t-checkbox
@change="submit"
v-model="communication_settings.is_phone_allowed"
name="communication" />
<span class="ml-2 text-sm">Phone</span>
</label>
<label class="px-3 my-3 flex items-center">
<t-checkbox
@change="submit"
v-model="communication_settings.is_post_allowed"
name="communication" />
<span class="ml-2 text-sm">Post</span>
</label>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</form>
</ValidationObserver>
</Block>
<AccountPersonal />
<AccountBusiness v-if="is_therapist" />
<AccountLocations v-if="is_therapist" />
<AccountSecurity />
</div>
</template>
<script>
export default {
middleware: ['auth'],
head () {
return {
titleTemplate: 'Settings | %s',
}
},
data() {
return {
working: false,
communication_settings: {
is_emailed_allowed: false,
is_phone_allowed: false,
is_post_allowed: false,
}
}
},
computed: {
is_therapist() {
return this.$auth.user.data.role.name == 'therapist';
}
},
async asyncData ({ app }) {
const communication_settings = await app.$axios.$get('/account/settings')
return { communication_settings }
},
methods: {
async submit() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.post('/account/settings', {
communication_settings: this.communication_settings
}).then((res) => {
if (res.status === 200) {
this.working = false;
this.$store.dispatch('account/progress/get', { slug: 'settings' })
this.$toast.success('Successfully updated your settings').goAway(1000);
}
})
})
}
}
}
</script>
Zerion Mini Shell 1.0