File: /home/imensosw/.trash/resources.1/js/components/Languages.vue
<template>
<div>
<div class="card">
<!-- User skills block start -->
<div v-if="userSkillsShow.length > 0">
<div class="card-header">
<strong>Languages</strong>
<div class="actions">
<a href="javascript:;" data-toggle="modal">
<i class="fa fa-plus" @click="openAddLanguageModel()" />
</a>
<a href="javascript:;" data-toggle="modal" @click="openEditLanguageModel()" class="ml-1"><i class="fa fa-pencil" /></a>
</div>
</div>
<div class="card-body">
<div v-for="data in userSkillsShow">
<div class="c-row" >
<span>{{data.language_l}}</span>
<span class="capsule">{{data.proficiency}}</span>
</div>
<hr>
</div>
</div>
</div>
<div v-else>
<div class="card-header">
<strong>Languages {{userSkillsShow.lenght}} </strong>
</div>
<div class="card-body text-center">
<img :src="`/images/language.png`" width="80" style="opacity: 0.6"><br><br>
<a href="javascript:;" @click="openAddLanguageModel()" data-toggle="modal" class="btn btn-secondary mb-4" > Add Language
</a>
</div>
</div>
<!-- User skills block end -->
</div>
<!-- Add languages model start -->
<div class="modal fade" id="addLanguage" 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 Language</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<!--
<div class="modal-body">
<button type="button" @click="add">Add Component</button>
<component
v-for="(component, index) in components"
:key="index"
:is="component"
/>
</div>
-->
<form autocomplete="off" @submit.prevent="insertUserSkill" v-if="!success" method="post">
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Language</label>
<multiselect track-by="language_l" label="language_l" v-model="language_id" :options="languageOption" placeholder="Select Language" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && errors.language_id">{{ errors.language_id[0] }}</span>
</div>
<div class="form-group">
<label>Proficiency</label>
<multiselect track-by="proficiency" label="proficiency" v-model="proficiency_id" :options=proficiencyOption placeholder="Select Proficiency" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && errors.proficiency_id">{{ errors.proficiency_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 languages model end -->
<!-- Edit languages model start -->
<div ref="vuemodal" @click.self="closeUserSkillModel" class="modal fade dismiss_modal"
id="editLanguage" 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 Language</h5>
<button @click="closeUserSkillModel" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<form @submit.prevent="updateUserSkill">
<div class="modal-body">
<div v-for='(userSkill , index ) in userSkills' class="row align-items-center">
<div class="col-md-11">
<div class="form-group">
<label>
<strong>{{userSkill.language_l}}</strong>
<input type="hidden" name="edit_user_skill_ids[]" v-model="userSkill.language_id">
</label>
<multiselect v-model="edit_user_skill_proficiency_id[index]" track-by="id" label="proficiency" :options=proficiencyOption placeholder="Select Proficiency" selectLabel='' deselectLabel='X' selectedLabel='' ></multiselect>
<span class="text-danger help-block" v-if="has_error && error_in.includes(index)">Please select proficiency!</span>
</div>
</div>
<div class="col-md-1 mt-12">
<a v-on:click="deleteUserSkill(userSkill.id)" href="javascript:;" >
<i class="fa fa-trash" />
</a>
<span ></span>
</div>
</div>
</div>
<div class="modal-footer">
<button @click="closeUserSkillModel" 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 languages model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
import Language_row from './../components/Language_row.vue';
let Comp = {
template: ''
}
export default {
props: ['userShow','languages','proficiencys'],
components: { Multiselect },
data() {
return {
has_error: false,
error: '',
errors: {},
success: false,
isLoading: false,
isStyled: false,
error_in : [],
languageOption : [],
proficiencyOption : [],
language_id:null,
proficiency_id:null,
userSkills:[],
userSkillsShow:[],
edit_user_skill_ids : [],
edit_user_skill_proficiency_id : [],
components: [Comp],
}
},
mounted() {
this.getUserSkills()
},
methods: {
add() {
let userLanguages = this.userSkills.map(item => { return parseInt(item.language_id) ;});
let languageList = this.languages.filter(language => !userLanguages.includes(language.id));
let html = "<div class='row'><div class='col-md-6'><select name=language_ids[] class='form-control'>";
for(let i = 0 ; i < languageList.length ; i++)
{
html = html+"<option value="+languageList[i].id+">" +languageList[i].language_l+ "</option>";
}
html = html+"</select></div>";
html = html+"<div class='col-md-6' ><select name=proficiency_ids[] class='form-control'>";
for(let i = 0 ; i < this.proficiencys.length ; i++)
{
html = html+"<option value="+this.proficiencys[i].id+">" +this.proficiencys[i].proficiency+ "</option>";
}
html = html+"</select></div></div>";
this.components.push({
template: html
})
},
onMore() {
var ComponentClass = Vue.extend(Language_row)
var instance = new ComponentClass({
propsData: { languageOption : this.languageOption , proficiencyOption : this.proficiencyOption }
})
//instance.$slots.default = ['Click me!']
instance.$mount() // pass nothing
//console.log(this.$refs)
this.$refs.containe_language_row.appendChild(instance.$el)
},
/**
* Fetch user skills data and put in userSkills variable.
*
* @param null
* @return null
*/
getUserSkills()
{
this.$http({
url: `getUserSkills`,
method: 'GET'
})
.then((res) => {
this.userSkills = res.data.userSkills
this.userSkillsShow = this.userSkills.slice();
for(let i=0;i<this.userSkills.length;i++)
{
this.edit_user_skill_proficiency_id[i] = { "id": res.data.userSkills[i].proficiency_id, "proficiency": res.data.userSkills[i].proficiency };
}
}, () => {
this.has_error = true
})
},
/**
* Fetch languages list and put in user languages.
*
* @param null
* @return null
*/
/**
* Add new user skill.
*
* @param null
* @return null
*/
insertUserSkill() {
this.isLoading = true
let formUserSkill = new FormData();
formUserSkill.append('language_id', (this.language_id != null && this.language_id.id > 0) ? this.language_id.id :'' );
formUserSkill.append('proficiency_id', (this.proficiency_id != null && this.proficiency_id.id > 0) ? this.proficiency_id.id :'' );
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `insertUserSkill`,
method: 'POST',
data: formUserSkill
})
.then((res) => {
this.userSkills = res.data.userSkills
this.language_id=''
this.proficiency_id=''
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
this.has_error = false
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.$root.$emit("getUserEvaluations");
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 || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Update user skills.
*
* @param null
* @return null
*/
updateUserSkill() {
this.isLoading = true
let formUserSkill = new FormData();
for(let i=0;i<this.userSkills.length;i++)
{
formUserSkill.append('language_id[]', this.userSkills[i].language_id);
formUserSkill.append('proficiency_id[]',
(this.edit_user_skill_proficiency_id[i] != null && this.edit_user_skill_proficiency_id[i].id > 0) ? this.edit_user_skill_proficiency_id[i].id :'' );
}
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `updateUserSkill`,
method: 'POST',
data: formUserSkill
})
.then((res) => {
this.userSkills = res.data.userSkills
this.language_id='',
this.proficiency_id='',
this.$root.$emit("getUserEvaluations");
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.isLoading = false
this.error_in = []
this.$root.$emit("getUserEvaluations");
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 languages model.
*
* @param null
* @return null
*/
closeUserSkillModel() {
this.language_id='',
this.proficiency_id='',
this.getUserSkills()
},
/**
* Remove user skill.
*
* @param null
* @return null
*/
deleteUserSkill(id) {
let index = '' ;
for(let i=0;i<this.userSkills.length;i++)
{
if(this.userSkills[i].id == id)
{
index = i ;
}
}
Vue.delete(this.edit_user_skill_proficiency_id, index);
Vue.delete(this.userSkills, index);
this.error_in = []
},
/**
* Open user languages model
*
* @param null
* @return null
*/
openAddLanguageModel() {
this.language_id = null
this.proficiency_id = null
let userLanguages = this.userSkills.map(item => { return parseInt(item.language_id) ;});
//setTimeout(function(){
let languageList = this.languages.filter(language => !userLanguages.includes(language.id));
this.languageOption = languageList.slice() ;
this.proficiencyOption = this.proficiencys.slice() ;
$("#addLanguage").modal('show')
//}.bind(this), 100);
},
openEditLanguageModel() {
this.proficiencyOption = this.proficiencys.slice() ;
$("#editLanguage").modal('show')
},
}
}
</script>