%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Insurance"
description="Please provide valid details of professional insurance. Please upload a copy by using the choose file button"
width="max-w-3xl">
<ValidationObserver ref="form">
<form @submit.prevent="saveInsurance" role="form" method="POST">
<div class="grid grid-cols-2 gap-x-8">
<t-input-group label="Insurer">
<ValidationProvider rules="required" name="insurer" v-slot="{ errors }">
<t-input
v-model="insurance.name"
name="insurance-name"
id="'insurance-name"
placeholder="e.g. Premierline" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Renewal Date">
<ValidationProvider rules="required" name="date" v-slot="{ errors }">
<t-datepicker
v-model="insurance.renewal_date" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
<ValidationProvider rules="" vid="file_url" v-slot="x">
<input type="hidden" name="file_url" v-model="insurance.file_preview.name" />
</ValidationProvider>
<ValidationProvider rules="required_if:file_url,null|size:10000" ref="fileProvider" name="file" v-slot="{ validate, errors }">
<div class="mb-6">
<div class="flex items-center"
v-if="insurance.file_preview.name">
<img v-if="insurance.file_preview.type == 'application/pdf' || insurance.file_preview.type == 'pdf'"
class="w-12 mr-5"
src="~assets/images/icons/pdf-icon.svg" alt="PDF" />
<img v-else
class="w-12 mr-5"
src="~assets/images/icons/pdf-icon.svg" alt="PDF" />
<div class="relative">
<span class="block text-md font-medium">{{ insurance.file_preview.name }}</span>
<label class="uppercase text-blue-light text-sm cursor-pointer"
for="insurancefile">
Replace
<input
@change="handleFileInput()"
class="hidden"
type="file"
ref="insurancefile"
id="insurancefile" />
</label>
</div>
</div>
<div v-else>
<label class="block w-full p-4 border border-dashed border-black border-opacity-20 rounded-md hover:bg-black hover:bg-opacity-10 hover:text-black transition cursor-pointer text-center"
for="insurancefile">
<input
@change="handleFileInput()"
class="hidden"
type="file"
ref="insurancefile"
id="insurancefile" />
<span class="text-sm text-black">Click here to choose file</span>
</label>
</div>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</div>
</ValidationProvider>
<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>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
insurance: {
name: '',
renewal_date: '',
file: '',
file_preview: {
name: null,
type: null,
url: null
}
}
}
},
async mounted() {
this.$axios.$post('/account/verification/insurance').then((response) => {
this.insurance = response.data;
})
},
methods: {
handleFileInput(e) {
let fileData = this.$refs.insurancefile.files[0];
this.insurance.file = fileData;
this.insurance.file_preview.name = fileData.name;
this.insurance.file_preview.type = fileData.type;
this.insurance.file_preview.url = URL.createObjectURL(fileData);
},
async saveInsurance() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
let formData = new FormData();
formData.append('file', this.insurance.file);
formData.append('existing_file', JSON.stringify(this.insurance.file_preview));
formData.append('name', this.insurance.name);
formData.append('date', this.insurance.renewal_date);
this.$axios.$post('/account/verification/insurance/create', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then((response) => {
this.insurance = response.data;
this.$toast.success('Successfully saved your insurance').goAway(1500);
this.working = false;
}).catch(error => {
this.working = false;
this.$refs.form.setErrors(error.response.data.errors);
})
})
},
}
}
</script>
Zerion Mini Shell 1.0