mirror of
https://gitlab.com/CIEFWorldwideSdnBhd/exchange-2.0.git
synced 2026-08-30 01:43:59 +00:00
omair saleh
196 lines
12 KiB
Vue
196 lines
12 KiB
Vue
<template>
|
|
<div class="row zig-zag-top">
|
|
<div class="col bg-white padding-25">
|
|
<div class="row p-b-20 b-b b-dashed m-b-20 b-grey" v-if="defaultAddress[0]">
|
|
<div class="col">
|
|
<div class="row m-b-5">
|
|
<div class="col">
|
|
<div class="font-heading all-caps bold fs-10">Default Billing Address</div>
|
|
<div class="font-heading fs-10">
|
|
{{defaultAddress[0].street_one}} {{defaultAddress[0].street_two}}, {{defaultAddress[0].district.name}}, {{defaultAddress[0].post_code}} {{defaultAddress[0].state.name}}, {{defaultAddress[0].country.name}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row p-b-20 b-b b-dashed b-grey m-b-20">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="row m-b-10" v-if="billingAddress.length > 0">
|
|
<div class="col">
|
|
<div class="row m-l-0 m-r-0 m-b-5">
|
|
<div class="col-auto p-l-0">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col-auto">
|
|
<div class="fs-10 all-caps">List of Address </div>
|
|
</div>
|
|
<div class="col-auto text-right lh-10 p-r-0 p-l-0 hide">
|
|
<i class="fa fa-info-circle fs-10 lh-15 hint-text"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-8">
|
|
<div class="row">
|
|
<div class="col p-r-0">
|
|
<div class="btn btn-xs btn-default bg-transparent text-master btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="addressDropdownLaunch.status = !addressDropdownLaunch.status">
|
|
<div class="row">
|
|
<div class="col p-t-10 p-b-5 ">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading bold lh-15">{{selectedAddress.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{selectedAddress.street_two}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{selectedAddress.post_code}}</b> {{selectedAddress.district.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-auto b-l b-grey ">
|
|
<div class="row h-100 align-items-center">
|
|
<div class="col">
|
|
<i class="fa text-primary" :class="[{'fa-angle-down': !addressDropdownLaunch.status}, {'fa-angle-up': addressDropdownLaunch.status}]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative w-100">
|
|
<div class="absolute w-100 b-l b-b b-r b-grey" :class="[{'hide': !addressDropdownLaunch.status}]" style="top: 100%; right: 0; z-index: 1;">
|
|
<div class="row text-left no-margin bg-white">
|
|
<div class="col no-padding">
|
|
<div class="row no-margin" v-for="address in billingAddress" v-bind:key="address.id" >
|
|
<div class="col b-b b-grey p-t-10 p-b-10 pointer p-t-10 p-b-10" :class="[{'bg-master-lightest': address.id === address.id}, {'text-master': address.id === address.id}, {'hover-primary': address.id !== address.id}, {'pointer': address.id !== address.id}]" @click="updateAddress(address)">
|
|
<div class="row align-items-center justify-content-center">
|
|
<div class="col">
|
|
<div class="row">
|
|
<div class="col">
|
|
<!-- <div class="font-heading bold lh-15 fs-10">{{address.post_code ? address.post_code + ' - ':''}}{{address.post_code}}</div> -->
|
|
<div class="font-heading bold lh-15 fs-10">{{address.street_one}}{{selectedAddress.street_two ? ', ': ''}}{{address.street_two}}</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="font-heading all-caps fs-10 muted"><b class="m-r-5 text-primary">{{address.post_code}}</b> {{address.district.name}}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row parentContainer">
|
|
<div class="col">
|
|
<div class="row" v-show="!createAddress">
|
|
<div class="col">
|
|
<button class="btn btn-xs btn-outline-primary b-rad-none" @click="createAddress = !createAddress">
|
|
<i class="fa fa-plus m-r-5"></i>
|
|
Add New Address
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="row" v-show="createAddress">
|
|
<div class="col">
|
|
<div>Address form</div>
|
|
<address-form-component :id="company_id" :type="2" v-on:createdAddress="updateAddress($event)" v-on:close="createAddress = !createAddress"></address-form-component>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<set-default-billing-address-component :section="section" :data="item" v-if="item.id != null && defaultAddress[0].id != item.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import FormHandler from '../../../general/mixins/formHandler';
|
|
|
|
export default {
|
|
props: {
|
|
company_id: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
},
|
|
data(){
|
|
return {
|
|
isLoading: true,
|
|
billingAddress: [],
|
|
createAddress: false,
|
|
addressDropdownLaunch: {
|
|
status: false
|
|
},
|
|
selectedAddress: null,
|
|
item:{
|
|
id:null
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
pendingQueue () {
|
|
return this.$store.getters.isInCompleteQueue(this.section);
|
|
},
|
|
defaultAddress: function() {
|
|
let defaultAddress = this.billingAddress.filter(function(item) {
|
|
return item.billing == 1;
|
|
});
|
|
if(!this.selectedAddress){
|
|
this.selectedAddress = defaultAddress[0];
|
|
}
|
|
return defaultAddress;
|
|
}
|
|
},
|
|
watch: {
|
|
pendingQueue(inComplete){
|
|
if(inComplete){
|
|
this.fetchBillingAddress();
|
|
}
|
|
}
|
|
},
|
|
created(){
|
|
this.$store.dispatch('updateListQueue', {'name': this.section});
|
|
},
|
|
methods: {
|
|
fetchBillingAddress(){
|
|
this.submit(route('api.address.list')+'?filters={%22company_id%22:'+this.company_id+'}', 'get', this.section, false, false)
|
|
},
|
|
successHandler(response){
|
|
this.billingAddress = response.payload.data;
|
|
},
|
|
errorHandler(){
|
|
// window.location.href = this.route('dashboard')
|
|
},
|
|
updateAddress(address){
|
|
this.addressDropdownLaunch.status = false;
|
|
this.selectedAddress = address;
|
|
this.createAddress = false;
|
|
this.fetchBillingAddress();
|
|
this.item.id = address.id;
|
|
},
|
|
updateBillingAddress(address){
|
|
this.id = address;
|
|
this.$emit('updateDefaultAddress', address);
|
|
}
|
|
},
|
|
mixins: [FormHandler]
|
|
}
|
|
</script> |