%PDF-
%PDF-
Mini Shell
Mini Shell
<template>
<Block title="Qualifications"
description="Please select your highest qualification from the drop down and upload by using the 'choose file button' or dragging the file into the box. You have the option to upload multiple qualifications."
width="max-w-3xl">
<ValidationObserver ref="form">
<form @submit.prevent="submit" role="form" method="POST">
<div class="mb-4 relative"
:class="key !== 0 ? 'border-t-2 border-black border-opacity-10 pt-10' : ''"
v-for="(qualification, key) in qualifications"
v-bind:key="key">
<ValidationProvider rules="" :vid="'file_url-'+(key+1)" v-slot="x">
<input type="hidden" name="file_url" v-model="qualification.file_preview.name" />
</ValidationProvider>
<ValidationProvider :rules="'required_if:file_url-'+(key+1)+',null|size:10000'" :name="'file-'+(key+1)" :ref="'provider-'+key" v-slot="{ validate, errors }">
<div class="mb-6">
<div class="flex items-center"
v-if="qualification.file_preview.name">
<img v-if="qualification.file_preview.type == 'application/pdf' || qualification.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="Other" />
<div class="relative">
<span class="block text-md font-medium">{{ qualification.file_preview.name }}</span>
<label class="uppercase text-blue-light text-sm cursor-pointer"
:for="'file-'+key">
Replace
<input
@change="handleFileInput(key)"
class="hidden"
type="file"
:ref="'qualification-file-'+key"
:id="'file-'+key"
accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps" />
</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="'file-'+key">
<input
@change="handleFileInput(key)"
class="hidden"
type="file"
:ref="'qualification-file-'+key"
:id="'file-'+key" />
<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="relative">
<div class="absolute right-full pr-5 font-bold">{{ (key + 1) }}</div>
<button
v-if="key !== 0"
@click="remove(key)"
class="absolute top-0 right-0 z-30 uppercase text-red text-xs focus:outline-none"
type="button">Remove</button>
<t-input-group label="Qualification">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-select
v-model="qualification.name"
placeholder="Select..."
:options="['PHD', 'Masters', 'Post Grad', 'BA/BSC', 'Diploma', 'Foundation Degree']"
></t-select>
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-8">
<t-input-group label="Result">
<ValidationProvider rules="required" v-slot="{ errors }">
<t-input
v-model="qualification.result"
:name="'result-'+key"
:id="'result-'+key"
placeholder="Qualification Result" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
<t-input-group label="Year">
<ValidationProvider rules="required|numeric" name="year" v-slot="{ errors }">
<t-input
v-model="qualification.year"
:name="'year-'+key"
:id="'year-'+key"
placeholder="Qualification Year" />
<span class="field-invalid" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</t-input-group>
</div>
</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="add"
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 Qualification</span>
</button>
</div>
</Block>
</template>
<script>
export default {
data() {
return {
working: false,
qualifications: [{
file_preview: {
name: null,
type: null,
url: null
},
file: null,
name: '',
result: '',
year: ''
}]
}
},
async mounted() {
this.$axios.$post('/account/verification/qualifications').then((response) => {
if(response.data.length) {
this.qualifications = response.data;
}
})
},
methods: {
async handleFileInput(key) {
let fileInputRef = 'qualification-file-'+key;
let fileData = this.$refs[fileInputRef][0].files[0];
this.qualifications[key].file_preview.name = fileData.name;
this.qualifications[key].file_preview.type = fileData.type;
this.qualifications[key].file_preview.url = URL.createObjectURL(fileData);
this.qualifications[key].file = fileData;
},
add() {
this.qualifications.push({
file_preview: {
name: null,
type: null,
url: null
},
file: null,
name: '',
result: '',
year: ''
});
},
remove(key) {
this.qualifications.splice(key, 1);
},
async submit() {
this.$refs.form.validate().then(success => {
if (!success) {
return;
}
this.working = true;
let formData = new FormData();
this.qualifications.forEach((value, index) => {
formData.append('qualifications['+index+'][file]', value.file);
formData.append('qualifications['+index+'][existing_file]', JSON.stringify(value.file_preview));
formData.append('qualifications['+index+'][name]', value.name);
formData.append('qualifications['+index+'][result]', value.result);
formData.append('qualifications['+index+'][year]', value.year);
});
this.$axios.$post('/account/verification/qualifications/create', formData, {
headers: { 'Content-Type': 'multipart/form-data' }
}).then((response) => {
this.qualifications = response.data;
this.$toast.success('Successfully saved your qualifications').goAway(1500);
this.working = false;
}).catch(error => {
this.working = false;
this.$refs.form.setErrors(error.response.data.errors);
})
})
}
}
}
</script>
Zerion Mini Shell 1.0