%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block
title="Practice Locations"
description="If you offer therapy session at specific locations such as a rented office, you should add them here.">
<ValidationObserver ref="form">
<form @submit.prevent="saveAddresses" role="form" method="POST">
<div class="mb-8"
v-for="(address, key) in addresses"
v-bind:key="key">
<h2 class="px-3 text-xl font-bold mb-3">Address {{ (key + 1) }}</h2>
<div class="relative mb-4">
<label :for="'address-'+key" class="form-label">Address</label>
<ValidationProvider rules="required" v-slot="{ errors }">
<input class="form-control"
v-model="addresses[key].address"
type="text"
:id="'address-'+key"
name="address" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="relative mb-4">
<label :for="'town-'+key" class="form-label">Town/City</label>
<ValidationProvider rules="required" v-slot="{ errors }">
<input class="form-control"
v-model="addresses[key].town_city"
type="text"
:id="'town-'+key"
name="town" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<div class="relative mb-4">
<label :for="'postcode-'+key" class="form-label">Postcode</label>
<ValidationProvider :rules="{ required: true, regex: /^(([gG][iI][rR] {0,}0[aA]{2})|((([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y]?[0-9][0-9]?)|(([a-pr-uwyzA-PR-UWYZ][0-9][a-hjkstuwA-HJKSTUW])|([a-pr-uwyzA-PR-UWYZ][a-hk-yA-HK-Y][0-9][abehmnprv-yABEHMNPRV-Y]))) {0,}[0-9][abd-hjlnp-uw-zABD-HJLNP-UW-Z]{2}))$/ }" v-slot="{ errors }">
<input class="form-control"
v-model="addresses[key].postcode"
type="text"
:id="'postcode-'+key"
name="Postcode" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
<ValidationProvider rules="required" v-slot="{ errors }">
<label class="flex items-center">
<t-radio
@change="changeDefaultRadioButtons(key)"
v-model="addresses[key].is_default"
name="default_address" />
<span class="ml-2 text-sm">Default Address</span>
</label>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
<div class="flex items-center justify-center my-4">
<button
@click="remove(key)"
class="uppercase text-red text-sm focus:outline-none"
type="button">Remove</button>
</div>
</div>
<div v-if="addresses.length > 0"
class="flex items-center justify-center my-6">
<button type="submit"
class="btn btn-small btn-primary rounded-full">
<span v-if="working == false">Save Addresses</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>
<div class="flex items-center justify-center">
<button
@click="add"
class="uppercase text-blue-light focus:outline-none"
type="button">Add Practice Location</button>
</div>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
addresses: []
}
},
async mounted() {
await this.$axios.$get('/account/details/addresses').then((response) => {
this.addresses = response.data;
})
},
methods: {
add() {
this.addresses.push({
address: '',
town_city: '',
postcode: '',
is_default: false
});
},
remove(key) {
this.addresses.splice(key, 1);
},
changeDefaultRadioButtons(key) {
this.addresses.forEach(function (item, index) {
if(index == key) {
this.addresses[index].is_default = true;
} else {
this.addresses[index].is_default = false;
}
}.bind(this));
},
async saveAddresses() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/account/details/addresses/update', {
addresses: this.addresses
}).then((response) => {
this.addresses = response.data;
this.working = false;
this.$store.dispatch('account/progress/get', { slug: 'settings' })
this.$toast.success('Succesfully updated your practice locations').goAway(1500);
}).catch(error => {
this.working = false;
this.$refs.form.setErrors(error.response.data.errors);
})
})
}
}
}
</script>
Zerion Mini Shell 1.0