File: /home/imensosw/.trash/resources.1/js/components/Contract.vue
<template>
<div>
<!-- Contract block start -->
<div class="d-flex justify-content-between align-items-center">
<h4>Contract</h4>
</div>
<div v-if="this.userShow.translator_status_id >= 6" class="row mt-4 card">
<div class="col-md-12">
<table class="table bordered">
<thead>
<tr>
<th>Language Direction</th>
<th>Status</th>
<th>Rating</th>
<th class="text-right">Action</th>
</tr>
</thead>
<tbody>
<tr v-for="(data, index) in userContract" >
<td>{{data.from_language}} to {{data.to_language}}</td>
<td>
<span class="capsule review " v-if="data.status_id == 0"> Sign Contract</span>
<span class="capsule done" v-else-if="data.status_id == 1"> Active</span>
<span class="capsule" v-else> Awaiting Contract </span>
</td>
<td>
<span v-if="data.status_id == 0 || data.status_id == 1" > {{data.evaluation_rating}}/5</span>
<span v-else > NA </span>
</td>
<td class="text-right action-btns">
<a v-if="data.status_id == 0"
href="javascript:;" data-toggle="modal" data-target="#accepet_contract" class=""
@click="openAcceptContractModel(data)">Sign Contract</a>
<a v-if="data.status_id == 1" href="javascript:;" data-toggle="modal" data-target="#view_contract" class="" @click="viewFile(index)">View Contract</a>
</td>
</tr>
</tbody>
</table>
</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 identification</p>
</div>
</div>
</div>
<!-- Contract block end -->
<!-- Accept contract model start -->
<div class="modal fade" id="accepet_contract" tabindex="-1" role="dialog" aria-hidden="true"
ref="testModalRef" >
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="">Sign Contract</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<iframe v-if="this.accept_contract.contract_file != undefined && this.accept_contract.contract_file != ''" id="row_iframe" width="100%" style="height:500px" :src="`/docs/contract/${this.accept_contract.contract_file}`"
></iframe>
</div>
<div class="col-md-12">
<h5 class="my-4"> Contract Details </h5>
<table class="table bordered">
<tr>
<td>Language Direction</td>
<td>{{accept_contract.from_language}}-{{accept_contract.to_language}}</td>
</tr>
<tr >
<td>Contract Type</td>
<td>{{accept_contract.translator_type}}</td>
</tr>
<tr >
<td>Final Rating</td>
<td>{{accept_contract.evaluation_rating}}</td>
</tr>
<tr >
<td>Translation price per word</td>
<td>AED {{accept_contract.translation_price}}</td>
</tr>
<tr >
<td>Currency</td>
<td>{{accept_contract.currency}}</td>
</tr>
<tr >
<td>Proofreading Eligibility</td>
<td> <span v-if="accept_contract.proofreading_status_id == 1" >Yes</span> <span v-else>No</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary dismiss_modal" data-dismiss="modal">Close</button>
<VueLoadingButton @click.native="accepetContract()" aria-label="Accept Contract"
class="btn btn-primary btn-imp" :loading="isLoading" :styled="isStyled" >
Accept Contract
</VueLoadingButton>
</div>
</div>
</div>
</div>
<!-- Accepet contract model end -->
<!-- View contract model start -->
<div class="modal fade" id="view_contract" 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="">View Contract</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<iframe v-if="view_contract.contract_file != undefined && view_contract.contract_file != ''" id="view_iframe" width="100%" style="height:500px"
:src="`/docs/contract/${view_contract.contract_file}`"
></iframe>
</div>
<div class="col-md-12">
<h5 class="my-4"> Contract Details </h5>
<table class="table bordered">
<tr>
<td>Language Direction</td>
<td>{{view_contract.from_language}}-{{view_contract.to_language}}</td>
</tr>
<tr >
<td>Contract Type</td>
<td>{{view_contract.translator_type}}</td>
</tr>
<tr >
<td>Final Rating</td>
<td>{{view_contract.evaluation_rating}}</td>
</tr>
<tr >
<td>Translation price per word</td>
<td>AED {{view_contract.translation_price}}</td>
</tr>
<tr >
<td>Currency</td>
<td>{{view_contract.currency}}</td>
</tr>
<tr >
<td>Proofreading Eligibility</td>
<td> <span v-if="view_contract.proofreading_status_id == 1" >Yes</span> <span v-else>No</span></td>
</tr>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary dismiss_modal" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- View contract model end -->
</div>
</template>
<script>
export default {
props: ['userShow','userContract'],
components: { },
data() {
return {
isLoading: false,
isStyled: false,
has_error: false,
error: '',
errors: {},
success: false,
accept_contract : {},
view_contract : {},
}
},
mounted() {
},
methods: {
/**
* Accept contract
*
* @param null
* @return null
*/
accepetContract() {
this.isLoading = true;
let form = new FormData();
form.append('accept_contract_id', this.accept_contract.id);
const config = {
headers: { 'content-type': 'multipart/form-data' }
}
this.$http({
config:config ,
url: `acceptContract`,
method: 'POST',
data: form
})
.then((res) => {
this.$emit('acceptContract', res.data.userContract )
this.userContract = res.data.userContract
app.success = true
this.isLoading = false
this.error = ''
this.errors = {}
this.$snotify.success( res.data.message);
$( ".dismiss_modal" ).trigger( "click" );
let status = { 'translator_status_name' : res.data.translator_status_name ,'translator_status_id': res.data.translator_status_id }
this.$emit('updateStatus', status)
})
.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);
}
});
},
/**
* Open Evaluations model.
*
* @param null
* @return null
*/
openAcceptContractModel(contract) {
this.accept_contract = contract
},
/**
* ViewFile function assign file name to the
* contract_file_name
*
* @param file_name
* @return void
*/
viewFile(index) {
this.view_contract = this.userContract[index];
},
}
}
</script>