shipping-portal/resources/assets/vue/components/addresses/elements/SelectAddressComponent.vue

<template>
    <div class="row m-b-10 parentContainer">
        <div class="col b-a p-t-15 p-b-15 pointer" :class="{ 'b-primary': value === item.id, 'b-grey': value !== item.id}" @click="$emit('input', item.id)">
            <div class="row align-items-center">
                <div class="col-auto p-r-0">
                    <i class="fa fs-20 p-t-5" :class="{'fa-circle-o': value !== item.id, 'fa-check-circle': value === item.id, 'text-primary': value === item.id}"></i>
                </div>
               <div class="col">
                   <div class="row align-items-center">
                        <div class="col-12 col-sm-3 pb-1 pb-sm-0">
                            <h6 class="no-margin bold fs-12 text-left">{{item.reference}}</h6>
                        </div>
                        <div class="col-12 col-sm-9 text-left">
                            <h6 class="no-margin fs-12">{{item.street_one}} {{item.street_two}}, {{item.district.name}}, {{item.post_code}} {{item.state.name}}, {{item.country.name}}</h6>
                        </div>
                   </div>
               </div>
                <div class="col-auto">
                    <div class="row align-items-center">
                        <div class="col-auto p-r-5">
                            <i class="fa m-r-10" data-type="defaultAddress" :class="{'fa-star': item.default, 'requestModal': !item.default, 'fa-star-o': !item.default, 'pointer': !item.default, 'text-warning': item.default}" ></i>
                        </div>
                        <div class="col-auto no-padding p-r-5 p-l-5">
                            <i class="fa fa-pencil-square-o text-complete m-r-10" @click="expanded = !expanded"></i>
                        </div>
                        <div class="col-auto p-l-5">
                            <i class="fa fa-trash-o text-danger requestModal" data-type="deleteAddress"></i>

                        </div>
                    </div>
                </div>
            </div>
            <div class="row" v-if="expanded">
                <div class="col">
                    <address-form-component :id="$store.getters.getCompanyModuleId" :data="item" section="addressList" @input="updateAddress($event)"></address-form-component>
                </div>
            </div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="deleteAddress">
                <delete-address-form-component :data="item" :section="section" class="text-center"></delete-address-form-component>
            </modal-component>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defaultAddress">
                <set-default-address-form-component :data="item" :section="section" class="text-center"></set-default-address-form-component>
            </modal-component>
        </div>
    </div>
</template>

<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            value: {
                required: false
            },
            'section': {
                type: String,
            }

        },
        data(){
            return {
                expanded: false
            }
        },
        created(){
          if(this.item.default){
              this.$emit('input', this.item.id);
          }
        },
        watch: {
            value: function(value){
                this.value = value;
                if(value !== this.item.id){
                    this.expanded = false;
                }
            }
        },
        methods: {
            updateAddress(id){
                this.expanded = false;
                this.$emit('input', id);
            }
        },
        mixins: [componentHandler]
    }
</script>