exchange-2.0/resources/assets/vue/components/companies/sections/CustomerSectionTwoComponent.vue

<template>
    <div class="row m-b-20" @keyup.enter="submitSearch">
        <div class="col">
            <div class="row">
                <div class="col">
                    <loading-component style="height: 50px; top: 0;" key="1" color="success" v-show="isLoading"></loading-component>
                    <div class="row m-l-0 m-r-0 bg-master-light padding-10" v-show="!isLoading">
                        <div class="col-md col-12">
                            <div class="row">
                                <div class="col">
                                    <validation-wrapper-component :validator="$v.email">
                                        <label class="all-caps">Email</label>
                                        <input type="text" class="form-control" v-model.lazy="email">
                                    </validation-wrapper-component>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 col-md-auto d-flex align-items-center justify-content-center mt-2 mt-md-0">
                            <button type="button" class="btn btn-lg btn-primary fs-11 w-100 d-block mr-2 mr-md-0" @click="submitSearch()">Search</button>
                            <button type="button" class="btn btn-lg btn-secondary fs-11 w-100 d-block ml-2 ml-md-0" @click="resetSearch()">Reset</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row no-margin" v-show="search" :key="serachSectionKey">
                <div class="col bg-white padding-25">
                    <p v-if="!userCompany">{{ message }}</p>
                    <user-company-component v-if="userCompany" :data="userCompany"></user-company-component>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import componentHandler from "../../../general/mixins/componentHandler";

export default {
    data(){
        return {
            section: 'customerSectionTwoComponent',
            isLoading: false,
            search: false,
            serachSectionKey: 2,
            email: '',
            userCompany: null,
            message: 'Searching...'
        }
    },
    methods: {
        submitSearch(){
            this.serachSectionKey ++;
            this.search = true;
            this.userCompany = null;
            this.message = 'Searching...';

            this.submit(route('api.account.user.company', this.email), 'get', this.section, false, false);
        },
        successHandler(response){
            if(response.payload.data != undefined)
                this.userCompany = response.payload.data;
            else
                this.message = 'Customer not found';
        },
        errorHandler(response){
            if(response.payload.data == undefined)
                this.message = 'Customer not found';
        },
        resetSearch() {
            this.userCompany = null;
            this.search = false;
            this.email = '';
            this.message = 'Searching...';
        }
    },
    validations: {
        email: {}
    },
    mixins: [componentHandler]
};
</script>