File: /home/imensosw/public_html/ezwork/resources/js/components/Identification.vue
<template>
<div>
<!-- Identification block start -->
<div class="d-flex justify-content-between align-items-center" id="identification">
<h4>Identification Information </h4>
<div v-if="userIdentification" class="actions">
<span v-if="userIdentification.photo_proof_status_id == 1 && userIdentification.address_proof_status_id == 1" class="done capsule status">Verified</span>
<span v-else-if="(userIdentification.photo_proof_type_id != null && userIdentification.photo_proof_status_id == 0) && (userIdentification.address_proof_status_id == 0 && userIdentification.address_proof_type_id != null)" class="review capsule status">Under review </span>
<span v-else class="review capsule status">Upload Documents</span>
<!-- <span v-else-if="userIdentification.photo_proof_status_id == 0 && userIdentification.address_proof_status_id == 0 && (userIdentification.photo_proof_type_id > 0 || userIdentification.address_proof_type_id > 0 )" class="review capsule status">Under review </span>
<span v-else-if="userIdentification.photo_proof_status_id == 0 && userIdentification.address_proof_status_id == 0" class="review capsule status">Upload Documents</span> -->
</div>
</div>
<div v-if="this.userShow.translator_status_id > 5"
class="row mt-4">
<div class="col-lg-6">
<div v-if="userIdentification && userIdentification.photo_proof_type_id > 0" class="card">
<div class="card-header">
<strong>Photo ID</strong>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-8">
<a href="#photo_id" class="lightbox"><img :src="`/docs/identification/${this.userIdentification.photo_proof_file}`" class="img-fluid"/></a>
<div class="lightbox-target" id="photo_id">
<div class="white_content">
<img :src="`/docs/identification/${this.userIdentification.photo_proof_file}`" class="img-fluid rounded mr-2"/>
<a class="lightbox-close" href="#identification"></a>
</div>
</div>
</div>
<div class="col-lg-4">
{{this.userIdentification.photo_proof_type}}<br>
<a href="javascript:;" class="btn-secondary btn-sm delete-btn-bg" data-target="#deletePhotoId" data-toggle="modal">Delete</a>
</div>
</div>
</div>
</div>
<div v-else class="card">
<div class="card-header">
<strong>Photo ID</strong>
</div>
<div class="card-body">
<div class="card-body text-center">
<img :src="`/images/language.png`" style="opacity: 0.6;"
width="80"><br><br>
<a href="javascript:;" data-toggle="modal" data-target="#add_photo_id" class="btn btn-secondary" @click="openPhotoIdModel()">Add Photo ID</a>
</div>
</div>
</div>
</div>
<div class="col-lg-6">
<div v-if="userIdentification && userIdentification.address_proof_type_id > 0" class="card">
<div class="card-header">
<strong>Address Proof</strong>
</div>
<div class="card-body">
<div class="row align-items-center">
<div class="col-lg-8">
<a href="#address_proof" class="lightbox"><img :src="`/docs/identification/${this.userIdentification.address_proof_file}`" class="img-fluid" /></a>
<div class="lightbox-target" id="address_proof">
<div class="white_content">
<img :src="`/docs/identification/${this.userIdentification.address_proof_file}`" class="img-fluid rounded mr-2"/>
<a class="lightbox-close" href="#identification"></a>
</div>
</div>
</div>
<div class="col-lg-4">
{{this.userIdentification.address_proof_type}}<br>
<a href="javascript:;" class="btn-secondary btn-sm delete-btn-bg" data-target="#deleteAddressProof" data-toggle="modal">Delete</a>
</div>
</div>
</div>
</div>
<div v-else class="card">
<div class="card-header">
<strong>Address Proof</strong>
</div>
<div class="card-body">
<div class="card-body text-center"><img
:src="`/images/language.png`"
style="opacity: 0.6;" width="80"><br><br> <a href="javascript:;" data-toggle="modal" data-target="#add_address_proof" class="btn btn-secondary" @click="openAddressProofModel()">Add Address Proof</a></div>
</div>
</div>
</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>
<!-- Identification block end -->
<!-- Photo ID model start -->
<div class="modal fade" id="add_photo_id" 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="">Photo ID</h5>
<button type="button" class="close dismiss_modal" data-dismiss="modal">×</button>
</div>
<form autocomplete="off" @submit.prevent="uploadPhotoId" v-if="!success" method="post" enctype="multipart/form-data" >
<div class="modal-body">
<div class="form-group">
<label>Type</label>
<multiselect track-by="photo_proof_type" label="photo_proof_type" v-model="photo_proof_type" :options=this.photoProofTypes placeholder="Select Type" selectLabel='' deselectLabel='X' selectedLabel='' >
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.photo_proof_type_id">{{ errors.photo_proof_type_id[0] }}</span>
</div>
<div class="form-group">
<label>Upload Image <small>(Max upload file size: 2 MB. Allowed file types: jpg, png, jpeg)</small></label>
<input id="photo_proof_file" type="file" v-on:change="onPhotoProofFileChange" class="form-control" />
<span class="text-danger help-block" v-if="has_error && errors.photo_proof_file">{{ errors.photo_proof_file[0] }}</span>
</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" >
Upload Photo ID
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Photo ID model end -->
<!-- Delete Photo ID model start -->
<div class="modal fade" id="deletePhotoId">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this Photo ID?</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary dismiss_modal" data-dismiss="modal">Cancel</button>
<VueLoadingButton @click.native="deletePhotoId()" aria-label="Delete"
class="btn btn-danger btn-imp" :loading="isLoading" :styled="isStyled" >
Delete
</VueLoadingButton>
</div>
</div>
</div>
</div>
<!-- Delete Photo ID model end -->
<!-- Address Proof model start -->
<div class="modal fade" id="add_address_proof" 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="">Address Proof</h5>
<button type="button" class="close dismiss_modal" data-dismiss="modal">×</button>
</div>
<form autocomplete="off" @submit.prevent="uploadAddressProof" v-if="!success" method="post" enctype="multipart/form-data" >
<div class="modal-body">
<div class="form-group">
<label>Type</label>
<multiselect track-by="address_proof_type" label="address_proof_type" v-model="address_proof_type" :options=addressProofTypes placeholder="Select Type" selectLabel='' deselectLabel='X' selectedLabel='' >
<span slot="noResult"> No record found </span>
</multiselect>
<span class="text-danger help-block" v-if="has_error && errors.address_proof_type_id">{{ errors.address_proof_type_id[0] }}</span>
</div>
<div class="form-group">
<label>Upload Image <small>(Max upload file size: 2 MB. Allowed file types: jpg, png, jpeg)</small></label>
<input id="address_proof_file" type="file" v-on:change="onAddressProofFileChange" class="form-control" />
<span class="text-danger help-block" v-if="has_error && errors.address_proof_file">{{ errors.address_proof_file[0] }}</span>
</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" >
Upload Address Proof
</VueLoadingButton>
</div>
</form>
</div>
</div>
</div>
<!-- Address Proof model end -->
<!-- Delete Address Proof model start -->
<div class="modal fade" id="deleteAddressProof">
<div class="modal-dialog modal-confirm">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Are you sure?</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Do you really want to delete this Address Proof?</p>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary dismiss_modal" data-dismiss="modal">Cancel</button>
<VueLoadingButton @click.native="deleteAddressProof()" aria-label="Delete"
class="btn btn-danger btn-imp" :loading="isLoading" :styled="isStyled" >
Delete
</VueLoadingButton>
</div>
</div>
</div>
</div>
<!-- Delete Address Proof model end -->
</div>
</template>
<script>
import Multiselect from 'vue-multiselect';
export default {
props: ['userShow','userIdentification' ,'photoProofTypesOption','addressProofTypesOption'],
components: { Multiselect },
data() {
return {
isLoading: false,
isStyled: false,
has_error: false,
error: '',
errors: {},
success: false,
//userIdentification : {},
photoProofTypes : [],
photo_proof_type : {id:'',photo_proof_type:"Select Type"},
photo_proof_file : '',
addressProofTypes : [],
address_proof_type : {id:'',address_proof_type:"Select Type"},
address_proof_file : '',
}
},
mounted() {
},
methods: {
/**
* Fetch user identification and put in userIdentification.
*
* @param null
* @return null
*/
getUserIdentification()
{
this.$http({
url: `api/getUserIdentification`,
method: 'GET'
})
.then((res) => {
if(res.data.userIdentification != null)
{
this.userIdentification = res.data.userIdentification
}
else
{
this.userIdentification = {}
}
}, () => {
this.has_error = true
})
},
/**
* Fetch address proof type list and put in addressProofTypes.
*
* @param null
* @return null
*/
/**
* Upload photo id
*
* @param null
* @return null
*/
uploadPhotoId() {
this.isLoading = true;
let formPhotoProof = new FormData();
formPhotoProof.append('photo_proof_type_id', (this.photo_proof_type != null ) ? this.photo_proof_type.id :'' );
formPhotoProof.append('photo_proof_file', this.photo_proof_file);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/uploadPhotoId`,
method: 'POST',
data: formPhotoProof
})
.then((res) => {
this.userIdentification = res.data.userIdentification
this.photo_proof_type = {id:'',photo_proof_type:"Select Type"}
this.photo_proof_file = ''
$("#photo_proof_file").val(null);
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
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 || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Delete photo id.
*
* @param null
* @return null
*/
deletePhotoId() {
this.isLoading = true
let formPhotoId = new FormData();
formPhotoId.append('id', this.userIdentification.user_id );
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/deletePhotoId`,
method: 'POST',
data: formPhotoId
})
.then((res) => {
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.userIdentification = res.data.userIdentification
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);
}
});
},
/**
* Set selected file to photo_proof_file variable
*
* @param null
* @return null
*/
onPhotoProofFileChange(e){
this.photo_proof_file = e.target.files[0];
},
/**
* Upload address proof
*
* @param null
* @return null
*/
uploadAddressProof() {
this.isLoading = true;
let formAddressProof = new FormData();
formAddressProof.append('address_proof_type_id', (this.address_proof_type != null ) ? this.address_proof_type.id :'' );
formAddressProof.append('address_proof_file', this.address_proof_file);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/uploadAddressProof`,
method: 'POST',
data: formAddressProof
})
.then((res) => {
this.userIdentification = res.data.userIdentification
this.address_proof_type = {id:'',address_proof_type:"Select Type"}
this.address_proof_file = ''
$("#address_proof_file").val(null);
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
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 || {}
if(err.response.data.showErrorPop)
{
this.$snotify.error(err.response.data.message);
}
});
},
/**
* Delete address proof.
*
* @param null
* @return null
*/
deleteAddressProof() {
this.isLoading = true
let formAddressProof = new FormData();
formAddressProof.append('id', this.userIdentification.user_id );
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `api/deleteAddressProof`,
method: 'POST',
data: formAddressProof
})
.then((res) => {
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.userIdentification = res.data.userIdentification
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);
}
});
},
/**
* Set selected file to address_proof_file variable
*
* @param null
* @return null
*/
onAddressProofFileChange(e){
this.address_proof_file = e.target.files[0];
},
openPhotoIdModel() {
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.photo_proof_file = ''
this.photo_proof_type = {id:'',photo_proof_type:"Select Type"};
$("#photo_proof_file").val(null)
this.photoProofTypes = this.photoProofTypesOption.slice() ;
},
openAddressProofModel() {
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.address_proof_file = ''
this.address_proof_type = {id:'',address_proof_type:"Select Type"};
$("#address_proof_file").val(null)
this.addressProofTypes = this.addressProofTypesOption.slice() ;
}
}
}
$(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>