mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-19 04:23:55 +00:00
Dillon Ngo
275 lines
13 KiB
Vue
275 lines
13 KiB
Vue
<template>
|
|
<div class="row p-t-25 text-left">
|
|
<div class="col bg-white padding-40 b-rad-lg">
|
|
<div class="row" v-if="step === 1">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col text-danger">
|
|
Please check carefully, you will not be able to edit this after confirm
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col-6 p-r-5">
|
|
<validation-wrapper-component :validator="$v.parameters.tin">
|
|
<label>TIN</label>
|
|
<input class="form-control" name="tin" v-model="parameters.tin">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-6 p-l-5">
|
|
<validation-wrapper-component :validator="$v.parameters.msic_code">
|
|
<label>
|
|
MSIC Code
|
|
<a href="https://sdk.myinvois.hasil.gov.my/codes/msic-codes/" target="_blank" rel="noopener noreferrer">
|
|
(View List)
|
|
</a>
|
|
</label>
|
|
<input class="form-control" name="msic_code" v-model="parameters.msic_code">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<validation-wrapper-component :validator="$v.parameters.street_one">
|
|
<label>Billing Address Line 1</label>
|
|
<input class="form-control" name="street_one" v-model="parameters.street_one">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<validation-wrapper-component :validator="$v.parameters.street_two">
|
|
<label>Billing Address Line 2</label>
|
|
<input class="form-control" name="street_two" v-model="parameters.street_two">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col-7 p-r-5">
|
|
<validation-wrapper-component selectable :validator="$v.parameters.district_id">
|
|
<label>District</label>
|
|
<selectable-component :endpoint="route('api.address.district.list')" section="districtListSection" valueColumn="id" :labelColumn="['city']" v-model="parameters.district_id"></selectable-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
<div class="col-5 p-l-5">
|
|
<validation-wrapper-component :validator="$v.parameters.post_code">
|
|
<label>Post Code</label>
|
|
<input class="form-control" name="post_code" v-model="parameters.post_code">
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col-6 p-r-5">
|
|
<validation-wrapper-component selectable :validator="$v.parameters.state_id">
|
|
<label>State</label>
|
|
<selectable-component :endpoint="route('api.address.state.list')" section="stateListSection" valueColumn="id" :labelColumn="['state']" v-model="parameters.state_id"></selectable-component>
|
|
</validation-wrapper-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col text-right">
|
|
<button type="button"
|
|
class="btn btn-success btn-block b-rad-none"
|
|
@click="updateStep(2)">Update E-Invoice Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col text-right">
|
|
<a
|
|
id="e-invoice-request-link"
|
|
href="javascript:void(0);"
|
|
class="fs-12 text-complete text-underline pointer"
|
|
@click="updateChangeOfMind()"
|
|
>
|
|
I don't need now
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-if="step === 2">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row m-b-15">
|
|
<div class="col text-danger">
|
|
Please check carefully, you will not be able to edit this after confirm
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="padding-15 bg-master-lightest">
|
|
<p class="muted">TIN</p>
|
|
<p class="m-b-0">{{parameters.tin}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="padding-15 bg-master-lightest" v-if="parameters.msic_code !== 0">
|
|
<p class="muted">MSIC Code</p>
|
|
<p class="m-b-0">{{parameters.msic_code}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="padding-15 bg-master-lightest">
|
|
<p class="muted">Billing Address</p>
|
|
<p class="m-b-0">{{parameters.street_one}} {{parameters.street_two}}, {{districts[parseFloat(parameters.district_id) - 1].city}} {{parameters.post_code}} {{states[parseFloat(parameters.state_id) - 1].state}}, {{districts[parseFloat(parameters.district_id) - 1].country.name}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row m-b-15">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col-auto p-r-5">
|
|
<button type="button" class="btn bg-master-lighter b-rad-none" @click="updateStep(1)">Edit E-Invoice Info</button>
|
|
</div>
|
|
<div class="col p-l-0">
|
|
<button type="button" class="btn btn-success btn-block b-rad-none" @click="submitForm()">Confirm E-Invoice Info</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import ModalFormHandler from '../../../general/mixins/modalFormHandler';
|
|
import { required, minLength, maxLength, alphaNum, helpers } from 'vuelidate/lib/validators'
|
|
|
|
function mustContainLetterAndNumber(value) {
|
|
if (!value) return true;
|
|
const hasLetter = /[a-zA-Z]/.test(value);
|
|
const hasNumber = /\d/.test(value);
|
|
return hasLetter && hasNumber;
|
|
}
|
|
|
|
function notZero(value) {
|
|
return value !== 0 && value !== '0' && value !== null && value !== undefined
|
|
}
|
|
|
|
function fiveDigits(value) {
|
|
return /^\d{5}$/.test(value)
|
|
}
|
|
|
|
export default {
|
|
props: {
|
|
companyId: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
companyType: {
|
|
type: Number,
|
|
required: true
|
|
},
|
|
},
|
|
watch: {
|
|
'id': function() {
|
|
this.parameters.company_id = this.companyId;
|
|
},
|
|
// 'eInvoiceData': function() { //cief todo: 90
|
|
// this.resetForm();
|
|
// this.parameters = {
|
|
// company_id: this.companyId,
|
|
// street_one: this.eInvoiceData.street_one,
|
|
// street_two: this.eInvoiceData.street_two,
|
|
// district_id: this.eInvoiceData.district.id,
|
|
// state_id: this.eInvoiceData.state.id,
|
|
// post_code: this.eInvoiceData.post_code,
|
|
// tin: this.eInvoiceData.tin,
|
|
// msic_code: this.eInvoiceData.msic_code,
|
|
// }
|
|
// }
|
|
},
|
|
computed: {
|
|
districts () { //cief todo: 90
|
|
return this.$store.getters.getSelectableList('original_districtListSection');
|
|
},
|
|
states () {
|
|
return this.$store.getters.getSelectableList('original_stateListSection');
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
step: 1,
|
|
parameters : {
|
|
company_id: this.companyId,
|
|
street_one: '',
|
|
street_two: '',
|
|
district_id: '',
|
|
state_id: '',
|
|
post_code: 0,
|
|
tin: '',
|
|
msic_code: 0,
|
|
}
|
|
}
|
|
},
|
|
validations() {
|
|
const companyType = this.companyType
|
|
return {
|
|
parameters: {
|
|
street_one: { required },
|
|
street_two: {},
|
|
district_id: { required },
|
|
state_id: { required },
|
|
post_code: { notZero, fiveDigits},
|
|
tin: {
|
|
...(companyType === 0
|
|
? {
|
|
required,
|
|
alphaNum,
|
|
minLength: minLength(10), //was 11
|
|
maxLength: maxLength(13)
|
|
}
|
|
: {}),
|
|
...(companyType === 1
|
|
? {
|
|
required,
|
|
alphaNum,
|
|
minLength: minLength(10),
|
|
maxLength: maxLength(13) //was 12
|
|
}
|
|
: {})
|
|
},
|
|
msic_code: companyType === 1 ? {
|
|
notZero, fiveDigits
|
|
}: {},
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
updateStep(step){
|
|
if(step === 2){
|
|
if(!this.validate()){ return; }
|
|
}
|
|
this.step = step
|
|
},
|
|
submitForm(){
|
|
this.submit((this.route('api.company.einvoice.info.update')), 'post', this.section, true, true);
|
|
},
|
|
successHandler(response){
|
|
this.$emit('eInvoiceInfoUpdated', response.payload.data);
|
|
this.closeModal();
|
|
},
|
|
updateChangeOfMind(){
|
|
this.$emit('eInvoiceChangeOfMindRequest');
|
|
this.closeModal();
|
|
}
|
|
},
|
|
mixins: [ModalFormHandler],
|
|
}
|
|
</script>
|