Files
exchange-2.0/resources/assets/vue/components/bookings/forms/BookingOrderReferenceFormComponent.vue
T
2024-07-14 21:06:40 +08:00

114 lines
4.7 KiB
Vue

<template>
<div class="row m-t-15">
<div class="col">
<div class="row align-items-end">
<div class="col">
<div class="row">
<div class="col">
<div class="font-heading fs-10 muted all-caps">Order Reference No</div>
<p class="m-b-0 fs-12" v-if="!isUpdate">
{{ parameters.order_reference_no.join(', ') }}
</p>
<div class="row p-r-15 m-t-10" v-for="(order, index) in parameters.order_reference_no" v-else>
<div class="col p-r-0">
<div class="form-group no-margin form-group-default">
<label>
Order Reference No. {{ index + 1 }}
</label>
<input type="text" class="form-control" v-model="parameters.order_reference_no[index]">
</div>
</div>
<div class="col-auto bg-danger pointer" v-if="parameters.order_reference_no.length > 1" @click="parameters.order_reference_no.splice(index, 1)">
<div class="row h-100 align-items-center">
<div class="col">
<i class="fa fa-times fa-fw text-white"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row m-t-5" v-if="booking_status !== 3 && !isUpdate">
<div class="col-auto">
<p class="text-complete text-underline m-b-0 fs-12 pointer" @click="isUpdate = true">Update Order References</p>
</div>
</div>
</div>
</div>
<div class="row" v-show="isUpdate">
<div class="col">
<div class="row m-t-10">
<div class="col">
<button class="btn btn-xs btn-outline-primary b-rad-none" @click="parameters.order_reference_no.push('')">
<i class="fa fa-plus m-r-5"></i>
Add Order Reference
</button>
</div>
</div>
<div class="row m-t-10">
<div class="col-8 p-r-5">
<button class="btn btn-block btn-sm btn-success b-rad-none" @click="updateOrderReferences">Update Order References</button>
</div>
<div class="col-4 p-l-5">
<button class="btn btn-block btn-sm btn-default b-rad-none" @click="resetOrderReference">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import FormHandler from '../../../general/mixins/formHandler';
export default {
props: {
order_reference_no: {
type: Array,
default: [],
required: true
},
booking_id: {
type: Number,
required: true
},
booking_status: {
type: Number,
required: true
}
},
data(){
return {
parameters: {
order_reference_no: []
},
isUpdate: false
}
},
watch: {
pendingQueue(inComplete){
if(inComplete){
this.fetchBillingAddress();
}
}
},
created(){
this.parameters.order_reference_no = this.order_reference_no.map(attr => attr.value);
},
methods: {
resetOrderReference() {
this.isUpdate = false;
this.parameters.order_reference_no = this.order_reference_no.map(attr => attr.value);
},
updateOrderReferences(){
this.submit(this.route('api.booking.booking_order_reference.update', this.booking_id), 'put', this.section, true, true)
},
successHandler(response){
this.isUpdate = false;
this.updateList()
},
},
mixins: [FormHandler]
}
</script>