File: /home/imensosw/public_html/ezwork/resources/js/components/Work_history.vue
<template>
<div>
<!-- Work History block start -->
<div class="d-flex justify-content-between align-items-center" id="work_history_top">
<h4>Work History</h4>
<div v-if="this.userShow.translator_status_id > 5 && this.userExperience.id > 0" class="actions">
<a @click="openWorkHistoryModel()" href="javascript:;" data-toggle="modal" data-target="#work_history"><i class="fa fa-pencil"></i></a>
</div>
</div>
<div v-if="this.userShow.translator_status_id > 5" class="mt-4">
<div v-if="this.userExperience.id > 0">
<h5 class="">
{{this.userExperience.experience}}
<span v-if="this.userExperience.id > 0"> </span>
<span v-for="data in userExperienceTypes" class="capsule ml-4" style="margin-right: 5px;">{{data.experience_type}} </span>
</h5>
<div class="row mt-5">
<div v-for="data in this.userExperienceDocs" class="col-md-3">
<a v-if="data.doc_name.split('.').pop() == 'pdf'" :href="`docs/work_history/${data.doc_name}`" target="_blank"><img :src="`/images/sample-pdf.jpg`"
class="img-fluid border"/></a>
<a @click="workHistoryDoc(data.doc_name)" href="#work_history_doc" class="lightbox" v-else><img :src="`/docs/work_history/${data.doc_name}`" class="img-fluid border"/></a>
</div>
</div>
</div>
<div v-else class="text-center">
<img
:src="`/images/language.png`" style="opacity: 0.6;" width="80"><br><br> <a @click="openWorkHistoryModel()" href="javascript:;" data-toggle="modal" data-target="#work_history" class="btn btn-secondary mb-4">Add Work History</a>
</div>
</div>
<div v-else class="row mt-4">
<div class="col-md-12">
<div class="no-record text-center">
<img :src="`/images/shape.png`" width="100"><br><br>
<p>Disabled until the completion of evaluations</p>
</div>
</div>
</div>
<!-- Work History block end -->
<div class="lightbox-target" id="work_history_doc">
<div class="white_content">
<img v-if="this.experience_doc_view != '' && this.experience_doc_view != undefined" :src="`/docs/work_history/${this.experience_doc_view}`" class="img-fluid rounded mr-2"/>
<a class="lightbox-close" href="#work_history_top"></a>
</div>
</div>
<!-- Work history model start -->
<div class="modal fade"
id="work_history" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Work History</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form autocomplete="off" @submit.prevent="updateWorkHistory" v-if="!success"
method="post" enctype="multipart/form-data" >
<div class="modal-body">
<div class="form-group">
<label>Select Work Experience</label>
<multiselect track-by="experience" label="experience" v-model="experience_id" :options=experiences placeholder="Select Experience" selectLabel='' deselectLabel='X' selectedLabel='' >
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.experience_id">{{ errors.experience_id[0] }}</span>
</div>
<div class="form-group">
<label>Select Work Experience Type</label>
<multiselect track-by="experience_type" label="experience_type" v-model="experience_type_id" :options=experienceTypes :multiple="true" placeholder="Select Experience Type" selectLabel='' deselectLabel='X' selectedLabel=''>
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.experience_type_id">{{ errors.experience_type_id[0] }}</span>
</div>
<div class="row">
<div v-for="data in this.removeableDocs"
:class="`col-md-3 doc_img doc_img_${data.id}`">
<img v-if="data.doc_name.split('.').pop() == 'pdf'" :src="`/images/sample-pdf.jpg`" class="img-fluid border"/>
<img v-else :src="`/docs/work_history/${data.doc_name}`"
class="img-fluid border" /> <span class="cursor_pointer" @click="removeExperienceDoc(data.id)" > Remove</span>
</div>
</div>
<div class="form-group">
<label>Proof of Experience <small>(Max upload file size: 2 MB. Allowed file types: pdf, jpg, png, jpeg)</small></label>
<div class="experience_doc_div">
<input type='file' name='experience_docs[]' class='form-control mb-2'/>
</div>
<span class="text-danger help-block file_error_span" v-if="has_error && this.error_in.length > 0">
The file size should not be more than 2 MB, and the allowed formats are pdf, jpg, png, jpeg only. </span>
<span class="text-danger help-block file_error_span" v-if="has_error && errors.experience_docs">{{ errors.experience_docs[0] }}
</span>
</div>
<div class="mt-2 text-right"><a @click="addMoreExperienceDoc" href="javascript:;" class="sml-btn">Add More</a></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light dismiss_modal" data-dismiss="modal">Close</button>
<VueLoadingButton type="submit" aria-label="Save changes"
class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Update Work History
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Work history model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
props: ['userShow','experiencesOption','experienceTypesOption'],
components: { Multiselect },
data() {
return {
isLoading: false,
isStyled: false,
has_error: false,
error: '',
errors: {},
error_in:[],
success: false,
experience_id : '',
experiences : [],
experience_type_id : '',
experienceTypes : [],
userExperience : {},
userExperienceTypes : {},
userExperienceDocs : {},
removeExperienceDocs : [],
removeableDocs : {},
experience_doc_view : '',
}
},
mounted() {
this.getUserWorkHistory()
},
methods: {
/**
* Fetch user identification and put in userIdentification.
*
* @param null
* @return null
*/
getUserWorkHistory()
{
this.$http({
url: `api/getUserWorkHistory`,
method: 'GET'
})
.then((res) => {
this.userExperience = {}
this.userExperienceTypes = {}
this.userExperienceDocs = {}
if(res.data.userExperience != null)
{
this.userExperience = res.data.userExperience
this.experience_id = { "id": res.data.userExperience.experience_id,"experience": res.data.userExperience.experience }
}
if(res.data.userExperienceTypes != null)
{
this.userExperienceTypes = res.data.userExperienceTypes
let experience_type_array = []
for(let i = 0 ; i < this.userExperienceTypes.length ; i++ )
{
experience_type_array.push( {id:this.userExperienceTypes[i].experience_type_id,experience_type:this.userExperienceTypes[i].experience_type});
}
this.experience_type_id = experience_type_array ;
}
if(res.data.userExperienceDocs != null)
{
this.userExperienceDocs = res.data.userExperienceDocs
}
}, () => {
this.has_error = true
})
},
/**
* Upload photo id
*
* @param null
* @return null
*/
updateWorkHistory() {
this.isLoading = true;
let form = new FormData();
form.append('experience_id', (this.experience_id != null && this.experience_id.id >= 0) ? this.experience_id.id :'' );
for(let i = 0 ; i < this.experience_type_id.length ; i++ )
{
form.append('experience_type_id[]', this.experience_type_id[i].id);
}
form.append('remove_docs', this.removeExperienceDocs);
$.each($("input[type=file]"), function(i, obj) {
$.each(obj.files, function (j, file) {
form.append('experience_docs[' + i + ']', file);
});
});
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/updateWorkHistory`,
method: 'POST',
data: form
})
.then((res) => {
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.error_in=[]
this.userExperience = {}
this.userExperienceTypes = {}
this.userExperienceDocs = {}
if(res.data.userExperience != null)
{
this.userExperience = res.data.userExperience
}
if(res.data.userExperienceTypes != null)
{
this.userExperienceTypes = res.data.userExperienceTypes
}
if(res.data.userExperienceDocs != null)
{
this.userExperienceDocs = res.data.userExperienceDocs
}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
this.error_in=[]
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
this.error_in = err.response.data.error_in
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Append a input file control into experience_doc_div .
*
* @param null
* @return null
*/
addMoreExperienceDoc()
{
$(".experience_doc_div").append("<input type='file' name='experience_docs[]' class='form-control mb-12'/>");
},
/**
* Remove experience doc file.
*
* @param null
* @return null
*/
removeExperienceDoc(id)
{
this.removeExperienceDocs.push(id) ;
$(".doc_img_"+id).hide();
},
/**
* Open Work History model.
*
* @param null
* @return null
*/
openWorkHistoryModel() {
this.experiences = this.experiencesOption.slice() ;
this.experienceTypes = this.experienceTypesOption.slice() ;
this.experience_id = []
if(this.userExperience.experience_id >= 0)
{
this.experience_id = { "id": this.userExperience.experience_id,"experience": this.userExperience.experience }
}
let experience_type_array = []
for(let i = 0 ; i < this.userExperienceTypes.length ; i++ )
{
experience_type_array.push( {id:this.userExperienceTypes[i].experience_type_id,experience_type:this.userExperienceTypes[i].experience_type});
}
this.experience_type_id = experience_type_array ;
$(".doc_img").show()
this.removeableDocs = this.userExperienceDocs
this.removeExperienceDocs = []
$(".experience_doc_div").html("<input type='file' name='experience_docs[]' class='form-control mb-12'/>");
this.has_error = false
},
/**
* workHistoryDoc function assign current doc name
* to experience_doc.
*
* @param string doc
* @return void
*/
workHistoryDoc(doc)
{
this.experience_doc_view = doc;
},
}
}
$(document).on('click', function(event) {
if ($(event.target).has('.white_content').length) {
window.location.href = $('.lightbox-close').attr('href');
}
});
$(document).keydown(function(event) {
if (event.keyCode == 27) {
window.location.href = $('.lightbox-close').attr('href');
}
});
</script>