exchange-2.0/resources/assets/vue/components/address/forms/AddressFormComponent.vue

<template>
    <div class="row p-t-25 text-left">
        <div class="col">
            <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">
                                    <validation-wrapper-component :validator="$v.parameters.street_one">
                                        <label>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>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>
                    </div>
                    <div class="row m-b-15">
                        <div class="col">
                            <div class="row">
                                <div class="col text-right">
                                    <button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="updateStep(2)">{{(type === 3) ? "Update" : "Save" }} Billing Address</button>
                                    <button v-show="type === 3" type="button" class="btn btn-sm bg-master-lighter b-rad-none m-l-5" @click="closeForm()">Cancel</button>
                                </div>
                            </div>
                        </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">
                                <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}} {{districts[parseFloat(parameters.district_id) - 1].state.name}}, {{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 btn-sm bg-master-lighter b-rad-none" @click="updateStep(1)">Edit Billing Address</button>
                                </div>
                                <div class="col p-l-0">
                                    <button type="button" class="btn btn-sm btn-success btn-block b-rad-none" @click="submitForm()">Confirm Billing Address</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { required } from "vuelidate/lib/validators";
    export default {
        props: {
            id: {
                type: Number,
                required: true
            },
            type: {
                //Npte: type 1 = create, type 2 = update set default, type 3 = update address
                type: Number,
                default: 1
            },
            addressData: {
                type: Object,
                default() {
                    return {}
                },
                required:false
            },
        },
        watch: {
            'id': function() {
                this.parameters.company_id = this.id;
            },
            'addressData': function() {
                this.resetForm();
                this.parameters = {
                    company_id: this.id,
                    street_one:  this.addressData.street_one,
                    street_two: this.addressData.street_two,
                    district_id: this.addressData.district.id,
                    post_code: this.addressData.post_code,
                }
            }
        },
        computed: {
            districts () {
                return this.$store.getters.getSelectableList('original_districtListSection');
            }
        },
        data() {
			return {
			    step: 1,
                parameters : {
                    company_id: this.id,
                    street_one:  '',
                    street_two: '',
                    district_id: '',
                    post_code: '',
				}

			}
		},
        validations: {
            parameters: {
                street_one: { required },
                street_two: {},
                district_id: { required },
                post_code: { required },
            }
        },
        methods:{
            updateStep(step){
                if(step === 2){
                    if(!this.validate()){ return; }
                }

                this.step = step
            },
            submitForm(){
                if(this.type === 3){
                    this.submit((this.route('api.address.update',this.addressData.id)), 'put', 'bookingDetailSection', true, true)
                }else {
                    this.submit((this.route('api.address.create')), 'post', 'bookingDetailSection', true, true)
                }
            },
            closeForm(){
                this.$root.$emit('updateAddressForm', {}, false);
            },
            successHandler(response){
                if(this.type === 3){
                    this.closeForm();
                    this.$store.dispatch('reloadList', {'name': "addresslist"});
                }else {
                    this.type !== 2 ? this.$emit('updateDefaultAddress', response.payload.data) : this.$emit('createdAddress', response.payload.data);
                    this.resetForm();
                }
            }
        }
    }
</script>