exchange-2.0/resources/assets/vue/components/address/elements/AddressListComponent.vue

<template>
    <div class="row">
        <div class="col">
            <div class="row m-b-15" v-if="defaultAddress">
                <div class="col">
                    <div class="row" v-if="!createAddress">
                        <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="font-heading fs-10 muted all-caps">Address Book</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">
                                            <div class="row">
                                                <div class="col">
                                                    <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.district.name}} {{selectedAddress.post_code}} {{selectedAddress.state.name}}, {{selectedAddress.country.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.street_one}} {{address.street_two}}, {{address.district.name}} {{address.post_code}} {{address.state.name}}, {{address.country.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">
                                    <address-form-component :id="company_id" :type="2" v-on:createdAddress="updateAddress($event)" v-on:close="createAddress = !createAddress"></address-form-component>
                                    <p class="link text-complete text-underline pointer text-center" @click="createAddress = false">Select from address book</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="selectedAddress">
                <div class="col">
                    <set-default-billing-address-component :section="section" :data="selectedAddress" v-if="selectedAddress.id !== defaultAddress.id" v-on:updateBillingAddress="updateBillingAddress($event)"></set-default-billing-address-component>
                </div>
            </div>

        </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,
            }
        },
        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[0];
            },

        },
        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;
            },
            updateAddress(address){
                this.addressDropdownLaunch.status = false;
                this.selectedAddress = address;
                this.createAddress = false;
            },
            updateBillingAddress(address){
                this.id = address;
                this.$emit('updateDefaultAddress', address);
            }
        },
        mixins: [FormHandler]
    }
</script>