%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Memberships"
description="Please provide valid details of your governing body below."
width="max-w-3xl">
<ValidationObserver ref="membershipsForm">
<form @submit.prevent="saveMemberships" role="form" method="POST">
<div class="mb-4 relative"
:class="key !== 0 ? 'border-t-2 border-black border-opacity-10 pt-10' : ''"
v-for="(membership, key) in memberships"
v-bind:key="key">
<div class="relative">
<div class="absolute right-full pr-5 font-bold">{{ (key + 1) }}</div>
<button
v-if="key !== 0"
@click="removeMembership(key)"
class="absolute top-0 right-0 z-30 uppercase text-red text-xs focus:outline-none"
type="button">Remove</button>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8">
<t-input-group label="Governing body">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-select
v-model="membership.name"
placeholder="Select..."
:options="['BACP', 'UKCP', 'UPCA', 'IACP', 'HCPC', 'COSCA', 'COSRT', 'BPC', 'ACC', 'NCP', 'NACHP', 'IFPP', 'ICP', 'APPI', 'ACCPH', 'NCS', 'FDAP']"
></t-select>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Membership Number">
<ValidationProvider rules="required|numeric" name="membership number" v-slot="{ errors }">
<t-input
v-model="membership.number"
:name="'number-'+key"
:id="'number-'+key"
placeholder="Membership Number" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
</div>
<t-input-group label="Expiry Date">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-datepicker
v-model="membership.expiry_date" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<label class="flex items-center ml-2 mb-6">
<t-checkbox
v-model="membership.is_accredited"
:name="'accredited-'+key" />
<span class="ml-2 text-sm">I am accredited</span>
</label>
</div>
<div class="flex items-center justify-center mb-10">
<button
:disabled="working == true"
class="btn btn-small btn-primary rounded-full"
type="submit">
<span v-if="working == false">Save Details</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>
</form>
</ValidationObserver>
<div class="flex items-center justify-center">
<button
@click="addMembership"
class="w-full flex items-center justify-center p-4 border border-dashed border-black border-opacity-20 rounded-md uppercase text-blue-light focus:outline-none hover:bg-black hover:bg-opacity-10 hover:text-black transition"
type="button">
<svg class="w-4 h-4 mr-1" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
</svg>
<span>Add Membership</span>
</button>
</div>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
memberships: [{
name: '',
number: '',
expiry_date: '',
is_accredited: false,
}]
}
},
async mounted() {
this.$axios.$post('/account/verification/memberships').then((response) => {
if(response.data.length) {
this.memberships = response.data;
}
})
},
methods: {
addMembership() {
this.memberships.push({
name: '',
number: '',
expiry_date: '',
is_accredited: false
});
},
removeMembership(key) {
this.memberships.splice(key, 1);
},
async saveMemberships() {
this.$refs.membershipsForm.validate().then(success => {
if (!success) {
return;
}
this.working = true;
this.$axios.$post('/account/verification/memberships/create', {
memberships: this.memberships
}).then((response) => {
this.memberships = response.data;
this.$toast.success('Successfully saved your memberships').goAway(1500);
this.working = false;
}).catch(error => {
this.working = false;
this.$refs.membershipsForm.setErrors(error.response.data.errors);
})
})
},
}
}
</script>
Zerion Mini Shell 1.0