File: /home/imensosw/.trash/resources.1/js/components/Expertise.vue
<template>
<div>
<!-- User subject expertises block start -->
<div class="card">
<div v-if="userSubjectExpertisesShow.length > 0">
<div class="card-header">
<strong>Expertise</strong>
<div class="actions">
<a href="javascript:;" data-toggle="modal" @click="openAddExpertiseModel()">
<i class="fa fa-plus" />
</a>
<a href="javascript:;" data-toggle="modal" data-target="#editExpertise" class="ml-1">
<i class="fa fa-pencil" />
</a>
</div>
</div>
<div class="card-body">
<div v-for="data in userSubjectExpertisesShow">
<div class="c-row" >
<span>{{data.subject}}:</span>
<span class="capsule"><strong>{{data.expertise_level}}</strong>/5</span>
</div>
<hr>
</div>
</div>
</div>
<div v-else>
<div class="card-header">
<strong>Expertise</strong>
</div>
<div class="card-body text-center">
<img :src="`/images/expertise.png`" width="80" style="opacity: 0.6"><br><br>
<a href="javascript:;" @click="openAddExpertiseModel()" data-toggle="modal" class="btn btn-secondary mb-4">Add Expertise</a>
</div>
</div>
</div>
<!-- User subject expertises block end -->
<!-- Add expertise model start -->
<div class="modal fade" id="addExpertise" 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="">Add Subject Matter Expertise</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form autocomplete="off" @submit.prevent="insertUserSubjectExpertise" v-if="!success"
method="post">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Subject</label>
<multiselect track-by="subject" label="subject" v-model="subject_id" :options=subjects placeholder="Select Subject" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && errors.subject_id">{{ errors.subject_id[0] }}</span>
</div>
<div class="form-group">
<label>Expertise</label>
<multiselect track-by="expertise_level" label="expertise_level" v-model="expertise_id" :options=expertises placeholder="Select Expertise Level" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && errors.expertise_id">{{ errors.expertise_id[0] }}</span>
</div>
</div>
</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="Submit" class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Submit
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Add expertise model end -->
<!-- Edit expertise model start -->
<div @click.self="closeUserSubjectExpertiseModel" class="modal fade dismiss_modal" id="editExpertise"
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="">Edit Subject Matter Expertise</h5>
<button @click="closeUserSubjectExpertiseModel" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="updateUserSubjectExpertise">
<div class="modal-body">
<div v-for='(userSubjectExpertise , index ) in userSubjectExpertises' class="row align-items-center">
<div class="col-md-11">
<div class="form-group">
<label>
<strong>{{userSubjectExpertise.subject}}</strong>
<input type="hidden" name="edit_user_subject_expertise_ids[]" v-model="userSubjectExpertise.subject_id">
</label>
<multiselect v-model="edit_user_subject_expertise_id[index]" track-by="id" label="expertise_level" :options=expertises placeholder="Select Expertise Level" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && error_in.includes(index)">Please select expertise level!</span>
</div>
</div>
<div class="col-md-1 mt-12">
<a v-on:click="deleteUserSubjectExpertise(userSubjectExpertise.id)" href="javascript:;" >
<i class="fa fa-trash" />
</a>
<span ></span>
</div>
</div>
</div>
<div class="modal-footer">
<button @click="closeUserSubjectExpertiseModel" type="button" class="btn btn-light" data-dismiss="modal">Close</button>
<VueLoadingButton type="submit" aria-label="Save changes" class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Save changes
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Edit expertise model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
props: ['subjectsOption','expertisesOption'],
components: {Multiselect },
data() {
return {
has_error: false,
error: '',
errors: {},
success: false,
error_in : [],
isLoading: false,
isStyled: false,
subject_id:null,
expertise_id:null,
subjects: [],
expertises: [],
userSubjectExpertises:[],
edit_user_subject_ids : [],
edit_user_subject_expertise_id : [],
userSubjectExpertisesShow : [],
}
},
mounted() {
this.getUserSubjectExpertise()
},
methods: {
/**
* Fetch user expertises and put in userSubjectExpertises variable.
*
* @param null
* @return null
*/
getUserSubjectExpertise() {
this.$http({
url: `getUserSubjectExpertise`,
method: 'GET'
})
.then((res) => {
this.userSubjectExpertises = res.data.userSubjectExpertises
this.userSubjectExpertisesShow = this.userSubjectExpertises.slice();
for(let i=0;i<this.userSubjectExpertises.length;i++)
{
this.edit_user_subject_expertise_id[i] = { "id": res.data.userSubjectExpertises[i].expertise_id, "expertise_level": res.data.userSubjectExpertises[i].expertise_level };
}
}, () => {
this.has_error = true
})
},
/**
* Add user subject expertise.
*
* @param null
* @return null
*/
insertUserSubjectExpertise() {
this.isLoading = true
let formUserSubjectExpertise = new FormData();
formUserSubjectExpertise.append('subject_id', (this.subject_id != null && this.subject_id.id > 0) ? this.subject_id.id :'' );
formUserSubjectExpertise.append('expertise_id', (this.expertise_id != null && this.expertise_id.id > 0) ? this.expertise_id.id :'' );
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `insertUserSubjectExpertise`,
method: 'POST',
data: formUserSubjectExpertise
})
.then((res) => {
this.userSubjectExpertises = res.data.userSubjectExpertises
this.subject_id='',
this.expertise_id='',
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
this.error = err.response.data.error
this.errors = err.response.data.errors || {}
this.$snotify.error(err.response.data.message);
});
},
/**
* Upate user subject expertise.
*
* @param null
* @return null
*/
updateUserSubjectExpertise() {
this.isLoading = true
let formUserSubjectExpertise = new FormData();
for(let i=0;i<this.userSubjectExpertises.length;i++)
{
formUserSubjectExpertise.append('id[]', this.userSubjectExpertises[i].id);
formUserSubjectExpertise.append('subject_id[]', this.userSubjectExpertises[i].subject_id);
formUserSubjectExpertise.append('expertise_id[]',
(this.edit_user_subject_expertise_id[i] != null && this.edit_user_subject_expertise_id[i].id > 0) ? this.edit_user_subject_expertise_id[i].id :'' );
}
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `updateUserSubjectExpertise`,
method: 'POST',
data: formUserSubjectExpertise
})
.then((res) => {
this.userSubjectExpertises = res.data.userSubjectExpertises
this.subject_id='',
this.expertise_id='',
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.error_in = []
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
})
.catch(err => {
this.has_error = true
app.success = false
this.isLoading = false
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);
}
});
},
/**
* Close user subject epertise model
*
* @param null
* @return null
*/
closeUserSubjectExpertiseModel() {
this.subject_id='',
this.expertise_id='',
this.getUserSubjectExpertise()
},
/**
* Remove user subject expertise.
*
* @param null
* @return null
*/
deleteUserSubjectExpertise(id) {
let index = '' ;
for(let i=0;i<this.userSubjectExpertises.length;i++)
{
if(this.userSubjectExpertises[i].id == id)
{
index = i ;
}
}
Vue.delete(this.edit_user_subject_expertise_id, index);
Vue.delete(this.userSubjectExpertises, index);
},
/**
* Open user subject epertise model
*
* @param null
* @return null
*/
openAddExpertiseModel() {
this.subject_id = null
this.expertise_id = null
let userSubjects = this.userSubjectExpertises.map(item => { return parseInt(item.subject_id) ;});
let subjectList = this.subjectsOption.filter(subject => !userSubjects.includes(subject.id));
this.expertises = this.expertisesOption.slice() ;
this.subjects = subjectList.slice() ;
$("#addExpertise").modal('show')
},
}
}
</script>